Files
795bf9bf-81ed-43a1-9214-e3e…/src/app/page.tsx
2026-02-11 22:40:23 +00:00

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>
);
}