304 lines
15 KiB
TypeScript
304 lines
15 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import TeamCardFive from '@/components/sections/team/TeamCardFive';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { Award, CheckCircle, Sparkles, Scissors, Zap, Users, Star, DollarSign, Phone } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="fluid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="normal"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Bozbarbershop"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Pricing", id: "pricing" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Premium Barbering Excellence"
|
|
description="Experience the art of precision grooming at Bozbarbershop. Where tradition meets modern sophistication. Master barbers dedicated to your style."
|
|
tag="Established 2015"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#about" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6405.jpg"
|
|
imageAlt="Professional barber cutting hair with precision"
|
|
mediaAnimation="slide-up"
|
|
background={{ variant: "radial-gradient" }}
|
|
imagePosition="right"
|
|
fixedMediaHeight={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="Craftsmanship Since 2015"
|
|
description="Bozbarbershop stands as a beacon of excellence in men's grooming. Our master barbers combine traditional techniques with contemporary styling to deliver unparalleled results. Every cut, every shave, every beard trim is executed with precision and care."
|
|
tag="Our Heritage"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Master Craftsmanship", description: "Decade of experience and continuous training in latest techniques", icon: CheckCircle
|
|
},
|
|
{
|
|
title: "Premium Products", description: "Only the finest grooming products and tools from leading brands", icon: Sparkles
|
|
},
|
|
{
|
|
title: "Personal Service", description: "Every client receives individualized attention and consultation", icon: Sparkles
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "Book Appointment", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-vector/barber-sign-template-design_742173-15794.jpg"
|
|
imageAlt="Bozbarbershop interior with professional styling stations"
|
|
mediaAnimation="slide-up"
|
|
imagePosition="left"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwelve
|
|
title="Our Services"
|
|
description="Each service is tailored to meet your unique grooming needs. From classic cuts to modern fades, we deliver perfection every time."
|
|
tag="What We Offer"
|
|
tagIcon={Zap}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "View All Services", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "haircut", label: "Premium Cuts", title: "Classic & Modern Haircuts", items: [
|
|
"Fade cuts with precision lining", "Textured crops and modern styles", "Scissor over comb techniques", "Custom length and style consultation"
|
|
]
|
|
},
|
|
{
|
|
id: "beard", label: "Beard Care", title: "Beard Grooming & Styling", items: [
|
|
"Full beard shaping and design", "Beard oil and conditioning treatment", "Line work and detailing", "Growth and maintenance advice"
|
|
]
|
|
},
|
|
{
|
|
id: "shave", label: "Hot Shave", title: "Traditional Straight Razor Shave", items: [
|
|
"Hot towel preparation", "Premium lather application", "Expert straight razor technique", "Aftershave balm treatment"
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Meet Our Master Barbers"
|
|
description="Experienced professionals dedicated to delivering exceptional grooming services and creating the perfect look for every client."
|
|
tag="Expert Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
team={[
|
|
{
|
|
id: "barber-1", name: "Marco Rossi", role: "Senior Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/impressed-young-caucasian-male-barber-wearing-glasses-wavy-hair-band-uniform-combing-his-hair-holding-scissors-looking-side-isolated-crimson-background_141793-88114.jpg", imageAlt: "Marco Rossi, Senior Master Barber"
|
|
},
|
|
{
|
|
id: "barber-2", name: "Alessandro Bianchi", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/pleased-young-afro-american-male-barber-wearing-uniform-holding-barber-tools-pointing-them_141793-116999.jpg", imageAlt: "Alessandro Bianchi, Master Barber"
|
|
},
|
|
{
|
|
id: "barber-3", name: "Giovanni Marino", role: "Specialist Barber", imageSrc: "http://img.b2bpic.net/free-photo/barber-man-apron-holding-beard-trimmer-showing-thumbs-up-smiling-looking-camera-standing-pink-background_141793-67187.jpg", imageAlt: "Giovanni Marino, Specialist Barber"
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Clients Say"
|
|
description="Join hundreds of satisfied customers who trust Bozbarbershop for their grooming needs."
|
|
tag="Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
testimonials={[
|
|
{
|
|
id: "client-1", name: "Marco Ferrari", role: "Entrepreneur", company: "Tech Startup", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/happy-beautiful-young-woman-standing-posing-co-working-coffee-shop-interior-looking-camera-smiling_74855-9955.jpg", imageAlt: "Marco Ferrari testimonial"
|
|
},
|
|
{
|
|
id: "client-2", name: "Antonio Giordano", role: "Executive", company: "Finance Corp", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1570.jpg", imageAlt: "Antonio Giordano testimonial"
|
|
},
|
|
{
|
|
id: "client-3", name: "Paolo Rizzo", role: "Creative Director", company: "Design Agency", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/watching-funny-video_1098-12849.jpg", imageAlt: "Paolo Rizzo testimonial"
|
|
},
|
|
{
|
|
id: "client-4", name: "Luca Mancini", role: "Lawyer", company: "Law Firm", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1597.jpg", imageAlt: "Luca Mancini testimonial"
|
|
}
|
|
]}
|
|
kpiItems={[
|
|
{ value: "500+", label: "Happy Clients" },
|
|
{ value: "9 Years", label: "Excellence" },
|
|
{ value: "4.9/5", label: "Star Rating" }
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardEight
|
|
title="Simple & Transparent Pricing"
|
|
description="Premium grooming services at fair prices. No hidden fees, just quality barbering."
|
|
tag="Affordable Excellence"
|
|
tagIcon={DollarSign}
|
|
tagAnimation="slide-up"
|
|
plans={[
|
|
{
|
|
id: "haircut", badge: "Most Popular", badgeIcon: Sparkles,
|
|
price: "$25", subtitle: "Classic Haircut", features: [
|
|
"Professional haircut", "Consultation included", "Precision styling", "Complimentary styling products"
|
|
],
|
|
buttons: [
|
|
{ text: "Book Now", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
id: "beard", badge: "Premium", badgeIcon: Award,
|
|
price: "$30", subtitle: "Beard Grooming", features: [
|
|
"Full beard shaping", "Beard oil treatment", "Line work details", "Expert consultation"
|
|
],
|
|
buttons: [
|
|
{ text: "Book Now", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
id: "hotshave", badge: "Luxury", badgeIcon: Award,
|
|
price: "$35", subtitle: "Hot Shave Experience", features: [
|
|
"Traditional hot towel prep", "Premium lather & shave", "Straight razor technique", "Aftershave balm treatment"
|
|
],
|
|
buttons: [
|
|
{ text: "Book Now", href: "#contact" }
|
|
]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
carouselMode="buttons"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Look Your Best?"
|
|
ctaDescription="Book your appointment today and experience premium barbering at Bozbarbershop."
|
|
ctaButton={{ text: "Book Appointment", href: "tel:+1234567890" }}
|
|
ctaIcon={Phone}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "faq-1", title: "How do I book an appointment?", content: "You can book an appointment by calling us directly at +1 (234) 567-8900, visiting us in person, or using our online booking system. We also accept walk-ins based on availability."
|
|
},
|
|
{
|
|
id: "faq-2", title: "What is your cancellation policy?", content: "We request 24 hours notice for cancellations. Cancellations made less than 24 hours before your appointment may be subject to a cancellation fee."
|
|
},
|
|
{
|
|
id: "faq-3", title: "Do you offer gift cards?", content: "Yes! We offer gift cards in various denominations. They make perfect gifts for the men in your life. Ask our staff about current gift card options."
|
|
},
|
|
{
|
|
id: "faq-4", title: "What payment methods do you accept?", content: "We accept cash, credit cards, debit cards, and digital payment methods. All transactions are secure and processed with care."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-smiley-man-hairdresser-shop_23-2149220531.jpg"
|
|
imageAlt="Bozbarbershop interior"
|
|
logoText="Bozbarbershop"
|
|
copyrightText="© 2024 Bozbarbershop. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Beard Grooming", href: "#services" },
|
|
{ label: "Hot Shave", href: "#services" },
|
|
{ label: "Pricing", href: "#pricing" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Our Team", href: "#team" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Phone: +1 (234) 567-8900", href: "tel:+12345678900" },
|
|
{ label: "Email: info@bozbarbershop.com", href: "mailto:info@bozbarbershop.com" },
|
|
{ label: "123 Main Street, Downtown", href: "#" },
|
|
{ label: "Mon-Sat: 9AM-7PM, Sun: 10AM-5PM", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Twitter", href: "https://twitter.com" },
|
|
{ label: "Google Reviews", href: "https://google.com" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|