Merge version_1 into main #2

Open
bender wants to merge 1 commits from version_1 into main

View File

@@ -10,8 +10,8 @@ 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 TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import { CheckCircle, Facebook, Instagram, Scissors } from "lucide-react";
export default function LandingPage() {
@@ -29,355 +29,171 @@ export default function LandingPage() {
headingFontWeight="medium"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{
name: "About",
id: "#about",
},
{
name: "Services",
id: "#services",
},
{
name: "Team",
id: "#team",
},
{
name: "Contact",
id: "#contact",
},
]}
brandName="David Barber Shop"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleCentered
navItems={[
{ 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",
}}
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."
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",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroBillboardScroll
background={{ variant: "gradient-bars" }}
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."
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" },
]}
/>
</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}
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"
/>
</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}
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"
/>
</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."
/>
</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
},
{
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
},
{
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
},
]}
title="Why Choose David Barber Shop?"
description="We don't just cut hair; we curate experiences that leave you feeling your best."
/>
</div>
<div id="services" data-section="services">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
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",
},
]}
title="Our Grooming Essentials"
description="Top-tier products to maintain your style at home."
/>
</div>
<div id="services" data-section="services">
<ProductCardOne
animationType="slide-up"
textboxLayout="split"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={true}
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" },
]}
title="Our Grooming Essentials"
description="Top-tier products to maintain your style at home."
/>
</div>
<div id="team" data-section="team">
<TeamCardSix
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="team" data-section="team">
<TeamCardSix
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"
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="testimonials" data-section="testimonials">
<TestimonialCardTwo
animationType="slide-up"
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"
/>
</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"
/>
</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: "#",
},
]}
/>
</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: "#" }]}
/>
</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",
},
]}
/>
</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" },
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}