Spaces:
Running
Running
we ant to include the mens grooming on the front page as well. - Follow Up Deployment
689b759
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes"> | |
| <title>Laser Hair Removal & Facials in Lexington KY | Lexington Smooth Beauty</title> | |
| <meta name="description" content="Lexington's top-rated spa for laser hair removal, facials & men's grooming. FDA-approved treatments with honest pricing. Book your appointment online today."> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link 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"> | |
| <script type="application/ld+json"> | |
| { | |
| "@context": "https://schema.org", | |
| "@type": "BeautySalon", | |
| "name": "Lexington Smooth Beauty", | |
| "image": "https://lexingtonsmoothbeauty.com/images/logo.jpg", | |
| "@id": "", | |
| "url": "https://lexingtonsmoothbeauty.com", | |
| "telephone": "(859) 555-0123", | |
| "address": { | |
| "@type": "PostalAddress", | |
| "streetAddress": "123 Main Street", | |
| "addressLocality": "Lexington", | |
| "addressRegion": "KY", | |
| "postalCode": "40507", | |
| "addressCountry": "US" | |
| }, | |
| "geo": { | |
| "@type": "GeoCoordinates", | |
| "latitude": 38.0409719, | |
| "longitude": -84.5009849 | |
| }, | |
| "openingHoursSpecification": { | |
| "@type": "OpeningHoursSpecification", | |
| "dayOfWeek": [ | |
| "Tuesday", | |
| "Wednesday", | |
| "Thursday", | |
| "Friday", | |
| "Saturday" | |
| ], | |
| "opens": "09:00", | |
| "closes": "19:00" | |
| }, | |
| "priceRange": "$", | |
| "sameAs": [ | |
| "https://www.facebook.com/lexingtonsmoothbeauty", | |
| "https://www.instagram.com/lexingtonsmoothbeauty" | |
| ] | |
| } | |
| </script> | |
| <style> | |
| /* Mobile-first base styles */ | |
| html { | |
| font-size: 16px; | |
| } | |
| @media (min-width: 640px) { | |
| html { | |
| font-size: 18px; | |
| } | |
| } | |
| :root { | |
| --sage-green: #7A8B6F; | |
| --warm-beige: #F5F1EB; | |
| --soft-sage: #E8F0E3; | |
| --deep-sage: #5A6B4F; | |
| --warm-gray: #6D625C; | |
| --cream: #FEFCF8; | |
| --text-dark: #2D3748; | |
| --text-medium: #4A5568; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| color: var(--text-dark); | |
| background-color: var(--cream); | |
| } | |
| .font-display { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .bg-sage { | |
| background-color: var(--sage-green); | |
| } | |
| .bg-warm-beige { | |
| background-color: var(--warm-beige); | |
| } | |
| .bg-soft-sage { | |
| background-color: var(--soft-sage); | |
| } | |
| .bg-cream { | |
| background-color: var(--cream); | |
| } | |
| .text-sage { | |
| color: var(--sage-green); | |
| } | |
| .text-deep-sage { | |
| color: var(--deep-sage); | |
| } | |
| .text-warm-gray { | |
| color: var(--warm-gray); | |
| } | |
| .border-sage { | |
| border-color: var(--sage-green); | |
| } | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.1); | |
| } | |
| .gradient-sage { | |
| background: linear-gradient(135deg, var(--soft-sage) 0%, var(--sage-green) 100%); | |
| } | |
| .sticky-cta { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| z-index: 2000; | |
| left: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0,0,0,0.5); | |
| } | |
| .modal.show { | |
| display: flex; | |
| } | |
| .service-card { | |
| background: white; | |
| border: 2px solid var(--soft-sage); | |
| transition: all 0.3s ease; | |
| } | |
| .service-card:hover { | |
| border-color: var(--sage-green); | |
| transform: translateY(-3px); | |
| box-shadow: 0 8px 25px rgba(156, 175, 136, 0.15); | |
| } | |
| .promo-bar { | |
| background: linear-gradient(90deg, var(--sage-green), var(--deep-sage)); | |
| animation: slideIn 0.5s ease-out; | |
| } | |
| @keyframes slideIn { | |
| from { transform: translateY(-100%); } | |
| to { transform: translateY(0); } | |
| } | |
| /* Custom animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| animation: fadeIn 0.8s ease-out forwards; | |
| } | |
| .delay-1 { | |
| animation-delay: 0.2s; | |
| } | |
| .delay-2 { | |
| animation-delay: 0.4s; | |
| } | |
| .delay-3 { | |
| animation-delay: 0.6s; | |
| } | |
| /* Hero background */ | |
| .hero-bg { | |
| background-image: linear-gradient(rgba(245, 241, 235, 0.9), rgba(245, 241, 235, 0.9)), | |
| 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'); | |
| background-size: cover; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-cream"> | |
| <!-- Promo Bar --> | |
| <div class="promo-bar text-white text-center py-2 px-4"> | |
| <div class="container mx-auto flex items-center justify-center"> | |
| <span class="font-bold mr-2">🌿 New Client Special:</span> | |
| <span>Free consultation + $15 credit toward any service</span> | |
| <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> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <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> | |
| <div class="ml-3"> | |
| <h1 class="font-display text-xl font-bold text-deep-sage">Lexington Smooth Beauty</h1> | |
| <p class="text-xs text-warm-gray">Modern Wellness Sanctuary</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:block"> | |
| <ul class="flex space-x-8"> | |
| <li><a href="#" class="text-deep-sage hover:text-sage font-medium transition">Home</a></li> | |
| <li><a href="#services" class="text-deep-sage hover:text-sage font-medium transition">Services</a></li> | |
| <li><a href="#about" class="text-deep-sage hover:text-sage font-medium transition">About</a></li> | |
| <li><a href="/glossary" class="text-deep-sage hover:text-sage font-medium transition">Glossary</a></li> | |
| <li><a href="#testimonials" class="text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li> | |
| <li><a href="#contact" class="text-deep-sage hover:text-sage font-medium transition">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="hidden md:block"> | |
| <a href="#booking" class="bg-sage text-white px-6 py-3 rounded-full hover:bg-deep-sage transition font-medium min-w-[120px] text-center">Book Now</a> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-deep-sage"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white border-t border-soft-sage" aria-hidden="true"> | |
| <div class="container mx-auto px-4 py-3"> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="block text-deep-sage hover:text-sage font-medium transition">Home</a></li> | |
| <li><a href="#services" class="block text-deep-sage hover:text-sage font-medium transition">Services</a></li> | |
| <li><a href="#about" class="block text-deep-sage hover:text-sage font-medium transition">About</a></li> | |
| <li><a href="#testimonials" class="block text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li> | |
| <li><a href="#contact" class="block text-deep-sage hover:text-sage font-medium transition">Contact</a></li> | |
| <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> | |
| </ul> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-bg py-16 sm:py-20 md:py-32"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-2xl fade-in"> | |
| <!-- CMS Editable Region: Hero Title --> | |
| <h1 class="font-display text-3xl sm:text-4xl md:text-5xl font-bold text-deep-sage mb-4" data-cms-editable="hero_title">#1 Laser Hair Removal & Facials in Lexington KY</h1> | |
| <!-- CMS Editable Region: Hero Text --> | |
| <p class="text-lg md:text-xl text-warm-gray mb-8" data-cms-editable="hero_text">Medical-grade treatments without the medspa prices. Serving women, men & teens with FDA-approved technology. Voted best spa in Lexington 3 years running.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <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> | |
| <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> | |
| </div> | |
| <div class="flex items-center mt-8 space-x-4"> | |
| <div class="flex space-x-1 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <span class="text-warm-gray">200+ 5-star reviews</span> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Benefits Section --> | |
| <section class="py-12 bg-warm-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-wrap -mx-2"> | |
| <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4"> | |
| <i class="fas fa-heart text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-display font-bold text-deep-sage mb-1">No Pressure</h3> | |
| <p class="text-warm-gray text-sm">Honest advice, no upsells</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4"> | |
| <i class="fas fa-users text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-display font-bold text-deep-sage mb-1">All Welcome</h3> | |
| <p class="text-warm-gray text-sm">Women, men & teens</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full sm:w-1/2 md:w-1/3 px-2 mb-4"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm h-full flex items-center"> | |
| <div class="w-12 h-12 rounded-full bg-soft-sage flex items-center justify-center text-sage mr-4"> | |
| <i class="fas fa-tag text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-display font-bold text-deep-sage mb-1">Fair Pricing</h3> | |
| <p class="text-warm-gray text-sm">No hidden fees</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12 fade-in"> | |
| <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Why Lexington Chooses Us Over Medical Spas</h2> | |
| <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> | |
| </div> | |
| <div class="flex flex-wrap -mx-4"> | |
| <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-1"> | |
| <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift"> | |
| <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-rainbow text-2xl"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Truly Inclusive Space</h3> | |
| <p class="text-warm-gray text-center">LGBTQ+ friendly, neurodivergent welcoming, all ages and body types celebrated. No judgment, just great care.</p> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-2"> | |
| <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift"> | |
| <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-hand-holding-usd text-2xl"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Honest Pricing</h3> | |
| <p class="text-warm-gray text-center">No hidden fees, membership traps, or medical spa markup. Quality treatments at prices that make sense.</p> | |
| </div> | |
| </div> | |
| <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 fade-in delay-3"> | |
| <div class="bg-soft-sage p-8 rounded-lg h-full hover-lift"> | |
| <div class="w-16 h-16 rounded-full bg-sage text-white flex items-center justify-center mb-4 mx-auto"> | |
| <i class="fas fa-user-shield text-2xl"></i> | |
| </div> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-3 text-center">Safe for All Skin Tones</h3> | |
| <p class="text-warm-gray text-center">Advanced technology and training ensure beautiful results for every skin type and tone.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-16 bg-warm-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Best Spa Treatments in Lexington KY</h2> | |
| <p class="text-warm-gray max-w-3xl mx-auto">Medical-grade laser hair removal, facials & anti-aging treatments at affordable prices</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- CMS Repeatable: Services --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift" data-cms-repeatable="services"> | |
| <!-- CMS Image Upload: Service 1 --> | |
| <div class="h-48 bg-cover bg-center" style="background-image: url('[% cms.asset service1_image type:'image' default:'/images/service1-placeholder.jpg' %]');"></div> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Laser Hair Removal</h3> | |
| <p class="text-warm-gray mb-4">Safe, effective hair reduction for all skin types with our advanced laser technology.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $99/session</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift"> | |
| <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> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Custom Facials</h3> | |
| <p class="text-warm-gray mb-4">Personalized facial treatments tailored to your unique skin concerns and goals.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $75</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift"> | |
| <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> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Skin Rejuvenation</h3> | |
| <p class="text-warm-gray mb-4">Advanced treatments to reduce fine lines, wrinkles, and improve skin texture.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $120</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift"> | |
| <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> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Brow & Lash Services</h3> | |
| <p class="text-warm-gray mb-4">Professional shaping, tinting, and lash treatments for perfectly framed eyes.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $45</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift"> | |
| <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> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Body Treatments</h3> | |
| <p class="text-warm-gray mb-4">Exfoliating and hydrating treatments to reveal smooth, glowing skin from head to toe.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $85</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift"> | |
| <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> | |
| <div class="p-6"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Teen Services</h3> | |
| <p class="text-warm-gray mb-4">Specialized treatments designed specifically for teenage skin concerns.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-sage">From $65</span> | |
| <button class="text-sage hover:text-deep-sage font-medium">Learn More →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <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> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">What Our Clients Say</h2> | |
| <p class="text-warm-gray max-w-3xl mx-auto">Real experiences from our Lexington community</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- CMS Editable Testimonial 1 --> | |
| <div class="bg-warm-beige p-8 rounded-lg" data-cms-repeatable="testimonials"> | |
| <div class="flex items-center mb-4"> | |
| <!-- CMS Image Upload: Testimonial Avatar --> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="[% cms.asset testimonial_avatar type:'image' default:'/images/avatar-placeholder.jpg' %]" alt="[% cms.text testimonial_name default:'Client Name' %]" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <!-- CMS Editable: Testimonial Name --> | |
| <h4 class="font-bold text-deep-sage" data-cms-editable="testimonial_name">Sarah J.</h4> | |
| <!-- CMS Editable: Testimonial Rating --> | |
| <div class="flex text-yellow-400 text-sm" data-cms-editable="testimonial_rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CMS Editable: Testimonial Text --> | |
| <p class="text-warm-gray italic" data-cms-editable="testimonial_text">"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> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-warm-beige p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-deep-sage">Michael T.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-warm-beige p-8 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily R." class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-deep-sage">Emily R.</h4> | |
| <div class="flex text-yellow-400 text-sm"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Consultation Section --> | |
| <section id="consultation" class="py-16 bg-gradient-sage text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto text-center"> | |
| <h2 class="font-display text-3xl md:text-4xl font-bold mb-6">Not Sure Where to Start?</h2> | |
| <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> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <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> | |
| <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> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Booking Section --> | |
| <section id="booking" class="py-16 bg-warm-beige"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-sm overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 bg-soft-sage p-8"> | |
| <h2 class="font-display text-3xl font-bold text-deep-sage mb-4">Book Your Appointment</h2> | |
| <p class="text-warm-gray mb-6">Choose your service and schedule your visit in just a few clicks</p> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-deep-sage mb-2">Ready to Get Started?</h3> | |
| <p class="text-warm-gray text-sm mb-4">What service interests you most?</p> | |
| <select class="w-full border border-sage rounded px-4 py-2 text-warm-gray focus:outline-none focus:ring-2 focus:ring-sage"> | |
| <option>Select a service...</option> | |
| <option>Laser Hair Removal</option> | |
| <option>Custom Facial</option> | |
| <option>Skin Rejuvenation</option> | |
| <option>Brow & Lash Services</option> | |
| <option>Body Treatments</option> | |
| <option>Teen Services</option> | |
| <option>Free Consultation</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-bold text-deep-sage mb-2">Contact Information</h3> | |
| <div class="flex items-center text-warm-gray mb-2"> | |
| <i class="fas fa-phone-alt mr-2"></i> | |
| <span>(859) 555-0123</span> | |
| </div> | |
| <div class="flex items-center text-warm-gray mb-2"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>hello@lexingtonsmoothbeauty.com</span> | |
| </div> | |
| <div class="flex items-center text-warm-gray"> | |
| <i class="fas fa-clock mr-2"></i> | |
| <span>Tue-Sat 9AM-7PM</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="font-bold text-deep-sage mb-2">Why Book With Us?</h3> | |
| <ul class="text-warm-gray text-sm space-y-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-sage mr-2 mt-1"></i> | |
| <span>No pressure consultations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-sage mr-2 mt-1"></i> | |
| <span>Flexible rescheduling</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-sage mr-2 mt-1"></i> | |
| <span>All skin tones welcome</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-sage mr-2 mt-1"></i> | |
| <span>Teen-friendly services</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-sage mr-2 mt-1"></i> | |
| <span>Fair, transparent pricing</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="font-display text-xl font-bold text-deep-sage mb-4">📅 Schedule Online</h3> | |
| <p class="text-warm-gray mb-6">Select your preferred date and time below</p> | |
| <!-- Calendar Placeholder --> | |
| <div class="bg-gray-100 rounded-lg p-4 mb-6 text-center" style="min-height: 300px;"> | |
| <p class="text-warm-gray">Calendar integration would appear here</p> | |
| </div> | |
| <div class="text-center text-sm text-warm-gray"> | |
| <p class="mb-2">Prefer to call or text?</p> | |
| <a href="tel:8595550123" class="text-sage font-medium hover:text-deep-sage"> | |
| <i class="fas fa-phone-alt mr-1"></i> Call (859) 555-0123 | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="font-display text-3xl md:text-4xl font-bold text-deep-sage mb-4">Visit Our Lexington Studio</h2> | |
| <p class="text-warm-gray max-w-3xl mx-auto">We'd love to welcome you to our modern wellness sanctuary</p> | |
| </div> | |
| <div class="flex flex-col lg:flex-row -mx-4"> | |
| <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0"> | |
| <div class="bg-warm-beige rounded-lg overflow-hidden h-full"> | |
| <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> | |
| </div> | |
| </div> | |
| <div class="w-full lg:w-1/2 px-4"> | |
| <div class="bg-warm-beige p-8 rounded-lg h-full"> | |
| <h3 class="font-display text-2xl font-bold text-deep-sage mb-4">Contact Form</h3> | |
| <form> | |
| <div class="mb-4"> | |
| <label for="name" class="block text-warm-gray mb-2">Full Name</label> | |
| <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"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="email" class="block text-warm-gray mb-2">Email</label> | |
| <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"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="phone" class="block text-warm-gray mb-2">Phone</label> | |
| <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"> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="service" class="block text-warm-gray mb-2">Service Interest</label> | |
| <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"> | |
| <option>Select a service...</option> | |
| <option>Laser Hair Removal</option> | |
| <option>Custom Facial</option> | |
| <option>Skin Rejuvenation</option> | |
| <option>Brow & Lash Services</option> | |
| <option>Body Treatments</option> | |
| <option>Teen Services</option> | |
| <option>Free Consultation</option> | |
| </select> | |
| </div> | |
| <div class="mb-4"> | |
| <label for="message" class="block text-warm-gray mb-2">Message</label> | |
| <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> | |
| </div> | |
| <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> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-deep-sage text-soft-sage py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between"> | |
| <div class="mb-8 md:mb-0"> | |
| <div class="flex items-center mb-4"> | |
| <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> | |
| <h3 class="font-display text-xl font-bold text-white">Lexington Smooth Beauty</h3> | |
| </div> | |
| <!-- CMS Editable: Footer Description --> | |
| <p class="text-soft-sage max-w-xs mb-4" data-cms-editable="footer_description">Lexington's authentic alternative to overpriced medical spas. Quality treatments, fair prices, genuine care.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-instagram text-xl"></i></a> | |
| <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-facebook text-xl"></i></a> | |
| <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-yelp text-xl"></i></a> | |
| </div> | |
| </div> | |
| <div class="mb-8 md:mb-0"> | |
| <h4 class="font-display text-lg font-bold text-white mb-4">Contact Info</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-2"></i> | |
| <span>(859) 555-0123</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-2"></i> | |
| <span>hello@lexingtonsmoothbeauty.com</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2"></i> | |
| <span>123 Main Street<br>Lexington, KY 40507</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-display text-lg font-bold text-white mb-4">Quick Book</h4> | |
| <p class="text-soft-sage mb-4">Ready to book? Get started in seconds:</p> | |
| <a href="/book-now" class="bg-white text-deep-sage px-6 py-2 rounded-full hover:bg-warm-beige transition font-medium inline-block">Book Now</a> | |
| <p class="text-sm text-soft-sage mt-2">Or <a href="#promo-modal" class="underline hover:text-white" id="show-promo">view current promotions</a></p> | |
| </div> | |
| </div> | |
| <div class="border-t border-soft-sage mt-12 pt-6 text-center text-soft-sage"> | |
| <p>© <span id="year"></span> Lexington Smooth Beauty. All rights reserved.</p> | |
| <p class="text-sm mt-1">Authentic beauty treatments • Fair pricing • All welcome</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Sticky CTA Button --> | |
| <div class="sticky-cta md:hidden"> | |
| <a href="#booking" class="bg-sage text-white px-6 py-3 rounded-full shadow-lg flex items-center justify-center"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Book Now | |
| </a> | |
| </div> | |
| <!-- Calendly Embed --> | |
| <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet"> | |
| <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script> | |
| <!-- Promotion Popup Modal --> | |
| <div id="promo-modal" class="modal hidden" aria-hidden="true" role="dialog" aria-modal="true" aria-labelledby="promo-modal-title"> | |
| <div class="modal-content bg-white rounded-lg p-8 max-w-md mx-auto my-12 relative"> | |
| <button id="close-modal" class="absolute top-4 right-4 text-warm-gray hover:text-sage"> | |
| <i class="fas fa-times text-2xl"></i> | |
| </button> | |
| <h3 class="font-display text-2xl font-bold text-deep-sage mb-4">Limited Time Offer!</h3> | |
| <p class="text-warm-gray mb-6">Get 20% off your first laser hair removal treatment when you book today.</p> | |
| <div | |
| class="calendly-inline-widget" | |
| data-url="https://calendly.com/your-username/consultation" | |
| style="min-width:320px;height:500px;"> | |
| </div> | |
| <p class="text-sm text-warm-gray mt-4">By booking, you agree to our <a href="/privacy" class="text-sage hover:underline">privacy policy</a>.</p> | |
| </div> | |
| </div> | |
| <!-- Mobile Menu Script --> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| const isExpanded = this.getAttribute('aria-expanded') === 'true'; | |
| menu.classList.toggle('hidden'); | |
| menu.setAttribute('aria-hidden', isExpanded); | |
| this.setAttribute('aria-expanded', !isExpanded); | |
| }); | |
| // Set current year in footer | |
| document.getElementById('year').textContent = new Date().getFullYear(); | |
| // Promotion modal handling | |
| document.getElementById('show-promo').addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.getElementById('promo-modal').classList.remove('hidden'); | |
| }); | |
| document.getElementById('close-modal').addEventListener('click', function() { | |
| document.getElementById('promo-modal').classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| window.addEventListener('click', function(e) { | |
| if (e.target === document.getElementById('promo-modal')) { | |
| document.getElementById('promo-modal').classList.add('hidden'); | |
| } | |
| }); | |
| // Intersection Observer for animations | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| if (fadeElements.length > 0) { | |
| const fadeInObserver = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| } | |
| }); | |
| }, { | |
| threshold: 0.1, | |
| rootMargin: '0px 0px -50px 0px' | |
| }); | |
| fadeElements.forEach(element => { | |
| fadeInObserver.observe(element); | |
| }); | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |