228 lines
9.7 KiB
TypeScript
228 lines
9.7 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import { Scissors, Zap, Award, Sparkles } from 'lucide-react';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="noise"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
brandName="The Grooming Club"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="The Grooming Club"
|
|
description="Refining the classic art of men's grooming. Experience a master-level haircut and shave in a space dedicated to style."
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment", href: "#contact"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg?_wi=1"
|
|
imageAlt="Luxurious barber shop environment"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={true}
|
|
heading={[
|
|
{
|
|
type: "text", content: "Tradition meets "},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg", alt: "Grooming detail"},
|
|
{
|
|
type: "text", content: " modern mastery"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Precision Cut", description: "Tailored haircuts for the modern gentleman.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-scissors-dispenser_23-2148108757.jpg", buttonIcon: Scissors,
|
|
},
|
|
{
|
|
title: "Royal Shave", description: "Classic hot towel shave for ultimate relaxation.", imageSrc: "http://img.b2bpic.net/free-photo/crop-hands-shaving-neck-customer_23-2147778915.jpg", buttonIcon: Zap,
|
|
},
|
|
{
|
|
title: "Premium Care", description: "Selecting only the finest grooming products.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313029.jpg", buttonIcon: Award,
|
|
},
|
|
{
|
|
title: "Hair Spa", description: "Deep cleaning and scalp massage rituals.", imageSrc: "http://img.b2bpic.net/free-photo/mother-braiding-hair-unrecognizable-daughter_23-2147788464.jpg", buttonIcon: Sparkles,
|
|
},
|
|
]}
|
|
title="Our Signature Services"
|
|
description="Excellence in every detail, from classic shaves to precision cuts."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "p1", title: "Classic Cut", price: "$45", period: "/ session", features: [
|
|
"Haircut", "Styling", "Neck Trim"],
|
|
button: {
|
|
text: "Select", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-expensive-barber-shop-chair_23-2148257054.jpg", imageAlt: "Front view expensive barber shop chair"},
|
|
{
|
|
id: "p2", title: "Signature Shave", price: "$35", period: "/ session", features: [
|
|
"Hot Towel", "Razor Shave", "Aftercare"],
|
|
button: {
|
|
text: "Select", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-sitting-barber-chair-waiting-customer_613910-3902.jpg?_wi=2", imageAlt: "Front view expensive barber shop chair"},
|
|
{
|
|
id: "p3", title: "The Full Works", price: "$75", period: "/ session", features: [
|
|
"Classic Cut", "Royal Shave", "Scalp Massage"],
|
|
button: {
|
|
text: "Select", href: "#contact"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-hairdresser-working-with-hair-elderly-client_23-2148181885.jpg", imageAlt: "Front view expensive barber shop chair"},
|
|
]}
|
|
title="Grooming Rates"
|
|
description="Fair pricing for world-class service."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonial" data-section="testimonial">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="The best grooming experience I've ever had. True professionals with attention to detail."
|
|
rating={5}
|
|
author="James Thompson"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/male-hairdresser-using-dryer-beard-senior-client_23-2148181879.jpg", alt: "Client 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/bride-getting-hair-done-side-view_23-2149860771.jpg", alt: "Client 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-18312.jpg", alt: "Client 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/adult-barber-uniform-laughing-hair-salon_23-2148181964.jpg", alt: "Client 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/stylish-man-placing-his-bow-tie_1153-1519.jpg", alt: "Client 5"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
team={[
|
|
{
|
|
id: "t1", name: "Marcus Stone", role: "Head Barber", imageSrc: "http://img.b2bpic.net/free-photo/hairstyle-supplies_1157-7704.jpg"},
|
|
{
|
|
id: "t2", name: "Leo Rivera", role: "Senior Stylist", imageSrc: "http://img.b2bpic.net/free-photo/handsome-stylish-bearded-male-with-tattoo-arm-dressed-flannel-shirt-drinks-coffee-barbershop_613910-14697.jpg"},
|
|
{
|
|
id: "t3", name: "Sam Brooks", role: "Master Groomer", imageSrc: "http://img.b2bpic.net/free-photo/unpleased-looking-down-young-beautiful-female-barber-uniform-combing-hair-isolated-blue-background_141793-119376.jpg"},
|
|
]}
|
|
title="Meet The Masters"
|
|
description="Our team of seasoned barbers."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1", title: "Do I need an appointment?", content: "Yes, we recommend booking in advance."},
|
|
{
|
|
id: "q2", title: "What products do you use?", content: "We use premium, natural-based grooming products."},
|
|
{
|
|
id: "q3", title: "Are walk-ins accepted?", content: "Subject to availability, but appointments have priority."},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/room-home-decoration-wall-chair_1203-5027.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Common Questions"
|
|
description="Everything you need to know about our services."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={true}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Booking"
|
|
title="Ready for a trim?"
|
|
description="Secure your spot at The Grooming Club today."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us", href: "mailto:hello@groomingclub.com"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
logoText="The Grooming Club"
|
|
columns={[
|
|
{
|
|
title: "Info", items: [
|
|
{
|
|
label: "About", href: "#about"},
|
|
{
|
|
label: "Services", href: "#features"},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
{
|
|
label: "Terms", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2024 The Grooming Club. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|