276 lines
14 KiB
TypeScript
276 lines
14 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Award, HelpCircle, Phone, Scissors, Star, Users, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="blurBottom"
|
|
cardStyle="gradient-mesh"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Barber Club"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Book Now", href: "#contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
title="Welcome to Barber Club"
|
|
description="Experience authentic barbering tradition combined with modern expertise. We specialize in classic cuts, precise shaves, and comprehensive grooming services in a welcoming rustic atmosphere."
|
|
tag="Est. 2015"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/luxury-coffee-shop-table-inside-barista-bar-generated-by-ai_188544-29280.jpg", imageAlt: "Rustic Barber Club Interior" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-trying-break-shaver-grey-wall_176420-6661.jpg", imageAlt: "Professional Barbering Tools" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/groom-sitting-chair-barber-shop_1304-3729.jpg?_wi=1", imageAlt: "Expert Haircut Service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/front-view-hand-holding-sieve-with-cocoa-powder_23-2148485410.jpg?_wi=1", imageAlt: "Traditional Shaving Service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg?_wi=1", imageAlt: "Professional Beard Grooming" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg?_wi=1", imageAlt: "Master Barber Portrait" }
|
|
]}
|
|
ariaLabel="Barber Club Hero Section"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
title="Craftsmanship Since Day One"
|
|
buttons={[
|
|
{ text: "Meet Our Team", href: "#team" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
ariaLabel="About Barber Club"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentySix
|
|
tag="Our Services"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
title="Premium Barbering Services"
|
|
description="From classic cuts to signature treatments, we offer a comprehensive range of grooming services tailored to your needs."
|
|
features={[
|
|
{
|
|
title: "Classic Haircuts", description: "Expert precision cuts including fades, tapers, and traditional styles. Our barbers master every technique.", imageSrc: "http://img.b2bpic.net/free-photo/groom-sitting-chair-barber-shop_1304-3729.jpg?_wi=2", imageAlt: "Professional Haircut Service", buttonIcon: Scissors,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Straight Razor Shaves", description: "Experience the ultimate relaxation with a traditional hot lather and straight razor shave. Pure craftsmanship.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hand-holding-sieve-with-cocoa-powder_23-2148485410.jpg?_wi=2", imageAlt: "Traditional Shaving Service", buttonIcon: Zap,
|
|
buttonHref: "#contact"
|
|
},
|
|
{
|
|
title: "Beard Grooming", description: "Complete beard services including trimming, shaping, and styling. We sculpt your beard to perfection.", imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdresser-modeling-beard-barbershop-close-up-photo_613910-18422.jpg?_wi=2", imageAlt: "Professional Beard Grooming", buttonIcon: Award,
|
|
buttonHref: "#contact"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Book a Service", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Barber Club Services"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
tag="Our Crew"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
title="Meet the Barbers"
|
|
description="Experienced professionals dedicated to delivering exceptional grooming services with attention to detail and genuine care."
|
|
members={[
|
|
{
|
|
id: "master-barber", name: "Marcus Johnson", role: "Master Barber & Owner", imageSrc: "http://img.b2bpic.net/free-photo/handsome-black-male-dressed-suit-from-wool_613910-15983.jpg?_wi=2", imageAlt: "Marcus Johnson - Master Barber"
|
|
},
|
|
{
|
|
id: "senior-barber", name: "David Chen", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-male-barber-wearing-uniform-holding-hair-clippers-looking-front-doing-yes-gesture-isolated-orange-wall_141793-110300.jpg", imageAlt: "David Chen - Senior Barber"
|
|
},
|
|
{
|
|
id: "barber-stylist", name: "James Rodriguez", role: "Barber & Stylist", imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-hair-salon-facing-camera_23-2148242826.jpg", imageAlt: "James Rodriguez - Barber Stylist"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{ text: "Request Your Barber", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Barber Club Team"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
tag="What Customers Say"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
title="Client Testimonials"
|
|
description="Real feedback from customers who trust Barber Club for their grooming needs."
|
|
testimonials={[
|
|
{
|
|
id: "testimonial-1", name: "Robert Williams", role: "Regular Customer", company: "5-Year Member", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-young-elegant-man-smiling_23-2148332976.jpg", imageAlt: "Robert Williams"
|
|
},
|
|
{
|
|
id: "testimonial-2", name: "Michael Torres", role: "Business Owner", company: "Downtown", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/studio-portrait-bearded-male-dressed-blue-shirt-white-jacket-bow-tie-grey-background_613910-177.jpg", imageAlt: "Michael Torres"
|
|
},
|
|
{
|
|
id: "testimonial-3", name: "Kevin Anderson", role: "First-Time Customer", company: "Converted Regular", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-holding-scissors-isolated-purple-wall_141793-86101.jpg", imageAlt: "Kevin Anderson"
|
|
},
|
|
{
|
|
id: "testimonial-4", name: "Christopher Lee", role: "Weekly Appointment", company: "Loyal Client", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-barbershop_1303-5410.jpg", imageAlt: "Christopher Lee"
|
|
}
|
|
]}
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
animationType="slide-up"
|
|
buttons={[
|
|
{ text: "Share Your Experience", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Barber Club Testimonials"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqDouble
|
|
tag="Questions?"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about Barber Club, our services, and booking appointments."
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How do I book an appointment?", content: "You can book an appointment through our website contact form, call us directly, or visit us in person. We offer online scheduling for your convenience. Walk-ins are also welcome based on availability."
|
|
},
|
|
{
|
|
id: "faq-2", title: "Do you accept walk-ins?", content: "Yes, we welcome walk-ins! However, we recommend booking ahead, especially during peak hours (Tuesday-Friday evenings and Saturday mornings) to minimize wait times."
|
|
},
|
|
{
|
|
id: "faq-3", title: "What payment methods do you accept?", content: "We accept cash, all major credit cards, and mobile payment options. We also offer gift cards for the perfect gift for the barber enthusiast in your life."
|
|
},
|
|
{
|
|
id: "faq-4", title: "How long does a typical appointment take?", content: "A standard haircut takes about 30-45 minutes. A straight razor shave takes approximately 45 minutes, while beard grooming services range from 20-40 minutes depending on the complexity."
|
|
},
|
|
{
|
|
id: "faq-5", title: "Are your barbers experienced?", content: "Absolutely. All our barbers are licensed professionals with years of experience. Many specialize in specific styles and techniques to ensure you get exactly what you're looking for."
|
|
},
|
|
{
|
|
id: "faq-6", title: "Do you offer services for kids?", content: "Yes, we offer haircuts for children and teens. Our barbers are experienced with younger clients and maintain a welcoming, comfortable environment for all ages."
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Still Have Questions?", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
ariaLabel="Barber Club FAQ"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get in Touch"
|
|
title="Ready to Experience Excellence?"
|
|
description="Book your appointment or reach out with any questions. We're here to serve you with the best in classic barbering."
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Book Now"
|
|
termsText="By booking an appointment, you agree to our Terms of Service and Privacy Policy."
|
|
ariaLabel="Barber Club Contact"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Barber Club"
|
|
copyrightText="© 2025 Barber Club | Est. 2015 | Crafted with Pride"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Straight Razor Shaves", href: "#services" },
|
|
{ label: "Beard Grooming", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Team", href: "#team" },
|
|
{ label: "Book Appointment", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Phone", href: "tel:+1234567890" },
|
|
{ label: "Email", href: "mailto:info@barberclub.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
ariaLabel="Barber Club Footer"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |