Merge version_2 into main #1
378
src/app/page.tsx
378
src/app/page.tsx
@@ -2,16 +2,16 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactText from '@/components/sections/contact/ContactText';
|
||||
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import TeamCardSix from '@/components/sections/team/TeamCardSix';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||
import FaqBase from '@/components/sections/faq/FaqBase';
|
||||
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { CheckCircle, Facebook, Instagram, Scissors } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
@@ -19,365 +19,115 @@ export default function LandingPage() {
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="soft-shadow"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="David Barber Shop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
<HeroOverlayTestimonial
|
||||
title="Masterful Grooming in the Heart of the City"
|
||||
description="Experience professional cuts, precision beard trimming, and premium hot towel shaves at David Barber Shop. Your style, redefined."
|
||||
description="Experience professional cuts, precision beard trimming, and premium hot towel shaves. Your style, redefined."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-vintage-sewing-machine_23-2150315196.jpg"
|
||||
imageAlt="barber shop professional vintage decor"
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Services",
|
||||
href: "#services",
|
||||
},
|
||||
testimonials={[
|
||||
{ name: "Alex R.", handle: "@alexr", testimonial: "Best haircut I've had in years!", rating: 5 },
|
||||
{ name: "James L.", handle: "@jamesl", testimonial: "Exceptional attention to detail.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Legacy"
|
||||
title="Since 2012, Defining Masculine Style"
|
||||
description="At David Barber Shop, we blend traditional techniques with modern style to bring out the best in you. We believe a haircut is more than just a trim—it's a reflection of your identity."
|
||||
subdescription="Our barbers are masters of the craft, dedicated to ensuring every guest leaves feeling sharp, confident, and refreshed."
|
||||
icon={Scissors}
|
||||
<SplitAbout
|
||||
title="Defining Masculine Style"
|
||||
description="Since 2012, we have blended traditional techniques with modern style. We believe a haircut is a reflection of your identity."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
imageAlt="barber shop master barber tools"
|
||||
bulletPoints={[{ title: "Craftsmanship", description: "Masters of the trade." }, { title: "Environment", description: "Modern and relaxing." }]}
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cutting",
|
||||
description: "Expert techniques tailored to your unique hair type and facial structure.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/composition-fathers-day_23-2148101902.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Customized styling consultation",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "High-end grooming products",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Expert finishing touches",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-vintage-sewing-machine_23-2150315196.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
{
|
||||
title: "Premium Beard Care",
|
||||
description: "Detailed beard shaping and hot towel treatments for ultimate refinement.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-bath-concept-accessories_23-2148419338.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Hot towel shave ritual",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Precision line-up techniques",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Moisturizing beard oils",
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/barber-tools-wallpaper-pattern-wooden-background-job-career-concept_53876-143260.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
{
|
||||
title: "Comfort-First Environment",
|
||||
description: "A relaxing space designed for you to unwind while we handle the rest.",
|
||||
media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-man-shaving-his-beard_23-2148696671.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
items: [
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Welcoming, modern atmosphere",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Complimentary beverage service",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
text: "Professional sanitation standards",
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-medical-sample_23-2148440028.jpg",
|
||||
imageAlt: "professional beard trimming tools set",
|
||||
},
|
||||
]}
|
||||
title="Why Choose David Barber Shop?"
|
||||
description="We don't just cut hair; we curate experiences that leave you feeling your best."
|
||||
<FeatureCardSixteen
|
||||
title="Our Standards"
|
||||
negativeCard={{ items: ["Uneven finishes", "Rushed sessions"] }}
|
||||
positiveCard={{ items: ["Perfect fades", "Consultation focused"] }}
|
||||
animationType="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<ProductCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={true}
|
||||
<ProductCardFour
|
||||
title="Grooming Essentials"
|
||||
description="Professional products to maintain your look."
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Premium Beard Oil",
|
||||
price: "$25",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-medical-sample_23-2148440028.jpg",
|
||||
imageAlt: "premium beard oil bottle packaging",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Luxury Shaving Cream",
|
||||
price: "$32",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-self-care-items-arrangement_23-2150347125.jpg",
|
||||
imageAlt: "shaving cream lather bowl brush",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Matte Styling Clay",
|
||||
price: "$28",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-bearded-senior-man-holding-serum_23-2148621174.jpg",
|
||||
imageAlt: "hair styling spray bottle spray",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Complete Grooming Kit",
|
||||
price: "$85",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/different-razors-table_23-2147736988.jpg",
|
||||
imageAlt: "beard grooming kit in box",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Refreshing Beard Balm",
|
||||
price: "$22",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-liquid-soap-container_1203-1833.jpg",
|
||||
imageAlt: "moisturizing beard balm tin packaging",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Professional Hair Spray",
|
||||
price: "$18",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-using-natural-oils-his-face_23-2148883821.jpg",
|
||||
imageAlt: "beard growth oil dropper bottle",
|
||||
},
|
||||
{ id: "p1", name: "Beard Oil", price: "$25", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-medical-sample_23-2148440028.jpg" },
|
||||
{ id: "p2", name: "Styling Clay", price: "$28", variant: "Matte", imageSrc: "http://img.b2bpic.net/free-photo/front-view-bearded-senior-man-holding-serum_23-2148621174.jpg" }
|
||||
]}
|
||||
title="Our Grooming Essentials"
|
||||
description="Top-tier products to maintain your style at home."
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
<TeamCardEleven
|
||||
title="Our Experts"
|
||||
groups={[{ id: "g1", groupTitle: "Barbers", members: [{ id: "m1", title: "David", subtitle: "Founder", detail: "12 years of experience." }] }]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "David",
|
||||
role: "Head Barber & Founder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-with-tattoo-his-face-with-crossed-arms-dressed-white-shirt-grey-background_613910-8120.jpg",
|
||||
imageAlt: "professional barber smiling studio portrait",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Marcus",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-hardworking-man-his-own-studio_1153-5359.jpg",
|
||||
imageAlt: "barber specialist portrait work uniform",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Julian",
|
||||
role: "Precision Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-hairdresser-shop_23-2149220540.jpg",
|
||||
imageAlt: "senior barber expert working haircut",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Barbers"
|
||||
description="The passionate experts behind every sharp look."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
<TestimonialCardTen
|
||||
title="Client Stories"
|
||||
testimonials={[{ id: "t1", title: "Excellent", quote: "Professional shop!", name: "Alex R.", role: "Client" }]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alex R.",
|
||||
role: "Local Business Owner",
|
||||
testimonial: "Best haircut I've had in years! David really knows his craft.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-man-posing-isolated-grey_171337-10592.jpg",
|
||||
imageAlt: "happy client after haircut professional",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "James L.",
|
||||
role: "Graphic Designer",
|
||||
testimonial: "I always leave David Barber Shop feeling refreshed and looking great.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portriat-beautiful-business-woman-standing_23-2148317282.jpg",
|
||||
imageAlt: "man looking at mirror satisfied",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Mike P.",
|
||||
role: "Software Engineer",
|
||||
testimonial: "The attention to detail here is unmatched. Consistent quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-female-barber-uniform-spreading-hands-isolated-green-background_141793-118857.jpg",
|
||||
imageAlt: "man with perfect beard trim smile",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Chris B.",
|
||||
role: "Attorney",
|
||||
testimonial: "Professional, efficient, and friendly environment. Highly recommend.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-black-polo-shirt-swinging-paint-brush-with-aggressive-expression-standing-white-background_141793-20662.jpg",
|
||||
imageAlt: "happy man with professional haircut",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Samuel K.",
|
||||
role: "Student",
|
||||
testimonial: "The best beard trim in the city, hands down.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-woman-laboratory-robes-talk-each-other-standing-greenhouse_8353-7139.jpg",
|
||||
imageAlt: "man smiling after fresh haircut",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="Trust the word of those who walk out sharper."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do I need an appointment?",
|
||||
content: "Yes, we recommend booking an appointment online to ensure your slot.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What services do you offer?",
|
||||
content: "We offer haircuts, beard trims, shaves, and grooming product advice.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Are walk-ins welcome?",
|
||||
content: "We occasionally accept walk-ins based on availability, but appointments are prioritized.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Find answers to our most common questions."
|
||||
faqsAnimation="slide-up"
|
||||
<FaqBase
|
||||
title="Common Questions"
|
||||
faqs={[{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online." }]}
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "rotated-rays-animated",
|
||||
}}
|
||||
text="Ready to get a fresh look? Book your appointment at David Barber Shop today and step up your style game."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#",
|
||||
},
|
||||
]}
|
||||
<ContactSplitForm
|
||||
title="Visit Us"
|
||||
description="Book your next session today."
|
||||
inputs={[{ name: "name", type: "text", placeholder: "Your Name" }, { name: "email", type: "email", placeholder: "Your Email" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="David Barber Shop"
|
||||
copyrightText="© 2025 David Barber Shop. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Facebook,
|
||||
href: "#",
|
||||
ariaLabel: "Facebook",
|
||||
},
|
||||
]}
|
||||
<FooterSimple
|
||||
columns={[{ title: "Links", items: [{ label: "Home" }] }]}
|
||||
bottomLeftText="© 2025 David Barber Shop"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user