265 lines
9.4 KiB
TypeScript
265 lines
9.4 KiB
TypeScript
import AboutFeaturesSplit from '@/components/sections/about/AboutFeaturesSplit';
|
|
import ContactCta from '@/components/sections/contact/ContactCta';
|
|
import FaqTwoColumn from '@/components/sections/faq/FaqTwoColumn';
|
|
import FeaturesDetailedSteps from '@/components/sections/features/FeaturesDetailedSteps';
|
|
import FeaturesImageBento from '@/components/sections/features/FeaturesImageBento';
|
|
import HeroOverlay from '@/components/sections/hero/HeroOverlay';
|
|
import TeamDetailedCards from '@/components/sections/team/TeamDetailedCards';
|
|
import TestimonialTrustCard from '@/components/sections/testimonial/TestimonialTrustCard';
|
|
import { CheckCircle, Instagram, Sparkles, Star } from "lucide-react";
|
|
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
|
|
|
|
export default function HomePage() {
|
|
return (
|
|
<>
|
|
<div id="hero" data-section="hero">
|
|
<SectionErrorBoundary name="hero">
|
|
<HeroOverlay
|
|
tag="Premium Car Detailing"
|
|
title="Top Class Detailing. Unmatched Shine."
|
|
description="Professional interior and exterior detailing, paint correction, and ceramic coating services."
|
|
primaryButton={{
|
|
text: "Book Appointment",
|
|
href: "#booking",
|
|
}}
|
|
secondaryButton={{
|
|
text: "View Services",
|
|
href: "#services",
|
|
}}
|
|
imageSrc="https://images.unsplash.com/photo-1601362840469-51e4d8d58785?auto=format&fit=crop&q=80"
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SectionErrorBoundary name="about">
|
|
<AboutFeaturesSplit
|
|
tag="Our Story"
|
|
title="Crafting Perfection in Every Detail"
|
|
description="At Top Class Detailing, we combine premium products with expert techniques to provide an unparalleled car care experience. We pride ourselves on precision, cleanliness, and dedication to making your vehicle look brand new."
|
|
items={[
|
|
{
|
|
icon: Sparkles,
|
|
title: "Master Barbers",
|
|
description: "Highly trained professionals.",
|
|
},
|
|
{
|
|
icon: Star,
|
|
title: "Premium Quality",
|
|
description: "Top-tier styling products.",
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: "Easy Booking",
|
|
description: "Manage appointments online.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/close-up-man-selfcare-products_23-2149313016.jpg"
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<SectionErrorBoundary name="services">
|
|
<FeaturesDetailedSteps
|
|
tag="Our Services"
|
|
title="Grooming Excellence"
|
|
description="Explore our range of premium barbering services designed to keep you looking your best."
|
|
steps={[
|
|
{
|
|
tag: "Essential",
|
|
title: "Classic Haircut",
|
|
subtitle: "Starting at $35",
|
|
description: "Professional cut tailored to your style.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/bearded-redhead-male-dressed-blue-suit-sunglasses-dark-grey-background_613910-12043.jpg",
|
|
},
|
|
{
|
|
tag: "Grooming",
|
|
title: "Beard Trim",
|
|
subtitle: "Starting at $25",
|
|
description: "Sharp lines and professional beard conditioning.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-man-shaving-his-beard_23-2148506240.jpg",
|
|
},
|
|
{
|
|
tag: "Premium",
|
|
title: "Hot Towel Shave",
|
|
subtitle: "Starting at $45",
|
|
description: "Experience the ultimate relaxation with a straight razor.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/blue-disposable-razor-blade-with-water-drops_463209-15.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="gallery" data-section="gallery">
|
|
<SectionErrorBoundary name="gallery">
|
|
<FeaturesImageBento
|
|
tag="Gallery"
|
|
title="Portfolio of Styles"
|
|
description="Recent transformations and style work from our master barbers."
|
|
items={[
|
|
{
|
|
title: "Fade",
|
|
description: "Sharp skin fade.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-young-handsome-man-studio-fashion-portrait_1301-3980.jpg",
|
|
},
|
|
{
|
|
title: "Beard",
|
|
description: "Detailed trim.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-with-beard_1303-9367.jpg",
|
|
},
|
|
{
|
|
title: "Classic",
|
|
description: "Clean cut.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cosmetic-male-beauty-products-with-display_23-2150435206.jpg",
|
|
},
|
|
{
|
|
title: "Fade",
|
|
description: "Sharp skin fade.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-blond-bearded-male-dressed-plaid-shirt-denim-jacket-posing-grey-vignette-background_613910-11782.jpg",
|
|
},
|
|
{
|
|
title: "Beard",
|
|
description: "Detailed trim.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/lumberjack-forest_1303-9039.jpg",
|
|
},
|
|
{
|
|
title: "Classic",
|
|
description: "Clean cut.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-man-shaving-his-beard-with-razor_23-2148692250.jpg",
|
|
},
|
|
{
|
|
title: "Fade",
|
|
description: "Sharp skin fade.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/tattoo-salon-process-process-getting-tattoo-body-man-tattoo-parlor_1321-3361.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<SectionErrorBoundary name="team">
|
|
<TeamDetailedCards
|
|
tag="Our Team"
|
|
title="Meet Your Barbers"
|
|
description="The dedicated professionals who make the magic happen."
|
|
members={[
|
|
{
|
|
name: "Marcus Thorne",
|
|
role: "Head Barber",
|
|
description: "Specializing in fades and precision detailing.",
|
|
socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "#",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/handsome-caucasian-man-is-sitting-armchair-hotel-room-holding-professional-photo-camera_8353-10904.jpg",
|
|
},
|
|
{
|
|
name: "James River",
|
|
role: "Master Stylist",
|
|
description: "Expert in classic scissor cuts and beard grooming.",
|
|
socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "#",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/pleased-slavic-middle-aged-male-barber-uniform-holding-barber-tools-isolated-purple-wall_141793-91610.jpg",
|
|
},
|
|
{
|
|
name: "Leo Vance",
|
|
role: "Senior Barber",
|
|
description: "Versatile master of modern cuts and hot towel shaves.",
|
|
socialLinks: [
|
|
{
|
|
icon: Instagram,
|
|
url: "#",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/strict-slavic-middle-aged-male-barber-uniform-combing-beard-holding-scissors-isolated-purple-wall_141793-86101.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<SectionErrorBoundary name="testimonials">
|
|
<TestimonialTrustCard
|
|
quote="This is hands down the best place in town. Professional atmosphere and unparalleled skill."
|
|
rating={5}
|
|
author="Toddie Washington"
|
|
avatars={[
|
|
{
|
|
name: "Toddie",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-with-tattooed-arm-wearing-white-shirt_613910-1888.jpg",
|
|
},
|
|
{
|
|
name: "Youngdai",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pensive-man-with-receive-moustache-beard-trimming-procedure-barbershop_613910-15042.jpg",
|
|
},
|
|
{
|
|
name: "Austin",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-man-art-studio_23-2149705900.jpg",
|
|
},
|
|
{
|
|
name: "Marcus",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/business-owner-with-apron-break_23-2148366601.jpg",
|
|
},
|
|
{
|
|
name: "Sarah",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-modern-male-with-tattoos-his-arms-posing-near-window-room-with-loft-interior_613910-3595.jpg",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<SectionErrorBoundary name="faq">
|
|
<FaqTwoColumn
|
|
tag="FAQ"
|
|
title="Frequently Asked Questions"
|
|
description="Got questions? We've got answers."
|
|
items={[
|
|
{
|
|
question: "Do I need an appointment?",
|
|
answer: "We highly recommend it for priority, but we take walk-ins when available.",
|
|
},
|
|
{
|
|
question: "What services do you offer?",
|
|
answer: "We offer haircuts, fades, beard trims, and hot towel shaves.",
|
|
},
|
|
{
|
|
question: "Where are you located?",
|
|
answer: "We are located at 131 Pine St, Collingdale.",
|
|
},
|
|
]}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<SectionErrorBoundary name="contact">
|
|
<ContactCta
|
|
tag="Get Ready"
|
|
text="Ready to elevate your look? Book your appointment today."
|
|
primaryButton={{
|
|
text: "Book Now",
|
|
href: "#booking",
|
|
}}
|
|
secondaryButton={{
|
|
text: "Contact Us",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</SectionErrorBoundary>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|