Hugging Face's logo

Spaces:
Bearbeardog
/
smoothlex
Running

App Files Community
Bearbeardog commited on
Commit
c9b899e
·
verified ·
1 Parent(s): 65f8017

prepare this for a cms so that all text and parts of the page can be edited. add pictures where they are missing. the ones on it now are great - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +84 -24
index.html CHANGED
@@ -2,7 +2,7 @@
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>Laser Hair Removal & Facials in Lexington KY | Lexington Smooth Beauty</title>
7
  <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.">
8
  <script src="https://cdn.tailwindcss.com"></script>
@@ -50,18 +50,30 @@
50
  }
51
  </script>
52
  <style>
 
 
 
 
 
 
 
 
 
 
53
  :root {
54
- --sage-green: #9CAF88;
55
  --warm-beige: #F5F1EB;
56
  --soft-sage: #E8F0E3;
57
- --deep-sage: #7A8B6F;
58
- --warm-gray: #A89B94;
59
  --cream: #FEFCF8;
 
 
60
  }
61
 
62
  body {
63
  font-family: 'Inter', sans-serif;
64
- color: #2c3e50;
65
  background-color: var(--cream);
66
  }
67
 
@@ -223,13 +235,14 @@
223
  <li><a href="#" class="text-deep-sage hover:text-sage font-medium transition">Home</a></li>
224
  <li><a href="#services" class="text-deep-sage hover:text-sage font-medium transition">Services</a></li>
225
  <li><a href="#about" class="text-deep-sage hover:text-sage font-medium transition">About</a></li>
 
226
  <li><a href="#testimonials" class="text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li>
227
  <li><a href="#contact" class="text-deep-sage hover:text-sage font-medium transition">Contact</a></li>
228
  </ul>
229
  </nav>
230
 
231
  <div class="hidden md:block">
232
- <a href="#booking" class="bg-sage text-white px-6 py-2 rounded-full hover:bg-deep-sage transition font-medium">Book Now</a>
233
  </div>
234
 
235
  <button id="mobile-menu-button" class="md:hidden text-deep-sage">
@@ -254,11 +267,13 @@
254
  </header>
255
 
256
  <!-- Hero Section -->
257
- <section class="hero-bg py-20 md:py-32">
258
  <div class="container mx-auto px-4">
259
  <div class="max-w-2xl fade-in">
260
- <h1 class="font-display text-4xl md:text-5xl font-bold text-deep-sage mb-4">#1 Laser Hair Removal & Facials in Lexington KY</h1>
261
- <p class="text-lg md:text-xl text-warm-gray mb-8">Medical-grade treatments without the medspa prices. Serving women, men & teens with FDA-approved technology. Voted best spa in Lexington 3 years running.</p>
 
 
262
  <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
263
  <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>
264
  <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>
@@ -369,9 +384,10 @@
369
  </div>
370
 
371
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
372
- <!-- Service 1 -->
373
- <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift">
374
- <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>
 
375
  <div class="p-6">
376
  <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Laser Hair Removal</h3>
377
  <p class="text-warm-gray mb-4">Safe, effective hair reduction for all skin types with our advanced laser technology.</p>
@@ -463,15 +479,18 @@
463
  </div>
464
 
465
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
466
- <!-- Testimonial 1 -->
467
- <div class="bg-warm-beige p-8 rounded-lg">
468
  <div class="flex items-center mb-4">
 
469
  <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
470
- <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J. - Laser Hair Removal Client at Lexington Smooth Beauty" class="w-full h-full object-cover">
471
  </div>
472
  <div>
473
- <h4 class="font-bold text-deep-sage">Sarah J.</h4>
474
- <div class="flex text-yellow-400 text-sm">
 
 
475
  <i class="fas fa-star"></i>
476
  <i class="fas fa-star"></i>
477
  <i class="fas fa-star"></i>
@@ -480,7 +499,8 @@
480
  </div>
481
  </div>
482
  </div>
483
- <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>
 
484
  </div>
485
 
486
  <!-- Testimonial 2 -->
@@ -685,15 +705,16 @@
685
  </section>
686
 
687
  <!-- Footer -->
688
- <footer class="bg-deep-sage text-white py-12">
689
  <div class="container mx-auto px-4">
690
  <div class="flex flex-col md:flex-row justify-between">
691
  <div class="mb-8 md:mb-0">
692
  <div class="flex items-center mb-4">
693
  <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>
694
- <h3 class="font-display text-xl font-bold">Lexington Smooth Beauty</h3>
695
  </div>
696
- <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>
 
697
  <div class="flex space-x-4">
698
  <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-instagram text-xl"></i></a>
699
  <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-facebook text-xl"></i></a>
@@ -702,7 +723,7 @@
702
  </div>
703
 
704
  <div class="mb-8 md:mb-0">
705
- <h4 class="font-display text-lg font-bold mb-4">Contact Info</h4>
706
  <ul class="space-y-2">
707
  <li class="flex items-start">
708
  <i class="fas fa-phone-alt mt-1 mr-2"></i>
@@ -720,9 +741,10 @@
720
  </div>
721
 
722
  <div>
723
- <h4 class="font-display text-lg font-bold mb-4">Quick Book</h4>
724
  <p class="text-soft-sage mb-4">Ready to book? Get started in seconds:</p>
725
- <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>
 
726
  </div>
727
  </div>
728
 
@@ -740,6 +762,27 @@
740
  </a>
741
  </div>
742
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
743
  <!-- Mobile Menu Script -->
744
  <script>
745
  // Mobile menu toggle
@@ -750,6 +793,23 @@
750
 
751
  // Set current year in footer
752
  document.getElementById('year').textContent = new Date().getFullYear();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
753
 
754
  // Fade-in animation for elements
755
  document.addEventListener('DOMContentLoaded', function() {
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0, user-scalable=yes">
6
  <title>Laser Hair Removal & Facials in Lexington KY | Lexington Smooth Beauty</title>
7
  <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.">
8
  <script src="https://cdn.tailwindcss.com"></script>
 
50
  }
51
  </script>
52
  <style>
53
+ /* Mobile-first base styles */
54
+ html {
55
+ font-size: 16px;
56
+ }
57
+
58
+ @media (min-width: 640px) {
59
+ html {
60
+ font-size: 18px;
61
+ }
62
+ }
63
  :root {
64
+ --sage-green: #7A8B6F;
65
  --warm-beige: #F5F1EB;
66
  --soft-sage: #E8F0E3;
67
+ --deep-sage: #5A6B4F;
68
+ --warm-gray: #6D625C;
69
  --cream: #FEFCF8;
70
+ --text-dark: #2D3748;
71
+ --text-medium: #4A5568;
72
  }
73
 
74
  body {
75
  font-family: 'Inter', sans-serif;
76
+ color: var(--text-dark);
77
  background-color: var(--cream);
78
  }
79
 
 
235
  <li><a href="#" class="text-deep-sage hover:text-sage font-medium transition">Home</a></li>
236
  <li><a href="#services" class="text-deep-sage hover:text-sage font-medium transition">Services</a></li>
237
  <li><a href="#about" class="text-deep-sage hover:text-sage font-medium transition">About</a></li>
238
+ <li><a href="/glossary" class="text-deep-sage hover:text-sage font-medium transition">Glossary</a></li>
239
  <li><a href="#testimonials" class="text-deep-sage hover:text-sage font-medium transition">Testimonials</a></li>
240
  <li><a href="#contact" class="text-deep-sage hover:text-sage font-medium transition">Contact</a></li>
241
  </ul>
242
  </nav>
243
 
244
  <div class="hidden md:block">
245
+ <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>
246
  </div>
247
 
248
  <button id="mobile-menu-button" class="md:hidden text-deep-sage">
 
267
  </header>
268
 
269
  <!-- Hero Section -->
270
+ <section class="hero-bg py-16 sm:py-20 md:py-32">
271
  <div class="container mx-auto px-4">
272
  <div class="max-w-2xl fade-in">
273
+ <!-- CMS Editable Region: Hero Title -->
274
+ <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>
275
+ <!-- CMS Editable Region: Hero Text -->
276
+ <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>
277
  <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
278
  <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>
279
  <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>
 
384
  </div>
385
 
386
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
387
+ <!-- CMS Repeatable: Services -->
388
+ <div class="service-card rounded-lg overflow-hidden shadow-sm hover-lift" data-cms-repeatable="services">
389
+ <!-- CMS Image Upload: Service 1 -->
390
+ <div class="h-48 bg-cover bg-center" style="background-image: url('[% cms.asset service1_image type:'image' default:'/images/service1-placeholder.jpg' %]');"></div>
391
  <div class="p-6">
392
  <h3 class="font-display text-xl font-bold text-deep-sage mb-2">Laser Hair Removal</h3>
393
  <p class="text-warm-gray mb-4">Safe, effective hair reduction for all skin types with our advanced laser technology.</p>
 
479
  </div>
480
 
481
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
482
+ <!-- CMS Editable Testimonial 1 -->
483
+ <div class="bg-warm-beige p-8 rounded-lg" data-cms-repeatable="testimonials">
484
  <div class="flex items-center mb-4">
485
+ <!-- CMS Image Upload: Testimonial Avatar -->
486
  <div class="w-12 h-12 rounded-full bg-gray-300 overflow-hidden mr-4">
487
+ <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">
488
  </div>
489
  <div>
490
+ <!-- CMS Editable: Testimonial Name -->
491
+ <h4 class="font-bold text-deep-sage" data-cms-editable="testimonial_name">Sarah J.</h4>
492
+ <!-- CMS Editable: Testimonial Rating -->
493
+ <div class="flex text-yellow-400 text-sm" data-cms-editable="testimonial_rating">
494
  <i class="fas fa-star"></i>
495
  <i class="fas fa-star"></i>
496
  <i class="fas fa-star"></i>
 
499
  </div>
500
  </div>
501
  </div>
502
+ <!-- CMS Editable: Testimonial Text -->
503
+ <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>
504
  </div>
505
 
506
  <!-- Testimonial 2 -->
 
705
  </section>
706
 
707
  <!-- Footer -->
708
+ <footer class="bg-deep-sage text-soft-sage py-12">
709
  <div class="container mx-auto px-4">
710
  <div class="flex flex-col md:flex-row justify-between">
711
  <div class="mb-8 md:mb-0">
712
  <div class="flex items-center mb-4">
713
  <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>
714
+ <h3 class="font-display text-xl font-bold text-white">Lexington Smooth Beauty</h3>
715
  </div>
716
+ <!-- CMS Editable: Footer Description -->
717
+ <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>
718
  <div class="flex space-x-4">
719
  <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-instagram text-xl"></i></a>
720
  <a href="#" class="text-white hover:text-soft-sage transition"><i class="fab fa-facebook text-xl"></i></a>
 
723
  </div>
724
 
725
  <div class="mb-8 md:mb-0">
726
+ <h4 class="font-display text-lg font-bold text-white mb-4">Contact Info</h4>
727
  <ul class="space-y-2">
728
  <li class="flex items-start">
729
  <i class="fas fa-phone-alt mt-1 mr-2"></i>
 
741
  </div>
742
 
743
  <div>
744
+ <h4 class="font-display text-lg font-bold text-white mb-4">Quick Book</h4>
745
  <p class="text-soft-sage mb-4">Ready to book? Get started in seconds:</p>
746
+ <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>
747
+ <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>
748
  </div>
749
  </div>
750
 
 
762
  </a>
763
  </div>
764
 
765
+ <!-- Calendly Embed -->
766
+ <link href="https://assets.calendly.com/assets/external/widget.css" rel="stylesheet">
767
+ <script src="https://assets.calendly.com/assets/external/widget.js" type="text/javascript" async></script>
768
+
769
+ <!-- Promotion Popup Modal -->
770
+ <div id="promo-modal" class="modal hidden" aria-hidden="true" role="dialog" aria-labelledby="modal-title">
771
+ <div class="modal-content bg-white rounded-lg p-8 max-w-md mx-auto my-12 relative">
772
+ <button id="close-modal" class="absolute top-4 right-4 text-warm-gray hover:text-sage">
773
+ <i class="fas fa-times text-2xl"></i>
774
+ </button>
775
+ <h3 class="font-display text-2xl font-bold text-deep-sage mb-4">Limited Time Offer!</h3>
776
+ <p class="text-warm-gray mb-6">Get 20% off your first laser hair removal treatment when you book today.</p>
777
+ <div
778
+ class="calendly-inline-widget"
779
+ data-url="https://calendly.com/your-username/consultation"
780
+ style="min-width:320px;height:500px;">
781
+ </div>
782
+ <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>
783
+ </div>
784
+ </div>
785
+
786
  <!-- Mobile Menu Script -->
787
  <script>
788
  // Mobile menu toggle
 
793
 
794
  // Set current year in footer
795
  document.getElementById('year').textContent = new Date().getFullYear();
796
+
797
+ // Promotion modal handling
798
+ document.getElementById('show-promo').addEventListener('click', function(e) {
799
+ e.preventDefault();
800
+ document.getElementById('promo-modal').classList.remove('hidden');
801
+ });
802
+
803
+ document.getElementById('close-modal').addEventListener('click', function() {
804
+ document.getElementById('promo-modal').classList.add('hidden');
805
+ });
806
+
807
+ // Close modal when clicking outside
808
+ window.addEventListener('click', function(e) {
809
+ if (e.target === document.getElementById('promo-modal')) {
810
+ document.getElementById('promo-modal').classList.add('hidden');
811
+ }
812
+ });
813
 
814
  // Fade-in animation for elements
815
  document.addEventListener('DOMContentLoaded', function() {