289 lines
16 KiB
TypeScript
289 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import HeroSignup from '@/components/sections/hero/HeroSignup';
|
|
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
|
import { Award, DollarSign, Phone, Scissors, Sparkles, Star, Users } from "lucide-react";
|
|
|
|
export default function BarbershopPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="sharp"
|
|
contentWidth="mediumSmall"
|
|
sizing="large"
|
|
background="floatingGradient"
|
|
cardStyle="soft-shadow"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
brandName="The Edge"
|
|
navItems={[
|
|
{ name: "Home", id: "home" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
bottomLeftText="Professional Barbershop"
|
|
bottomRightText="contact@theedgebarbershop.com"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSignup
|
|
title="Premium Barbershop for the Modern Gentleman"
|
|
description="Experience precision grooming and exceptional service at The Edge Barber Shop. Your trusted destination for professional haircuts, beard styling, and premium grooming care."
|
|
tag="Professional Grooming"
|
|
tagIcon={Scissors}
|
|
background={{ variant: "sparkles-gradient" }}
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Book an Appointment"
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
titleClassName="text-5xl md:text-6xl font-bold tracking-tight"
|
|
descriptionClassName="text-xl md:text-2xl font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MetricSplitMediaAbout
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
title="Barbering Excellence Since 2010"
|
|
description="The Edge Barber Shop is built on a foundation of precision, professionalism, and passion for the craft. We believe that a great haircut is more than just a service—it's an experience. Our team of master barbers combines traditional techniques with modern styling trends to deliver the perfect look for every client."
|
|
metrics={[
|
|
{ value: "15+", title: "Years of Excellence" },
|
|
{ value: "5000+", title: "Satisfied Clients" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
|
imageAlt="The Edge Barber Shop interior"
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
titleClassName="text-4xl md:text-5xl font-bold"
|
|
descriptionClassName="text-lg font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardNine
|
|
title="Our Premium Services"
|
|
description="Comprehensive grooming solutions tailored to your style and preferences"
|
|
tag="Services"
|
|
tagIcon={Sparkles}
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Professional Haircuts", description: "Expert cuts tailored to your face shape and personal style. From classic fades to modern designs, we deliver precision every time.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Beard Grooming & Styling", description: "Complete beard services including trimming, shaping, and styling. Our experts will help you maintain the perfect beard.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Master Barbers"
|
|
description="Meet the skilled professionals behind every perfect cut"
|
|
tag="Our Team"
|
|
tagIcon={Users}
|
|
team={[
|
|
{
|
|
id: "1", name: "Marcus Johnson", role: "Head Barber & Owner", imageSrc: "https://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "David Chen", role: "Senior Barber", imageSrc: "https://img.b2bpic.net/free-photo/serious-elegant-bearded-male-wearing-classic-waistcoat-slim-bow-tie_613910-1520.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "James Williams", role: "Master Stylist", imageSrc: "https://img.b2bpic.net/free-photo/portrait-pensive-man-with-receive-moustache-beard-trimming-procedure-barbershop_613910-15033.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Torres", role: "Beard Specialist", imageSrc: "https://img.b2bpic.net/free-photo/studio-portrait-bearded-photographer-wearing-classic-suit-holding-retro-camera-standing-with-his-arms-crossed_613910-19282.jpg"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="What Our Clients Say"
|
|
description="Real feedback from satisfied gentlemen who trust The Edge"
|
|
tag="Testimonials"
|
|
tagIcon={Star}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Robert Mitchell", date: "Date: 15 January 2025", title: "The best barbershop in town!", quote: "I've been coming to The Edge for over five years and the quality never wavers. Marcus and the team always deliver an excellent cut and make you feel welcome.", tag: "Regular Client", avatarSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Anthony Rodriguez", date: "Date: 12 January 2025", title: "Professional service, outstanding results", quote: "The precision and attention to detail is what sets The Edge apart. Every haircut is exactly what I wanted. Highly recommend!", tag: "Satisfied Client", avatarSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Christopher Lee", date: "Date: 10 January 2025", title: "Exceptional beard work", quote: "David's beard grooming services are fantastic. He knows exactly how to shape and style beards to perfection. Worth every penny.", tag: "Loyal Customer", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Kevin Thompson", date: "Date: 8 January 2025", title: "A cut above the rest", quote: "The Edge sets the standard for professional barbering. Clean shop, friendly staff, and perfectly executed haircuts every single time.", tag: "Regular Client", avatarSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
},
|
|
{
|
|
id: "5", name: "Jason Martinez", date: "Date: 5 January 2025", title: "Finally found my barber", quote: "After trying several barbershops, I found my home at The Edge. Professional, courteous, and they listen to what you want.", tag: "New Customer", avatarSrc: "https://img.b2bpic.net/free-photo/confident-european-businessman-smiling-closeup-portrait-jobs-career-campaign_53876-128975.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
},
|
|
{
|
|
id: "6", name: "Daniel Wilson", date: "Date: 1 January 2025", title: "Outstanding craftsmanship", quote: "The craftsmanship here is unmatched. Whether it's a fade, a classic cut, or beard styling, The Edge delivers excellence every time.", tag: "Devoted Client", avatarSrc: "https://img.b2bpic.net/free-photo/portrait-optimistic-businessman-formalwear_1262-3600.jpg", imageSrc: "https://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
title="Simple & Transparent Pricing"
|
|
description="Quality grooming services at fair prices"
|
|
tag="Pricing"
|
|
tagIcon={DollarSign}
|
|
plans={[
|
|
{
|
|
id: "1", badge: "Standard Cut", badgeIcon: Scissors,
|
|
price: "$35", subtitle: "Classic haircut service", buttons: [
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#" }
|
|
],
|
|
features: [
|
|
"Professional haircut", "Hot towel finish", "Expert styling advice"
|
|
]
|
|
},
|
|
{
|
|
id: "2", badge: "Premium Cut & Fade", badgeIcon: Sparkles,
|
|
price: "$45", subtitle: "Includes fade and detailed styling", buttons: [
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#" }
|
|
],
|
|
features: [
|
|
"Premium haircut", "Professional fade", "Hot towel finish", "Personalized styling"
|
|
]
|
|
},
|
|
{
|
|
id: "3", badge: "Beard Package", badgeIcon: Award,
|
|
price: "$40", subtitle: "Beard trim and grooming", buttons: [
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#" }
|
|
],
|
|
features: [
|
|
"Beard trimming", "Shape and styling", "Beard conditioning", "Professional finish"
|
|
]
|
|
},
|
|
{
|
|
id: "4", badge: "Complete Grooming", badgeIcon: Star,
|
|
price: "$70", subtitle: "Haircut, fade, beard and shave", buttons: [
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#" }
|
|
],
|
|
features: [
|
|
"Premium haircut", "Professional fade", "Beard grooming", "Hot towel shave", "Full spa finish"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
textBoxTitleClassName="text-4xl md:text-5xl font-bold"
|
|
textBoxDescriptionClassName="text-lg font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get in Touch"
|
|
tagIcon={Phone}
|
|
title="Book Your Appointment"
|
|
description="Ready for your next great haircut? Reach out to us or schedule your appointment online. We look forward to seeing you at The Edge."
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="https://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
|
imageAlt="The Edge Barber Shop"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Schedule Now"
|
|
termsText="We respect your privacy. We'll only use your email to confirm your appointment."
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
titleClassName="text-4xl md:text-5xl font-bold"
|
|
descriptionClassName="text-lg font-light"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseReveal
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "services" },
|
|
{ label: "Beard Grooming", href: "services" },
|
|
{ label: "Styling", href: "services" },
|
|
{ label: "Pricing", href: "pricing" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "about" },
|
|
{ label: "Our Team", href: "team" },
|
|
{ label: "Contact", href: "contact" },
|
|
{ label: "Book Appointment", href: "contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Google Reviews", href: "https://google.com" },
|
|
{ label: "Email Us", href: "mailto:contact@theedgebarbershop.com" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 The Edge Barber Shop. All rights reserved."
|
|
className="w-full"
|
|
containerClassName="py-20"
|
|
columnTitleClassName="font-bold text-lg"
|
|
columnItemClassName="text-base font-light"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |