|
|
| <!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"> |
| |
| <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> |
| |
| <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> |
| |
| <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"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
| |
| <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> |
| |
| <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"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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"> |
| |
| <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> |
| |
| |
| <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> |
| |
| |
| <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> |
|
|
| |
| <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 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>© 2023 Curvy Cuts Salon. All rights reserved. Celebrating beauty in every form.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| feather.replace(); |
| |
| |
| 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> |
|
|
