284 lines
14 KiB
TypeScript
284 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
|
|
import HeroBillboardDashboard from "@/components/sections/hero/HeroBillboardDashboard";
|
|
import SplitAbout from "@/components/sections/about/SplitAbout";
|
|
import FeatureCardTwentyOne from "@/components/sections/feature/FeatureCardTwentyOne";
|
|
import TeamCardFive from "@/components/sections/team/TeamCardFive";
|
|
import TestimonialCardSix from "@/components/sections/testimonial/TestimonialCardSix";
|
|
import ContactSplit from "@/components/sections/contact/ContactSplit";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Scissors, Users, Calendar, Award, Heart, Sparkles, DollarSign, Star, Wind } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
const handleContactSubmit = (email: string) => {
|
|
console.log("Contact submission:", email);
|
|
};
|
|
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="largeSmall"
|
|
background="none"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="A'S BARBERSHOP"
|
|
navItems={[
|
|
{ name: "Home", id: "/" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardDashboard
|
|
title="Premium Cuts, Timeless Style"
|
|
description="Welcome to A's Barbershop, your trusted local destination for professional haircuts, grooming, and straight razor shaves. Book your appointment today."
|
|
tag="Established Local Favorite"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Learn More", href: "#services" },
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
dashboard={{
|
|
title: "Why Choose A's Barbershop", logoIcon: Scissors,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-bearded-man-barbershop-barber-work_627829-7279.jpg", searchPlaceholder: "Search our services", sidebarItems: [
|
|
{ icon: Scissors, active: true },
|
|
{ icon: Users },
|
|
{ icon: Calendar },
|
|
],
|
|
buttons: [
|
|
{ text: "Book Appointment", href: "#contact" },
|
|
{ text: "View Prices", href: "#services" },
|
|
],
|
|
stats: [
|
|
{
|
|
title: "Happy Clients", values: [1500, 2000, 2500],
|
|
description: "Satisfied customers annually"
|
|
},
|
|
{
|
|
title: "Years in Business", values: [10, 12, 15],
|
|
description: "Serving the community"
|
|
},
|
|
{
|
|
title: "Expert Barbers", values: [4, 5, 6],
|
|
description: "Certified professionals"
|
|
},
|
|
],
|
|
chartTitle: "Monthly Appointments", chartData: [
|
|
{ value: 85 },
|
|
{ value: 92 },
|
|
{ value: 78 },
|
|
{ value: 95 },
|
|
{ value: 88 },
|
|
],
|
|
listTitle: "Popular Services", listItems: [
|
|
{ icon: Scissors, title: "Classic Haircut", status: "30 min" },
|
|
{ icon: Sparkles, title: "Premium Fade", status: "45 min" },
|
|
{ icon: Wind, title: "Straight Razor Shave", status: "25 min" },
|
|
],
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
title="About A's Barbershop"
|
|
description="For over a decade, A's Barbershop has been the go-to destination for quality haircuts and grooming services in our community. We pride ourselves on traditional barbershop craftsmanship combined with modern techniques."
|
|
tag="Our Story"
|
|
tagIcon={Award}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-photo/brown-vintage-leather-chairs-stylish-barber-shop_627829-6188.jpg"
|
|
imageAlt="A's Barbershop interior"
|
|
mediaAnimation="slide-up"
|
|
bulletPoints={[
|
|
{
|
|
title: "Expert Craftsmanship", description: "Every cut is performed with precision and attention to detail by certified professionals", icon: Award,
|
|
},
|
|
{
|
|
title: "Community Focused", description: "We've built lasting relationships with our neighbors over 15 years of dedicated service", icon: Heart,
|
|
},
|
|
{
|
|
title: "Clean & Welcoming", description: "Our shop maintains the highest standards of hygiene and comfort for all clients", icon: Sparkles,
|
|
},
|
|
{
|
|
title: "Competitive Pricing", description: "Premium services at fair, affordable prices that respect your budget", icon: DollarSign,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwentyOne
|
|
title="Our Services"
|
|
description="Explore our full range of barbering services designed to keep you looking sharp and feeling confident."
|
|
tag="What We Offer"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="left"
|
|
imageSrc="http://img.b2bpic.net/free-photo/stylish-haircut-barbershop_1163-2012.jpg"
|
|
imageAlt="Professional barber at work"
|
|
mediaAnimation="slide-up"
|
|
accordionItems={[
|
|
{
|
|
id: "1", title: "Classic Haircut", content: "Our signature haircut service includes a professional wash, expert trimming, and styling. Perfect for maintaining your look or trying something new. 30 minutes. $25"
|
|
},
|
|
{
|
|
id: "2", title: "Premium Fade & Design", content: "Get the perfect fade with intricate design work. Our barbers specialize in modern fades, high-top styles, and custom designs. 45 minutes. $35"
|
|
},
|
|
{
|
|
id: "3", title: "Straight Razor Shave", content: "Experience the classic barbershop shave with hot lather and a straight razor. Includes pre-shave preparation and aftershave treatment. 25 minutes. $20"
|
|
},
|
|
{
|
|
id: "4", title: "Beard Grooming & Trimming", content: "Keep your beard looking pristine with professional trimming, shaping, and conditioning. Includes beard oil treatment. 20 minutes. $15"
|
|
},
|
|
{
|
|
id: "5", title: "Kids' Haircuts", content: "Family-friendly service for children in a welcoming atmosphere. Quick, professional, and fun. 20 minutes. $18"
|
|
},
|
|
]}
|
|
buttons={[{ text: "Book a Service", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardFive
|
|
title="Meet Our Team"
|
|
description="Our experienced barbers bring passion, skill, and dedication to every haircut. Learn about the experts behind your perfect style."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Expert Barbers"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
team={[
|
|
{
|
|
id: "1", name: "Marcus Chen", role: "Head Barber & Owner", imageSrc: "http://img.b2bpic.net/free-photo/handsome-businessman-barber-shop_1157-21514.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "James Rivera", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "3", name: "David Thompson", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "4", name: "Miguel Santos", role: "Specialty Barber", imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-black-male-with-tattoo-cross-arms-dressed-white-shirt_613910-15917.jpg?_wi=3"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
title="What Our Clients Say"
|
|
description="Read testimonials from satisfied customers who trust A's Barbershop with their grooming."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
tag="Client Reviews"
|
|
tagIcon={Star}
|
|
tagAnimation="slide-up"
|
|
animationType="slide-up"
|
|
speed={40}
|
|
topMarqueeDirection="left"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Robert Johnson", handle: "@rjohnson22", testimonial: "Been going to A's for 8 years. Best haircuts in town, always professional and friendly. Marcus really knows his craft.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-business-man-wearing-suit-looking-camera-smiling-broadly-with-happy-face-standing-white-background_141793-54115.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "David Williams", handle: "Local Customer", testimonial: "Finally found a barber who listens and delivers exactly what I want. Love the atmosphere and cleanliness. Highly recommend!", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-with-copy-space_23-2148422282.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Antonio Garcia", handle: "@a_garcia_93", testimonial: "Straight razor shaves here are incredible. The whole team is skilled and makes you feel welcome. Worth every penny.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=1"
|
|
},
|
|
{
|
|
id: "4", name: "Chris Martin", handle: "Regular Client", testimonial: "Brought my son for his first real haircut and both of us left happy. Professional service, great prices, awesome people.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=2"
|
|
},
|
|
{
|
|
id: "5", name: "Kevin Lee", handle: "@klee_cuts", testimonial: "The fade work here is precision-level perfect. James took time to understand exactly what I wanted. Coming back for sure.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-millennial-man-looking-camera-cafe-headshot-portrait_1163-5163.jpg?_wi=3"
|
|
},
|
|
{
|
|
id: "6", name: "Thomas Brown", handle: "Neighborhood Regular", testimonial: "A's Barbershop is a staple in our community. Consistent quality, friendly staff, and real barbershop vibes. Can't ask for more.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg"
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get in Touch"
|
|
title="Book Your Appointment"
|
|
description="Ready for a fresh cut? Schedule your appointment with one of our expert barbers. Walk-ins welcome, but appointments preferred."
|
|
tagIcon={Calendar}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "plain" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/hairdresser-cutting-man-s-hair-barber-shop_23-2149186474.jpg"
|
|
imageAlt="A's Barbershop storefront"
|
|
mediaAnimation="slide-up"
|
|
mediaPosition="right"
|
|
inputPlaceholder="Enter your email"
|
|
buttonText="Contact Us"
|
|
termsText="We'll get back to you within 24 hours. We respect your privacy."
|
|
onSubmit={handleContactSubmit}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="A'S BARBERSHOP"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Shaves", href: "#services" },
|
|
{ label: "Beard Care", href: "#services" },
|
|
{ label: "Pricing", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "About", items: [
|
|
{ label: "Our Story", href: "#about" },
|
|
{ label: "Meet the Team", href: "#team" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Book Appointment", href: "#contact" },
|
|
{ label: "Phone: (555) 123-4567", href: "tel:5551234567" },
|
|
{ label: "Hours: Mon-Sat 9am-7pm", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Follow Us", items: [
|
|
{ label: "Facebook", href: "https://facebook.com" },
|
|
{ label: "Instagram", href: "https://instagram.com" },
|
|
{ label: "Google Reviews", href: "https://google.com/maps" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 A'S BARBERSHOP | All Rights Reserved"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|