Files
15dbc3b5-d5b1-425c-a032-ddf…/src/app/page.tsx
2026-04-06 16:46:55 +00:00

364 lines
13 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import SplitAbout from '@/components/sections/about/SplitAbout';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import { Facebook, Instagram, Scissors, Sparkles, Square, Zap } from "lucide-react";
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="background-highlight"
borderRadius="pill"
contentWidth="small"
sizing="mediumSizeLargeTitles"
background="fluid"
cardStyle="inset"
primaryButtonStyle="shadow"
secondaryButtonStyle="solid"
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Services",
id: "#services",
},
{
name: "Gallery",
id: "#gallery",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="Master's Touch"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "gradient-bars",
}}
title="Fresh Cuts. Clean Fades. Professional Service."
description="Trusted local barbershop in Statham, GA with 4.7 stars. Experience the master's touch for your next style."
testimonials={[
{
name: "John D.",
handle: "@local",
testimonial: "Always professional and consistent.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg",
imageAlt: "barber shop interior modern dark",
},
{
name: "Mike R.",
handle: "@local",
testimonial: "Nice atmosphere, good people.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/annoyed-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-hair-spray-comb-looking-side-isolated-blue-background_141793-138011.jpg",
imageAlt: "professional barber smiling",
},
{
name: "Chris S.",
handle: "@local",
testimonial: "Takes a lot of pride in his work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middleaged-businessman-looking-away-black-flare-background_176420-55246.jpg",
imageAlt: "fade haircut detail side view",
},
{
name: "David L.",
handle: "@local",
testimonial: "Best fade I've had in a long time.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-shaving-client-near-mirror_23-2147778757.jpg",
imageAlt: "barbershop chair and mirror",
},
{
name: "Brian K.",
handle: "@local",
testimonial: "My go-to barbershop in Statham.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg",
imageAlt: "beard trim close up",
},
]}
buttons={[
{
text: "Call Now",
href: "tel:+17707250061",
},
{
text: "Book Appointment",
href: "#contact",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/mustache-guy-barbershop_140725-7723.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg",
alt: "Client 1",
},
{
src: "http://img.b2bpic.net/free-photo/medium-shot-queen-posing-real-context_23-2151156394.jpg",
alt: "Client 2",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-serious-curly-haired-woman-looks-attentively-camera-has-calm-expression-healthy-skin-natural-beauty-wears-casual-turtleneck-isolated-vivid-red-background-listens-interlocutor_273609-57964.jpg",
alt: "Client 3",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-against-blue-wall_23-2148184859.jpg",
alt: "Client 4",
},
{
src: "http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-2153.jpg",
alt: "Client 5",
},
]}
marqueeItems={[
{
type: "text",
text: "Precision Cuts",
},
{
type: "text",
text: "Hot Towel Shaves",
},
{
type: "text",
text: "Beard Grooming",
},
{
type: "text",
text: "Clean Fades",
},
{
type: "text",
text: "Modern Style",
},
]}
/>
</div>
<div id="about" data-section="about">
<SplitAbout
textboxLayout="split"
useInvertedBackground={false}
title="The Master's Touch Experience"
description="At Master's Touch Barbershop, we believe in more than just a haircut. We provide an experienced, professional service where every detail matters. We take pride in building strong customer relationships, ensuring you leave looking your best in a friendly, welcoming environment."
bulletPoints={[
{
title: "Expert Fades",
description: "Precision cutting for all modern styles.",
},
{
title: "Welcoming Atmosphere",
description: "Relax in a shop built for local comfort.",
},
{
title: "Master Craftsmanship",
description: "Experienced barber dedicated to quality results.",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/annoyed-young-male-barber-wearing-glasses-red-shirt-barber-apron-holding-hair-spray-comb-looking-side-isolated-blue-background_141793-138011.jpg"
mediaAnimation="slide-up"
/>
</div>
<div id="services" data-section="services">
<FeatureBento
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
features={[
{
title: "Haircuts",
description: "Classic and contemporary cuts for all hair types.",
bentoComponent: "reveal-icon",
icon: Scissors,
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg",
imageAlt: "happy customer portrait",
},
{
title: "Precision Fades",
description: "Clean, sharp fades that set the standard.",
bentoComponent: "reveal-icon",
icon: Zap,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-queen-posing-real-context_23-2151156394.jpg",
imageAlt: "man smiling after haircut",
},
{
title: "Beard Trims",
description: "Keep your facial hair sharp and groomed.",
bentoComponent: "reveal-icon",
icon: Sparkles,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-curly-haired-woman-looks-attentively-camera-has-calm-expression-healthy-skin-natural-beauty-wears-casual-turtleneck-isolated-vivid-red-background-listens-interlocutor_273609-57964.jpg",
imageAlt: "confident man portrait",
},
{
title: "Shape-Ups",
description: "Refine your edges for a polished look.",
bentoComponent: "reveal-icon",
icon: Square,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-against-blue-wall_23-2148184859.jpg",
imageAlt: "man looking clean cut",
},
]}
title="Our Professional Services"
description="Premium grooming solutions tailored to your individual style."
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardThirteen
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1",
name: "John D.",
handle: "@statham",
testimonial: "Takes a lot of pride in his work.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg",
},
{
id: "2",
name: "Mike R.",
handle: "@statham",
testimonial: "Nice atmosphere, good people.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-queen-posing-real-context_23-2151156394.jpg",
},
{
id: "3",
name: "Chris S.",
handle: "@statham",
testimonial: "Always professional and consistent.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-serious-curly-haired-woman-looks-attentively-camera-has-calm-expression-healthy-skin-natural-beauty-wears-casual-turtleneck-isolated-vivid-red-background-listens-interlocutor_273609-57964.jpg",
},
{
id: "4",
name: "David L.",
handle: "@statham",
testimonial: "Best fade I've had in a long time.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-boy-against-blue-wall_23-2148184859.jpg",
},
{
id: "5",
name: "Brian K.",
handle: "@statham",
testimonial: "My go-to barbershop in Statham.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/crazy-dealer-happy-expression_1194-2153.jpg",
},
]}
showRating={true}
title="What Our Clients Say"
description="Real feedback from the Statham community."
/>
</div>
<div id="gallery" data-section="gallery">
<ProductCardOne
animationType="scale-rotate"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Sharp Fade",
price: "Featured",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middleaged-businessman-looking-away-black-flare-background_176420-55246.jpg",
},
{
id: "p2",
name: "Barbershop Interior",
price: "Classic",
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-shaving-client-near-mirror_23-2147778757.jpg",
},
{
id: "p3",
name: "Precision Beard",
price: "Groomed",
imageSrc: "http://img.b2bpic.net/free-photo/master-applying-shaving-foam-client-face_1153-9444.jpg",
},
{
id: "p4",
name: "Style Portfolio",
price: "View More",
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-confident-middleaged-businessman-looking-away-black-flare-background_176420-55246.jpg",
},
]}
title="Our Work"
description="Check out some of our recent fades and styles."
/>
</div>
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "sparkles-gradient",
}}
tag="Get In Touch"
title="Ready for a Fresh Cut?"
description="Located at 1980 Railroad St, Statham, GA 30666. Call us at (770) 725-0061 or book an appointment through our site."
buttons={[
{
text: "Call Now",
href: "tel:+17707250061",
},
{
text: "Book Appointment",
href: "#",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Master's Touch"
copyrightText="© 2025 Master's Touch Barbershop LLC"
socialLinks={[
{
icon: Facebook,
href: "#",
ariaLabel: "Facebook",
},
{
icon: Instagram,
href: "#",
ariaLabel: "Instagram",
},
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}