File size: 29,866 Bytes
68a98d8
8ab25fa
 
 
 
 
 
 
 
 
 
 
68a98d8
 
8ab25fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68a98d8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
cf7db8a
68a98d8
cf7db8a
8ab25fa
 
 
 
68a98d8
8ab25fa
68a98d8
 
 
 
8ab25fa
68a98d8
8ab25fa
 
68a98d8
cf7db8a
68a98d8
cf7db8a
 
68a98d8
cf7db8a
8ab25fa
 
 
68a98d8
cf7db8a
68a98d8
8ab25fa
cf7db8a
68a98d8
 
 
 
 
8ab25fa
 
 
 
68a98d8
8ab25fa
68a98d8
 
 
8ab25fa
68a98d8
 
8ab25fa
 
68a98d8
 
cf7db8a
8ab25fa
 
 
 
68a98d8
 
 
8ab25fa
68a98d8
 
8ab25fa
 
68a98d8
 
cf7db8a
8ab25fa
 
 
 
68a98d8
 
 
8ab25fa
68a98d8
 
8ab25fa
 
68a98d8
 
cf7db8a
8ab25fa
 
cf7db8a
8ab25fa
 
cf7db8a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8ab25fa
 
cf7db8a
 
 
 
8ab25fa
cf7db8a
 
8ab25fa
cf7db8a
 
 
 
 
8ab25fa
cf7db8a
 
 
8ab25fa
cf7db8a
 
 
8ab25fa
cf7db8a
 
 
8ab25fa
 
 
 
 
 
