306 lines
9.7 KiB
TypeScript
306 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="medium"
|
|
background="aurora"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "services",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "pricing",
|
|
},
|
|
{
|
|
name: "Team",
|
|
id: "team",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="Lumina Salon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroOverlay
|
|
title="Experience Professional Hair Artistry"
|
|
description="Transform your look at Lumina Salon. Expert cuts, vibrant colors, and rejuvenating treatments for every hair type."
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment",
|
|
href: "#contact",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"
|
|
showBlur={true}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12313.jpg",
|
|
alt: "Stylist Elena",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/woman-having-hair-treatment-latino-hair-salon_23-2150555156.jpg",
|
|
alt: "Stylist Marco",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-model-holding-book-red-wall_114579-56021.jpg",
|
|
alt: "Stylist Sarah",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg",
|
|
alt: "Stylist Julian",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-showing-her-fist-looking-front_114579-58458.jpg",
|
|
alt: "Client Amanda",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 500+ happy clients"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSix
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Precision Cuts",
|
|
description: "Tailored cuts that complement your face shape and personal style.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/scissors-towel-beauty-salon_23-2148181999.jpg",
|
|
},
|
|
{
|
|
title: "Custom Coloring",
|
|
description: "Vibrant, lasting colors from natural tones to bold fashion statements.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668427.jpg",
|
|
},
|
|
{
|
|
title: "Hair Spa & Repair",
|
|
description: "Deep conditioning treatments to restore shine, moisture, and strength.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-with-protective-face-mask-enjoying-hairdresser-s-coronavirus-epidemic_637285-9010.jpg",
|
|
},
|
|
]}
|
|
title="Our Signature Services"
|
|
description="We offer a wide range of hair services using premium products to ensure your hair stays healthy and beautiful."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p1",
|
|
badge: "Essential",
|
|
price: "$60",
|
|
subtitle: "Includes consultation, wash, and cut.",
|
|
features: [
|
|
"Consultation",
|
|
"Hair Wash",
|
|
"Precision Cut",
|
|
"Styling",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "p2",
|
|
badge: "Premium",
|
|
price: "$120",
|
|
subtitle: "Includes cut, color, and deep treatment.",
|
|
features: [
|
|
"Full Consultation",
|
|
"Color Customization",
|
|
"Deep Repair Mask",
|
|
"Style Finish",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
id: "p3",
|
|
badge: "VIP",
|
|
price: "$180",
|
|
subtitle: "The complete Lumina transformation.",
|
|
features: [
|
|
"VIP Consultation",
|
|
"Full Color & Highlights",
|
|
"Olaplex Treatment",
|
|
"Signature Blow-out",
|
|
],
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
title="Simple Pricing"
|
|
description="Professional services at accessible prices. Choose the experience you deserve."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
groups={[
|
|
{
|
|
id: "g1",
|
|
groupTitle: "Meet the Stylists",
|
|
members: [
|
|
{
|
|
id: "t1",
|
|
title: "Elena Rose",
|
|
subtitle: "Senior Stylist",
|
|
detail: "10+ years experience in precision cutting.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-waitress-standing-with-disposable-coffee-cup_107420-12313.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
title: "Marco S.",
|
|
subtitle: "Color Expert",
|
|
detail: "Master of balayage and creative coloring.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-having-hair-treatment-latino-hair-salon_23-2150555156.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
title: "Sarah Kim",
|
|
subtitle: "Hair Specialist",
|
|
detail: "Passionate about hair health and repair.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-model-holding-book-red-wall_114579-56021.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
title: "Julian V.",
|
|
subtitle: "Junior Stylist",
|
|
detail: "Up-and-coming talent with an eye for trends.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/surprised-young-beautiful-female-barber-uniform-holding-barber-tools-isolated-pink-background_141793-119285.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg",
|
|
imageAlt: "elegant hair salon interior",
|
|
},
|
|
]}
|
|
title="Our Stylists"
|
|
description="Meet our team of experienced hair experts dedicated to bringing your beauty goals to life."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Amanda P.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-her-fist-looking-front_114579-58458.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Jessica W.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/latin-young-woman-portrait-outdoor_624325-3345.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Robert B.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-executive-taking-break-from-work-texting-message-smartphone_1098-20733.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Sofia G.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-hairdresser-with-hair-dryer-his-hands-hairstyle-woman-beauty-hair-professional-beauty-salon_231208-10937.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Chloe M.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-pink-sweater-looking-camera-posing-high-quality-photo_114579-31514.jpg",
|
|
},
|
|
]}
|
|
cardTitle="Client Stories"
|
|
cardTag="Reviews"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Booking"
|
|
title="Ready for your new look?"
|
|
description="Schedule your appointment today to ensure you get your preferred slot at our salon."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us Now",
|
|
href: "mailto:hello@luminasalon.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Lumina"
|
|
leftLink={{
|
|
text: "Privacy Policy",
|
|
href: "#",
|
|
}}
|
|
rightLink={{
|
|
text: "Terms of Service",
|
|
href: "#",
|
|
}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|