Files
47c7e381-1c19-49fc-8834-792…/src/app/page.tsx
2026-05-09 18:53:41 +00:00

180 lines
7.9 KiB
TypeScript

"use client";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
export default function LandingPage() {
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
defaultTextAnimation="reveal-blur"
borderRadius="soft"
contentWidth="mediumSmall"
sizing="largeSmallSizeMediumTitles"
background="fluid"
cardStyle="gradient-radial"
primaryButtonStyle="radial-glow"
secondaryButtonStyle="radial-glow"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home", id: "home"},
{
name: "Services", id: "services"},
{
name: "Reviews", id: "reviews"},
{
name: "Contact", id: "contact"},
]}
brandName="Johnny D's Auto Detailing"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitKpi
background={{
variant: "gradient-bars"}}
title="Professional Detailing Since 2000"
description="Downriver's premier auto detailing service. Restoring your vehicle to showroom condition with elite interior and exterior care."
kpis={[
{
value: "24+", label: "Years Experience"},
{
value: "Local", label: "Downriver Serving"},
{
value: "Elite", label: "Quality Standard"},
]}
enableKpiAnimation={true}
buttons={[
{
text: "Call (734) 692-7370", href: "tel:+17346927370"},
]}
imageSrc="http://img.b2bpic.net/free-photo/magnetic-shape-black-shades-with-spikes_23-2148253594.jpg"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22299.jpg", alt: "Customer profile 1"},
{
src: "http://img.b2bpic.net/free-photo/ice-cup-closeup_114579-84833.jpg", alt: "Customer profile 2"},
{
src: "http://img.b2bpic.net/free-photo/close-up-metallic-motorcycle-helmet_23-2151113140.jpg", alt: "Customer profile 3"},
{
src: "http://img.b2bpic.net/free-photo/close-up-ferromagnetic-metal-substance_23-2148253634.jpg", alt: "Customer profile 4"},
{
src: "http://img.b2bpic.net/free-photo/man-working-car-detailing-coating-car_1303-30600.jpg", alt: "Customer profile 5"},
]}
avatarText="Trusted by 5,000+ local drivers"
marqueeItems={[
{
type: "text", text: "Paint Correction"},
{
type: "text", text: "Ceramic Coating"},
{
type: "text", text: "Interior Deep Clean"},
{
type: "text", text: "Hand Waxing"},
{
type: "text", text: "Headlight Restoration"},
]}
/>
</div>
<div id="services" data-section="services">
<FeatureCardSixteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
negativeCard={{
items: [
"Gift Certificates: The perfect gift for any car enthusiast", "Transparent Service: Professional work you can trust", "Flexible Scheduling: Quality service for your busy life"],
}}
positiveCard={{
items: [
"Exterior Detailing: Hand wash, clay bar, and wax", "Interior Detailing: Deep cleaning, vacuum, and protection", "Full Detail: Comprehensive interior and exterior restoration"],
}}
title="Our Specialized Detailing Services"
description="We treat every car with the precision it deserves. Call for a quote on your specific vehicle needs."
/>
</div>
<div id="reviews" data-section="reviews">
<TestimonialCardThirteen
animationType="slide-up"
textboxLayout="default"
useInvertedBackground={false}
testimonials={[
{
id: "1", name: "Ronald B.", handle: "Yelp Review", testimonial: "Johnny D's is first class. Best service in Downriver.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-joyful-young-caucasian-man-looking-camera-smiling-isolated-orange-background_141793-78027.jpg"},
{
id: "2", name: "Craig T.", handle: "Yelp Review", testimonial: "Hidden gem. LEGIT. Worth every penny.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/stylish-attractive-middle-aged-busy-woman-wearing-sunglasses-wrist-watch-going-shopping-driving-her-new-car-having-confident-look_343059-2258.jpg"},
{
id: "3", name: "Stephanie C.", handle: "Yelp Review", testimonial: "They got my interior looking brand new, even with dog hair.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-smiley-man-inside-car_23-2149201412.jpg"},
{
id: "4", name: "Daniel A.", handle: "Yelp Review", testimonial: "Scuffs in my paint disappeared. Awesome job.", rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/portrait-salesman-car-dealership_23-2148130114.jpg"},
{
id: "5", name: "Michael S.", handle: "Google Review", testimonial: "Professional, on time, and amazing attention to detail.", rating: 5,
imageSrc: "http://img.b2bpic.net/blond-businessman-surprised-expression_1194-3641.jpg"},
]}
showRating={true}
title="What Our Customers Say"
description="Downriver's choice for professional detailing."
/>
</div>
<div id="faq" data-section="faq">
<FaqSplitText
useInvertedBackground={false}
sideTitle="Frequently Asked Questions"
sideDescription="Everything you need to know about our professional detailing process."
faqsAnimation="slide-up"
faqs={[
{
id: "f1", title: "Do I need an appointment?", content: "Yes, we operate by appointment to ensure every vehicle gets the full attention it needs."},
{
id: "f2", title: "How long does a full detail take?", content: "A full detail typically takes 4-6 hours depending on the condition and size of your vehicle."},
{
id: "f3", title: "What payment methods do you accept?", content: "We currently accept cash and local checks only."},
{
id: "f4", title: "Do you offer mobile services?", content: "We are currently operating out of our professional shop location in Brownstown Township."},
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain"}}
title="Visit or Call Today"
description="Located at 21826 Telegraph Rd, Brownstown Township, MI 48183. Hours: Monday-Friday 8:00 AM - 5:00 PM. Closed Sat/Sun."
buttonText="Call (734) 692-7370"
onSubmit={(email) => window.location.href = 'tel:+17346927370'}
tag="Contact Us"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="Johnny D's Auto Detailing"
copyrightText="© 2025 Johnny D's Auto Detailing | Cash & Check Only"
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}