216 lines
13 KiB
TypeScript
216 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import AboutMetric from '@/components/sections/about/AboutMetric';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import { Award, Scissors, Users, Zap, Star } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="LEGENDS"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={true}
|
|
background={{ variant: "gradient-bars" }}
|
|
title="Crafting Legends, One Cut at a Time."
|
|
description="Welcome to Legends Barbershop, where traditional technique meets modern precision. Experience the ultimate grooming experience tailored to your style."
|
|
testimonials={[
|
|
{ name: "James R.", handle: "@jr_style", testimonial: "Best haircut I've had in years. Legends never misses.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg", imageAlt: "barber shop interior vintage style" },
|
|
{ name: "Mike T.", handle: "@miket", testimonial: "The classic shave experience here is unmatched.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg", imageAlt: "barber shop interior vintage style" },
|
|
{ name: "Chris B.", handle: "@chrisb", testimonial: "Super professional staff and great atmosphere.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg", imageAlt: "barber shop interior vintage style" },
|
|
{ name: "David L.", handle: "@dl4life", testimonial: "Finally found my permanent barber spot.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg", imageAlt: "barber shop interior vintage style" },
|
|
{ name: "Alex P.", handle: "@alexp", testimonial: "Exceptional attention to detail. Highly recommend.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg", imageAlt: "barber shop interior vintage style" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/modern-luxury-furniture-adorns-comfortable-home-interior-generated-by-ai_188544-29070.jpg"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/front-view-baber-shop-chiar_23-2148506339.jpg", alt: "Front view of baber shop chiar" },
|
|
{ src: "http://img.b2bpic.net/free-photo/barbershop-washbasin-with-professional-chairs_23-2148298338.jpg", alt: "Barbershop washbasin with professional chairs" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-expensive-barber-shop-chair_23-2148256916.jpg", alt: "Close-up expensive barber shop chair" },
|
|
{ src: "http://img.b2bpic.net/free-photo/comfortable-old-fashioned-chair-rustic-antique-elegance-indoors-generated-by-ai_188544-29043.jpg", alt: "Comfortable old fashioned chair" },
|
|
{ src: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-scissors-comb-making-stop-gesture-with-hands-standing-orange-background_141793-67572.jpg", alt: "Barber man in apron" }
|
|
]}
|
|
avatarText="Join 5,000+ satisfied clients"
|
|
marqueeItems={[
|
|
{ type: "text", text: "PRECISION CUTS" },
|
|
{ type: "text", text: "TRADITIONAL SHAVES" },
|
|
{ type: "text", text: "MODERN GROOMING" },
|
|
{ type: "text", text: "PREMIUM CARE" },
|
|
{ type: "text", text: "LEGENDARY SERVICE" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
useInvertedBackground={false}
|
|
title="Our Legacy"
|
|
metrics={[
|
|
{ icon: Award, label: "Years Experience", value: "15+" },
|
|
{ icon: Users, label: "Happy Clients", value: "5000+" },
|
|
{ icon: Scissors, label: "Expert Barbers", value: "8" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{ title: "Precision Cuts", description: "Classic and modern styles customized to your hair texture.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-gray-checkered-suit_158538-4205.jpg", buttonIcon: Scissors },
|
|
{ title: "Classic Shaves", description: "Hot towel treatment and traditional straight razor shave.", imageSrc: "http://img.b2bpic.net/free-photo/using-towel-beard-aged-male-barbershop_23-2148181892.jpg", buttonIcon: Zap },
|
|
{ title: "Premium Products", description: "High-quality pomades, oils, and balms for home maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-items-spa-therapy_23-2148290933.jpg", buttonIcon: Star },
|
|
{ title: "Beard Sculpting", description: "Professional beard shape-up and grooming for refined looks.", imageSrc: "http://img.b2bpic.net/free-photo/crop-barber-trimming-moustache-client_23-2147778835.jpg", buttonIcon: Award }
|
|
]}
|
|
title="Mastery in Every Service"
|
|
description="We specialize in precision grooming for the modern gentleman."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{ id: "p1", name: "Signature Pomade", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/impressed-slavic-middle-aged-male-barber-uniform-holding-water-spray-bottle-isolated-orange-wall_141793-82847.jpg" },
|
|
{ id: "p2", name: "Beard Oil", price: "$18", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bottle-oils-with-pipette_23-2148317664.jpg" },
|
|
{ id: "p3", name: "Barber Scissors", price: "$85", imageSrc: "http://img.b2bpic.net/free-photo/set-razors-table_23-2147736987.jpg" },
|
|
{ id: "p4", name: "Aftershave Balm", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/man-doing-his-face-care-routine_23-2149288066.jpg" },
|
|
{ id: "p5", name: "Shaving Brush", price: "$30", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-composition-shaving-objects_23-2148121997.jpg" },
|
|
{ id: "p6", name: "Styling Clay", price: "$22", imageSrc: "http://img.b2bpic.net/free-photo/containers-with-cosmetics_23-2147803536.jpg" }
|
|
]}
|
|
title="Shop Our Essentials"
|
|
description="Professional products curated by our experts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{ id: "basic", badge: "Essential", price: "$35", subtitle: "Precision Cut", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Consultation", "Haircut", "Style"] },
|
|
{ id: "pro", badge: "Most Popular", price: "$55", subtitle: "Legends Experience", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Haircut & Shave", "Beard Trim", "Hot Towel", "Premium Products"] },
|
|
{ id: "premium", badge: "VIP", price: "$75", subtitle: "Ultimate Grooming", buttons: [{ text: "Book Now", href: "#contact" }], features: ["Full Grooming", "Scalp Massage", "Face Treatment", "Priority Booking"] }
|
|
]}
|
|
title="Transparent Pricing"
|
|
description="Choose the service that fits your needs."
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
members={[
|
|
{ id: "m1", name: "Marcus V.", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/confident-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-holding-hair-clippers-isolated-crimson-background-with-copy-space_141793-31955.jpg" },
|
|
{ id: "m2", name: "Daniel S.", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/client-barber-greeting-each-other-barbershop_23-2148181951.jpg" },
|
|
{ id: "m3", name: "Leo C.", role: "Barber Expert", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg" }
|
|
]}
|
|
title="Our Experts"
|
|
description="Meet the artisans behind the chair."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{ id: "t1", name: "Liam K.", role: "Architect", company: "DesignCo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/expressive-middle-aged-woman-posing_344912-2831.jpg" },
|
|
{ id: "t2", name: "Ethan M.", role: "Consultant", company: "BizLab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/man-wearing-make-up-half-his-face-wearing-different-clothes_23-2148784403.jpg" },
|
|
{ id: "t3", name: "Noah J.", role: "Designer", company: "CreativeStudio", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-sitting-chair_329181-1673.jpg" },
|
|
{ id: "t4", name: "Mason T.", role: "Executive", company: "CorpGroup", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-sunbathed-fashion-man-model-wearing-white-shirt-clothes-posing-street_158538-2385.jpg" },
|
|
{ id: "t5", name: "Lucas P.", role: "Tech Lead", company: "Innovate", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/master-hairdresser-prepares-face-shaving-barber-shop_613910-6221.jpg" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "4.9/5", label: "Avg Rating" },
|
|
{ value: "100+", label: "Daily Clients" },
|
|
{ value: "10k+", label: "Cuts Per Year" }
|
|
]}
|
|
title="Hear From Our Legends"
|
|
description="Join our community of satisfied clients."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{ id: "f1", title: "Do I need an appointment?", content: "We recommend booking ahead to guarantee your preferred time, but walk-ins are welcome if space is available." },
|
|
{ id: "f2", title: "What payment methods are accepted?", content: "We accept all major credit cards, digital wallets, and cash." },
|
|
{ id: "f3", title: "Is parking available?", content: "Yes, complimentary parking is available behind the shop for all our clients." }
|
|
]}
|
|
sideTitle="Questions?"
|
|
sideDescription="We've got you covered."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={true}
|
|
background={{ variant: "plain" }}
|
|
tag="Visit Us"
|
|
title="Book Your Appointment"
|
|
description="Ready for a legendary transformation? Contact us today."
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-man-barber-s-shop-getting-his-beard-trimmed_23-2149186493.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{ items: [{ label: "Services", href: "#features" }, { label: "Pricing", href: "#pricing" }, { label: "Location", href: "#contact" }] },
|
|
{ items: [{ label: "About", href: "#about" }, { label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] }
|
|
]}
|
|
logoText="LEGENDS"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|