240 lines
12 KiB
TypeScript
240 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import HeroLogo from '@/components/sections/hero/HeroLogo';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import FeatureProcessSteps from '@/components/sections/feature/FeatureProcessSteps';
|
|
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import ContactText from '@/components/sections/contact/ContactText';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, Calendar, CheckCircle, Clock, Leaf, MapPin, Shield, Sparkles, Star, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="small"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="floatingGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="extrabold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Mobile One"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Why Us", id: "features" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{
|
|
text: "Book Now", href: "contact"
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogo
|
|
logoText="Mobile One"
|
|
description="Professional car detailing that comes to you. Luxury service, hassle-free convenience."
|
|
buttons={[
|
|
{ text: "Book Your Service", href: "contact" },
|
|
{ text: "Learn More", href: "services" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg"
|
|
imageAlt="Professional mobile car detailing service"
|
|
showDimOverlay={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
tag="About Mobile One"
|
|
tagIcon={Sparkles}
|
|
title="Your Car's Best Friend"
|
|
description="Mobile One brings premium detailing services directly to your driveway. With years of automotive expertise and a commitment to excellence, we transform your vehicle with meticulous care and attention to detail."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="right"
|
|
bulletPoints={[
|
|
{
|
|
title: "Mobile Convenience", description: "We come to you—no need to visit a facility. Schedule at your home or work.", icon: MapPin
|
|
},
|
|
{
|
|
title: "Expert Craftsmanship", description: "Highly trained professionals with years of experience in automotive detailing.", icon: Award
|
|
},
|
|
{
|
|
title: "Premium Products", description: "We use only top-tier detailing products to protect and enhance your vehicle's finish.", icon: Shield
|
|
},
|
|
{
|
|
title: "Satisfaction Guaranteed", description: "We stand behind our work with comprehensive guarantees on all services."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/happy-black-auto-mechanic-working-car-workshop-looking-camera_637285-11545.jpg"
|
|
imageAlt="Mobile One professional car detailer at work"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureProcessSteps
|
|
tag="Our Services"
|
|
tagIcon={Zap}
|
|
title="Complete Detailing Solutions"
|
|
description="From exterior shine to interior perfection, we offer comprehensive detailing packages tailored to your vehicle's needs."
|
|
useInvertedBackground={true}
|
|
steps={[
|
|
{
|
|
number: "01", title: "Exterior Detailing", tag: "Included", description: "Professional wash, clay bar treatment, polishing, and ceramic coating for maximum shine and protection."
|
|
},
|
|
{
|
|
number: "02", title: "Interior Detailing", tag: "Included", description: "Deep vacuum, leather conditioning, fabric treatment, and comprehensive interior sanitization."
|
|
},
|
|
{
|
|
number: "03", title: "Engine Bay Detailing", tag: "Premium", description: "Safe cleaning and restoration of your engine compartment for peak performance appearance."
|
|
},
|
|
{
|
|
number: "04", title: "Wheel & Tire Care", tag: "Included", description: "Professional wheel cleaning, tire shine application, and brake dust removal."
|
|
}
|
|
]}
|
|
buttons={[
|
|
{ text: "View All Services", href: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<SplitAbout
|
|
tag="Why Choose Mobile One"
|
|
tagIcon={CheckCircle}
|
|
title="The Mobile One Difference"
|
|
description="Experience detailing excellence that exceeds expectations. We're not just washing cars—we're preserving automotive investments."
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
imagePosition="left"
|
|
bulletPoints={[
|
|
{
|
|
title: "Time Savings", description: "No driving, waiting, or lost hours. We detail your car while you focus on what matters.", icon: Clock
|
|
},
|
|
{
|
|
title: "Eco-Conscious", description: "Water-efficient detailing methods that protect the environment and your vehicle.", icon: Leaf
|
|
},
|
|
{
|
|
title: "Flexible Scheduling", description: "Early morning, evening, or weekend appointments to fit your busy lifestyle.", icon: Calendar
|
|
},
|
|
{
|
|
title: "Fully Insured", description: "Complete insurance coverage and liability protection for your peace of mind."
|
|
}
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/young-man-washing-car-carwash-station-outdoor_651396-2004.jpg"
|
|
imageAlt="Beautifully detailed and shining car"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwelve
|
|
cardTitle="Trusted by hundreds of satisfied customers across the region"
|
|
cardTag="Customer Reviews"
|
|
cardTagIcon={Star}
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", imageSrc: "https://img.b2bpic.net/free-photo/mid-adult-mechanic-cleaning-repaired-car-tire-with-cloth-workshop_637285-7624.jpg", imageAlt: "Sarah Mitchell"
|
|
},
|
|
{
|
|
id: "2", name: "James Rodriguez", imageSrc: "https://img.b2bpic.net/free-photo/unrecognizable-repairman-using-wrench-while-working-car-service-workshop_637285-9404.jpg", imageAlt: "James Rodriguez"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Chen", imageSrc: "https://img.b2bpic.net/free-photo/confident-car-mechanic-wearing-protective-face-mask-repair-shop_637285-9773.jpg", imageAlt: "Emily Chen"
|
|
},
|
|
{
|
|
id: "4", name: "David Thompson", imageSrc: "https://img.b2bpic.net/free-photo/black-auto-repairman-wearing-protective-face-mask-while-working-workshop_637285-8622.jpg", imageAlt: "David Thompson"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know about Mobile One's detailing services and process."
|
|
textPosition="left"
|
|
useInvertedBackground={false}
|
|
animationType="smooth"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How long does a typical detailing appointment take?", content: "Most appointments take 2-4 hours depending on your vehicle's size and the service package selected. We'll provide a time estimate when you book."
|
|
},
|
|
{
|
|
id: "2", title: "What if the weather turns bad during my appointment?", content: "We're equipped to work in most weather conditions. If severe weather occurs, we'll reschedule your appointment at no additional cost."
|
|
},
|
|
{
|
|
id: "3", title: "Do you offer any warranty on your work?", content: "Yes! All our services come with a satisfaction guarantee. If you're not completely happy, we'll make it right."
|
|
},
|
|
{
|
|
id: "4", title: "What payment methods do you accept?", content: "We accept cash, credit cards, and digital payments. Payment is due upon completion of service."
|
|
},
|
|
{
|
|
id: "5", title: "Can you detail new vehicles?", content: "Absolutely! Detailing new cars protects the factory finish and is recommended immediately after purchase."
|
|
},
|
|
{
|
|
id: "6", title: "Do you service commercial fleets?", content: "Yes, we offer fleet detailing services with custom packages and scheduling to fit your business needs."
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactText
|
|
text="Ready to experience the difference professional detailing makes? Book your Mobile One appointment today and keep your vehicle looking showroom fresh."
|
|
animationType="entrance-slide"
|
|
useInvertedBackground={false}
|
|
background={{ variant: "plain" }}
|
|
buttons={[
|
|
{ text: "Book an Appointment", href: "https://calendly.com" },
|
|
{ text: "Call Us Today", href: "tel:+1234567890" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Exterior Detailing", href: "#services" },
|
|
{ label: "Interior Detailing", href: "#services" },
|
|
{ label: "Engine Bay", href: "#services" },
|
|
{ label: "Wheel Care", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Why Choose Us", href: "#features" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Book Service", href: "#contact" },
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Mobile One Detailing. All rights reserved."
|
|
bottomRightText="Professional Car Detailing Services"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |