270 lines
13 KiB
TypeScript
270 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||
import ReactLenis from "lenis/react";
|
||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
||
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="hover-magnetic"
|
||
defaultTextAnimation="background-highlight"
|
||
borderRadius="rounded"
|
||
contentWidth="smallMedium"
|
||
sizing="largeSmallSizeLargeTitles"
|
||
background="none"
|
||
cardStyle="glass-depth"
|
||
primaryButtonStyle="double-inset"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="extrabold"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarLayoutFloatingOverlay
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "#hero"},
|
||
{
|
||
name: "Services", id: "#services"},
|
||
{
|
||
name: "Experience", id: "#experience"},
|
||
{
|
||
name: "Gallery", id: "#gallery"},
|
||
{
|
||
name: "Barbers", id: "#barbers"},
|
||
{
|
||
name: "Location", id: "#location"},
|
||
]}
|
||
brandName="X BARBERS"
|
||
button={{
|
||
text: "BOOK NOW", href: "#location"}}
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroSplitDualMedia
|
||
background={{
|
||
variant: "plain"}}
|
||
title="Precision Cuts. Real Culture."
|
||
description="Croydon’s trusted barbershop for flawless fades, sharp beard work, and premium grooming experiences."
|
||
tag="★★★★★ 4.5 Rating"
|
||
buttons={[
|
||
{
|
||
text: "BOOK NOW", href: "#location"},
|
||
{
|
||
text: "WALK IN TODAY", href: "#location"},
|
||
]}
|
||
mediaItems={[
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-washbasin_107420-94763.jpg", imageAlt: "Close-up of a precision fade haircut"},
|
||
{
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313017.jpg", imageAlt: "Detail of a luxury barber chair"}
|
||
]}
|
||
mediaAnimation="slide-up"
|
||
rating={4.5}
|
||
ratingText="Trusted by loyal clients across Croydon for over 8 years."
|
||
/>
|
||
</div>
|
||
|
||
<div id="social-proof" data-section="social-proof">
|
||
<TestimonialCardTwelve
|
||
useInvertedBackground={true}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Glen", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-sitting-chair_23-2149220526.jpg", imageAlt: "Smiling client Sarah Johnson"},
|
||
{
|
||
id: "2", name: "Kojo", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-man-glasses-showing-thumb-up-gray-wall_231208-7813.jpg", imageAlt: "Satisfied client Michael Chen"},
|
||
{
|
||
id: "3", name: "Richard", imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7365.jpg", imageAlt: "Happy client Emily Rodriguez"},
|
||
{
|
||
id: "4", name: "David Kim", imageSrc: "http://img.b2bpic.net/free-photo/happy-men-bachelor-party_23-2149275459.jpg", imageAlt: "Loyal client David Kim"},
|
||
{
|
||
id: "5", name: "James Williams", imageSrc: "http://img.b2bpic.net/free-photo/happiness-concept-glad-positive-afro-american-man-with-trendy-hairstyle-poses-naked_273609-8552.jpg", imageAlt: "Client James Williams"},
|
||
]}
|
||
cardTitle="Why Clients Never Switch Up"
|
||
cardTag="Google Review Score: 4.5+ | 500+ reviews. Most clients return monthly."
|
||
cardAnimation="slide-up"
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureCardTwelve
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
id: "fade", label: "Precision", title: "Signature Fade", items: [
|
||
"Sharp blends", "Detailed finishing", "Flawless line work"],
|
||
},
|
||
{
|
||
id: "beard", label: "Grooming", title: "Beard Sculpt & Line-Up", items: [
|
||
"Clean shaping", "Razor precision"],
|
||
},
|
||
{
|
||
id: "afro", label: "Specialization", title: "Afro & Textured Hair Specialists", items: [
|
||
"Experienced with all textures", "Variety of styles"],
|
||
},
|
||
{
|
||
id: "kids", label: "Family", title: "Kids Cuts", items: [
|
||
"Patient, professional service", "Clean finishes"],
|
||
},
|
||
{
|
||
id: "express", label: "Convenience", title: "Walk-In Express Trim", items: [
|
||
"Quick service", "No compromise on quality"],
|
||
},
|
||
{
|
||
id: "full-groom", label: "Complete Look", title: "Full Grooming Experience", items: [
|
||
"Haircut + beard service", "Personalized styling"],
|
||
},
|
||
]}
|
||
title="Our Signature Services"
|
||
description="From classic fades to specialized textured cuts, our expert barbers deliver unparalleled quality and style tailored to you."
|
||
/>
|
||
</div>
|
||
|
||
<div id="experience" data-section="experience">
|
||
<TextSplitAbout
|
||
useInvertedBackground={true}
|
||
title="More Than A Haircut."
|
||
description={[
|
||
"Atmosphere: Relaxed energy, real conversations. We foster a community built on music, culture, and connection.", "Precision: Every cut is tailored to your unique face shape, hair texture, and personal style, ensuring a flawless result every time.", "Consistency: Our clients return monthly because the quality never drops. Experience the difference of dedicated craftsmanship."]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<ProductCardThree
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "gallery-1", name: "Fresh Fade", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-senior-man-listening-music-headphones-isolated-dark-background_613910-42.jpg", imageAlt: "Fresh fade haircut"},
|
||
{
|
||
id: "gallery-2", name: "Transformation", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/tattooed-caucasian-male-barber-cutting-beard-black-stylish-man_613910-1464.jpg", imageAlt: "Before and after haircut transformation"},
|
||
{
|
||
id: "gallery-3", name: "Beard Work", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/mature-man-beard-close-up_23-2148465260.jpg", imageAlt: "Detailed beard shaping"},
|
||
{
|
||
id: "gallery-4", name: "Textured Hair", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/young-male-doing-selfcare-routine_23-2149291871.jpg", imageAlt: "Specialized textured hair cut"},
|
||
{
|
||
id: "gallery-5", name: "Shop Vibe", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186516.jpg", imageAlt: "Interior of the X Barbers shop"},
|
||
{
|
||
id: "gallery-6", name: "Line Up Detail", price: "£-", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-getting-haircut-with-trimmer_23-2148256902.jpg", imageAlt: "Close-up of a sharp hairline"},
|
||
]}
|
||
title="Our Craft in Focus"
|
||
description="Witness the artistry and precision that defines X Barbers. From sharp fades to intricate beard work, our gallery showcases our dedication to perfection."
|
||
/>
|
||
</div>
|
||
|
||
<div id="barbers" data-section="barbers">
|
||
<TeamCardTwo
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={true}
|
||
members={[
|
||
{
|
||
id: "glen", name: "Glen", role: "Master Barber", description: "Known for precision fades and loyal returning clients who trust his impeccable skill and consistent quality.", imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-posing-salon_23-2150462487.jpg", imageAlt: "Portrait of Barber Glen"},
|
||
{
|
||
id: "kojo", name: "Kojo", role: "Head Stylist", description: "Trusted for clean trims and detailed finishing, Kojo's artistry ensures every client leaves with confidence.", imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-afro-american-male-barber-wearing-uniform-holding-hair-clippers-doing-yes-gesture_141793-117105.jpg", imageAlt: "Portrait of Barber Kojo"},
|
||
{
|
||
id: "richard", name: "Richard", role: "Precision Specialist", description: "With an eye for detail and mastery in beard sculpting, Richard delivers sharp lines and tailored looks.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-holding-painting-brush_23-2149529894.jpg", imageAlt: "Portrait of Barber Richard"},
|
||
]}
|
||
title="Meet Our Master Barbers"
|
||
description="Our skilled team is dedicated to perfection, bringing years of experience and a passion for crafting your ultimate style."
|
||
/>
|
||
</div>
|
||
|
||
<div id="urgency" data-section="urgency">
|
||
<TextSplitAbout
|
||
useInvertedBackground={false}
|
||
title="The Chair Fills Fast."
|
||
description={[
|
||
"Our reputation for elite cuts and a vibrant community means we’re often busy. Walk-ins are always welcome, but peak hours can get busy quickly.", "For guaranteed availability and to secure your preferred barber, we highly recommend booking ahead. Don’t miss your slot for the X Barbers experience."]}
|
||
buttons={[
|
||
{
|
||
text: "BOOK YOUR SLOT", href: "#location"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="location" data-section="location">
|
||
<ContactSplitForm
|
||
useInvertedBackground={true}
|
||
title="Located In The Heart Of Croydon."
|
||
description="Find X Barbers easily and step into an unparalleled grooming experience. We're open Monday-Saturday, 9 AM - 6 PM. Call us at +44 20 1234 5678 or connect on Instagram @XBarbersCroydon. Walk-ins are always welcome!"
|
||
inputs={[
|
||
{
|
||
name: "name", type: "text", placeholder: "Your Name", required: true,
|
||
},
|
||
{
|
||
name: "email", type: "email", placeholder: "Your Email", required: true,
|
||
},
|
||
{
|
||
name: "phone", type: "tel", placeholder: "Your Phone Number"},
|
||
]}
|
||
textarea={{
|
||
name: "message", placeholder: "How can we help you?", rows: 4,
|
||
}}
|
||
imageSrc="http://img.b2bpic.net/free-photo/mustache-razors-white-background_23-2147736984.jpg"
|
||
imageAlt="Map of X Barbers location in Croydon"
|
||
mediaPosition="right"
|
||
buttonText="SEND MESSAGE"
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterMedia
|
||
imageSrc="http://img.b2bpic.net/free-photo/photo-metal-texture-pattern_58702-13614.jpg"
|
||
imageAlt="Cinematic view of X Barbers interior"
|
||
logoSrc="http://img.b2bpic.net/free-photo/shampoo-conditioner-bottles-barbershop-against-wooden-background_627829-6244.jpg"
|
||
logoText="X BARBERS"
|
||
columns={[
|
||
{
|
||
title: "Explore", items: [
|
||
{
|
||
label: "Home", href: "#hero"},
|
||
{
|
||
label: "Services", href: "#services"},
|
||
{
|
||
label: "Gallery", href: "#gallery"},
|
||
],
|
||
},
|
||
{
|
||
title: "Company", items: [
|
||
{
|
||
label: "Our Barbers", href: "#barbers"},
|
||
{
|
||
label: "The Experience", href: "#experience"},
|
||
{
|
||
label: "Location", href: "#location"},
|
||
],
|
||
},
|
||
{
|
||
title: "Connect", items: [
|
||
{
|
||
label: "Book Now", href: "#location"},
|
||
{
|
||
label: "Instagram", href: "https://instagram.com/XBarbersCroydon"},
|
||
{
|
||
label: "Call Us", href: "tel:+442012345678"},
|
||
],
|
||
},
|
||
]}
|
||
copyrightText="Built for confidence. © 2024 X Barbers. All rights reserved."
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|