-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcontact.html
More file actions
316 lines (284 loc) · 20.4 KB
/
contact.html
File metadata and controls
316 lines (284 loc) · 20.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | Learn by Design - ABA Therapy Consultation</title>
<meta name="description" content="Contact Learn by Design for ABA therapy services. Schedule a consultation, get directions to our office, or reach out with questions about our programs.">
<!-- Favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="Logos/IconOnly_Transparent_NoBuffer.png">
<link rel="icon" type="image/png" sizes="16x16" href="Logos/IconOnly_Transparent_NoBuffer.png">
<link rel="apple-touch-icon" href="Logos/IconOnly_Transparent_NoBuffer.png">
<link rel="shortcut icon" href="Logos/IconOnly_Transparent_NoBuffer.png">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="accessibility.css">
</head>
<body class="font-sans">
<!-- Skip Link for Screen Readers -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Header/Navigation -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-3">
<img src="Logos/IconOnly_Transparent_NoBuffer.png" alt="Learn by Design Logo" class="h-12 w-auto">
<h1 class="text-2xl font-bold text-blueberry">Learn by Design</h1>
</div>
<nav class="hidden md:flex space-x-8">
<a href="index.html" class="text-blueberry font-medium hover:text-magenta transition">Home</a>
<a href="services.html" class="text-blueberry font-medium hover:text-magenta transition">Services</a>
<a href="about-us.html" class="text-blueberry font-medium hover:text-magenta transition">About Us</a>
<a href="testimonials.html" class="text-blueberry font-medium hover:text-magenta transition">Resources</a>
<a href="contact.html" class="text-magenta font-medium">Contact</a>
</nav>
<button class="md:hidden text-blueberry text-2xl" id="mobile-menu-button">
<i class="fas fa-bars"></i>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-white w-full py-4 px-4 shadow-md" id="mobile-menu">
<div class="flex flex-col space-y-4">
<a href="index.html" class="text-blueberry font-medium hover:text-magenta transition">Home</a>
<a href="services.html" class="text-blueberry font-medium hover:text-magenta transition">Services</a>
<a href="about-us.html" class="text-blueberry font-medium hover:text-magenta transition">About Us</a>
<a href="testimonials.html" class="text-blueberry font-medium hover:text-magenta transition">Resources</a>
<a href="contact.html" class="text-magenta font-medium">Contact</a>
</div>
</div>
</header>
<!-- Page Header -->
<section class="hero-section py-16">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold text-blueberry mb-6">Contact Learn by Design</h1>
<p class="text-xl text-sage max-w-3xl mx-auto">Ready to get started? We're here to answer your questions and help your child begin their ABA therapy journey.</p>
</div>
</section>
<!-- Contact Section -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Contact Form -->
<div class="bg-gray-50 p-8 rounded-xl shadow-lg">
<h2 class="text-3xl font-bold text-blueberry mb-6">Send Us a Message</h2>
<p class="text-sage mb-8">Fill out the form below and we'll get back to you within 24 hours to discuss how we can help your child.</p>
<form id="contactForm" class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="firstName" class="block text-sage font-medium mb-2">First Name *</label>
<input type="text"
id="firstName"
name="firstName"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
</div>
<div>
<label for="lastName" class="block text-sage font-medium mb-2">Last Name *</label>
<input type="text"
id="lastName"
name="lastName"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
</div>
</div>
<div>
<label for="email" class="block text-sage font-medium mb-2">Email Address *</label>
<input type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
</div>
<div>
<label for="phone" class="block text-sage font-medium mb-2">Phone Number *</label>
<input type="tel"
id="phone"
name="phone"
required
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
</div>
<div>
<label for="childAge" class="block text-sage font-medium mb-2">Child's Age</label>
<select id="childAge" name="childAge" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
<option value="">Select age range</option>
<option value="2-3">2-3 years</option>
<option value="4-5">4-5 years</option>
<option value="6-8">6-8 years</option>
<option value="9-12">9-12 years</option>
<option value="13+">13+ years</option>
</select>
</div>
<div>
<label for="serviceInterest" class="block text-sage font-medium mb-2">Service of Interest</label>
<select id="serviceInterest" name="serviceInterest" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition">
<option value="">Select a service</option>
<option value="early-development">Early Development Support</option>
<option value="in-home">In-Home Therapy</option>
<option value="caregiver-training">Caregiver Training</option>
<option value="not-sure">Not sure - need guidance</option>
</select>
</div>
<div>
<label for="message" class="block text-sage font-medium mb-2">Message *</label>
<textarea id="message"
name="message"
rows="4"
required
placeholder="Tell us about your child's needs, your goals, or any questions you have..."
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-magenta focus:border-transparent outline-none transition resize-vertical"></textarea>
</div>
<div class="flex items-start">
<input type="checkbox" id="consent" name="consent" required class="mt-1 mr-3">
<label for="consent" class="text-sm text-sage">I consent to being contacted by Learn by Design regarding ABA therapy services. *</label>
</div>
<button type="submit" id="submitBtn" class="bg-blueberry text-white px-8 py-4 rounded-lg font-medium w-full text-lg hover:shadow-lg transition duration-300 disabled:opacity-50">
<span class="btn-text">Send Message</span>
<span class="btn-loading hidden">Sending...</span>
</button>
<div id="formMessage" class="mt-4 text-center hidden"></div>
</form>
</div>
<!-- Contact Information -->
<div class="space-y-8">
<div class="bg-white p-8 rounded-xl shadow-lg">
<h2 class="text-3xl font-bold text-blueberry mb-6">Get in Touch</h2>
<div class="space-y-6">
<div class="flex items-start space-x-4">
<div class="bg-magenta text-white p-3 rounded-lg">
<i class="fas fa-phone text-xl"></i>
</div>
<div>
<h3 class="text-lg font-bold text-blueberry">Phone</h3>
<p class="text-sage">408-415-9816</p>
<p class="text-sm text-gray-500">Mon-Fri 8:00 AM - 6:00 PM</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-magenta text-white p-3 rounded-lg">
<i class="fas fa-envelope text-xl"></i>
</div>
<div>
<h3 class="text-lg font-bold text-blueberry">Email</h3>
<p class="text-sage">info@learnbydesign.com</p>
<p class="text-sm text-gray-500">We respond within 24 hours</p>
</div>
</div>
<div class="flex items-start space-x-4">
<div class="bg-magenta text-white p-3 rounded-lg">
<i class="fas fa-map-marker-alt text-xl"></i>
</div>
<div>
<h3 class="text-lg font-bold text-blueberry">Location</h3>
<p class="text-sage">Serving families throughout<br>Northern California</p>
<p class="text-sm text-gray-500">In-home services available</p>
</div>
</div>
</div>
</div>
<!-- Insurance Accepted Section -->
<div class="bg-white p-8 rounded-xl shadow-lg">
<h3 class="text-2xl font-bold text-blueberry mb-4">Insurance & Payment</h3>
<p class="text-sage mb-6">We accept the following insurance plans as well as private pay options to make services accessible for your family.</p>
<div class="grid grid-cols-3 gap-4 mb-6">
<div class="bg-gray-50 p-4 rounded-lg flex items-center justify-center h-24">
<img src="assets/Cigna 256x256 logo.avif" alt="Cigna Insurance" class="max-h-24 w-auto object-contain">
</div>
<div class="bg-gray-50 p-4 rounded-lg flex items-center justify-center h-24">
<img src="assets/ANTM.webp" alt="Anthem Insurance" class="max-h-24 w-auto object-contain">
</div>
<div class="bg-gray-50 p-4 rounded-lg flex items-center justify-center h-24">
<img src="assets/Aetna-Logo-700x394.png" alt="Aetna Insurance" class="max-h-16 w-auto object-contain">
</div>
</div>
<div class="flex items-center space-x-3 p-4 bg-gray-50 rounded-lg">
<div class="bg-sage text-white p-2 rounded-full">
<i class="fas fa-wallet text-lg"></i>
</div>
<div>
<p class="font-bold text-blueberry">Private Pay Available</p>
<p class="text-sm text-sage">Flexible payment options for families without insurance coverage</p>
</div>
</div>
</div>
<div class="bg-gradient-to-r from-blueberry to-magenta p-8 rounded-xl text-black">
<h3 class="text-2xl font-bold mb-4">Emergency Support</h3>
<p class="mb-4">If you're experiencing a behavioral emergency or crisis situation, please contact your local emergency services or:</p>
<div class="space-y-2">
<p><strong>Crisis Hotline:</strong> 988</p>
<p><strong>Emergency:</strong> 911</p>
</div>
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="mt-20">
<h2 class="text-3xl font-bold text-blueberry text-center mb-12">Frequently Asked Questions</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-xl font-bold text-magenta mb-3">How quickly can we start services?</h3>
<p class="text-sage">We typically schedule initial assessments within 1-2 weeks of your inquiry. Services can begin shortly after the assessment is completed and treatment plans are developed.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-xl font-bold text-magenta mb-3">Do you accept insurance?</h3>
<p class="text-sage">Yes, we work with most major insurance providers. Our team will help verify your benefits and handle the insurance process for you.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-xl font-bold text-magenta mb-3">What should I expect in the first session?</h3>
<p class="text-sage">The first session is a comprehensive assessment where we'll observe your child, discuss goals with you, and begin developing an individualized treatment plan.</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<h3 class="text-xl font-bold text-magenta mb-3">Can parents observe sessions?</h3>
<p class="text-sage">Absolutely! We encourage caregiver involvement and provide training so you can support your child's progress at home.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-blueberry text-white py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div>
<div class="flex items-center space-x-3 mb-4">
<img src="Logos/IconOnly_Transparent_NoBuffer.png" alt="Learn by Design Logo" class="h-10 w-auto">
<h3 class="text-xl font-bold">Learn by Design</h3>
</div>
<p class="text-blue-100">Providing exceptional ABA therapy services with compassion and expertise since 2025.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="index.html" class="text-blue-100 hover:text-white transition">Home</a></li>
<li><a href="services.html" class="text-blue-100 hover:text-white transition">Services</a></li>
<li><a href="about-us.html" class="text-blue-100 hover:text-white transition">About Us</a></li>
<li><a href="testimonials.html" class="text-blue-100 hover:text-white transition">Resources</a></li>
<li><a href="contact.html" class="text-blue-100 hover:text-white transition">Contact</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="services.html" class="text-blue-100 hover:text-white transition">Early Development Support</a></li>
<li><a href="services.html" class="text-blue-100 hover:text-white transition">In-Home Therapy</a></li>
<li><a href="services.html" class="text-blue-100 hover:text-white transition">Caregiver Training</a></li>
</ul>
</div>
</div>
<div class="border-t border-blue-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-blue-100 mb-4 md:mb-0">© 2025 Learn by Design. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" class="text-blue-100 hover:text-white transition">Privacy Policy</a>
<a href="#" class="text-blue-100 hover:text-white transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<button id="back-to-top" class="fixed bottom-8 right-8 bg-magenta text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
<i class="fas fa-arrow-up"></i>
</button>
<script src="script.js"></script>
</body>
</html>