-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
484 lines (455 loc) · 31.4 KB
/
index.html
File metadata and controls
484 lines (455 loc) · 31.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
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HousePhysio - Physiotherapy At Your Doorstep</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body class="font-sans antialiased text-gray-800 bg-gray-50">
<!-- Navigation -->
<nav class="bg-white shadow-md sticky top-0 z-50">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<a href="#" class="text-2xl font-bold text-blue-600">HousePhysio</a>
<div class="hidden md:flex space-x-6">
<a href="#about" class="hover:text-blue-500 transition">About</a>
<a href="#services" class="hover:text-blue-500 transition">Services</a>
<a href="#why-choose" class="hover:text-blue-500 transition">Why Choose Us</a>
<a href="#testimonials" class="hover:text-blue-500 transition">Testimonials</a>
<a href="#faqs" class="hover:text-blue-500 transition">FAQs</a>
<a href="#contact" class="hover:text-blue-500 transition">Contact</a>
</div>
<button class="md:hidden focus:outline-none" id="menu-button">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<!-- Mobile Menu -->
<div class="md:hidden hidden bg-white w-full py-3 px-6 shadow-inner" id="mobile-menu">
<div class="flex flex-col space-y-3">
<a href="#about" class="hover:text-blue-500 transition">About</a>
<a href="#services" class="hover:text-blue-500 transition">Services</a>
<a href="#why-choose" class="hover:text-blue-500 transition">Why Choose Us</a>
<a href="#testimonials" class="hover:text-blue-500 transition">Testimonials</a>
<a href="#faqs" class="hover:text-blue-500 transition">FAQs</a>
<a href="#contact" class="hover:text-blue-500 transition">Contact</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="py-20 bg-gradient-to-r from-blue-50 to-indigo-50">
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
<div class="flex flex-col w-full md:w-1/2 justify-center items-start md:pr-12">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-5 text-gray-800">Physiotherapy At Your Doorstep</h1>
<h2 class="text-xl md:text-2xl mb-8 text-gray-600">Get expert care and pain relief in the comfort of your home.</h2>
<a href="#appointment" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">Book an Appointment</a>
</div>
<div class="w-full md:w-1/2 py-6 flex justify-center">
<img class="w-full md:w-4/5 z-50 rounded-lg shadow-xl" src="https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80" alt="Physiotherapist helping patient">
</div>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-white">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center">
<div class="w-full md:w-1/3 mb-8 md:mb-0 md:pr-8">
<div class="rounded-full w-64 h-64 overflow-hidden mx-auto border-4 border-blue-100 shadow-lg">
<img src="https://images.unsplash.com/photo-1559839734-2b71ea197ec2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="Dr. Priya Sharma" class="w-full h-full object-cover">
</div>
</div>
<div class="w-full md:w-2/3">
<h2 class="text-3xl font-bold mb-6 text-gray-800">Dr. Priya Sharma, PT</h2>
<p class="text-lg mb-6 text-gray-600">Certified physiotherapist with 10+ years of experience providing in-home physiotherapy services for pain relief, injury recovery, and post-surgical rehab.</p>
<p class="text-lg mb-6 text-gray-600">I believe that true healing happens when patients are comfortable, which is why I bring professional physiotherapy services directly to your home. My personalized approach focuses on not just treating the symptoms but addressing the root cause of your condition.</p>
<p class="text-lg mb-6 text-gray-600">Serving urban and suburban areas in Bangalore, I provide comprehensive care that adapts to your schedule and needs, eliminating the stress of travel while recovering.</p>
<div class="flex flex-wrap">
<span class="bg-blue-100 text-blue-800 rounded-full px-4 py-1 text-sm font-semibold mr-3 mb-3">Certified Physiotherapist</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-4 py-1 text-sm font-semibold mr-3 mb-3">10+ Years Experience</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-4 py-1 text-sm font-semibold mr-3 mb-3">Home Visits</span>
<span class="bg-blue-100 text-blue-800 rounded-full px-4 py-1 text-sm font-semibold mr-3 mb-3">Personalized Care</span>
</div>
</div>
</div>
</div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Our Services</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Service 1 -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-spine text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Back and Neck Pain Therapy</h3>
<p class="text-gray-600">Targeted treatment for chronic and acute back/neck pain with manual therapy, exercises, and ergonomic advice to address the root cause.</p>
</div>
</div>
<!-- Service 2 -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-hospital text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Post-operative Rehab</h3>
<p class="text-gray-600">Specialized recovery programs for patients after surgery, focusing on restoring mobility, strength, and function in a home environment.</p>
</div>
</div>
<!-- Service 3 -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-user-friends text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Geriatric Physiotherapy</h3>
<p class="text-gray-600">Gentle, effective treatment for elderly patients focusing on mobility maintenance, fall prevention, and managing age-related conditions.</p>
</div>
</div>
<!-- Service 4 -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-running text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Sports Injury Rehab</h3>
<p class="text-gray-600">Specialized treatment for athletes and sports enthusiasts recovering from injuries, with focus on proper healing and performance enhancement.</p>
</div>
</div>
<!-- Service 5 -->
<div class="bg-white rounded-lg shadow-md hover:shadow-xl transition duration-300 overflow-hidden">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
<i class="fas fa-dumbbell text-2xl text-blue-600"></i>
</div>
<h3 class="text-xl font-bold mb-3">Home Exercise Plans</h3>
<p class="text-gray-600">Customized exercise programs designed for your home environment, with detailed guidance to ensure proper form and technique.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Why Choose Home Physiotherapy -->
<section id="why-choose" class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Choose Home Physiotherapy</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Reason 1 -->
<div class="flex items-start">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-home text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Convenience & Comfort</h3>
<p class="text-gray-600">Receive professional treatment in familiar surroundings without the stress of travel or waiting rooms, especially beneficial when mobility is limited.</p>
</div>
</div>
<!-- Reason 2 -->
<div class="flex items-start">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-user-md text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Personalized Attention</h3>
<p class="text-gray-600">Enjoy undivided, one-on-one care from your therapist with sessions tailored to your home environment and specific needs.</p>
</div>
</div>
<!-- Reason 3 -->
<div class="flex items-start">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-chart-line text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Faster Recovery</h3>
<p class="text-gray-600">Research shows that patients often recover faster in comfortable, familiar environments with consistent, personalized care.</p>
</div>
</div>
<!-- Reason 4 -->
<div class="flex items-start">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-clock text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">No Travel or Waiting</h3>
<p class="text-gray-600">Save time and energy by eliminating travel to clinics and long waiting periods, making recovery more efficient and stress-free.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Appointment Form Section -->
<section id="appointment" class="py-16 bg-blue-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Book an Appointment</h2>
<div class="bg-white rounded-lg shadow-xl p-8 max-w-3xl mx-auto">
<form id="appointment-form" action="https://formspree.io/f/xqaqweny" method="POST" class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-2">
<label for="name" class="block text-gray-700 font-medium mb-2">Full Name *</label>
<input type="text" id="name" name="name" required placeholder="Your Full Name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
<input type="email" id="email" name="email" required placeholder="Your Email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number *</label>
<div class="flex items-center w-full border border-gray-300 rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-blue-500">
<span class="text-gray-500 px-4 py-3 bg-gray-100 border-r border-gray-300">+91</span>
<input type="tel" id="phone" name="phone" required placeholder="10-digit number" maxlength="10" pattern="[0-9]{10}" class="w-full px-4 py-3 border-0 focus:outline-none">
</div>
</div>
<div class="md:col-span-2">
<label for="address" class="block text-gray-700 font-medium mb-2">Full Address *</label>
<input type="text" id="address" name="address" required placeholder="Full Address" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="preferred_date" class="block text-gray-700 font-medium mb-2">Preferred Date *</label>
<input type="date" id="preferred_date" name="preferred_date" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div>
<label for="preferred_time" class="block text-gray-700 font-medium mb-2">Preferred Time *</label>
<input type="time" id="preferred_time" name="preferred_time" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<div class="md:col-span-2">
<label for="service" class="block text-gray-700 font-medium mb-2">Service Required *</label>
<select id="service" name="service" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
<option disabled selected>Select Service</option>
<option>Back/Neck Pain Therapy</option>
<option>Post-Operative Rehab</option>
<option>Geriatric Physiotherapy</option>
<option>Sports Injury Rehab</option>
<option>Home Exercise Plan</option>
</select>
</div>
<div class="md:col-span-2">
<label for="message" class="block text-gray-700 font-medium mb-2">Additional Message (optional)</label>
<textarea id="message" name="message" placeholder="Additional details about your condition or requirements" rows="4" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
</div>
<input type="hidden" name="_next" value="https://yourdomain.com/thank-you.html">
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_subject" value="New Appointment Request from HousePhysio Website">
<input type="hidden" name="_format" value="plain">
<input type="hidden" name="website" value="HousePhysio Website">
<div class="md:col-span-2">
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
Book Appointment
</button>
</div>
</form>
<div id="form-success" class="hidden mt-6 p-4 rounded-lg"></div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-16 bg-gray-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">What Our Patients Say</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<div class="text-yellow-400 flex">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-4">"After my knee surgery, I was worried about traveling to physical therapy sessions. Dr. Sharma came to my home and provided excellent care. I recovered much faster than expected!"</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<span class="text-blue-700 font-bold">RK</span>
</div>
<div>
<h4 class="font-bold">Rahul Kumar</h4>
<p class="text-sm text-gray-500">Post-Surgery Patient</p>
</div>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<div class="text-yellow-400 flex">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
<p class="text-gray-600 mb-4">"My mother, 78, was reluctant to go to a clinic for her joint pain. Home physiotherapy was perfect for her. Dr. Priya is gentle, professional, and has significantly improved my mother's mobility."</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<span class="text-blue-700 font-bold">SA</span>
</div>
<div>
<h4 class="font-bold">Sneha Agarwal</h4>
<p class="text-sm text-gray-500">Daughter of Geriatric Patient</p>
</div>
</div>
</div>
<!-- Testimonial 3 -->
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex items-center mb-4">
<div class="text-yellow-400 flex">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
<p class="text-gray-600 mb-4">"As a runner, I developed severe back pain that affected my training. Dr. Sharma not only treated my condition but also designed a home exercise plan that helped me get back to running in just 4 weeks!"</p>
<div class="flex items-center">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4">
<span class="text-blue-700 font-bold">VT</span>
</div>
<div>
<h4 class="font-bold">Vikram Thakur</h4>
<p class="text-sm text-gray-500">Sports Injury Patient</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- FAQs Section -->
<section id="faqs" class="py-16 bg-white">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2>
<div class="max-w-3xl mx-auto">
<div class="mb-6">
<button class="faq-toggle flex justify-between items-center w-full text-left font-bold p-4 border-b border-gray-200 focus:outline-none">
<span>Do you bring equipment?</span>
<i class="fas fa-plus text-blue-600 transition-transform transform"></i>
</button>
<div class="faq-content hidden mt-2 p-4 text-gray-600">
Yes, I bring all necessary equipment for your session, including massage tools, resistance bands, and portable electrotherapy devices. For specialized treatments, I'll inform you in advance if any specific setup is required at your home.
</div>
</div>
<div class="mb-6">
<button class="faq-toggle flex justify-between items-center w-full text-left font-bold p-4 border-b border-gray-200 focus:outline-none">
<span>Are your services covered by insurance?</span>
<i class="fas fa-plus text-blue-600 transition-transform transform"></i>
</button>
<div class="faq-content hidden mt-2 p-4 text-gray-600">
Many health insurance plans cover physiotherapy services. I provide detailed receipts with all necessary information for insurance reimbursement. I recommend checking with your insurance provider about your specific coverage for home physiotherapy services.
</div>
</div>
<div class="mb-6">
<button class="faq-toggle flex justify-between items-center w-full text-left font-bold p-4 border-b border-gray-200 focus:outline-none">
<span>How long is a typical session?</span>
<i class="fas fa-plus text-blue-600 transition-transform transform"></i>
</button>
<div class="faq-content hidden mt-2 p-4 text-gray-600">
Initial assessments typically take 45-60 minutes, while follow-up treatment sessions range from 30-45 minutes depending on your condition. I ensure each session is thorough and customized to your specific needs rather than rushing through a fixed time slot.
</div>
</div>
<div class="mb-6">
<button class="faq-toggle flex justify-between items-center w-full text-left font-bold p-4 border-b border-gray-200 focus:outline-none">
<span>What areas do you serve?</span>
<i class="fas fa-plus text-blue-600 transition-transform transform"></i>
</button>
<div class="faq-content hidden mt-2 p-4 text-gray-600">
I currently serve all urban and suburban areas within Bangalore city limits. If you're unsure whether your location is covered, please contact me with your address details, and I'll confirm availability.
</div>
</div>
<div class="mb-6">
<button class="faq-toggle flex justify-between items-center w-full text-left font-bold p-4 border-b border-gray-200 focus:outline-none">
<span>How many sessions will I need?</span>
<i class="fas fa-plus text-blue-600 transition-transform transform"></i>
</button>
<div class="faq-content hidden mt-2 p-4 text-gray-600">
The number of sessions varies based on your condition, its severity, and how well you respond to treatment. After the initial assessment, I'll provide a treatment plan with an estimated number of sessions. We'll regularly review progress and adjust as needed.
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-blue-50">
<div class="container mx-auto px-6">
<h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Contact Us</h2>
<div class="max-w-3xl mx-auto">
<div class="bg-white rounded-lg shadow-md p-8">
<div class="flex items-start mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-phone text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Phone</h3>
<p class="text-gray-600">+91 98765 43210</p>
<p class="text-gray-600">Available 9AM - 7PM, Mon-Sat</p>
</div>
</div>
<div class="flex items-start mb-6">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fas fa-envelope text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Email</h3>
<p class="text-gray-600">drpriya@housephysio.com</p>
<p class="text-gray-600">Response within 24 hours</p>
</div>
</div>
<div class="flex items-start">
<div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-4 flex-shrink-0">
<i class="fab fa-whatsapp text-xl text-blue-600"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">WhatsApp</h3>
<p class="text-gray-600">+91 98765 43210</p>
<p class="text-gray-600">Fastest response method</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-12">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="mb-6 md:mb-0">
<h2 class="text-2xl font-bold">HousePhysio</h2>
<p class="text-gray-400 mt-2">Physiotherapy At Your Doorstep</p>
</div>
<div class="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-8">
<a href="#about" class="text-gray-300 hover:text-white transition">About</a>
<a href="#services" class="text-gray-300 hover:text-white transition">Services</a>
<a href="#appointment" class="text-gray-300 hover:text-white transition">Book Appointment</a>
<a href="#contact" class="text-gray-300 hover:text-white transition">Contact</a>
</div>
<div class="mt-6 md:mt-0">
<div class="flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-facebook text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-instagram text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-twitter text-xl"></i>
</a>
<a href="#" class="text-gray-300 hover:text-white transition">
<i class="fab fa-linkedin text-xl"></i>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400">© 2023 HousePhysio. All rights reserved.</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-white text-sm transition">Terms of Service</a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>