Hugging Face's logo

Spaces:
Bearbeardog
/
smoothlex
Running

App Files Community
Bearbeardog commited on
Commit
75b4229
·
verified ·
1 Parent(s): 22dcbc1

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +731 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Smoothlex
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: gray
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: smoothlex
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,731 @@
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>Lexington Smooth Beauty | Modern Wellness Sanctuary</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root {
12
+ --sage-green: #9CAF88;
13
+ --warm-beige: #F5F1EB;
14
+ --soft-sage: #E8F0E3;
15
+ --deep-sage: #7A8B6F;
16
+ --warm-gray: #A89B94;
17
+ --cream: #FEFCF8;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', sans-serif;
22
+ color: #2c3e50;
23
+ background-color: var(--cream);
24
+ }
25
+
26
+ .font-display {
27
+ font-family: 'Playfair Display', serif;
28
+ }
29
+
30
+ .bg-sage {
31
+ background-color: var(--sage-green);
32
+ }
33
+
34
+ .bg-warm-beige {
35
+ background-color: var(--warm-beige);
36
+ }
37
+
38
+ .bg-soft-sage {
39
+ background-color: var(--soft-sage);
40
+ }
41
+
42
+ .bg-cream {
43
+ background-color: var(--cream);
44
+ }
45
+
46
+ .text-sage {
47
+ color: var(--sage-green);
48
+ }
49
+
50
+ .text-deep-sage {
51
+ color: var(--deep-sage);
52
+ }
53
+
54
+ .text-warm-gray {
55
+ color: var(--warm-gray);
56
+ }
57
+
58
+ .border-sage {
59
+ border-color: var(--sage-green);
60
+ }
61
+
62
+ .hover-lift {
63
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
64
+ }
65
+
66
+ .hover-lift:hover {
67
+ transform: translateY(-5px);
68
+ box-shadow: 0 10px 25px rgba(0,0,0,0.1);
69
+ }
70
+
71
+ .gradient-sage {
72
+ background: linear-gradient(135deg, var(--soft-sage) 0%, var(--sage-green) 100%);
73
+ }
74
+
75
+ .sticky-cta {
76
+ position: fixed;
77
+ bottom: 20px;
78
+ right: 20px;
79
+ z-index: 1000;
80
+ animation: pulse 2s infinite;
81
+ }
82
+
83
+ @keyframes pulse {
84
+ 0%, 100% { transform: scale(1); }
85
+ 50% { transform: scale(1.05); }
86
+ }
87
+
88
+ .modal {
89
+ display: none;
90
+ position: fixed;
91
+ z-index: 2000;
92
+ left: 0;
93
+ top: 0;
94
+ width: 100%;
95
+ height: 100%;
96
+ background-color: rgba(0,0,0,0.5);
97
+ }
98
+
99
+ .modal.show {
100
+ display: flex;
101
+ }
102
+
103
+ .service-card {
104
+ background: white;
105
+ border: 2px solid var(--soft-sage);
106
+ transition: all 0.3s ease;
107
+ }
108
+
109
+ .service-card:hover {
110
+ border-color: var(--sage-green);
111
+ transform: translateY(-3px);
112
+ box-shadow: 0 8px 25px rgba(156, 175, 136, 0.15);
113
+ }
114
+
115
+ .promo-bar {
116
+ background: linear-gradient(90deg, var(--sage-green), var(--deep-sage));
117
+ animation: slideIn 0.5s ease-out;
118
+ }
119
+
120
+ @keyframes slideIn {
121
+ from { transform: translateY(-100%); }
122
+ to { transform: translateY(0); }
123
+ }
124
+
125
+ /* Custom animations */
126
+ @keyframes fadeIn {
127
+ from { opacity: 0; transform: translateY(20px); }
128
+ to { opacity: 1; transform: translateY(0); }
129
+ }
130
+
131
+ .fade-in {
132
+ animation: fadeIn 0.8s ease-out forwards;
133
+ }
134
+
135
+ .delay-1 {
136
+ animation-delay: 0.2s;
137
+ }
138
+
139
+ .delay-2 {
140
+ animation-delay: 0.4s;
141
+ }
142
+
143
+ .delay-3 {
144
+ animation-delay: 0.6s;
145
+ }
146
+
147
+ /* Hero background */
148
+ .hero-bg {
149
+ background-image: linear-gradient(rgba(245, 241, 235, 0.9), rgba(245, 241, 235, 0.9)),
150
+ url('https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');
151
+ background-size: cover;
152
+ background-position: center;
153
+ background-repeat: no-repeat;
154
+ }
155
+ </style>
156
+ </head>
157
+ <body class="bg-cream">
158
+ <!-- Promo Bar -->
159
+ <div class="promo-bar text-white text-center py-2 px-4">
160
+ <div class="container mx-auto flex items-center justify-center">
161
+ <span class="font-bold mr-2">🌿 New Client Special:</span>
162
+ <span>Free consultation + $15 credit toward any service</span>
163
+ <a href="#booking" class="ml-4 bg-white text-sage font-semibold px-3 py-1 rounded hover:bg-warm-beige transition">Claim Now</a>
164
+ </div>
165
+ </div>
166
+
167
+ <!-- Header -->
168
+ <header class="bg-white shadow-sm sticky top-0 z-50">
169
+ <div class="container mx-auto px-4 py-4">
170
+ <div class="flex justify-between items-center">
171
+ <div class="flex items-center">
172
+ <div class="w-12 h-12 rounded-full bg-sage flex items-center justify-center text-white font-display text-xl font-bold">LSB</div>
173
+ <div class="ml-3">
174
+ <h1 class="font-display text-xl font-bold text-deep-sage">Lexington Smooth Beauty</h1>
175
+ <p class="text-xs text-warm-gray">Modern Wellness Sanctuary</p>
176
+ </div>
177
+ </div>
178
+
179
+ <nav class="hidden md:block">
180
+ <ul class="flex space-x-8">
181
+ <li><a href="#" class="text-deep-sage hover:text-sage font-medium transition">Home</a></li>
182
+ <li><a href="#services" class="text-deep-sage hover:text-sage font-medium transition">Services</a></li>
183
+ <li><a href="#about" class="text-deep-sage hover:text-sage font-medium transition">About</a></li>
184
+ <li><a href="#testimonials" class="text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li>
185
+ <li><a href="#contact" class="text-deep-sage hover:text-sage font-medium transition">Contact</a></li>
186
+ </ul>
187
+ </nav>
188
+
189
+ <div class="hidden md:block">
190
+ <a href="#booking" class="bg-sage text-white px-6 py-2 rounded-full hover:bg-deep-sage transition font-medium">Book Now</a>
191
+ </div>
192
+
193
+ <button id="mobile-menu-button" class="md:hidden text-deep-sage">
194
+ <i class="fas fa-bars text-2xl"></i>
195
+ </button>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Mobile Menu -->
200
+ <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-soft-sage">
201
+ <div class="container mx-auto px-4 py-3">
202
+ <ul class="space-y-3">
203
+ <li><a href="#" class="block text-deep-sage hover:text-sage font-medium transition">Home</a></li>
204
+ <li><a href="#services" class="block text-deep-sage hover:text-sage font-medium transition">Services</a></li>
205
+ <li><a href="#about" class="block text-deep-sage hover:text-sage font-medium transition">About</a></li>
206
+ <li><a href="#testimonials" class="block text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li>
207
+ <li><a href="#contact" class="block text-deep-sage hover:text-sage font-medium transition">Contact</a></li>
208
+ <li><a href="#booking" class="block bg-sage text-white px-4 py-2 rounded-full text-center hover:bg-deep-sage transition font-medium mt-2">Book Now</a></li>
209
+ </ul>
210
+ </div>
211
+ </div>
212
+ </header>
213
+
214
+ <!-- Hero Section -->
215
+ <section class="hero-bg py-20 md:py-32">
216
+ <div class="container mx-auto px-4">
217
+ <div class="max-w-2xl fade-in">
218
+ <h1 class="font-display text-4xl md:text-5xl font-bold text-deep-sage mb-4">Feel Confident in Your Skin</h1>
219
+ <p class="text-lg md:text-xl text-warm-gray mb-8">Authentic beauty studio for women, men & teens. Real results without the medical spa attitude or markup. We're the Lexington's favorite wellness sanctuary.</p>
220
+ <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
221
+ <a href="#booking" class="bg-sage text-white px-8 py-3 rounded-full hover:bg-deep-sage transition font-medium text-center">Book Your First Visit</a>
222
+ <a href="#consultation" class="border-2 border-sage text-sage px-8 py-3 rounded-full hover:bg-soft-sage transition font-medium text-center">Get Free Consultation</a>
223
+ </div>
224
+ <div class="flex items-center mt-8 space-x-4">
225
+ <div class="flex space-x-1 text-yellow-400">
226
+ <i class="fas fa-star"></i>
227
+ <i class="fas fa-star"></i>
228
+ <i class="fas fa-star"></i>
229
+ <i class="fas fa-star"></i>
230
+ <i class="fas fa-star"></i>
231
+ </div>
232
+ <span class="text-warm-gray">200+ 5-star reviews</span>
233
+ </div>
234
+ </div>
235
+ </div>
236
+ </section>
237
+
238
+ <!-- Benefits Section -->
239
+ <section class="py-12 bg-warm-beige">
240
+ <div class="container mx-auto px-4">
241
+ <div class="flex flex-wrap -mx-2">
242
+ <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4">
243
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center">
244
+ <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4">
245
+ <i class="fas fa-heart text-xl"></i>
246
+ </div>
247
+ <div>
248
+ <h3 class="font-display font-bold text-deep-sage mb-1">No Pressure</h3>
249
+ <p class="text-warm-gray text-sm">Honest advice, no upsells</p>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4">
254
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center">
255
+ <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4">
256
+ <i class="fas fa-users text-xl"></i>
257
+ </div>
258
+ <div>
259
+ <h3 class="font-display font-bold text-deep-sage mb-1">All Welcome</h3>
260
+ <p class="text-warm-gray text-sm">Women, men & teens</p>
261
+ </div>
262
+ </div>
263
+ </div>
264
+ <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4">
265
+ <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center">
266
+ <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4">
267
+ <i class="fas fa-tag text-xl"></i>
268
+ </div>
269
+ <div>
270
+ <h3 class="font-display font-bold text-deep-sage mb-1">Fair Pricing</h3>
271
+ <p class="text-warm-gray text-sm">No hidden fees</p>
272
+ </div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </section>
278
+
279
+ <!-- Why Choose Us Section -->
280
+ <section id="about" class="py-16 bg-white">
281
+ <div class="container mx-auto px-4">
282
+ <div class="text-center mb-12 fade-in">
283
+ <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Why Lexington Chooses Us Over Medical Spas</h2>
284
+ <p class="text-warm-gray max-w-3xl mx-auto">We're changing the beauty industry one authentic experience at a time. Here's what makes us different:</p>
285
+ </div>
286
+
287
+ <div class="flex flex-wrap -mx-4">
288
+ <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-1">
289
+ <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift">
290
+ <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto">
291
+ <i class="fas fa-rainbow text-2xl"></i>
292
+ </div>
293
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Truly Inclusive Space</h3>
294
+ <p class="text-warm-gray text-center">LGBTQ+ friendly, neurodivergent welcoming, all ages and body types celebrated. No judgment, just great care.</p>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-2">
299
+ <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift">
300
+ <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto">
301
+ <i class="fas fa-hand-holding-usd text-2xl"></i>
302
+ </div>
303
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Honest Pricing</h3>
304
+ <p class="text-warm-gray text-center">No hidden fees, membership traps, or medical spa markup. Quality treatments at prices that make sense.</p>
305
+ </div>
306
+ </div>
307
+
308
+ <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-3">
309
+ <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift">
310
+ <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto">
311
+ <i class="fas fa-user-shield text-2xl"></i>
312
+ </div>
313
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Safe for All Skin Tones</h3>
314
+ <p class="text-warm-gray text-center">Advanced technology and training ensure beautiful results for every skin type and tone.</p>
315
+ </div>
316
+ </div>
317
+ </div>
318
+ </div>
319
+ </section>
320
+
321
+ <!-- Services Section -->
322
+ <section id="services" class="py-16 bg-warm-beige">
323
+ <div class="container mx-auto px-4">
324
+ <div class="text-center mb-12">
325
+ <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Real Beauty Treatments, Real Results</h2>
326
+ <p class="text-warm-gray max-w-3xl mx-auto">Professional services without the medical spa price tag</p>
327
+ </div>
328
+
329
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
330
+ <!-- Service 1 -->
331
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
332
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1599351431202-1e0f0137899a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');"></div>
333
+ <div class="p-6">
334
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Laser Hair Removal</h3>
335
+ <p class="text-warm-gray mb-4">Safe, effective hair reduction for all skin types with our advanced laser technology.</p>
336
+ <div class="flex justify-between items-center">
337
+ <span class="font-bold text-sage">From $99/session</span>
338
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
339
+ </div>
340
+ </div>
341
+ </div>
342
+
343
+ <!-- Service 2 -->
344
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
345
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
346
+ <div class="p-6">
347
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Custom Facials</h3>
348
+ <p class="text-warm-gray mb-4">Personalized facial treatments tailored to your unique skin concerns and goals.</p>
349
+ <div class="flex justify-between items-center">
350
+ <span class="font-bold text-sage">From $75</span>
351
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
352
+ </div>
353
+ </div>
354
+ </div>
355
+
356
+ <!-- Service 3 -->
357
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
358
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1596704017255-ee76445b8f4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
359
+ <div class="p-6">
360
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Skin Rejuvenation</h3>
361
+ <p class="text-warm-gray mb-4">Advanced treatments to reduce fine lines, wrinkles, and improve skin texture.</p>
362
+ <div class="flex justify-between items-center">
363
+ <span class="font-bold text-sage">From $120</span>
364
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Service 4 -->
370
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
371
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1556228578-8c2d37ba539d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
372
+ <div class="p-6">
373
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Brow & Lash Services</h3>
374
+ <p class="text-warm-gray mb-4">Professional shaping, tinting, and lash treatments for perfectly framed eyes.</p>
375
+ <div class="flex justify-between items-center">
376
+ <span class="font-bold text-sage">From $45</span>
377
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- Service 5 -->
383
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
384
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1595475207225-4282f49e0d71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1770&q=80');"></div>
385
+ <div class="p-6">
386
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Body Treatments</h3>
387
+ <p class="text-warm-gray mb-4">Exfoliating and hydrating treatments to reveal smooth, glowing skin from head to toe.</p>
388
+ <div class="flex justify-between items-center">
389
+ <span class="font-bold text-sage">From $85</span>
390
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
391
+ </div>
392
+ </div>
393
+ </div>
394
+
395
+ <!-- Service 6 -->
396
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
397
+ <div class="h-48 bg-cover bg-center" style="background-image: url('https://images.unsplash.com/photo-1556228579-4ae5d2476025?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1887&q=80');"></div>
398
+ <div class="p-6">
399
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Teen Services</h3>
400
+ <p class="text-warm-gray mb-4">Specialized treatments designed specifically for teenage skin concerns.</p>
401
+ <div class="flex justify-between items-center">
402
+ <span class="font-bold text-sage">From $65</span>
403
+ <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="text-center mt-12">
410
+ <a href="#booking" class="bg-sage text-white px-8 py-3 rounded-full hover:bg-deep-sage transition font-medium inline-block">View All Services & Pricing</a>
411
+ </div>
412
+ </div>
413
+ </section>
414
+
415
+ <!-- Testimonials Section -->
416
+ <section id="testimonials" class="py-16 bg-white">
417
+ <div class="container mx-auto px-4">
418
+ <div class="text-center mb-12">
419
+ <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">What Our Clients Say</h2>
420
+ <p class="text-warm-gray max-w-3xl mx-auto">Real experiences from our Lexington community</p>
421
+ </div>
422
+
423
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
424
+ <!-- Testimonial 1 -->
425
+ <div class="bg-warm-beige p-8 rounded-lg">
426
+ <div class="flex items-center mb-4">
427
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
428
+ <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J." class="w-full h-full object-cover">
429
+ </div>
430
+ <div>
431
+ <h4 class="font-bold text-deep-sage">Sarah J.</h4>
432
+ <div class="flex text-yellow-400 text-sm">
433
+ <i class="fas fa-star"></i>
434
+ <i class="fas fa-star"></i>
435
+ <i class="fas fa-star"></i>
436
+ <i class="fas fa-star"></i>
437
+ <i class="fas fa-star"></i>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <p class="text-warm-gray italic">"Finally found a place that doesn't try to upsell me at every turn. The laser hair removal results are amazing and the pricing is so fair compared to medical spas."</p>
442
+ </div>
443
+
444
+ <!-- Testimonial 2 -->
445
+ <div class="bg-warm-beige p-8 rounded-lg">
446
+ <div class="flex items-center mb-4">
447
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
448
+ <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T." class="w-full h-full object-cover">
449
+ </div>
450
+ <div>
451
+ <h4 class="font-bold text-deep-sage">Michael T.</h4>
452
+ <div class="flex text-yellow-400 text-sm">
453
+ <i class="fas fa-star"></i>
454
+ <i class="fas fa-star"></i>
455
+ <i class="fas fa-star"></i>
456
+ <i class="fas fa-star"></i>
457
+ <i class="fas fa-star"></i>
458
+ </div>
459
+ </div>
460
+ </div>
461
+ <p class="text-warm-gray italic">"As a guy, I was nervous about getting facial treatments, but the team made me feel completely comfortable. My skin has never looked better!"</p>
462
+ </div>
463
+
464
+ <!-- Testimonial 3 -->
465
+ <div class="bg-warm-beige p-8 rounded-lg">
466
+ <div class="flex items-center mb-4">
467
+ <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
468
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-full h-full object-cover">
469
+ </div>
470
+ <div>
471
+ <h4 class="font-bold text-deep-sage">Emily R.</h4>
472
+ <div class="flex text-yellow-400 text-sm">
473
+ <i class="fas fa-star"></i>
474
+ <i class="fas fa-star"></i>
475
+ <i class="fas fa-star"></i>
476
+ <i class="fas fa-star"></i>
477
+ <i class="fas fa-star"></i>
478
+ </div>
479
+ </div>
480
+ </div>
481
+ <p class="text-warm-gray italic">"Took my teenage daughter here for acne treatments. The esthetician was so patient and knowledgeable. We both get services here now!"</p>
482
+ </div>
483
+ </div>
484
+ </div>
485
+ </section>
486
+
487
+ <!-- Consultation Section -->
488
+ <section id="consultation" class="py-16 bg-gradient-sage text-white">
489
+ <div class="container mx-auto px-4">
490
+ <div class="max-w-4xl mx-auto text-center">
491
+ <h2 class="font-display text-3xl md:text-4xl font-bold mb-6">Not Sure Where to Start?</h2>
492
+ <p class="text-xl mb-8">Schedule a free 15-minute consultation with one of our licensed estheticians. We'll assess your skin and recommend the perfect treatment plan.</p>
493
+ <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
494
+ <a href="#booking" class="bg-white text-sage px-8 py-3 rounded-full hover:bg-warm-beige transition font-medium">Book Free Consultation</a>
495
+ <a href="tel:8595550123" class="border-2 border-white text-white px-8 py-3 rounded-full hover:bg-deep-sage transition font-medium">Call: (859) 555-0123</a>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </section>
500
+
501
+ <!-- Booking Section -->
502
+ <section id="booking" class="py-16 bg-warm-beige">
503
+ <div class="container mx-auto px-4">
504
+ <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden">
505
+ <div class="md:flex">
506
+ <div class="md:w-1/2 bg-soft-sage p-8">
507
+ <h2 class="font-display text-3xl font-bold text-deep-sage mb-4">Book Your Appointment</h2>
508
+ <p class="text-warm-gray mb-6">Choose your service and schedule your visit in just a few clicks</p>
509
+
510
+ <div class="mb-6">
511
+ <h3 class="font-bold text-deep-sage mb-2">Ready to Get Started?</h3>
512
+ <p class="text-warm-gray text-sm mb-4">What service interests you most?</p>
513
+ <select class="w-full border border-sage rounded px-4 py-2 text-warm-gray focus:outline-none focus:ring-2 focus:ring-sage">
514
+ <option>Select a service...</option>
515
+ <option>Laser Hair Removal</option>
516
+ <option>Custom Facial</option>
517
+ <option>Skin Rejuvenation</option>
518
+ <option>Brow & Lash Services</option>
519
+ <option>Body Treatments</option>
520
+ <option>Teen Services</option>
521
+ <option>Free Consultation</option>
522
+ </select>
523
+ </div>
524
+
525
+ <div class="mb-6">
526
+ <h3 class="font-bold text-deep-sage mb-2">Contact Information</h3>
527
+ <div class="flex items-center text-warm-gray mb-2">
528
+ <i class="fas fa-phone-alt mr-2"></i>
529
+ <span>(859) 555-0123</span>
530
+ </div>
531
+ <div class="flex items-center text-warm-gray mb-2">
532
+ <i class="fas fa-envelope mr-2"></i>
533
+ <span>[email protected]</span>
534
+ </div>
535
+ <div class="flex items-center text-warm-gray">
536
+ <i class="fas fa-clock mr-2"></i>
537
+ <span>Tue-Sat 9AM-7PM</span>
538
+ </div>
539
+ </div>
540
+
541
+ <div>
542
+ <h3 class="font-bold text-deep-sage mb-2">Why Book With Us?</h3>
543
+ <ul class="text-warm-gray text-sm space-y-1">
544
+ <li class="flex items-start">
545
+ <i class="fas fa-check text-sage mr-2 mt-1"></i>
546
+ <span>No pressure consultations</span>
547
+ </li>
548
+ <li class="flex items-start">
549
+ <i class="fas fa-check text-sage mr-2 mt-1"></i>
550
+ <span>Flexible rescheduling</span>
551
+ </li>
552
+ <li class="flex items-start">
553
+ <i class="fas fa-check text-sage mr-2 mt-1"></i>
554
+ <span>All skin tones welcome</span>
555
+ </li>
556
+ <li class="flex items-start">
557
+ <i class="fas fa-check text-sage mr-2 mt-1"></i>
558
+ <span>Teen-friendly services</span>
559
+ </li>
560
+ <li class="flex items-start">
561
+ <i class="fas fa-check text-sage mr-2 mt-1"></i>
562
+ <span>Fair, transparent pricing</span>
563
+ </li>
564
+ </ul>
565
+ </div>
566
+ </div>
567
+
568
+ <div class="md:w-1/2 p-8">
569
+ <h3 class="font-display text-xl font-bold text-deep-sage mb-4">📅 Schedule Online</h3>
570
+ <p class="text-warm-gray mb-6">Select your preferred date and time below</p>
571
+
572
+ <!-- Calendar Placeholder -->
573
+ <div class="bg-gray-100 rounded-lg p-4 mb-6 text-center" style="min-height: 300px;">
574
+ <p class="text-warm-gray">Calendar integration would appear here</p>
575
+ </div>
576
+
577
+ <div class="text-center text-sm text-warm-gray">
578
+ <p class="mb-2">Prefer to call or text?</p>
579
+ <a href="tel:8595550123" class="text-sage font-medium hover:text-deep-sage">
580
+ <i class="fas fa-phone-alt mr-1"></i> Call (859) 555-0123
581
+ </a>
582
+ </div>
583
+ </div>
584
+ </div>
585
+ </div>
586
+ </div>
587
+ </section>
588
+
589
+ <!-- Contact Section -->
590
+ <section id="contact" class="py-16 bg-white">
591
+ <div class="container mx-auto px-4">
592
+ <div class="text-center mb-12">
593
+ <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Visit Our Lexington Studio</h2>
594
+ <p class="text-warm-gray max-w-3xl mx-auto">We'd love to welcome you to our modern wellness sanctuary</p>
595
+ </div>
596
+
597
+ <div class="flex flex-col lg:flex-row -mx-4">
598
+ <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
599
+ <div class="bg-warm-beige rounded-lg overflow-hidden h-full">
600
+ <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3142.27422710416!2d-84.5009849241736!3d38.04097197190948!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x884244a3a8be1a11%3A0x2d9b8b1b3b9b9b9b!2s123%20Main%20St%2C%20Lexington%2C%20KY%2040507!5e0!3m2!1sen!2sus!4v1689876543210!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
601
+ </div>
602
+ </div>
603
+
604
+ <div class="w-full lg:w-1/2 px-4">
605
+ <div class="bg-warm-beige p-8 rounded-lg h-full">
606
+ <h3 class="font-display text-2xl font-bold text-deep-sage mb-4">Contact Form</h3>
607
+ <form>
608
+ <div class="mb-4">
609
+ <label for="name" class="block text-warm-gray mb-2">Full Name</label>
610
+ <input type="text" id="name" class="w-full border border-sage rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sage">
611
+ </div>
612
+ <div class="mb-4">
613
+ <label for="email" class="block text-warm-gray mb-2">Email</label>
614
+ <input type="email" id="email" class="w-full border border-sage rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sage">
615
+ </div>
616
+ <div class="mb-4">
617
+ <label for="phone" class="block text-warm-gray mb-2">Phone</label>
618
+ <input type="tel" id="phone" class="w-full border border-sage rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sage">
619
+ </div>
620
+ <div class="mb-4">
621
+ <label for="service" class="block text-warm-gray mb-2">Service Interest</label>
622
+ <select id="service" class="w-full border border-sage rounded px-4 py-2 text-warm-gray focus:outline-none focus:ring-2 focus:ring-sage">
623
+ <option>Select a service...</option>
624
+ <option>Laser Hair Removal</option>
625
+ <option>Custom Facial</option>
626
+ <option>Skin Rejuvenation</option>
627
+ <option>Brow & Lash Services</option>
628
+ <option>Body Treatments</option>
629
+ <option>Teen Services</option>
630
+ <option>Free Consultation</option>
631
+ </select>
632
+ </div>
633
+ <div class="mb-4">
634
+ <label for="message" class="block text-warm-gray mb-2">Message</label>
635
+ <textarea id="message" rows="4" class="w-full border border-sage rounded px-4 py-2 focus:outline-none focus:ring-2 focus:ring-sage"></textarea>
636
+ </div>
637
+ <button type="submit" class="bg-sage text-white px-8 py-3 rounded-full hover:bg-deep-sage transition font-medium w-full">Send Message</button>
638
+ </form>
639
+ </div>
640
+ </div>
641
+ </div>
642
+ </div>
643
+ </section>
644
+
645
+ <!-- Footer -->
646
+ <footer class="bg-deep-sage text-white py-12">
647
+ <div class="container mx-auto px-4">
648
+ <div class="flex flex-col md:flex-row justify-between">
649
+ <div class="mb-8 md:mb-0">
650
+ <div class="flex items-center mb-4">
651
+ <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-deep-sage font-display text-lg font-bold mr-3">LSB</div>
652
+ <h3 class="font-display text-xl font-bold">Lexington Smooth Beauty</h3>
653
+ </div>
654
+ <p class="text-soft-sage max-w-xs mb-4">Lexington's authentic alternative to overpriced medical spas. Quality treatments, fair prices, genuine care.</p>
655
+ <div class="flex space-x-4">
656
+ <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-instagram text-xl"></i></a>
657
+ <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-facebook text-xl"></i></a>
658
+ <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-yelp text-xl"></i></a>
659
+ </div>
660
+ </div>
661
+
662
+ <div class="mb-8 md:mb-0">
663
+ <h4 class="font-display text-lg font-bold mb-4">Contact Info</h4>
664
+ <ul class="space-y-2">
665
+ <li class="flex items-start">
666
+ <i class="fas fa-phone-alt mt-1 mr-2"></i>
667
+ <span>(859) 555-0123</span>
668
+ </li>
669
+ <li class="flex items-start">
670
+ <i class="fas fa-envelope mt-1 mr-2"></i>
671
+ <span>[email protected]</span>
672
+ </li>
673
+ <li class="flex items-start">
674
+ <i class="fas fa-map-marker-alt mt-1 mr-2"></i>
675
+ <span>123 Main Street<br>Lexington, KY 40507</span>
676
+ </li>
677
+ </ul>
678
+ </div>
679
+
680
+ <div>
681
+ <h4 class="font-display text-lg font-bold mb-4">Quick Book</h4>
682
+ <p class="text-soft-sage mb-4">Ready to book? Get started in seconds:</p>
683
+ <a href="#booking" class="bg-white text-deep-sage px-6 py-2 rounded-full hover:bg-warm-beige transition font-medium inline-block">Book Now</a>
684
+ </div>
685
+ </div>
686
+
687
+ <div class="border-t border-soft-sage mt-12 pt-6 text-center text-soft-sage">
688
+ <p>© <span id="year"></span> Lexington Smooth Beauty. All rights reserved.</p>
689
+ <p class="text-sm mt-1">Authentic beauty treatments • Fair pricing • All welcome</p>
690
+ </div>
691
+ </div>
692
+ </footer>
693
+
694
+ <!-- Sticky CTA Button -->
695
+ <div class="sticky-cta md:hidden">
696
+ <a href="#booking" class="bg-sage text-white px-6 py-3 rounded-full shadow-lg flex items-center justify-center">
697
+ <i class="fas fa-calendar-alt mr-2"></i> Book Now
698
+ </a>
699
+ </div>
700
+
701
+ <!-- Mobile Menu Script -->
702
+ <script>
703
+ // Mobile menu toggle
704
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
705
+ const menu = document.getElementById('mobile-menu');
706
+ menu.classList.toggle('hidden');
707
+ });
708
+
709
+ // Set current year in footer
710
+ document.getElementById('year').textContent = new Date().getFullYear();
711
+
712
+ // Fade-in animation for elements
713
+ document.addEventListener('DOMContentLoaded', function() {
714
+ const fadeElements = document.querySelectorAll('.fade-in');
715
+
716
+ const fadeInObserver = new IntersectionObserver((entries) => {
717
+ entries.forEach(entry => {
718
+ if (entry.isIntersecting) {
719
+ entry.target.classList.add('opacity-100');
720
+ }
721
+ });
722
+ }, { threshold: 0.1 });
723
+
724
+ fadeElements.forEach(element => {
725
+ element.classList.add('opacity-0');
726
+ fadeInObserver.observe(element);
727
+ });
728
+ });
729
+ </script>
730
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Bearbeardog/smoothlex" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
731
+ </html>