|
|
|
|
|
<!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> |
|
|
|
