232 lines
12 KiB
TypeScript
232 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
|
|
import HeroLogoBillboardSplit from "@/components/sections/hero/HeroLogoBillboardSplit";
|
|
import MediaAbout from "@/components/sections/about/MediaAbout";
|
|
import FeatureCardSix from "@/components/sections/feature/FeatureCardSix";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
|
|
import ContactFaq from "@/components/sections/contact/ContactFaq";
|
|
import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
|
|
import { Phone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="pill"
|
|
contentWidth="small"
|
|
sizing="mediumLargeSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="Cars Doctor"
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "Why Us", id: "why-us" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboardSplit
|
|
logoText="CARS DOCTOR"
|
|
description="Expert auto repair and maintenance services for all vehicle types. Fast, reliable, and trustworthy service center in Mumbai."
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Book Now", href: "#contact" },
|
|
{ text: "Call Us", href: "tel:+919876543210" },
|
|
]}
|
|
layoutOrder="default"
|
|
imageSrc="http://img.b2bpic.net/free-photo/red-steel-tool-box-garage_613910-13485.jpg"
|
|
imageAlt="Professional car service center"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
ariaLabel="Hero section - Cars Doctor auto service"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="About Cars Doctor"
|
|
description="With over 15 years of experience serving Mumbai, Cars Doctor has become the trusted choice for automotive maintenance and repair. Our team of certified technicians uses state-of-the-art equipment to ensure your vehicle receives the best care possible."
|
|
tag="Our Story"
|
|
imageSrc="http://img.b2bpic.net/free-photo/mid-adult-manager-using-digital-tablet-while-talking-car-mechanics-auto-repair-shop_637285-4225.jpg"
|
|
imageAlt="Cars Doctor expert team"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Learn More", href: "#contact" }]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardSix
|
|
title="Our Premium Services"
|
|
description="Comprehensive automotive solutions designed to keep your vehicle in perfect condition"
|
|
tag="Services"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Oil & Fluid Changes", description: "Regular oil changes and fluid top-ups to maintain engine health and performance", imageSrc: "http://img.b2bpic.net/free-photo/closeup-auto-repairman-checking-car-oil-workshop_637285-7638.jpg", imageAlt: "Oil change service"
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Tire & Wheel Service", description: "Professional tire rotation, alignment, and wheel balancing for optimal safety", imageSrc: "http://img.b2bpic.net/free-photo/muscular-man-is-fixing-car-s-wheel-with-special-tool-auto-service_613910-17086.jpg", imageAlt: "Tire service"
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "Brake Service", description: "Complete brake inspection, pad replacement, and system diagnostics", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-with-tool-wheel-hands-mechanic-blue-work-clothes_1157-46150.jpg", imageAlt: "Brake service"
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "Engine Diagnostics", description: "Advanced computer diagnostics to identify and fix engine issues", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-replaces-car-engine-garage_482257-76094.jpg", imageAlt: "Engine diagnostics"
|
|
},
|
|
{
|
|
id: 5,
|
|
title: "Battery & Electrical", description: "Battery testing, replacement, and electrical system repairs", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-attaching-jumper-cables-car-battery_1170-1134.jpg", imageAlt: "Battery service"
|
|
},
|
|
{
|
|
id: 6,
|
|
title: "Car Detailing", description: "Professional interior and exterior detailing for pristine condition", imageSrc: "http://img.b2bpic.net/free-photo/man-car-clean-vacuuming-car-inside_1303-30580.jpg", imageAlt: "Car detailing"
|
|
},
|
|
]}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-us" data-section="why-us">
|
|
<MetricCardSeven
|
|
title="Why Choose Cars Doctor"
|
|
description="Experience the difference with Mumbai's most trusted auto service center"
|
|
tag="Excellence"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "15+", title: "Years of Excellence", items: ["Established reputation", "Trusted by thousands", "Industry leader"],
|
|
},
|
|
{
|
|
id: "2", value: "500+", title: "Vehicles Serviced", items: ["All vehicle types", "Regular customers", "Fleet partnerships"],
|
|
},
|
|
{
|
|
id: "3", value: "98%", title: "Satisfaction Rate", items: ["500+ 5-star reviews", "Quality guarantee", "On-time delivery"],
|
|
},
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Customers Say"
|
|
description="Real feedback from satisfied clients who trust Cars Doctor with their vehicles"
|
|
tag="Testimonials"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Rajesh Kumar", role: "Car Owner", company: "Mumbai", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=1", imageAlt: "Rajesh Kumar"
|
|
},
|
|
{
|
|
id: "2", name: "Priya Sharma", role: "Fleet Manager", company: "Transportation Co.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=2", imageAlt: "Priya Sharma"
|
|
},
|
|
{
|
|
id: "3", name: "Amit Patel", role: "Business Owner", company: "Mumbai", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=3", imageAlt: "Amit Patel"
|
|
},
|
|
{
|
|
id: "4", name: "Neha Gupta", role: "Frequent Customer", company: "Mumbai", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg?_wi=4", imageAlt: "Neha Gupta"
|
|
},
|
|
]}
|
|
kpiItems={[
|
|
{ value: "1000+", label: "Happy Customers" },
|
|
{ value: "24/7", label: "Emergency Support" },
|
|
{ value: "Guaranteed", label: "Quality Service" },
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Book Your Service Appointment"
|
|
ctaDescription="Schedule your vehicle service with our expert team. Quick booking, priority scheduling."
|
|
ctaButton={{ text: "Schedule Now", href: "https://wa.me/919876543210" }}
|
|
ctaIcon={Phone}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How do I book an appointment?", content: "You can book through WhatsApp, call us directly, or fill the contact form. We'll confirm within 2 hours during business hours."
|
|
},
|
|
{
|
|
id: "2", title: "What payment methods do you accept?", content: "We accept cash, credit/debit cards, UPI, and digital wallets. All payments are secure and transparent with detailed invoices."
|
|
},
|
|
{
|
|
id: "3", title: "Do you provide warranty on services?", content: "Yes, all our services come with a 6-month warranty. Parts carry manufacturer warranty. Contact us for warranty details."
|
|
},
|
|
{
|
|
id: "4", title: "What are your business hours?", content: "Monday to Saturday: 9 AM - 7 PM. Sunday: 10 AM - 5 PM. Emergency services available upon request."
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBaseCard
|
|
logoText="Cars Doctor"
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Oil Changes", href: "#services" },
|
|
{ label: "Tire Service", href: "#services" },
|
|
{ label: "Brake Service", href: "#services" },
|
|
{ label: "Engine Diagnostics", href: "#services" },
|
|
],
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Blog", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Contact", items: [
|
|
{ label: "Phone: +91-9876-543-210", href: "tel:+919876543210" },
|
|
{ label: "WhatsApp: Chat Now", href: "https://wa.me/919876543210" },
|
|
{ label: "Email: info@carsdoctor.in", href: "mailto:info@carsdoctor.in" },
|
|
{ label: "Address: Mumbai", href: "#" },
|
|
],
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Warranty Info", href: "#" },
|
|
{ label: "Return Policy", href: "#" },
|
|
],
|
|
},
|
|
]}
|
|
copyrightText="© 2025 Cars Doctor. All rights reserved. Professional Auto Service Center - Mumbai"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|