220 lines
15 KiB
TypeScript
220 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import FeatureCardEight from "@/components/sections/feature/FeatureCardEight";
|
|
import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
|
|
import TeamCardEleven from "@/components/sections/team/TeamCardEleven";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqSplitMedia from "@/components/sections/faq/FaqSplitMedia";
|
|
import ContactCenter from "@/components/sections/contact/ContactCenter";
|
|
import FooterCard from "@/components/sections/footer/FooterCard";
|
|
import { Facebook, Instagram, Phone, Scissors, Twitter } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="aurora"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Brother's Barber"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
]}
|
|
button={{ text: "Book Now", href: "contact" }}
|
|
animateOnLoad={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
title="Precision Barbering Since 1995"
|
|
description="Experience the art of classic barbering. Where tradition meets expertise, and every cut is a masterpiece crafted with care."
|
|
tag="Premium Barber Shop"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "aurora" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg?_wi=1"
|
|
imageAlt="Brother's Barber Shop Interior"
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "contact" },
|
|
{ text: "Learn More", href: "about" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardEight
|
|
title="Our Services"
|
|
description="Expert barbering services tailored to your style and preferences"
|
|
tag="What We Offer"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Classic Haircut", description: "Traditional cuts with precision fading and line work. Perfect for the distinguished gentleman.", imageSrc: "http://img.b2bpic.net/free-photo/barber-woman-making-haircut_1163-2017.jpg", imageAlt: "Classic haircut service"},
|
|
{
|
|
id: 2,
|
|
title: "Hot Towel Shave", description: "Experience the ultimate in luxury grooming. A relaxing hot towel shave performed with expert technique.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-hairdresser-massaging-young-customer-s-face-wrapped-towel-barbershop_181624-53211.jpg", imageAlt: "Hot towel shave service"},
|
|
{
|
|
id: 3,
|
|
title: "Beard Grooming", description: "Precision beard trimming, shaping, and conditioning treatments to keep you looking sharp.", imageSrc: "http://img.b2bpic.net/free-photo/mid-section-barber-applying-cream-clients-beard_107420-94760.jpg", imageAlt: "Beard grooming service"},
|
|
{
|
|
id: 4,
|
|
title: "Hair Treatment", description: "Premium scalp treatments and hair conditioning to maintain health and vitality.", imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-washing-client-s-hair-salon_23-2148242852.jpg", imageAlt: "Hair treatment service"},
|
|
]}
|
|
buttons={[{ text: "See All Services", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{
|
|
type: "text", content: "Established in 1995, Brother's Barber Shop has been the trusted destination for"},
|
|
{
|
|
type: "image", src: "http://img.b2bpic.net/free-vector/barber-shop-logo-design_79603-2145.jpg", alt: "Brother's Barber Emblem"},
|
|
{
|
|
type: "text", content: "classic barbering excellence in the community."},
|
|
]}
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Visit Us Today", href: "contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardEleven
|
|
title="Meet Our Barbers"
|
|
description="Master craftsmen with decades of combined experience in the art of barbering"
|
|
tag="Expert Team"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
groups={[
|
|
{
|
|
id: "master-barbers", groupTitle: "Master Barbers", members: [
|
|
{
|
|
id: "1", title: "Marcus Johnson", subtitle: "Head Barber & Founder", detail: "marcus@brothersbarber.com", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=1", imageAlt: "Marcus Johnson"},
|
|
{
|
|
id: "2", title: "David Chen", subtitle: "Master Stylist", detail: "david@brothersbarber.com", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=2", imageAlt: "David Chen"},
|
|
{
|
|
id: "3", title: "Antonio Rodriguez", subtitle: "Senior Barber", detail: "antonio@brothersbarber.com", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=3", imageAlt: "Antonio Rodriguez"},
|
|
],
|
|
},
|
|
{
|
|
id: "specialists", groupTitle: "Specialists", members: [
|
|
{
|
|
id: "4", title: "James Williams", subtitle: "Beard Specialist", detail: "james@brothersbarber.com", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=4", imageAlt: "James Williams"},
|
|
{
|
|
id: "5", title: "Michael Lee", subtitle: "Grooming Expert", detail: "michael@brothersbarber.com", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=5", imageAlt: "Michael Lee"},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Real testimonials from satisfied customers who trust us with their grooming"
|
|
tag="Client Reviews"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Robert Thompson, Local Executive", date: "Date: 15 January 2025", title: "The Best Barber Shop in Town", quote: "I've been coming to Brother's Barber Shop for over 15 years. The precision, professionalism, and friendly atmosphere keep me coming back. Marcus and his team truly care about their craft.", tag: "Regular Client", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "Robert Thompson"},
|
|
{
|
|
id: "2", name: "James Patterson, Business Owner", date: "Date: 10 January 2025", title: "Exceptional Service Every Time", quote: "The hot towel shave experience is absolutely luxurious. It's not just a haircut, it's a ritual that makes you feel valued and pampered. Highly recommend!", tag: "Premium Client", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "James Patterson"},
|
|
{
|
|
id: "3", name: "Christopher Miles, Young Professional", date: "Date: 5 January 2025", title: "Perfect Cuts, Great Vibes", quote: "Finally found a barber who understands modern style with classic technique. The attention to detail is incredible, and the shop has such a welcoming vibe.", tag: "New Regular", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "Christopher Miles"},
|
|
{
|
|
id: "4", name: "Daniel Foster, Community Leader", date: "Date: 28 December 2024", title: "An Institution Worth Supporting", quote: "Brother's Barber Shop is more than just a barbershop—it's a community gathering place. Great service, genuine people, and a true testament to craftsmanship.", tag: "Loyal Client", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "Daniel Foster"},
|
|
{
|
|
id: "5", name: "Kevin Adams, Gentleman", date: "Date: 20 December 2024", title: "Worth Every Penny", quote: "The quality of service is unmatched. Marcus takes his time to ensure every detail is perfect. This is what barbering should be.", tag: "Regular Client", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "Kevin Adams"},
|
|
{
|
|
id: "6", name: "Steven Brooks, Businessman", date: "Date: 12 December 2024", title: "True Professionals", quote: "Consistently excellent service. The barbers are skilled, friendly, and passionate about what they do. I wouldn't trust my look to anyone else.", tag: "VIP Client", avatarSrc: "http://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", avatarAlt: "Steven Brooks"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Everything you need to know about booking and our services"
|
|
tag="Help & Support"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
mediaAnimation="slide-up"
|
|
faqsAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg?_wi=2"
|
|
imageAlt="Brother's Barber Shop FAQ"
|
|
mediaPosition="right"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I book an appointment?", content: "You can book an appointment by clicking the 'Book Now' button on our website, calling us at (555) 123-4567, or visiting us in person. We accept walk-ins on a first-come, first-served basis. For the best availability, advance booking is recommended."},
|
|
{
|
|
id: "2", title: "What are your operating hours?", content: "We're open Monday through Friday from 9:00 AM to 7:00 PM, Saturday from 8:00 AM to 6:00 PM, and Sunday from 10:00 AM to 5:00 PM. We're closed on major holidays."},
|
|
{
|
|
id: "3", title: "Do you offer gift cards?", content: "Yes! We offer gift cards in various denominations. They make excellent gifts for the man who has everything. Contact us for more details or purchase in-shop."},
|
|
{
|
|
id: "4", title: "What payment methods do you accept?", content: "We accept cash, all major credit cards (Visa, Mastercard, American Express), and digital payment methods like Apple Pay and Google Pay."},
|
|
{
|
|
id: "5", title: "How long does a typical haircut take?", content: "A classic haircut typically takes 30-45 minutes. Hot towel shaves take about 45-60 minutes. Times may vary depending on complexity and current demand."},
|
|
{
|
|
id: "6", title: "Do you offer group or corporate bookings?", content: "Absolutely! We accommodate group appointments for special occasions and corporate events. Please contact us in advance to arrange group bookings at discounted rates."},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCenter
|
|
tag="Get In Touch"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Ready for Your Perfect Cut?"
|
|
description="Book your appointment today and experience the Brother's Barber difference. We're here to make you look and feel your best."
|
|
background={{ variant: "aurora" }}
|
|
useInvertedBackground={false}
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Book Appointment"
|
|
termsText="By booking, you agree to our cancellation policy of 24-hour notice. We respect your privacy."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Brother's Barber"
|
|
copyrightText="© 2025 Brother's Barber Shop | All Rights Reserved"
|
|
socialLinks={[
|
|
{ icon: Facebook, href: "https://facebook.com/brothersbarber", ariaLabel: "Facebook" },
|
|
{ icon: Instagram, href: "https://instagram.com/brothersbarber", ariaLabel: "Instagram" },
|
|
{ icon: Twitter, href: "https://twitter.com/brothersbarber", ariaLabel: "Twitter" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|