254 lines
13 KiB
TypeScript
254 lines
13 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
|
import { Camera, Phone, Scissors, Sparkles, Star, Users } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="shift-hover"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Clutch Cutz"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Barbers", id: "barbers" },
|
|
{ name: "Gallery", id: "gallery" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Call Now", href: "tel:+18135551234" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Tampa's Most Trusted Barbershop for Clean Cuts & Fresh Fades"
|
|
description="Walk in or book today and experience premium barber service. 4.9★ rating from 97+ reviews."
|
|
tag="Premium Local Barbershop"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "animated-grid" }}
|
|
buttons={[
|
|
{ text: "Call Now", href: "tel:+18135551234" },
|
|
{ text: "Book Appointment", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/male-barber-sitting-his-shop_23-2149186515.jpg", imageAlt: "Professional barbershop interior with barbers at work"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg", imageAlt: "Fresh fade haircut by expert barber"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-customer-s-beard-barber-shop_23-2147839832.jpg", imageAlt: "Professional beard trim and styling"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-hair-salon-facing-camera_23-2148242763.jpg", imageAlt: "Premium barbershop interior design"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506287.jpg", imageAlt: "Modern fade haircut with clean lines"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
className="hero-section"
|
|
titleClassName="text-4xl md:text-5xl font-bold"
|
|
descriptionClassName="text-lg md:text-xl"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<TestimonialCardTwelve
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Marcus Johnson", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-smiling-camera_23-2148238839.jpg", imageAlt: "Marcus Johnson - satisfied customer"
|
|
},
|
|
{
|
|
id: "2", name: "David Chen", imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-caucasian-man-looking-camera-doing-yes-gesture-isolated-olive-green-background-with-copy-space_141793-78065.jpg", imageAlt: "David Chen - satisfied customer"
|
|
},
|
|
{
|
|
id: "3", name: "James Williams", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-businessman_23-2148746289.jpg", imageAlt: "James Williams - satisfied customer"
|
|
},
|
|
{
|
|
id: "4", name: "Robert Martinez", imageSrc: "http://img.b2bpic.net/free-photo/successful-young-man-stylish-hat-relaxing-alone-cozy-cafeteria-lunch-break-looking-with-happy-expression_273609-1935.jpg", imageAlt: "Robert Martinez - satisfied customer"
|
|
}
|
|
]}
|
|
cardTitle="Over 2,000 Customers Trusted with Their Fresh Cuts"
|
|
cardTag="4.9★ Rating from 97+ Google Reviews"
|
|
cardTagIcon={Star}
|
|
cardAnimation="blur-reveal"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardTwelve
|
|
title="Premium Barber Services"
|
|
description="From classic cuts to modern fades, we offer a full range of professional barbering services tailored to your style."
|
|
tag="Our Services"
|
|
tagIcon={Scissors}
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: "haircuts", label: "Cuts", title: "Expert Haircuts & Styles", items: ["Classic cuts", "Modern fades", "Textured styles", "Custom designs"], buttons: [{ text: "Book Now", href: "#contact" }]
|
|
},
|
|
{
|
|
id: "fades", label: "Fades", title: "Precision Fade Specialists", items: ["Skin fades", "Burst fades", "Line ups", "Edge work"], buttons: [{ text: "Book Now", href: "#contact" }]
|
|
},
|
|
{
|
|
id: "beard", label: "Beard", title: "Beard Trimming & Grooming", items: ["Professional trim", "Shape & styling", "Hot towel finish", "Beard care tips"], buttons: [{ text: "Book Now", href: "#contact" }]
|
|
},
|
|
{
|
|
id: "grooming", label: "Groom", title: "Complete Grooming", items: ["Eyebrow cleanup", "Neck shaping", "Ear trimming", "Facial care"], buttons: [{ text: "Book Now", href: "#contact" }]
|
|
}
|
|
]}
|
|
animationType="opacity"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="barbers" data-section="barbers">
|
|
<TeamCardOne
|
|
members={[
|
|
{
|
|
id: "1", name: "Tony D.", role: "Lead Barber", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-plus-size-man-working-as-barista_23-2150754672.jpg", imageAlt: "Tony D. - Lead Barber with 12 years experience"
|
|
},
|
|
{
|
|
id: "2", name: "Marcus K.", role: "Master Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-blond-bearded-male-dressed-suit-grey-background_613910-1267.jpg", imageAlt: "Marcus K. - Master Barber with 8 years experience"
|
|
},
|
|
{
|
|
id: "3", name: "Luis R.", role: "Senior Barber", imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-redhead-hipster-male-dressed-blue-jacket-grey-background_613910-11975.jpg", imageAlt: "Luis R. - Senior Barber with 6 years experience"
|
|
}
|
|
]}
|
|
title="Meet Our Expert Barbers"
|
|
description="Experienced professionals dedicated to delivering premium cuts and personalized service every single time."
|
|
tag="Expert Team"
|
|
tagIcon={Users}
|
|
tagAnimation="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="scale-rotate"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<ProductCardThree
|
|
title="Gallery of Fresh Cuts"
|
|
description="Check out our portfolio of premium haircuts, fades, and grooming work. Get inspired for your next visit."
|
|
tag="Our Work"
|
|
tagIcon={Camera}
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Fresh Fade", price: "Starting at $25", imageSrc: "http://img.b2bpic.net/free-photo/black-man-with-beard-looking-away_23-2148203662.jpg", imageAlt: "Professional fresh fade haircut"
|
|
},
|
|
{
|
|
id: "2", name: "Modern Texture", price: "Starting at $30", imageSrc: "http://img.b2bpic.net/free-photo/front-view-hairstilyst-giving-haircut_23-2148506287.jpg", imageAlt: "Modern textured haircut"
|
|
},
|
|
{
|
|
id: "3", name: "Beard Styling", price: "Starting at $15", imageSrc: "http://img.b2bpic.net/free-photo/close-up-male-customer-s-beard-barber-shop_23-2147839832.jpg", imageAlt: "Professional beard trim and styling"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="blur-reveal"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Ready for a Fresh Cut?"
|
|
ctaDescription="Book your appointment today or give us a call. We're open 6 days a week."
|
|
ctaButton={{ text: "Request Appointment", href: "#contact" }}
|
|
ctaIcon={Phone}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What are your hours?", content: "We're open Tuesday-Friday 10am-7pm, Saturday 9am-6pm, Sunday 10am-4pm. Closed Mondays."
|
|
},
|
|
{
|
|
id: "2", title: "Do you take walk-ins?", content: "Yes! Walk-ins are always welcome. However, we recommend booking online for guaranteed service time during peak hours."
|
|
},
|
|
{
|
|
id: "3", title: "What payment methods do you accept?", content: "We accept cash, credit cards, debit cards, and digital payments (Venmo, Apple Pay, Google Pay)."
|
|
},
|
|
{
|
|
id: "4", title: "How long does a service take?", content: "Most haircuts take 20-30 minutes. Beard trims average 15-20 minutes. Complex styles may take longer."
|
|
},
|
|
{
|
|
id: "5", title: "Is there parking available?", content: "Yes, we have free on-site parking. We're located at 9917 N Florida Ave, Tampa, FL 33612."
|
|
},
|
|
{
|
|
id: "6", title: "Do you offer discounts or memberships?", content: "Yes! Ask about our monthly membership plan which gives you 4 haircuts per month at a discounted rate plus exclusive perks."
|
|
}
|
|
]}
|
|
useInvertedBackground={true}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Clutch Cutz"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Haircuts", href: "#services" },
|
|
{ label: "Fades", href: "#services" },
|
|
{ label: "Beard Trim", href: "#services" },
|
|
{ label: "Grooming", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#barbers" },
|
|
{ label: "Gallery", href: "#gallery" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Hours", items: [
|
|
{ label: "Tue-Fri: 10am-7pm", href: "#" },
|
|
{ label: "Sat: 9am-6pm", href: "#" },
|
|
{ label: "Sun: 10am-4pm", href: "#" },
|
|
{ label: "Mon: Closed", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Location", items: [
|
|
{ label: "9917 N Florida Ave", href: "#" },
|
|
{ label: "Tampa, FL 33612", href: "#" },
|
|
{ label: "(813) 555-1234", href: "tel:+18135551234" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Clutch Cutz Barbershop. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |