496 lines
16 KiB
TypeScript
496 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
|
|
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="large"
|
|
background="fluid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Services",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Pricing",
|
|
id: "pricing",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="LuxuryDetail"
|
|
button={{
|
|
text: "Book Now",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDoubleCarousel
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Your Car Deserves Premium Detailing Excellence"
|
|
description="Experience luxury car care through advanced 3D visualization and meticulous handcrafted detailing. See your vehicle transformed before booking."
|
|
leftCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/hand-open-car-door-businessman_53876-15910.jpg",
|
|
imageAlt: "Luxury Sports Car Detailing",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-man-cleaning-car-rims_23-2148194143.jpg",
|
|
imageAlt: "Luxury Sedan Detailing",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/garage-engineers-replace-vehicle-oil_482257-115297.jpg",
|
|
imageAlt: "Paint Correction Detail",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-garage_1157-26075.jpg",
|
|
imageAlt: "Luxury SUV Detailing",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746564.jpg",
|
|
imageAlt: "Car Interior Detail",
|
|
},
|
|
]}
|
|
rightCarouselItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193575.jpg",
|
|
imageAlt: "Luxury Coupe Detail",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/luxury-car-interior_146671-19729.jpg",
|
|
imageAlt: "Car Interior Detail",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp-car_1203-2248.jpg",
|
|
imageAlt: "Luxury SUV Detailing",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-26066.jpg",
|
|
imageAlt: "Paint Correction Detail",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-frit-glass-plastic-container_107420-74211.jpg",
|
|
imageAlt: "Luxury Sedan Detailing",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Explore Our Services in 3D",
|
|
href: "#features",
|
|
},
|
|
]}
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/mid-section-view-barber-shaking-hand-with-male-client_23-2147839833.jpg",
|
|
alt: "Client A",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-car-interior-clean-up-service_23-2149212256.jpg",
|
|
alt: "Client B",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/side-view-leather-barber-shop-chair_23-2148242807.jpg",
|
|
alt: "Client C",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22306.jpg",
|
|
alt: "Client D",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212252.jpg",
|
|
alt: "Client E",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/high-angle-hands-holding-key_23-2149901393.jpg",
|
|
alt: "Partner 1",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/still-life-seat-gamers_23-2149746622.jpg",
|
|
alt: "Partner 2",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/luxury-car-interior-brown-white-colors_181624-31196.jpg",
|
|
alt: "Partner 3",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/black-interior-details-modern-luxury-car_181624-33049.jpg",
|
|
alt: "Partner 4",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/closeup-shot-seat-details-modern-car-interior_181624-25280.jpg",
|
|
alt: "Partner 5",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "Mastering the Art of Automotive Perfection",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/man-polish-car-garage_1157-36573.jpg",
|
|
alt: "Handcrafted Detailing Expert",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Precision Paint Correction",
|
|
description: "Expert restoration of your car's finish.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-polishing-service_23-2149212249.jpg",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-black-white-background_23-2150498630.jpg",
|
|
buttonText: "Learn More",
|
|
},
|
|
{
|
|
title: "Comprehensive Interior Restoration",
|
|
description: "Revitalize your cabin to factory standards.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-cleaning-her-car-dashboard-with-rag_23-2150318453.jpg",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/carpentry-concept-with-tools_23-2147773334.jpg",
|
|
buttonText: "Learn More",
|
|
},
|
|
{
|
|
title: "Advanced Ceramic Protection",
|
|
description: "Long-lasting protection for your investment.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30592.jpg",
|
|
titleImageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22303.jpg",
|
|
buttonText: "Learn More",
|
|
},
|
|
]}
|
|
title="Why Choose Our Detailing Experience"
|
|
description="We blend artisanal craftsmanship with modern technology to provide unmatched protection and aesthetic results for premium vehicles."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardFour
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Exterior Wash",
|
|
price: "From $150",
|
|
variant: "Basic Care",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212206.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Paint Protection Film",
|
|
price: "From $800",
|
|
variant: "Protection",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/macro-usb-type-c-port-neon-light-connector-closeup_169016-71437.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Full Interior Detail",
|
|
price: "From $250",
|
|
variant: "Interior",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/businesswoman-black-mask-sitting-inside-car_1157-34251.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Wheel Restoration",
|
|
price: "From $200",
|
|
variant: "Detail",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-32009.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Glass Treatment",
|
|
price: "From $100",
|
|
variant: "Exterior",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/elegant-woman-wipes-car-with-rag_1157-33901.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Paint Correction",
|
|
price: "From $500",
|
|
variant: "Restoration",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30598.jpg",
|
|
},
|
|
]}
|
|
title="Our Signature Detailing Packages"
|
|
description="From maintenance washes to complete paint restoration, choose the level of care your vehicle demands."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
plans={[
|
|
{
|
|
id: "basic",
|
|
badge: "Essential",
|
|
price: "$150",
|
|
subtitle: "Maintenance Care",
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
},
|
|
],
|
|
features: [
|
|
"Exterior Wash",
|
|
"Glass Cleaning",
|
|
"Basic Interior Vacuum",
|
|
],
|
|
},
|
|
{
|
|
id: "pro",
|
|
badge: "Premium",
|
|
price: "$350",
|
|
subtitle: "Full Detail Experience",
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
},
|
|
],
|
|
features: [
|
|
"Comprehensive Detail",
|
|
"Interior Deep Clean",
|
|
"Wheel Protection",
|
|
"Exterior Polish",
|
|
],
|
|
},
|
|
{
|
|
id: "elite",
|
|
badge: "Ultimate",
|
|
price: "$600+",
|
|
subtitle: "Connoisseur Package",
|
|
buttons: [
|
|
{
|
|
text: "Select",
|
|
},
|
|
],
|
|
features: [
|
|
"Paint Correction",
|
|
"Ceramic Coating",
|
|
"Full Interior Restoration",
|
|
"Engine Bay Detail",
|
|
],
|
|
},
|
|
]}
|
|
title="Transparent Luxury Pricing"
|
|
description="Choose the perfect detailing package tailored to your vehicle's specific maintenance requirements."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "500+",
|
|
title: "Vehicles Serviced",
|
|
description: "Luxury cars entrusted to us.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-car_23-2150171223.jpg",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "100%",
|
|
title: "Satisfaction Rate",
|
|
description: "Consistently meeting client standards.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plug-hybrid-electric-vehicle-close-up-ev-hybrid-car-logo_482257-118393.jpg",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "10",
|
|
title: "Years Experience",
|
|
description: "Expertise in high-end detailing.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22304.jpg",
|
|
},
|
|
]}
|
|
title="Our Craftsmanship by the Numbers"
|
|
description="Excellence defined by performance and dedication to high-end automotive care."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Alexander Sterling",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-man-driving-modern-car_651396-2809.jpg",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Victoria Vonn",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-tall-arabian-man-model-white-shirt-jeans-sunglasses-posed-street-city-beard-attractive-arab-guy-with-cup-coffee-against-black-business-car_627829-2676.jpg",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Marcus Thorne",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beauty-style-fashion-age-concept-close-up-portrait-positive-elegant-50-year-old-female-with-gray-hair-wrinkled-face-posing-against-white-brick-wall_344912-1852.jpg",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Julianna Reed",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130139.jpg",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Sebastian Knight",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171278.jpg",
|
|
},
|
|
]}
|
|
cardTitle="Client Excellence"
|
|
cardTag="Testimonials"
|
|
cardAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "f1",
|
|
title: "How long does a detailing session last?",
|
|
content: "Most comprehensive packages range between 4-8 hours depending on your vehicle's condition.",
|
|
},
|
|
{
|
|
id: "f2",
|
|
title: "Do you provide mobile services?",
|
|
content: "While we prioritize our studio for climate control, we offer limited mobile service for basic exterior care.",
|
|
},
|
|
{
|
|
id: "f3",
|
|
title: "How often should I detail my car?",
|
|
content: "For maximum paint protection and beauty, we recommend a professional maintenance detail every 3-4 months.",
|
|
},
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Have questions about our luxury detailing process? We have answers."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
tag="Contact Us"
|
|
title="Ready for a Consultation?"
|
|
description="Discuss your detailing needs with our experts or schedule your visit today."
|
|
buttons={[
|
|
{
|
|
text: "Get in Touch",
|
|
href: "mailto:hello@luxurydetail.com",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
columns={[
|
|
{
|
|
title: "Services",
|
|
items: [
|
|
{
|
|
label: "Paint Correction",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Ceramic Coating",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Interior Restoration",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About Us",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="LuxuryDetail"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|