bribrunner commited on
Commit
08a0ffd
·
verified ·
1 Parent(s): 50c6e19

change business title to Florida Dog sitting

Browse files
Files changed (2) hide show
  1. README.md +9 -5
  2. index.html +636 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 👁
4
- colorFrom: yellow
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: undefined
3
+ colorFrom: green
4
+ colorTo: pink
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,637 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Florida Dog Sitting | Premium Dog Care in the Florida Keys</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ primary: '#FF8C42',
18
+ secondary: '#1B9AAA',
19
+ sand: '#F4E8C1',
20
+ ocean: '#A8D0E6',
21
+ }
22
+ }
23
+ }
24
+ }
25
+ </script>
26
+ <style>
27
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&family=Patrick+Hand&display=swap');
28
+ .font-hand { font-family: 'Patrick Hand', cursive; }
29
+ .wave-animation {
30
+ animation: wave 8s ease-in-out infinite alternate;
31
+ }
32
+ @keyframes wave {
33
+ 0% { transform: rotate(0deg); }
34
+ 100% { transform: rotate(2deg); }
35
+ }
36
+ .paw-print {
37
+ position: absolute;
38
+ opacity: 0.1;
39
+ z-index: 0;
40
+ }
41
+ </style>
42
+ </head>
43
+ <body class="bg-sand font-sans">
44
+ <!-- Vanta.js Background -->
45
+ <div id="vanta-bg" class="fixed top-0 left-0 w-full h-full z-0"></div>
46
+
47
+ <!-- Main Content -->
48
+ <div class="relative z-10 min-h-screen flex flex-col">
49
+ <!-- Navigation -->
50
+ <nav class="bg-white/80 backdrop-blur-md shadow-md sticky top-0 z-50">
51
+ <div class="container mx-auto px-6 py-4">
52
+ <div class="flex items-center justify-between">
53
+ <div class="flex items-center">
54
+ <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i>
55
+ <span class="font-hand text-3xl text-primary">Florida Dog Sitting</span>
56
+ </div>
57
+ <div class="hidden md:flex items-center space-x-8">
58
+ <a href="#services" class="text-secondary hover:text-primary transition">Services</a>
59
+ <a href="#about" class="text-secondary hover:text-primary transition">About Us</a>
60
+ <a href="#testimonials" class="text-secondary hover:text-primary transition">Testimonials</a>
61
+ <a href="#contact" class="bg-primary text-white px-4 py-2 rounded-full hover:bg-opacity-90 transition">Book Now</a>
62
+ </div>
63
+ <button class="md:hidden focus:outline-none" id="menu-btn">
64
+ <i data-feather="menu" class="text-secondary h-6 w-6"></i>
65
+ </button>
66
+ </div>
67
+ <!-- Mobile Menu -->
68
+ <div class="md:hidden hidden flex flex-col space-y-4 mt-4" id="mobile-menu">
69
+ <a href="#services" class="text-secondary hover:text-primary transition">Services</a>
70
+ <a href="#about" class="text-secondary hover:text-primary transition">About Us</a>
71
+ <a href="#testimonials" class="text-secondary hover:text-primary transition">Testimonials</a>
72
+ <a href="#contact" class="bg-primary text-white px-4 py-2 rounded-full text-center hover:bg-opacity-90 transition">Book Now</a>
73
+ </div>
74
+ </div>
75
+ </nav>
76
+
77
+ <!-- Hero Section -->
78
+ <section class="relative py-20 md:py-32 overflow-hidden">
79
+ <div class="absolute inset-0 bg-gradient-to-b from-white/70 to-transparent z-0"></div>
80
+ <div class="container mx-auto px-6 relative z-10">
81
+ <div class="flex flex-col md:flex-row items-center">
82
+ <div class="md:w-1/2 mb-12 md:mb-0">
83
+ <h1 class="text-5xl md:text-6xl font-bold text-secondary mb-6 font-hand leading-tight">Your Pup's Vacation <span class="text-primary">Starts Here</span></h1>
84
+ <p class="text-lg text-gray-700 mb-8">Premium dog sitting services in the beautiful Florida Keys where every tail gets a tropical treat!</p>
85
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
86
+ <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-3 rounded-full text-center font-medium transition">Book Now</a>
87
+ <a href="#services" class="border-2 border-primary text-primary hover:bg-primary hover:text-white px-8 py-3 rounded-full text-center font-medium transition">Our Services</a>
88
+ </div>
89
+ </div>
90
+ <div class="md:w-1/2 relative">
91
+ <div class="wave-animation">
92
+ <img src="http://static.photos/travel/1024x576/42" alt="Happy dog in Florida Keys" class="rounded-2xl shadow-xl border-8 border-white transform rotate-2">
93
+ </div>
94
+ <div class="absolute -bottom-8 -left-8 bg-white p-4 rounded-lg shadow-lg">
95
+ <div class="flex items-center">
96
+ <div class="bg-primary p-2 rounded-full mr-3">
97
+ <i data-feather="star" class="text-white h-5 w-5"></i>
98
+ </div>
99
+ <div>
100
+ <p class="font-bold text-gray-800">5.0 Rating</p>
101
+ <p class="text-sm text-gray-600">100+ Happy Clients</p>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <!-- Decorative Elements -->
110
+ <div class="paw-print top-1/4 left-10 transform rotate-12">
111
+ <i data-feather="plus" class="text-primary h-12 w-12"></i>
112
+ </div>
113
+ <div class="paw-print bottom-1/3 right-20 transform -rotate-6">
114
+ <i data-feather="plus" class="text-secondary h-8 w-8"></i>
115
+ </div>
116
+ </section>
117
+
118
+ <!-- Services Section -->
119
+ <section id="services" class="py-20 bg-white/80 backdrop-blur-sm relative">
120
+ <div class="container mx-auto px-6">
121
+ <div class="text-center mb-16">
122
+ <h2 class="text-4xl font-bold text-secondary mb-4 font-hand">Tail-Wagging Services</h2>
123
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">We offer a variety of services to keep your pup happy while you're away</p>
124
+ </div>
125
+
126
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
127
+ <!-- Service 1 -->
128
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2">
129
+ <div class="bg-primary/10 p-4 rounded-full inline-block mb-6">
130
+ <i data-feather="home" class="text-primary h-8 w-8"></i>
131
+ </div>
132
+ <h3 class="text-2xl font-bold text-secondary mb-3">In-Home Sitting</h3>
133
+ <p class="text-gray-600 mb-4">Your pup stays in the comfort of your own home with our loving care and attention.</p>
134
+ <ul class="space-y-2 mb-6">
135
+ <li class="flex items-center">
136
+ <i data-feather="check" class="text-primary mr-2"></i>
137
+ <span>24/7 Supervision</span>
138
+ </li>
139
+ <li class="flex items-center">
140
+ <i data-feather="check" class="text-primary mr-2"></i>
141
+ <span>Daily Photo Updates</span>
142
+ </li>
143
+ <li class="flex items-center">
144
+ <i data-feather="check" class="text-primary mr-2"></i>
145
+ <span>Medication Administered</span>
146
+ </li>
147
+ </ul>
148
+ <p class="text-primary font-bold text-xl">From $75/night</p>
149
+ </div>
150
+
151
+ <!-- Service 2 -->
152
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2">
153
+ <div class="bg-primary/10 p-4 rounded-full inline-block mb-6">
154
+ <i data-feather="sun" class="text-primary h-8 w-8"></i>
155
+ </div>
156
+ <h3 class="text-2xl font-bold text-secondary mb-3">Doggy Day Care</h3>
157
+ <p class="text-gray-600 mb-4">Daily adventures and socialization for your furry friend while you're at work or play.</p>
158
+ <ul class="space-y-2 mb-6">
159
+ <li class="flex items-center">
160
+ <i data-feather="check" class="text-primary mr-2"></i>
161
+ <span>Beach & Park Outings</span>
162
+ </li>
163
+ <li class="flex items-center">
164
+ <i data-feather="check" class="text-primary mr-2"></i>
165
+ <span>Group Playtime</span>
166
+ </li>
167
+ <li class="flex items-center">
168
+ <i data-feather="check" class="text-primary mr-2"></i>
169
+ <span>Grooming Available</span>
170
+ </li>
171
+ </ul>
172
+ <p class="text-primary font-bold text-xl">$45/day</p>
173
+ </div>
174
+
175
+ <!-- Service 3 -->
176
+ <div class="bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition transform hover:-translate-y-2">
177
+ <div class="bg-primary/10 p-4 rounded-full inline-block mb-6">
178
+ <i data-feather="map-pin" class="text-primary h-8 w-8"></i>
179
+ </div>
180
+ <h3 class="text-2xl font-bold text-secondary mb-3">Adventure Walks</h3>
181
+ <p class="text-gray-600 mb-4">Spectacular scenic walks through the Florida Keys' most beautiful trails and beaches.</p>
182
+ <ul class="space-y-2 mb-6">
183
+ <li class="flex items-center">
184
+ <i data-feather="check" class="text-primary mr-2"></i>
185
+ <span>1-2 Hour Excursions</span>
186
+ </li>
187
+ <li class="flex items-center">
188
+ <i data-feather="check" class="text-primary mr-2"></i>
189
+ <span>Fresh Water Breaks</span>
190
+ </li>
191
+ <li class="flex items-center">
192
+ <i data-feather="check" class="text-primary mr-2"></i>
193
+ <span>GPS Tracked Routes</span>
194
+ </li>
195
+ </ul>
196
+ <p class="text-primary font-bold text-xl">$30/walk</p>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- About Section -->
203
+ <section id="about" class="py-20 bg-ocean/10 relative">
204
+ <div class="container mx-auto px-6">
205
+ <div class="flex flex-col md:flex-row items-center">
206
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
207
+ <img src="http://static.photos/people/640x360/7" alt="Our dog sitters" class="rounded-2xl shadow-xl border-8 border-white">
208
+ </div>
209
+ <div class="md:w-1/2">
210
+ <h2 class="text-4xl font-bold text-secondary mb-6 font-hand">Meet Your Paw-some Sitters</h2>
211
+ <p class="text-lg text-gray-700 mb-6">We're a team of passionate animal lovers who left the corporate world to follow our dream of caring for dogs in paradise.</p>
212
+ <p class="text-lg text-gray-700 mb-8">With over 15 years of combined experience in pet care, veterinary assistance, and dog training, we provide the highest level of care for your furry family members.</p>
213
+
214
+ <div class="flex flex-col space-y-4">
215
+ <div class="flex items-start">
216
+ <div class="bg-primary p-2 rounded-full mr-4">
217
+ <i data-feather="award" class="text-white h-5 w-5"></i>
218
+ </div>
219
+ <div>
220
+ <h4 class="font-bold text-secondary">Certified Professionals</h4>
221
+ <p class="text-gray-600">CPR & First Aid Certified for pets</p>
222
+ </div>
223
+ </div>
224
+ <div class="flex items-start">
225
+ <div class="bg-primary p-2 rounded-full mr-4">
226
+ <i data-feather="shield" class="text-white h-5 w-5"></i>
227
+ </div>
228
+ <div>
229
+ <h4 class="font-bold text-secondary">Fully Insured</h4>
230
+ <p class="text-gray-600">Peace of mind for you and your pup</p>
231
+ </div>
232
+ </div>
233
+ <div class="flex items-start">
234
+ <div class="bg-primary p-2 rounded-full mr-4">
235
+ <i data-feather="heart" class="text-white h-5 w-5"></i>
236
+ </div>
237
+ <div>
238
+ <h4 class="font-bold text-secondary">Local & Trusted</h4>
239
+ <p class="text-gray-600">Serving the Florida Keys community since 2018</p>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ </section>
247
+
248
+ <!-- Testimonials Section -->
249
+ <section id="testimonials" class="py-20 bg-white/80 backdrop-blur-sm relative">
250
+ <div class="container mx-auto px-6">
251
+ <div class="text-center mb-16">
252
+ <h2 class="text-4xl font-bold text-secondary mb-4 font-hand">Barking Happy Reviews</h2>
253
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Don't just take our word for it - hear what our clients have to say!</p>
254
+ </div>
255
+
256
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
257
+ <!-- Testimonial 1 -->
258
+ <div class="bg-white p-8 rounded-xl shadow-lg">
259
+ <div class="flex items-center mb-6">
260
+ <div class="bg-primary/10 p-2 rounded-full mr-4">
261
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
262
+ </div>
263
+ <div class="flex">
264
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
265
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
266
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
267
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
268
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
269
+ </div>
270
+ </div>
271
+ <p class="text-gray-700 italic mb-6">"We were nervous leaving our senior dog for the first time, but the daily updates and photos put us at ease. He came home happy and relaxed!"</p>
272
+ <div class="flex items-center">
273
+ <img src="http://static.photos/people/200x200/1" alt="Sarah J." class="w-12 h-12 rounded-full mr-4">
274
+ <div>
275
+ <h4 class="font-bold text-secondary">Sarah J.</h4>
276
+ <p class="text-gray-600">Key West</p>
277
+ </div>
278
+ </div>
279
+ </div>
280
+
281
+ <!-- Testimonial 2 -->
282
+ <div class="bg-white p-8 rounded-xl shadow-lg">
283
+ <div class="flex items-center mb-6">
284
+ <div class="bg-primary/10 p-2 rounded-full mr-4">
285
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
286
+ </div>
287
+ <div class="flex">
288
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
289
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
290
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
291
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
292
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
293
+ </div>
294
+ </div>
295
+ <p class="text-gray-700 italic mb-6">"Our high-energy Labrador gets so excited when he sees his sitter arrive! The adventure walks are his favorite part of the week."</p>
296
+ <div class="flex items-center">
297
+ <img src="http://static.photos/people/200x200/2" alt="Michael T." class="w-12 h-12 rounded-full mr-4">
298
+ <div>
299
+ <h4 class="font-bold text-secondary">Michael T.</h4>
300
+ <p class="text-gray-600">Islamorada</p>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Testimonial 3 -->
306
+ <div class="bg-white p-8 rounded-xl shadow-lg">
307
+ <div class="flex items-center mb-6">
308
+ <div class="bg-primary/10 p-2 rounded-full mr-4">
309
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
310
+ </div>
311
+ <div class="flex">
312
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
313
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
314
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
315
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
316
+ <i data-feather="star" class="text-primary h-5 w-5"></i>
317
+ </div>
318
+ </div>
319
+ <p class="text-gray-700 italic mb-6">"The team went above and beyond when my flight was delayed. I knew my pup was in good hands and didn't have to worry at all."</p>
320
+ <div class="flex items-center">
321
+ <img src="http://static.photos/people/200x200/3" alt="Lisa P." class="w-12 h-12 rounded-full mr-4">
322
+ <div>
323
+ <h4 class="font-bold text-secondary">Lisa P.</h4>
324
+ <p class="text-gray-600">Marathon</p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </section>
331
+
332
+ <!-- Gallery Section -->
333
+ <section class="py-16 bg-white">
334
+ <div class="container mx-auto px-6">
335
+ <h2 class="text-4xl font-bold text-secondary mb-12 text-center font-hand">Puppy Paradise Gallery</h2>
336
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
337
+ <img src="http://static.photos/travel/320x240/10" alt="Dog at beach" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
338
+ <img src="http://static.photos/travel/320x240/11" alt="Dog walking" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
339
+ <img src="http://static.photos/travel/320x240/12" alt="Happy dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
340
+ <img src="http://static.photos/travel/320x240/13" alt="Dog playing" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
341
+ <img src="http://static.photos/travel/320x240/14" alt="Beach sunset with dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
342
+ <img src="http://static.photos/travel/320x240/15" alt="Dog in water" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
343
+ <img src="http://static.photos/travel/320x240/16" alt="Dog with sitter" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
344
+ <img src="http://static.photos/travel/320x240/17" alt="Sleeping dog" class="rounded-lg shadow-md hover:shadow-xl transition transform hover:scale-105">
345
+ </div>
346
+ </div>
347
+ </section>
348
+
349
+ <!-- Contact Section -->
350
+ <section id="contact" class="py-20 bg-primary/5 relative">
351
+ <div class="container mx-auto px-6">
352
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden">
353
+ <div class="md:flex">
354
+ <div class="md:w-1/2 bg-secondary p-12 text-white">
355
+ <h2 class="text-3xl font-bold mb-6 font-hand">Ready to Book?</h2>
356
+ <p class="mb-6">Fill out the form and we'll get back to you within 24 hours to confirm your reservation.</p>
357
+
358
+ <div class="space-y-6">
359
+ <div class="flex items-start">
360
+ <div class="bg-primary p-2 rounded-full mr-4">
361
+ <i data-feather="phone" class="text-white h-5 w-5"></i>
362
+ </div>
363
+ <div>
364
+ <h4 class="font-bold">Call Us</h4>
365
+ <p>(305) 555-PAWS</p>
366
+ </div>
367
+ </div>
368
+ <div class="flex items-start">
369
+ <div class="bg-primary p-2 rounded-full mr-4">
370
+ <i data-feather="mail" class="text-white h-5 w-5"></i>
371
+ </div>
372
+ <div>
373
+ <h4 class="font-bold">Email Us</h4>
374
+ <p>hello@pawspalms.com</p>
375
+ </div>
376
+ </div>
377
+ <div class="flex items-start">
378
+ <div class="bg-primary p-2 rounded-full mr-4">
379
+ <i data-feather="map-pin" class="text-white h-5 w-5"></i>
380
+ </div>
381
+ <div>
382
+ <h4 class="font-bold">Service Area</h4>
383
+ <p>Key West to Key Largo</p>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="md:w-1/2 p-12">
390
+ <form>
391
+ <div class="mb-6">
392
+ <label for="name" class="block text-gray-700 mb-2">Your Name</label>
393
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
394
+ </div>
395
+ <div class="mb-6">
396
+ <label for="email" class="block text-gray-700 mb-2">Email Address</label>
397
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
398
+ </div>
399
+ <div class="mb-6">
400
+ <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
401
+ <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
402
+ </div>
403
+ <div class="mb-6">
404
+ <label for="service" class="block text-gray-700 mb-2">Service Needed</label>
405
+ <select id="service" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
406
+ <option>Select a service</option>
407
+ <option>In-Home Sitting</option>
408
+ <option>Doggy Day Care</option>
409
+ <option>Adventure Walks</option>
410
+ <option>Other</option>
411
+ </select>
412
+ </div>
413
+ <div class="mb-6">
414
+ <label for="message" class="block text-gray-700 mb-2">Tell Us About Your Pup</label>
415
+ <textarea id="message" rows="4" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
416
+ </div>
417
+ <button type="submit" class="w-full bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-4 rounded-lg transition">Send Request</button>
418
+ </form>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </section>
424
+
425
+ <!-- FAQ Section -->
426
+ <section class="py-20 bg-white">
427
+ <div class="container mx-auto px-6 max-w-4xl">
428
+ <h2 class="text-4xl font-bold text-secondary mb-12 text-center font-hand">Frequently Asked Questions</h2>
429
+
430
+ <div class="space-y-6">
431
+ <!-- FAQ 1 -->
432
+ <div class="border-b border-gray-200 pb-6">
433
+ <button class="faq-btn flex items-center justify-between w-full text-left">
434
+ <h3 class="text-xl font-bold text-secondary">What areas do you serve?</h3>
435
+ <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i>
436
+ </button>
437
+ <div class="faq-content hidden mt-4">
438
+ <p class="text-gray-600">We proudly serve all of the Florida Keys from Key West to Key Largo. If you're outside this area, please contact us as we may be able to make special arrangements.</p>
439
+ </div>
440
+ </div>
441
+
442
+ <!-- FAQ 2 -->
443
+ <div class="border-b border-gray-200 pb-6">
444
+ <button class="faq-btn flex items-center justify-between w-full text-left">
445
+ <h3 class="text-xl font-bold text-secondary">What's your cancellation policy?</h3>
446
+ <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i>
447
+ </button>
448
+ <div class="faq-content hidden mt-4">
449
+ <p class="text-gray-600">We require 48 hours notice for cancellations to receive a full refund. Cancellations within 24-48 hours will receive a 50% refund. Less than 24 hours notice is non-refundable.</p>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- FAQ 3 -->
454
+ <div class="border-b border-gray-200 pb-6">
455
+ <button class="faq-btn flex items-center justify-between w-full text-left">
456
+ <h3 class="text-xl font-bold text-secondary">Do you accept all dog breeds?</h3>
457
+ <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i>
458
+ </button>
459
+ <div class="faq-content hidden mt-4">
460
+ <p class="text-gray-600">Yes! We love all breeds and sizes. We do require a meet-and-greet for all new clients to ensure we're a good match for your pup's personality and needs.</p>
461
+ </div>
462
+ </div>
463
+
464
+ <!-- FAQ 4 -->
465
+ <div class="border-b border-gray-200 pb-6">
466
+ <button class="faq-btn flex items-center justify-between w-full text-left">
467
+ <h3 class="text-xl font-bold text-secondary">What should I provide for in-home sitting?</h3>
468
+ <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i>
469
+ </button>
470
+ <div class="faq-content hidden mt-4">
471
+ <p class="text-gray-600">We ask that you provide your dog's food, any medications, favorite toys, leash, and any special instructions. Please also provide vet contact information and emergency contacts.</p>
472
+ </div>
473
+ </div>
474
+
475
+ <!-- FAQ 5 -->
476
+ <div class="border-b border-gray-200 pb-6">
477
+ <button class="faq-btn flex items-center justify-between w-full text-left">
478
+ <h3 class="text-xl font-bold text-secondary">How do you handle emergencies?</h3>
479
+ <i data-feather="chevron-down" class="text-primary h-6 w-6 transition-transform duration-300"></i>
480
+ </button>
481
+ <div class="faq-content hidden mt-4">
482
+ <p class="text-gray-600">We're trained in pet first aid and CPR. In case of emergency, we'll immediately contact you and your vet. If needed, we'll transport your pet to the nearest veterinary clinic.</p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </section>
488
+
489
+ <!-- CTA Section -->
490
+ <section class="py-16 bg-secondary text-white">
491
+ <div class="container mx-auto px-6 text-center">
492
+ <h2 class="text-4xl font-bold mb-6 font-hand">Ready to Give Your Pup a Vacation?</h2>
493
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Book now and receive 10% off your first service with code PAWS10</p>
494
+ <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white px-8 py-4 rounded-full text-lg font-medium transition inline-block">Get Started Today</a>
495
+ </div>
496
+ </section>
497
+
498
+ <!-- Footer -->
499
+ <footer class="bg-gray-900 text-white py-12">
500
+ <div class="container mx-auto px-6">
501
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
502
+ <div>
503
+ <div class="flex items-center mb-6">
504
+ <i data-feather="paw" class="text-primary h-8 w-8 mr-2"></i>
505
+ <span class="font-hand text-2xl text-primary">Florida Dog Sitting</span>
506
+ </div>
507
+ <p class="text-gray-400">Premium dog sitting services in the beautiful Florida Keys where every tail gets a tropical treat!</p>
508
+ </div>
509
+
510
+ <div>
511
+ <h4 class="text-lg font-bold mb-4">Services</h4>
512
+ <ul class="space-y-2">
513
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">In-Home Sitting</a></li>
514
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Doggy Day Care</a></li>
515
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Adventure Walks</a></li>
516
+ <li><a href="#" class="text-gray-400 hover:text-primary transition">Pet Taxi</a></li>
517
+ </ul>
518
+ </div>
519
+
520
+ <div>
521
+ <h4 class="text-lg font-bold mb-4">Quick Links</h4>
522
+ <ul class="space-y-2">
523
+ <li><a href="#about" class="text-gray-400 hover:text-primary transition">About Us</a></li>
524
+ <li><a href="#testimonials" class="text-gray-400 hover:text-primary transition">Testimonials</a></li>
525
+ <li><a href="#faq" class="text-gray-400 hover:text-primary transition">FAQ</a></li>
526
+ <li><a href="#contact" class="text-gray-400 hover:text-primary transition">Contact</a></li>
527
+ </ul>
528
+ </div>
529
+
530
+ <div>
531
+ <h4 class="text-lg font-bold mb-4">Connect With Us</h4>
532
+ <div class="flex space-x-4 mb-4">
533
+ <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
534
+ <i data-feather="facebook" class="h-5 w-5"></i>
535
+ </a>
536
+ <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
537
+ <i data-feather="instagram" class="h-5 w-5"></i>
538
+ </a>
539
+ <a href="#" class="bg-gray-800 hover:bg-primary p-3 rounded-full transition">
540
+ <i data-feather="twitter" class="h-5 w-5"></i>
541
+ </a>
542
+ </div>
543
+ <p class="text-gray-400">Subscribe to our newsletter for tips and special offers</p>
544
+ <div class="mt-4 flex">
545
+ <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l-lg bg-gray-800 text-white focus:outline-none w-full">
546
+ <button class="bg-primary hover:bg-opacity-90 px-4 py-2 rounded-r-lg">
547
+ <i data-feather="send" class="h-5 w-5"></i>
548
+ </button>
549
+ </div>
550
+ </div>
551
+ </div>
552
+
553
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
554
+ <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Paws & Palms Paradise. All rights reserved.</p>
555
+ <div class="flex space-x-6">
556
+ <a href="#" class="text-gray-400 hover:text-primary text-sm transition">Privacy Policy</a>
557
+ <a href="#" class="text-gray-400 hover:text-primary text-sm transition">Terms of Service</a>
558
+ </div>
559
+ </div>
560
+ </div>
561
+ </footer>
562
+ </div>
563
+
564
+ <script>
565
+ // Vanta.js Background
566
+ VANTA.WAVES({
567
+ el: "#vanta-bg",
568
+ mouseControls: true,
569
+ touchControls: true,
570
+ gyroControls: false,
571
+ minHeight: 200.00,
572
+ minWidth: 200.00,
573
+ scale: 1.00,
574
+ scaleMobile: 1.00,
575
+ color: 0x1b9aaa,
576
+ shininess: 130.00,
577
+ waveHeight: 25.00,
578
+ waveSpeed: 0.80,
579
+ zoom: 0.75
580
+ });
581
+
582
+ // Mobile Menu Toggle
583
+ const menuBtn = document.getElementById('menu-btn');
584
+ const mobileMenu = document.getElementById('mobile-menu');
585
+
586
+ menuBtn.addEventListener('click', () => {
587
+ const isOpen = mobileMenu.classList.contains('hidden');
588
+ if (isOpen) {
589
+ mobileMenu.classList.remove('hidden');
590
+ mobileMenu.classList.add('flex');
591
+ feather.replace();
592
+ } else {
593
+ mobileMenu.classList.add('hidden');
594
+ mobileMenu.classList.remove('flex');
595
+ }
596
+ });
597
+
598
+ // FAQ Accordion
599
+ const faqBtns = document.querySelectorAll('.faq-btn');
600
+
601
+ faqBtns.forEach(btn => {
602
+ btn.addEventListener('click', () => {
603
+ const content = btn.nextElementSibling;
604
+ const icon = btn.querySelector('i');
605
+
606
+ // Toggle content
607
+ content.classList.toggle('hidden');
608
+
609
+ // Rotate icon
610
+ if (content.classList.contains('hidden')) {
611
+ icon.style.transform = 'rotate(0deg)';
612
+ } else {
613
+ icon.style.transform = 'rotate(180deg)';
614
+ }
615
+ });
616
+ });
617
+
618
+ // Smooth scrolling for anchor links
619
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
620
+ anchor.addEventListener('click', function (e) {
621
+ e.preventDefault();
622
+
623
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
624
+ behavior: 'smooth'
625
+ });
626
+
627
+ // Close mobile menu if open
628
+ if (!mobileMenu.classList.contains('hidden')) {
629
+ mobileMenu.classList.add('hidden');
630
+ mobileMenu.classList.remove('flex');
631
+ }
632
+ });
633
+ });
634
+ </script>
635
+ <script>feather.replace();</script>
636
+ </body>
637
  </html>