Compare commits
4 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 75981b2048 | |||
| 2cb01c9b2a | |||
| 4478bc8aea | |||
| 3da62f0b3c |
290
src/app/page.tsx
290
src/app/page.tsx
@@ -2,143 +2,197 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
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 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 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() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="soft"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmall"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
cardStyle="soft-shadow"
|
||||
primaryButtonStyle="primary-glow"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="semibold"
|
||||
secondaryButtonStyle="layered"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
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">
|
||||
<HeroOverlayTestimonial
|
||||
title="Masterful Grooming in the Heart of the City"
|
||||
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?_wi=1"
|
||||
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="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">
|
||||
<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"
|
||||
bulletPoints={[{ title: "Craftsmanship", description: "Masters of the trade." }, { title: "Environment", description: "Modern and relaxing." }]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<FeatureCardSixteen
|
||||
title="Our Standards"
|
||||
description="What sets us apart."
|
||||
negativeCard={{ items: ["Uneven finishes", "Rushed sessions"] }}
|
||||
positiveCard={{ items: ["Perfect fades", "Consultation focused"] }}
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<ProductCardFour
|
||||
title="Grooming Essentials"
|
||||
description="Professional products to maintain your look."
|
||||
products={[
|
||||
{ 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" },
|
||||
{ id: "p3", name: "Shampoo", price: "$20", variant: "Daily", imageSrc: "http://img.b2bpic.net/free-photo/view-vintage-sewing-machine_23-2150315196.jpg?_wi=2" }
|
||||
]}
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
</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">
|
||||
<TeamCardEleven
|
||||
title="Our Experts"
|
||||
description="Meet the team behind the craft."
|
||||
groups={[{ id: "g1", groupTitle: "Barbers", members: [{ id: "m1", title: "David", subtitle: "Founder", detail: "12 years of experience." }] }]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<TestimonialCardTen
|
||||
title="Client Stories"
|
||||
description="What our clients say."
|
||||
testimonials={[{ id: "t1", title: "Excellent", quote: "Professional shop!", name: "Alex R.", role: "Client" }]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<FaqBase
|
||||
title="Common Questions"
|
||||
description="Everything you need to know."
|
||||
faqs={[{ id: "f1", title: "Do I need an appointment?", content: "Yes, we recommend booking online." }]}
|
||||
faqsAnimation="blur-reveal"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<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" }]}
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</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">
|
||||
<FooterSimple
|
||||
columns={[{ title: "Links", items: [{ label: "Home" }] }]}
|
||||
bottomLeftText="© 2025 David Barber Shop"
|
||||
bottomRightText="All rights reserved"
|
||||
/>
|
||||
</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>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user