284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
|
import FeatureCardTwenty from "@/components/sections/feature/FeatureCardTwenty";
|
|
import TeamCardOne from "@/components/sections/team/TeamCardOne";
|
|
import TestimonialCardFive from "@/components/sections/testimonial/TestimonialCardFive";
|
|
import FaqBase from "@/components/sections/faq/FaqBase";
|
|
import ContactText from "@/components/sections/contact/ContactText";
|
|
import FooterLogoReveal from "@/components/sections/footer/FooterLogoReveal";
|
|
import { Tag } from "lucide-react";
|
|
|
|
export default function BarbershopPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumLarge"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="dotGrid"
|
|
cardStyle="gradient-subtle"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="bold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Barbershop Elite"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{
|
|
text: "Book Now",
|
|
href: "contact"
|
|
}}
|
|
navItemClassName="text-base font-medium transition-colors"
|
|
buttonClassName="px-6 py-2 font-semibold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardScroll
|
|
tag="Premium Grooming"
|
|
title="Master Your Look"
|
|
description="Experience precision barbering with our team of skilled professionals. Crafted cuts, classic shaves, and complete grooming solutions."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461718181-733b3cgz.jpg"
|
|
imageAlt="Professional barber at work"
|
|
buttons={[
|
|
{
|
|
text: "Book Appointment",
|
|
href: "contact"
|
|
},
|
|
{
|
|
text: "Call Now",
|
|
onClick: () => window.open("tel:+1234567890", "_self")
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwenty
|
|
tag="Our Services"
|
|
tagIcon={Tag}
|
|
title="Exceptional Grooming Services"
|
|
description="From classic haircuts to premium beard treatments, we deliver excellence in every service. Each client receives personalized attention and expert craftsmanship."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
images={[
|
|
{
|
|
id: 1,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461718930-a9bmkpuc.jpg",
|
|
imageAlt: "Professional haircut service"
|
|
},
|
|
{
|
|
id: 2,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461719446-rg5n7dks.jpg",
|
|
imageAlt: "Traditional straight razor shave"
|
|
},
|
|
{
|
|
id: 3,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461719977-s8xn4rui.jpg",
|
|
imageAlt: "Expert beard trimming and care"
|
|
},
|
|
{
|
|
id: 4,
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461718181-733b3cgz.jpg",
|
|
imageAlt: "Complete grooming experience"
|
|
}
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "View Full Menu",
|
|
href: "contact"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardOne
|
|
title="Meet Our Master Barbers"
|
|
description="Meet the skilled professionals behind every perfect cut. Each barber brings years of expertise and passion for the craft."
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
members={[
|
|
{
|
|
id: "1",
|
|
name: "Marcus Johnson",
|
|
role: "Master Barber",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461720731-gix300ws.jpg",
|
|
imageAlt: "Marcus Johnson, Master Barber"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "David Chen",
|
|
role: "Signature Cuts",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461721212-342rzetf.jpg",
|
|
imageAlt: "David Chen, Signature Cuts specialist"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "James Wilson",
|
|
role: "Beard Expert",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461721816-1h1qnt77.jpg",
|
|
imageAlt: "James Wilson, Beard Expert"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Robert Hayes",
|
|
role: "Style Consultant",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461722249-nrlfh8cm.jpg",
|
|
imageAlt: "Robert Hayes, Style Consultant"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Trusted by hundreds of satisfied customers who keep coming back for the perfect cut."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Michael Roberts, Finance Manager",
|
|
date: "Date: 15 November 2024",
|
|
title: "Best barbershop in the city",
|
|
quote: "Been coming here for three years. The attention to detail and professionalism is unmatched. Marcus knows exactly what I want every time.",
|
|
tag: "Regular Client",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461722861-9g2vgbhb.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461722861-9g2vgbhb.jpg"
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "James Patterson, Business Owner",
|
|
date: "Date: 20 October 2024",
|
|
title: "Premium service, reasonable prices",
|
|
quote: "The quality of service here is exceptional. David's attention to detail with beard shaping is incredible. Worth every penny.",
|
|
tag: "Premium Member",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461723100-gbrx8ejz.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461723100-gbrx8ejz.jpg"
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Christopher Lee, Tech Professional",
|
|
date: "Date: 5 November 2024",
|
|
title: "Transformed my look completely",
|
|
quote: "Robert helped me find a style that actually works for me. I get compliments all the time now. Highly recommend.",
|
|
tag: "New Client",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461723495-8nlkg9c5.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461723495-8nlkg9c5.jpg"
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "Anthony Scott, Corporate Executive",
|
|
date: "Date: 28 October 2024",
|
|
title: "Professional excellence every visit",
|
|
quote: "This is the standard for barbershops. Clean, welcoming atmosphere with masters of their craft. Keep it up.",
|
|
tag: "Regular Client",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461724217-bu61w8k5.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461724217-bu61w8k5.jpg"
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "David Martinez, Marketing Director",
|
|
date: "Date: 12 November 2024",
|
|
title: "True craftsmanship",
|
|
quote: "You can tell these guys truly care about their work. Every cut is precise, every detail matters. This is barbing at its finest.",
|
|
tag: "Premium Member",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461724724-wnclvhlf.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461724724-wnclvhlf.jpg"
|
|
},
|
|
{
|
|
id: "6",
|
|
name: "Thomas Anderson, Healthcare Professional",
|
|
date: "Date: 8 November 2024",
|
|
title: "Worth the wait",
|
|
quote: "Appointments book up fast here, and for good reason. The quality speaks for itself. Never disappointed.",
|
|
tag: "Regular Client",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461725080-cglir8j9.jpg",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1767461725080-cglir8j9.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about our services, pricing, or booking? Find answers here."
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "How do I book an appointment?",
|
|
content: "You can book an appointment through our contact form or call us directly. We typically accommodate walk-ins, but appointments are recommended to minimize wait times. First-time clients should arrive 10 minutes early for consultation."
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "What is your cancellation policy?",
|
|
content: "We ask for 24 hours notice for cancellations. Cancellations made within 24 hours of your appointment may be subject to a small fee. No-shows are charged the full service price."
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "How long does a typical haircut take?",
|
|
content: "A standard haircut takes 30-45 minutes depending on your hair type and desired style. Beard services typically take 20-30 minutes. Complex styling or color work may take longer."
|
|
},
|
|
{
|
|
id: "4",
|
|
title: "Do you offer gift certificates?",
|
|
content: "Yes, we offer gift certificates in any denomination. They make perfect gifts for the man who has everything. Contact us for details on purchasing."
|
|
},
|
|
{
|
|
id: "5",
|
|
title: "What products do you use?",
|
|
content: "We use premium grooming products from industry-leading brands. All products are carefully selected for quality and effectiveness. We can recommend products for home care during your visit."
|
|
},
|
|
{
|
|
id: "6",
|
|
title: "Are you accepting new clients?",
|
|
content: "Absolutely! We welcome new clients. Our experienced barbers are ready to help you find the perfect style. Call or visit us today to get started."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready for your next perfect cut? Book your appointment with our master barbers today."
|
|
animationType="entrance-slide"
|
|
useInvertedBackground="noInvert"
|
|
buttons={[
|
|
{
|
|
text: "Schedule Now",
|
|
href: "contact"
|
|
},
|
|
{
|
|
text: "Call Us"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Barbershop Elite"
|
|
logoLineHeight={1.1}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |