218 lines
9.3 KiB
TypeScript
218 lines
9.3 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 FooterBase from '@/components/sections/footer/FooterBase';
|
||
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
||
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||
import { RefreshCw, Scissors, Smile, User, Waves } from "lucide-react";
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<ThemeProvider
|
||
defaultButtonVariant="elastic-effect"
|
||
defaultTextAnimation="reveal-blur"
|
||
borderRadius="soft"
|
||
contentWidth="mediumLarge"
|
||
sizing="largeSmallSizeMediumTitles"
|
||
background="blurBottom"
|
||
cardStyle="soft-shadow"
|
||
primaryButtonStyle="flat"
|
||
secondaryButtonStyle="solid"
|
||
headingFontWeight="light"
|
||
>
|
||
<ReactLenis root>
|
||
<div id="nav" data-section="nav">
|
||
<NavbarStyleApple
|
||
navItems={[
|
||
{
|
||
name: "Home", id: "hero"},
|
||
{
|
||
name: "Services", id: "services"},
|
||
{
|
||
name: "About", id: "about"},
|
||
{
|
||
name: "Testimonials", id: "testimonials"},
|
||
{
|
||
name: "Book Now", id: "contact"},
|
||
]}
|
||
brandName="Jay & Zee Barbers"
|
||
/>
|
||
</div>
|
||
|
||
<div id="hero" data-section="hero">
|
||
<HeroOverlay
|
||
title="Precision Cuts. Premium Experience. Rainham’s Trusted Barbers."
|
||
description="Specialists in fades, beard grooming, and modern men’s styling. Built on consistency, trust, and long-term client loyalty."
|
||
buttons={[
|
||
{
|
||
text: "Book Appointment", href: "#contact"},
|
||
{
|
||
text: "View Services", href: "#services"},
|
||
]}
|
||
imageSrc="http://img.b2bpic.net/free-photo/bearded-man-with-razor-blade_23-2148256871.jpg"
|
||
imageAlt="Close-up of a precision fade haircut"
|
||
avatars={[
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg", alt: "Client 1"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg", alt: "Client 2"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-salon_23-2150665422.jpg", alt: "Client 3"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462466.jpg", alt: "Client 4"},
|
||
{
|
||
src: "http://img.b2bpic.net/free-photo/close-up-view-barber-shop-concept_23-2148506323.jpg", alt: "Client 5"},
|
||
]}
|
||
avatarText="Trusted by 500+ locals"
|
||
/>
|
||
</div>
|
||
|
||
<div id="about" data-section="about">
|
||
<InlineImageSplitTextAbout
|
||
useInvertedBackground={false}
|
||
heading={[
|
||
{
|
||
type: "text", content: "A Barbershop Built on Trust and Consistency"},
|
||
{
|
||
type: "image", src: "http://img.b2bpic.net/free-photo/brown-vintage-leather-chair-stylish-barber-shop_627829-6180.jpg", alt: "Modern barbershop interior"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="services" data-section="services">
|
||
<FeatureBento
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
useInvertedBackground={false}
|
||
features={[
|
||
{
|
||
title: "Fade Haircuts", description: "Skin fades, mid fades, and low fades with clean, blended precision.", bentoComponent: "reveal-icon", icon: Scissors,
|
||
},
|
||
{
|
||
title: "Beard Grooming", description: "Expert beard shape ups, line definition, and full maintenance.", bentoComponent: "reveal-icon", icon: User,
|
||
},
|
||
{
|
||
title: "Hot Towel Experience", description: "Relaxation-focused finish with skin preparation and premium comfort.", bentoComponent: "reveal-icon", icon: Waves,
|
||
},
|
||
{
|
||
title: "Kids Haircuts", description: "Patient, friendly approach in a comfortable environment for children.", bentoComponent: "reveal-icon", icon: Smile,
|
||
},
|
||
{
|
||
title: "Restyle & Consult", description: "Personalized style correction and haircut planning to suit your features.", bentoComponent: "reveal-icon", icon: RefreshCw,
|
||
},
|
||
]}
|
||
title="Mastered Grooming Services"
|
||
description="Our team delivers consistent quality across a range of modern barbering techniques."
|
||
/>
|
||
</div>
|
||
|
||
<div id="testimonials" data-section="testimonials">
|
||
<TestimonialCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="uniform-all-items-equal"
|
||
useInvertedBackground={false}
|
||
testimonials={[
|
||
{
|
||
id: "1", name: "Alex R.", role: "Client", company: "Rainham", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-getting-haircut_23-2148224421.jpg"},
|
||
{
|
||
id: "2", name: "John D.", role: "Client", company: "East London", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-hairdresser-washing-man-s-hair_23-2150665396.jpg"},
|
||
{
|
||
id: "3", name: "Sarah W.", role: "Parent", company: "Local", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-hair-salon_23-2150665422.jpg"},
|
||
{
|
||
id: "4", name: "Mark S.", role: "Client", company: "Essex", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-blown-salon_23-2150462466.jpg"},
|
||
{
|
||
id: "5", name: "James K.", role: "Client", company: "Local", rating: 5,
|
||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-barber-shop-concept_23-2148506323.jpg"},
|
||
]}
|
||
title="Proven Reputation"
|
||
description="Trusted by hundreds of clients across East London & Essex for consistent high-quality results."
|
||
/>
|
||
</div>
|
||
|
||
<div id="gallery" data-section="gallery">
|
||
<ProductCardOne
|
||
animationType="slide-up"
|
||
textboxLayout="default"
|
||
gridVariant="three-columns-all-equal-width"
|
||
useInvertedBackground={false}
|
||
products={[
|
||
{
|
||
id: "g1", name: "Precision Fade", price: "Work", imageSrc: "http://img.b2bpic.net/free-photo/side-view-sensitive-man-studio_23-2149518228.jpg"},
|
||
{
|
||
id: "g2", name: "Shop Interior", price: "Atmosphere", imageSrc: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg"},
|
||
{
|
||
id: "g3", name: "Beard Sculpture", price: "Detail", imageSrc: "http://img.b2bpic.net/free-photo/elderly-man_23-2148138784.jpg"},
|
||
{
|
||
id: "g4", name: "Style Result", price: "Final Look", imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-man-looking-away-standing-against-grey-wall_23-2148130340.jpg"},
|
||
{
|
||
id: "g5", name: "Hot Towel", price: "Relaxation", imageSrc: "http://img.b2bpic.net/free-photo/woman-using-undereye-masks-her-bathroom_23-2149122115.jpg"},
|
||
{
|
||
id: "g6", name: "Shop Exterior", price: "Location", imageSrc: "http://img.b2bpic.net/free-photo/full-shot-business-owner-standing-outdoors_23-2149434497.jpg"},
|
||
]}
|
||
title="Work Showcase"
|
||
description="Precision fades, beard transformations, and a clean shop atmosphere."
|
||
/>
|
||
</div>
|
||
|
||
<div id="contact" data-section="contact">
|
||
<ContactCTA
|
||
useInvertedBackground={false}
|
||
background={{
|
||
variant: "sparkles-gradient"}}
|
||
tag="Book Your Spot"
|
||
title="Secure Your Appointment"
|
||
description="Join our satisfied clients. High demand time slots fill quickly—secure yours today."
|
||
buttons={[
|
||
{
|
||
text: "Book Now", href: "#"},
|
||
{
|
||
text: "Call the Shop", href: "tel:0000000000"},
|
||
]}
|
||
/>
|
||
</div>
|
||
|
||
<div id="footer" data-section="footer">
|
||
<FooterBase
|
||
columns={[
|
||
{
|
||
title: "Visit Us", items: [
|
||
{
|
||
label: "Central Rainham, Essex", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Social", items: [
|
||
{
|
||
label: "Instagram", href: "#"},
|
||
{
|
||
label: "TikTok", href: "#"},
|
||
],
|
||
},
|
||
{
|
||
title: "Quick Links", items: [
|
||
{
|
||
label: "Book Appointment", href: "#contact"},
|
||
{
|
||
label: "Our Services", href: "#services"},
|
||
],
|
||
},
|
||
]}
|
||
logoText="Jay & Zee Barbers"
|
||
/>
|
||
</div>
|
||
</ReactLenis>
|
||
</ThemeProvider>
|
||
);
|
||
}
|