Skip to content

Commit 116be9b

Browse files
kitfunsoclaude
kitfunso
and
claude
committed
Add contact page for AdSense compliance
AdSense requires a contact page for site approval. Includes feedback form link, email contact, response time info, and FAQ section. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1 parent 153556a commit 116be9b

1 file changed

Lines changed: 242 additions & 0 deletions

File tree

‎src/pages/contact.astro‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
---
2+
/**
3+
* Contact Page
4+
*
5+
* Contact information for Boring Math Calculators
6+
*/
7+
8+
import BaseLayout from '../layouts/BaseLayout.astro';
9+
10+
const title = 'Contact | Boring Math Calculators';
11+
const description =
12+
'Get in touch with Boring Math Calculators. Submit feedback, report bugs, or request new calculators.';
13+
---
14+
15+
<BaseLayout title={title} description={description}>
16+
<!-- Hero Section -->
17+
<section class="relative px-6 py-8">
18+
<div class="max-w-4xl mx-auto text-center">
19+
<span class="text-micro text-[var(--color-accent)] mb-3 block">Contact</span>
20+
<h1 class="text-3xl md:text-4xl font-display text-[var(--color-cream)] mb-4">
21+
Get in <span class="gradient-text">Touch</span>
22+
</h1>
23+
<p class="text-[var(--color-subtle)] max-w-2xl mx-auto">
24+
Have a question, suggestion, or found a bug? We'd love to hear from you.
25+
</p>
26+
</div>
27+
</section>
28+
29+
<!-- Feedback Form Section -->
30+
<section class="px-6 py-4">
31+
<div class="max-w-4xl mx-auto">
32+
<div class="card-elevated rounded-2xl p-6 md:p-8 relative overflow-hidden">
33+
<!-- Background decoration -->
34+
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
35+
<div
36+
class="absolute -top-16 -right-16 w-48 h-48 bg-[var(--color-accent)]/10 rounded-full blur-3xl"
37+
>
38+
</div>
39+
</div>
40+
41+
<div class="relative flex flex-col md:flex-row items-center gap-6">
42+
<div
43+
class="w-16 h-16 rounded-2xl bg-gradient-to-br from-[var(--color-accent)] to-[#9acc00] flex items-center justify-center flex-shrink-0"
44+
>
45+
<svg
46+
class="w-8 h-8 text-[var(--color-void)]"
47+
fill="none"
48+
stroke="currentColor"
49+
viewBox="0 0 24 24"
50+
>
51+
<path
52+
stroke-linecap="round"
53+
stroke-linejoin="round"
54+
stroke-width="1.5"
55+
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
56+
></path>
57+
</svg>
58+
</div>
59+
<div class="text-center md:text-left flex-1">
60+
<h2 class="text-xl font-display text-[var(--color-cream)] mb-2">Submit Feedback</h2>
61+
<p class="text-sm text-[var(--color-subtle)] mb-4">
62+
Request a new calculator, report a bug, or share your thoughts. We read every
63+
submission and use your feedback to improve the site.
64+
</p>
65+
<a
66+
href="https://docs.google.com/forms/d/e/1FAIpQLSfzjPd1eUAs44PBYjHZD9YNNJtf8LbvapF_R7QRx1WCVDAeOQ/viewform"
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-[var(--color-accent)] text-[var(--color-void)] font-medium hover:opacity-90 transition-opacity"
70+
>
71+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
72+
<path
73+
stroke-linecap="round"
74+
stroke-linejoin="round"
75+
stroke-width="2"
76+
d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
77+
></path>
78+
</svg>
79+
<span>Open Feedback Form</span>
80+
</a>
81+
</div>
82+
</div>
83+
</div>
84+
</div>
85+
</section>
86+
87+
<!-- Contact Info Section -->
88+
<section class="px-6 py-4">
89+
<div class="max-w-4xl mx-auto">
90+
<div class="glass rounded-3xl p-6 md:p-8">
91+
<h2 class="text-xl md:text-2xl font-display text-[var(--color-cream)] mb-6 text-center">
92+
Other Ways to Reach Us
93+
</h2>
94+
95+
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
96+
<!-- Email -->
97+
<div
98+
class="glass rounded-2xl p-6 group hover:border-[var(--color-accent)]/30 transition-colors"
99+
>
100+
<div
101+
class="w-12 h-12 rounded-xl bg-gradient-to-br from-[var(--color-accent)] to-[#9acc00] flex items-center justify-center mb-4"
102+
>
103+
<svg
104+
class="w-6 h-6 text-[var(--color-void)]"
105+
fill="none"
106+
stroke="currentColor"
107+
viewBox="0 0 24 24"
108+
>
109+
<path
110+
stroke-linecap="round"
111+
stroke-linejoin="round"
112+
stroke-width="1.5"
113+
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
114+
></path>
115+
</svg>
116+
</div>
117+
<h3 class="text-lg font-display text-[var(--color-cream)] mb-2">Email</h3>
118+
<p class="text-sm text-[var(--color-subtle)] mb-3">
119+
For general inquiries or business matters.
120+
</p>
121+
<a
122+
href="mailto:hello@boring-math.com"
123+
class="text-[var(--color-accent)] hover:underline text-sm"
124+
>
125+
hello@boring-math.com
126+
</a>
127+
</div>
128+
129+
<!-- Response Time -->
130+
<div
131+
class="glass rounded-2xl p-6 group hover:border-[var(--color-accent)]/30 transition-colors"
132+
>
133+
<div
134+
class="w-12 h-12 rounded-xl bg-gradient-to-br from-[var(--color-accent)] to-[#9acc00] flex items-center justify-center mb-4"
135+
>
136+
<svg
137+
class="w-6 h-6 text-[var(--color-void)]"
138+
fill="none"
139+
stroke="currentColor"
140+
viewBox="0 0 24 24"
141+
>
142+
<path
143+
stroke-linecap="round"
144+
stroke-linejoin="round"
145+
stroke-width="1.5"
146+
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
147+
</svg>
148+
</div>
149+
<h3 class="text-lg font-display text-[var(--color-cream)] mb-2">Response Time</h3>
150+
<p class="text-sm text-[var(--color-subtle)]">
151+
We typically respond within 1-2 business days. For faster responses, use the feedback
152+
form above.
153+
</p>
154+
</div>
155+
</div>
156+
</div>
157+
</div>
158+
</section>
159+
160+
<!-- FAQ Section -->
161+
<section class="px-6 py-4">
162+
<div class="max-w-4xl mx-auto">
163+
<div class="glass rounded-3xl p-6 md:p-8">
164+
<h2 class="text-xl md:text-2xl font-display text-[var(--color-cream)] mb-6 text-center">
165+
Frequently Asked Questions
166+
</h2>
167+
168+
<div class="space-y-4">
169+
<div class="border-b border-[var(--color-stroke)] pb-4">
170+
<h3 class="text-[var(--color-cream)] font-medium mb-2">
171+
Can I request a new calculator?
172+
</h3>
173+
<p class="text-sm text-[var(--color-subtle)]">
174+
Absolutely! Use the feedback form above to submit your calculator request. We
175+
prioritize requests based on demand and usefulness.
176+
</p>
177+
</div>
178+
179+
<div class="border-b border-[var(--color-stroke)] pb-4">
180+
<h3 class="text-[var(--color-cream)] font-medium mb-2">
181+
I found a bug. How do I report it?
182+
</h3>
183+
<p class="text-sm text-[var(--color-subtle)]">
184+
Please use the feedback form and include as much detail as possible: which calculator,
185+
what you entered, and what went wrong.
186+
</p>
187+
</div>
188+
189+
<div class="pb-4">
190+
<h3 class="text-[var(--color-cream)] font-medium mb-2">Is my data safe?</h3>
191+
<p class="text-sm text-[var(--color-subtle)]">
192+
Yes! All calculations happen in your browser. We never see, store, or transmit your
193+
data. Read our <a href="/privacy" class="text-[var(--color-accent)] hover:underline"
194+
>Privacy Policy</a
195+
> for more details.
196+
</p>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</section>
202+
203+
<!-- CTA Section -->
204+
<section class="px-6 py-6">
205+
<div class="max-w-4xl mx-auto">
206+
<div
207+
class="card-elevated rounded-2xl p-8 text-center relative overflow-hidden flex flex-col items-center"
208+
>
209+
<!-- Background decoration -->
210+
<div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
211+
<div
212+
class="absolute -top-16 -right-16 w-48 h-48 bg-[var(--color-accent)]/10 rounded-full blur-3xl"
213+
>
214+
</div>
215+
<div
216+
class="absolute -bottom-16 -left-16 w-48 h-48 bg-violet-500/10 rounded-full blur-3xl"
217+
>
218+
</div>
219+
</div>
220+
221+
<div class="relative flex flex-col items-center">
222+
<h2 class="text-xl md:text-2xl font-display text-[var(--color-cream)] mb-3 text-center">
223+
Ready to calculate?
224+
</h2>
225+
<p class="text-[var(--color-subtle)] mb-6 max-w-xl mx-auto">
226+
Pick a calculator and get your answer in seconds.
227+
</p>
228+
<a href="/#calculators" class="btn-primary inline-flex">
229+
<span>Browse Calculators</span>
230+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
231+
<path
232+
stroke-linecap="round"
233+
stroke-linejoin="round"
234+
stroke-width="2"
235+
d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
236+
</svg>
237+
</a>
238+
</div>
239+
</div>
240+
</div>
241+
</section>
242+
</BaseLayout>

0 commit comments

Comments
 (0)