cf7db8a
8ab25fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f204e03
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
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Curvy Cuts Salon</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@21st.dev/design-system@latest/dist/design-system.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@21st.dev/design-system@latest/dist/design-system.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0f172a;
            color: #e2e8f0;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Playfair Display', serif;
        }
        
        .hero-bg {
            background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)), url('http://static.photos/blurred/1200x630/45');
            background-size: cover;
            background-position: center;
        }
        
        .vanta-canvas {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
</head>
<body class="bg-slate-900 text-slate-100">
    <!-- Navigation -->
    <nav class="ds-navbar ds-navbar-glass ds-navbar-sticky">
        <div class="ds-navbar-container">
            <div class="ds-navbar-brand">
                <i data-feather="scissors" class="text-pink-500 mr-2"></i>
                <span class="ds-navbar-brand-text">Curvy Cuts</span>
            </div>
            <div class="ds-navbar-menu">
                <a href="#" class="ds-navbar-link ds-navbar-link-active">Home</a>
                <a href="#services" class="ds-navbar-link">Services</a>
                <a href="#about" class="ds-navbar-link">About</a>
                <a href="#team" class="ds-navbar-link">Team</a>
                <a href="#testimonials" class="ds-navbar-link">Testimonials</a>
                <a href="#contact" class="ds-navbar-link">Contact</a>
            </div>
            <div class="ds-navbar-actions">
                <a href="#contact" class="ds-button ds-button-primary ds-button-glow">
                    <i data-feather="calendar" class="mr-2"></i>Book Now
                </a>
            </div>
        </div>
    </nav>
    <!-- Hero Section -->
    <section class="ds-hero ds-hero-glass ds-hero-fullscreen">
        <div id="vanta-bg"></div>
        <div class="ds-hero-content ds-hero-content-center">
            <div class="ds-hero-text">
                <h1 class="ds-hero-title">
                    Where <span class="ds-text-gradient">Confidence</span> Meets Style
                </h1>
                <p class="ds-hero-subtitle">
                    Experience luxury hair care in an inclusive space designed for every body, every style, every you.
                </p>
                <div class="ds-hero-actions">
                    <a href="#contact" class="ds-button ds-button-primary ds-button-lg ds-button-glow">
                        <i data-feather="calendar" class="mr-2"></i>Book Your Appointment
                    </a>
                    <a href="#about" class="ds-button ds-button-secondary ds-button-lg">
                        <i data-feather="user" class="mr-2"></i>Meet Our Founder
                    </a>
                </div>
            </div>
        </div>
        <div class="ds-hero-scroll-indicator">
            <a href="#services"><i data-feather="chevron-down"></i></a>
        </div>
    </section>
<!-- Services Section -->
    <section id="services" class="ds-section">
        <div class="ds-container">
            <div class="ds-section-header ds-text-center">
                <h2 class="ds-section-title">Our <span class="ds-text-gradient">Premium</span> Services</h2>
                <p class="ds-section-subtitle">
                    From precision cuts to transformative color treatments, we offer a full range of services tailored to your unique style.
                </p>
            </div>
            
            <div class="ds-grid ds-grid-cols-1 md:ds-grid-cols-2 lg:ds-grid-cols-3 ds-gap-8">
                <!-- Service 1 -->
                <div class="ds-card ds-card-hover">
                    <div class="ds-card-icon">
                        <i data-feather="scissors"></i>
                    </div>
                    <h3 class="ds-card-title">Haircuts & Styling</h3>
                    <p class="ds-card-content">
                        Precision cuts tailored to your face shape and lifestyle. From classic styles to modern trends.
                    </p>
                    <div class="ds-card-footer">
                        <span class="ds-price">From $65</span>
                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                    </div>
                </div>
                
                <!-- Service 2 -->
                <div class="ds-card ds-card-hover">
                    <div class="ds-card-icon">
                        <i data-feather="droplet"></i>
                    </div>
                    <h3 class="ds-card-title">Color & Highlights</h3>
                    <p class="ds-card-content">
                        Vibrant colors and seamless highlights using premium products for healthy, shiny hair.
                    </p>
                    <div class="ds-card-footer">
                        <span class="ds-price">From $95</span>
                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                    </div>
                </div>
                
                <!-- Service 3 -->
                <div class="ds-card ds-card-hover">
                    <div class="ds-card-icon">
                        <i data-feather="heart"></i>
                    </div>
                    <h3 class="ds-card-title">Treatments & Care</h3>
                    <p class="ds-card-content">
                        Nourishing treatments to restore, strengthen, and revitalize your hair from root to tip.
                    </p>
                    <div class="ds-card-footer">
                        <span class="ds-price">From $50</span>
                        <a href="#contact" class="ds-button ds-button-primary ds-button-sm">Book Now</a>
                    </div>
                </div>
</div>
        </div>
    </section>
    <!-- About Section -->
    <section id="about" class="ds-section ds-section-alt">
        <div class="ds-container">
            <div class="ds-section-header">
                <h2 class="ds-section-title">Meet <span class="ds-text-gradient">Maya</span>, Your Stylist & Founder</h2>
                <p class="ds-section-subtitle">
                    As a plus-size woman in the beauty industry, I created Curvy Cuts to provide a welcoming space where everyone feels beautiful.
                </p>
            </div>
            
            <div class="ds-grid ds-grid-cols-1 lg:ds-grid-cols-2 ds-gap-12 ds-items-center">
                <div class="ds-about-image">
                    <div class="ds-image-frame">
                        <img src="http://static.photos/people/640x360/78" alt="Salon Owner Maya" class="ds-image">
                    </div>
                    <div class="ds-badge ds-badge-accent">
                        <i data-feather="award" class="ds-badge-icon"></i>
                        <span class="ds-badge-text">10+ Years Experience</span>
                    </div>
                </div>
                
                <div class="ds-about-content">
                    <p class="ds-text-lg ds-mb-6">
                        My journey began with a passion for making people feel confident in their own skin. At Curvy Cuts, we believe beauty has no size, shape, or form.
                    </p>
                    <p class="ds-text ds-mb-8">
                        Our inclusive approach ensures every client receives personalized attention in a judgment-free environment. I'm committed to celebrating diversity through hair artistry.
                    </p>
                    
                    <div class="ds-grid ds-grid-cols-2 ds-gap-4">
                        <div class="ds-feature-item">
                            <i data-feather="check-circle" class="ds-feature-icon"></i>
                            <span class="ds-feature-text">Inclusive Environment</span>
                        </div>
                        <div class="ds-feature-item">
                            <i data-feather="check-circle" class="ds-feature-icon"></i>
                            <span class="ds-feature-text">Body Positive Philosophy</span>
                        </div>
                        <div class="ds-feature-item">
                            <i data-feather="check-circle" class="ds-feature-icon"></i>
                            <span class="ds-feature-text">Premium Products</span>
                        </div>
                        <div class="ds-feature-item">
                            <i data-feather="check-circle" class="ds-feature-icon"></i>
                            <span class="ds-feature-text">Personalized Service</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
<!-- Team Section -->
    <section id="team" class="py-20 bg-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-pink-500">Talented</span> Team</h2>
                <p class="text-slate-400 max-w-2xl mx-auto">
                    Skilled professionals who share our commitment to inclusivity and exceptional service.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Team Member 1 -->
                <div class="staff-card bg-slate-900 rounded-xl overflow-hidden border border-slate-700">
                    <div class="h-64 overflow-hidden">
                        <img src="http://static.photos/people/640x360/23" alt="Team Member" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-1">Alex Morgan</h3>
                        <p class="text-pink-500 mb-3">Senior Stylist</p>
                        <p class="text-slate-400 text-sm">
                            Specializes in precision cuts and color corrections with 8+ years experience.
                        </p>
                    </div>
                </div>
                
                <!-- Team Member 2 -->
                <div class="staff-card bg-slate-900 rounded-xl overflow-hidden border border-slate-700">
                    <div class="h-64 overflow-hidden">
                        <img src="http://static.photos/people/640x360/45" alt="Team Member" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-1">Jordan Lee</h3>
                        <p class="text-pink-500 mb-3">Color Specialist</p>
                        <p class="text-slate-400 text-sm">
                            Master of balayage and creative color techniques with a passion for artistry.
                        </p>
                    </div>
                </div>
                
                <!-- Team Member 3 -->
                <div class="staff-card bg-slate-900 rounded-xl overflow-hidden border border-slate-700">
                    <div class="h-64 overflow-hidden">
                        <img src="http://static.photos/people/640x360/67" alt="Team Member" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-1">Taylor Kim</h3>
                        <p class="text-pink-500 mb-3">Texture Specialist</p>
                        <p class="text-slate-400 text-sm">
                            Expert in curly and textured hair care with a focus on natural beauty enhancement.
                        </p>
                    </div>
                </div>
                
                <!-- Team Member 4 -->
                <div class="staff-card bg-slate-900 rounded-xl overflow-hidden border border-slate-700">
                    <div class="h-64 overflow-hidden">
                        <img src="http://static.photos/people/640x360/89" alt="Team Member" class="w-full h-full object-cover">
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold mb-1">Riley Chen</h3>
                        <p class="text-pink-500 mb-3">Treatment Specialist</p>
                        <p class="text-slate-400 text-sm">
                            Certified in advanced hair treatments and scalp care for optimal hair health.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section id="testimonials" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Client <span class="text-pink-500">Love</span></h2>
                <p class="text-slate-400 max-w-2xl mx-auto">
                    Hear what our amazing clients have to say about their experience at Curvy Cuts.
                </p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <!-- Testimonial 1 -->
                <div class="testimonial-card bg-slate-900 rounded-xl p-8 border border-slate-700">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="http://static.photos/people/320x240/12" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Sarah Johnson</h4>
                            <div class="flex text-amber-500">
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-slate-300 italic">
                        "As a plus-size woman, I've always felt judged at salons. At Curvy Cuts, Maya made me feel beautiful for the first time. The inclusive environment and exceptional service are unmatched!"
                    </p>
                </div>
                
                <!-- Testimonial 2 -->
                <div class="testimonial-card bg-slate-900 rounded-xl p-8 border border-slate-700">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="http://static.photos/people/320x240/34" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Michael Torres</h4>
                            <div class="flex text-amber-500">
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-slate-300 italic">
                        "The team at Curvy Cuts transformed my hair and confidence. Their attention to detail and genuine care for clients is evident in every service. I won't go anywhere else!"
                    </p>
                </div>
                
                <!-- Testimonial 3 -->
                <div class="testimonial-card bg-slate-900 rounded-xl p-8 border border-slate-700">
                    <div class="flex items-center mb-6">
                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
                            <img src="http://static.photos/people/320x240/56" alt="Client" class="w-full h-full object-cover">
                        </div>
                        <div>
                            <h4 class="font-bold">Amanda Williams</h4>
                            <div class="flex text-amber-500">
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                                <i data-feather="star" class="w-4 h-4 fill-current"></i>
                            </div>
                        </div>
                    </div>
                    <p class="text-slate-300 italic">
                        "Finally, a salon that celebrates diversity! The inclusive atmosphere and skilled stylists make every visit a pampering experience. My hair has never looked better!"
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-20 bg-slate-800">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="bg-slate-900 rounded-2xl p-8 md:p-12 border border-slate-700">
                <div class="flex flex-col lg:flex-row gap-12">
                    <div class="lg:w-1/2">
                        <h2 class="text-3xl md:text-4xl font-bold mb-6">
                            Ready to <span class="text-pink-500">Transform</span> Your Look?
                        </h2>
                        <p class="text-slate-400 mb-8">
                            Book your appointment today and experience the Curvy Cuts difference. Our welcoming team is ready to help you look and feel your best.
                        </p>
                        
                        <div class="space-y-6">
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-pink-500/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i data-feather="map-pin" class="text-pink-500"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold text-lg mb-1">Visit Us</h3>
                                    <p class="text-slate-400">
                                        123 Beauty Avenue<br>
                                        Fashion District, NY 10001
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-pink-500/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i data-feather="phone" class="text-pink-500"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold text-lg mb-1">Call Us</h3>
                                    <p class="text-slate-400">
                                        (555) 123-4567<br>
                                        Mon-Fri: 9AM - 7PM<br>
                                        Sat-Sun: 10AM - 5PM
                                    </p>
                                </div>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="w-12 h-12 rounded-full bg-pink-500/10 flex items-center justify-center mr-4 flex-shrink-0">
                                    <i data-feather="mail" class="text-pink-500"></i>
                                </div>
                                <div>
                                    <h3 class="font-bold text-lg mb-1">Email Us</h3>
                                    <p class="text-slate-400">
                                        hello@curvycuts.com<br>
                                        appointments@curvycuts.com
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="lg:w-1/2">
                        <div class="bg-slate-800 rounded-xl p-8">
                            <h3 class="text-2xl font-bold mb-6">Book Your Appointment</h3>
                            <form class="space-y-6">
                                <div>
                                    <label class="block text-slate-300 mb-2">Full Name</label>
                                    <input type="text" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-slate-300 mb-2">Email Address</label>
                                    <input type="email" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-slate-300 mb-2">Service</label>
                                    <select class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                        <option>Select a service</option>
                                        <option>Haircut & Styling</option>
                                        <option>Color & Highlights</option>
                                        <option>Treatments & Care</option>
                                        <option>Special Occasion Styling</option>
                                    </select>
                                </div>
                                
                                <div>
                                    <label class="block text-slate-300 mb-2">Preferred Date & Time</label>
                                    <input type="datetime-local" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent">
                                </div>
                                
                                <div>
                                    <label class="block text-slate-300 mb-2">Message</label>
                                    <textarea rows="4" class="w-full bg-slate-700 border border-slate-600 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-pink-500 focus:border-transparent"></textarea>
                                </div>
                                
                                <button type="submit" class="w-full bg-pink-500 hover:bg-pink-600 text-white py-3 rounded-lg font-medium glow-button transition">
                                    Book Appointment
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-slate-900 border-t border-slate-800 pt-16 pb-8">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
                <div>
                    <div class="flex items-center mb-6">
                        <i data-feather="scissors" class="text-pink-500 mr-2"></i>
                        <span class="text-2xl font-bold text-pink-500">Curvy Cuts</span>
                    </div>
                    <p class="text-slate-400 mb-6">
                        Where confidence meets style in an inclusive, welcoming environment for every body.
                    </p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-pink-500 transition">
                            <i data-feather="instagram" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-pink-500 transition">
                            <i data-feather="facebook" class="w-5 h-5"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-pink-500 transition">
                            <i data-feather="twitter" class="w-5 h-5"></i>
                        </a>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">Services</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Haircuts & Styling</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Color & Highlights</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Treatments & Care</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Special Occasion</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Consultations</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">Quick Links</h3>
                    <ul class="space-y-3">
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">About Us</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Our Team</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Pricing</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Gallery</a></li>
                        <li><a href="#" class="text-slate-400 hover:text-pink-500 transition">Blog</a></li>
                    </ul>
                </div>
                
                <div>
                    <h3 class="text-lg font-bold mb-6">Newsletter</h3>
                    <p class="text-slate-400 mb-4">
                        Subscribe for exclusive offers and beauty tips.
                    </p>
                    <div class="flex">
                        <input type="email" placeholder="Your email" class="bg-slate-800 border border-slate-700 rounded-l-lg px-4 py-2 w-full focus:outline-none focus:ring-1 focus:ring-pink-500">
                        <button class="bg-pink-500 hover:bg-pink-600 text-white px-4 rounded-r-lg">
                            <i data-feather="send" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>
            </div>
            
            <div class="pt-8 border-t border-slate-800 text-center text-slate-500 text-sm">
                <p>&copy; 2023 Curvy Cuts Salon. All rights reserved. Celebrating beauty in every form.</p>
            </div>
        </div>
    </footer>

    <script>
        feather.replace();
        
        // Vanta.js background
        VANTA.GLOBE({
            el: "#vanta-bg",
            mouseControls: true,
            touchControls: true,
            gyroControls: false,
            minHeight: 200.00,
            minWidth: 200.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color: 0xec4899,
            color2: 0x0f172a,
            backgroundColor: 0x0f172a,
            size: 1.20,
            lineColor: 0xf59e0b
        });
    </script>
</body>
</html>