196 lines
10 KiB
TypeScript
196 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
|
import { Facebook, Instagram, Palette, Scissors, Sparkles } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="blurBottom"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Our Team", id: "team" },
|
|
{ name: "Reviews", id: "testimonial" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Elegance Salon"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
background={{ variant: "radial-gradient" }}
|
|
logoText="Elegance Hair Salon"
|
|
description="Experience professional styling in our modern, serene space. We craft beauty with precision and passion."
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "Our Services", href: "#features" },
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautician-styling-clients-hair_107420-94677.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{ type: "text", content: "Crafting Your Perfect Look" },
|
|
{ type: "image", src: "http://img.b2bpic.net/free-photo/side-view-happy-bride-holding-smartphone_23-2149722007.jpg", alt: "Stylist working" },
|
|
]}
|
|
buttons={[
|
|
{ text: "Meet the Team", href: "#team" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="depth-3d"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Precision Styling", description: "Tailored haircuts that complement your face shape and personal style.", icon: Scissors,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-hairdresser-washing-woman-s-hair_23-2150668438.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/beautiful-composition-spa-bath-concept_23-2148094191.jpg" },
|
|
]
|
|
},
|
|
{
|
|
title: "Organic Coloring", description: "High-quality, gentle color treatments using natural-based ingredients.", icon: Palette,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108776.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-washing-client-hair-sink_23-2147769790.jpg" },
|
|
]
|
|
},
|
|
{
|
|
title: "Revitalizing Spa", description: "Deep conditioning and scalp treatments for long-lasting hair health.", icon: Sparkles,
|
|
mediaItems: [
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-combing-hair-her-beauty-routine_23-2150166426.jpg" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/view-scissors-hair-salon_23-2150462460.jpg" },
|
|
]
|
|
},
|
|
]}
|
|
title="Our Expert Services"
|
|
description="Specialized treatments designed to enhance your natural beauty and hair health."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "Hydrate Shampoo", price: "$34.00", variant: "250ml", imageSrc: "http://img.b2bpic.net/free-photo/skin-regeneration-product-still-life_23-2151232242.jpg" },
|
|
{ id: "p2", name: "Silk Conditioner", price: "$38.00", variant: "250ml", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167391.jpg" },
|
|
{ id: "p3", name: "Argan Hair Oil", price: "$42.00", variant: "50ml", imageSrc: "http://img.b2bpic.net/free-photo/delicious-organic-coffee-still-life_23-2151762333.jpg" },
|
|
{ id: "p4", name: "Volume Spray", price: "$29.00", variant: "150ml", imageSrc: "http://img.b2bpic.net/free-photo/different-foundation-with-dark-background_23-2148978147.jpg" },
|
|
{ id: "p5", name: "Deep Mask", price: "$45.00", variant: "200ml", imageSrc: "http://img.b2bpic.net/free-photo/female-client-getting-her-hair-washed-hairdresser_23-2150771292.jpg" },
|
|
{ id: "p6", name: "Finishing Mist", price: "$32.00", variant: "100ml", imageSrc: "http://img.b2bpic.net/free-photo/mom-helping-her-child-styling-afro-hair_23-2149625751.jpg" },
|
|
]}
|
|
title="Premium Care Essentials"
|
|
description="Professional-grade products to maintain your salon results at home."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
team={[
|
|
{ id: "t1", name: "Elena Rossi", role: "Creative Director", imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blonde-female-dressed-white-t-shirt-waistcoat-grey-background_613910-9333.jpg" },
|
|
{ id: "t2", name: "Marcus Chen", role: "Colorist Expert", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-female-barber-wearing-uniform-glasses-headband-holding-comb-hair-trimmer-air-looking-down-pretend-doing-haircut-client-isolated-red-background_141793-137002.jpg" },
|
|
{ id: "t3", name: "Sarah Miller", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-holding-winner-cup-with-hair-clippers-showing-look-gesture-isolated-blue-wall_141793-105678.jpg" },
|
|
]}
|
|
title="Meet Our Stylists"
|
|
description="Passionate professionals dedicated to bringing your vision to life."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardTen
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", title: "Amazing Color!", quote: "The best colorist in town. My hair feels so healthy and vibrant.", name: "Jessica L.", role: "Regular Client", imageSrc: "http://img.b2bpic.net/free-photo/mutual-creative-work-young-beautiful-couple-casual-clothes-aprons-people-creating-bowl-pottery-wheel-clay-studio_1157-40131.jpg" },
|
|
{ id: "2", title: "Relaxing Oasis", quote: "I love visiting this salon. Always professional and the results are consistently stunning.", name: "Brian K.", role: "Loyal Client", imageSrc: "http://img.b2bpic.net/free-photo/young-black-people-taking-care-afro-hair_23-2149575437.jpg" },
|
|
{ id: "3", title: "Precision Cut", quote: "Elena perfectly captured the style I wanted. Highly recommended!", name: "Samantha P.", role: "New Client", imageSrc: "http://img.b2bpic.net/free-photo/closeup-excited-goodlooking-africanamerican-curlyhaired-woman-trendy-silver-glittering-dress-touc_1258-142766.jpg" },
|
|
{ id: "4", title: "Top Notch Quality", quote: "Expensive but worth every penny for the quality of care.", name: "Oliver D.", role: "Loyal Client", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-holding-juice-while-getting-haircut_613910-5727.jpg" },
|
|
{ id: "5", title: "So Friendly!", quote: "The staff makes you feel incredibly welcome and listened to.", name: "Chloe M.", role: "Happy Guest", imageSrc: "http://img.b2bpic.net/free-photo/friendly-young-interracial-girls-good-mood-wear-nightgowns-pajama-party-leisure-lifestyle-beauty-concept_197531-31732.jpg" },
|
|
]}
|
|
title="Client Love"
|
|
description="Read what our wonderful clients are saying about their experience."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "How do I book?", content: "You can book directly through our website or give us a call." },
|
|
{ id: "f2", title: "Do you offer consultations?", content: "Yes, we offer complimentary 15-minute consultations for all new color clients." },
|
|
{ id: "f3", title: "What is your cancellation policy?", content: "Please provide 24 hours notice for any cancellations." },
|
|
]}
|
|
title="Salon FAQs"
|
|
description="Everything you need to know about our booking process."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{ variant: "radial-gradient" }}
|
|
tag="Let's Connect"
|
|
title="Visit Elegance Salon"
|
|
description="Ready for a transformation? Reach out to reserve your spot today."
|
|
imageSrc="http://img.b2bpic.net/free-photo/blonde-woman-getting-her-hair-done_23-2148108777.jpg"
|
|
mediaAnimation="opacity"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Elegance Salon"
|
|
copyrightText="© 2025 Elegance Salon. All rights reserved."
|
|
socialLinks={[
|
|
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
|
{ icon: Facebook, href: "#", ariaLabel: "Facebook" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|