268 lines
13 KiB
TypeScript
268 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Award, CheckCircle, Heart, Phone, Users, Wrench, Zap } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSmallSizeLargeTitles"
|
|
background="grid"
|
|
cardStyle="outline"
|
|
primaryButtonStyle="diagonal-gradient"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingOverlay
|
|
brandName="SUPER MECHANIC"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Book Service", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitDualMedia
|
|
title="Your Trusted Local Mechanic"
|
|
description="Fast, honest auto repair done right the first time. Helping drivers get back on the road safely — without the runaround."
|
|
background={{ variant: "plain" }}
|
|
tag="Expert Auto Repair"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
buttons={[
|
|
{ text: "Book Service", href: "#contact" },
|
|
{ text: "Call Now", href: "tel:+1234567890" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaItems={[
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-woman-talking_23-2150171273.jpg", imageAlt: "Professional mechanic working on vehicle"
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/plumber-zen-position_1368-517.jpg", imageAlt: "Trusted local mechanic portrait"
|
|
}
|
|
]}
|
|
mediaAnimation="slide-up"
|
|
rating={5}
|
|
ratingText="Loved by local drivers"
|
|
/>
|
|
</div>
|
|
|
|
<div id="trust-bar" data-section="trust-bar">
|
|
<FeatureCardNine
|
|
title="Why Super Mechanic Stands Out"
|
|
description="Quick trust signals that set us apart"
|
|
tag="Our Advantages"
|
|
tagAnimation="slide-up"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Honest Pricing", description: "No hidden fees, no upsells. What you see is what you pay.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19702.jpg", imageAlt: "Engine diagnostics"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-fixing-car-tyre_1170-1654.jpg", imageAlt: "Brake service"
|
|
}
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Same Day Repairs", description: "Many repairs completed same day. We know you need to move.", phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/serviceman-hired-condenser-checkup_482257-90623.jpg", imageAlt: "Cooling system"
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-mechanics-fixing-car_482257-76105.jpg", imageAlt: "Maintenance service"
|
|
}
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Us"
|
|
tagIcon={Heart}
|
|
tagAnimation="slide-up"
|
|
title="A Mechanic You Can Actually Trust. Super Mechanic was built on a simple belief — people deserve honest, reliable car repairs without the stress or guesswork. Tobias has built a reputation in the community for being the mechanic who shows up, figures it out, and fixes it the right way. When you bring your car to Super Mechanic, you're not just another ticket — you're a neighbor."
|
|
buttons={[
|
|
{ text: "Learn More", href: "#services" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<ProductCardThree
|
|
title="Full Service Auto Repair"
|
|
description="Complete repair solutions for all your automotive needs"
|
|
tag="Services"
|
|
tagAnimation="slide-up"
|
|
products={[
|
|
{
|
|
id: "1", name: "Engine Diagnostics", price: "Starting $75", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19702.jpg", imageAlt: "Engine diagnostic service"
|
|
},
|
|
{
|
|
id: "2", name: "Brake Service", price: "Starting $150", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-fixing-car-tyre_1170-1654.jpg", imageAlt: "Brake service and repair"
|
|
},
|
|
{
|
|
id: "3", name: "Cooling System Repair", price: "Starting $200", imageSrc: "http://img.b2bpic.net/free-photo/serviceman-hired-condenser-checkup_482257-90623.jpg", imageAlt: "Cooling system service"
|
|
},
|
|
{
|
|
id: "4", name: "Maintenance", price: "Starting $50", imageSrc: "http://img.b2bpic.net/free-photo/team-mechanics-fixing-car_482257-76105.jpg", imageAlt: "Routine maintenance service"
|
|
},
|
|
{
|
|
id: "5", name: "Emergency Repairs", price: "Call for Quote", imageSrc: "http://img.b2bpic.net/free-photo/technician-checking-car-transmission_23-2147897938.jpg", imageAlt: "Emergency repair service"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Schedule Your Repair", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
testimonial="I cannot say enough good things about Tobias. He went above and beyond to make sure everything was repaired and safe for us to make the long trip home. He is pleasant, courteous, knowledgeable and professional. I give him the highest recommendation."
|
|
rating={5}
|
|
author="Kathy Petty"
|
|
avatars={[
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "Kathy Petty" },
|
|
{ src: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman_74855-1573.jpg", alt: "Walker McDill" },
|
|
{ src: "http://img.b2bpic.net/free-photo/studio-portrait-successful-young-businesswoman_1262-5844.jpg", alt: "Ashley H" },
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-handsome-confident-stylish-hipster-lambersexual-modelsexy-modern-man-dressed-elegant-red-suit-fashion-male-posing-studio-near-blue-wall_158538-21122.jpg", alt: "Customer 4" },
|
|
{ src: "http://img.b2bpic.net/free-photo/smiling-businesswoman-standing-airport_107420-63594.jpg", alt: "Customer 5" },
|
|
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-happy-young-businessman-checkered-shirt_273609-9302.jpg", alt: "Customer 6" }
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="why-choose" data-section="why-choose">
|
|
<MetricCardOne
|
|
title="Why Drivers Choose Super Mechanic"
|
|
description="The pillars of our reputation"
|
|
tag="Our Promise"
|
|
tagAnimation="slide-up"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "10+", title: "Years Experience", description: "Trusted by the community for over a decade", icon: Award
|
|
},
|
|
{
|
|
id: "2", value: "500+", title: "Happy Customers", description: "Drivers who came back and trusted us again", icon: Users
|
|
},
|
|
{
|
|
id: "3", value: "100%", title: "Honest Work", description: "No upsells, no gimmicks, just real repairs", icon: CheckCircle
|
|
},
|
|
{
|
|
id: "4", value: "24hr", title: "Fast Turnaround", description: "Many repairs completed same day", icon: Zap
|
|
}
|
|
]}
|
|
gridVariant="uniform-all-items-equal"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Book With Confidence", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactFaq
|
|
ctaTitle="Need Your Car Fixed?"
|
|
ctaDescription="Don't wait for small problems to turn into expensive ones. Call Super Mechanic today and get back on the road with confidence."
|
|
ctaButton={{ text: "Schedule Service", href: "tel:+1234567890" }}
|
|
ctaIcon={Phone}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How quickly can you fit me in?", content: "We offer same-day repairs for many common issues. Call us first thing in the morning or book online, and we'll get you scheduled as soon as possible."
|
|
},
|
|
{
|
|
id: "2", title: "Do you provide warranties on repairs?", content: "Yes, all our repairs come with a 12-month warranty on parts and labor. We stand behind our work 100%."
|
|
},
|
|
{
|
|
id: "3", title: "What payment methods do you accept?", content: "We accept cash, credit cards, and digital payments. We also offer financing options for larger repairs."
|
|
},
|
|
{
|
|
id: "4", title: "Are your prices competitive?", content: "Our pricing is fair and transparent. No hidden fees. We're happy to discuss pricing before we start any work."
|
|
},
|
|
{
|
|
id: "5", title: "Can you help with emergency repairs?", content: "Absolutely. If you're stranded or in a bind, call us immediately. We prioritize emergency repairs and will do our best to help you fast."
|
|
},
|
|
{
|
|
id: "6", title: "Do you service all vehicle types?", content: "We work on most makes and models — cars, trucks, SUVs, and more. If you're unsure, give us a call and we'll let you know right away."
|
|
}
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Navigate", items: [
|
|
{ label: "Home", href: "#" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "About", href: "#about" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Engine Diagnostics", href: "#services" },
|
|
{ label: "Brake Service", href: "#services" },
|
|
{ label: "Cooling System", href: "#services" },
|
|
{ label: "Maintenance", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "Contact", href: "#contact" },
|
|
{ label: "Privacy Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Super Mechanic. All rights reserved."
|
|
bottomRightText="Honest Repairs. Done Right the First Time."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|