231 lines
12 KiB
TypeScript
231 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
|
|
import HeroLogoBillboard from "@/components/sections/hero/HeroLogoBillboard";
|
|
import AboutMetric from "@/components/sections/about/AboutMetric";
|
|
import FeatureCardThree from "@/components/sections/feature/featureCardThree/FeatureCardThree";
|
|
import MetricCardSeven from "@/components/sections/metrics/MetricCardSeven";
|
|
import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
|
|
import FaqSplitText from "@/components/sections/faq/FaqSplitText";
|
|
import ContactCTA from "@/components/sections/contact/ContactCTA";
|
|
import FooterMedia from "@/components/sections/footer/FooterMedia";
|
|
import { Wrench, Users, CheckCircle, Clock, Phone } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="expand-hover"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSmall"
|
|
background="circleGradient"
|
|
cardStyle="layered-gradient"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
brandName="Nick's Auto Service"
|
|
navItems={[
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "FAQ", id: "faq" }
|
|
]}
|
|
button={{ text: "Book Service", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Nick's Auto Service"
|
|
description="Expert automotive maintenance and repair for all makes and models. Professional service, fair pricing, and trusted expertise."
|
|
buttons={[
|
|
{ text: "Book Your Service", href: "#contact" },
|
|
{ text: "Learn More", href: "#services" }
|
|
]}
|
|
background={{ variant: "plain" }}
|
|
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-digital-tablet-while-servicing-car-engine_1170-1367.jpg?_wi=1"
|
|
imageAlt="Professional mechanic working on vehicle engine"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<AboutMetric
|
|
title="Trusted Automotive Expertise"
|
|
metrics={[
|
|
{ icon: Wrench, label: "Years of Experience", value: "25+" },
|
|
{ icon: Users, label: "Satisfied Customers", value: "5000+" },
|
|
{ icon: CheckCircle, label: "Quality Guarantee", value: "100%" },
|
|
{ icon: Clock, label: "Quick Turnaround", value: "24-48hrs" }
|
|
]}
|
|
metricsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardThree
|
|
title="Our Services"
|
|
description="Comprehensive automotive care for your vehicle's complete maintenance and repair needs."
|
|
features={[
|
|
{
|
|
id: "oil-change", title: "Oil & Filter Service", description: "Regular oil changes keep your engine running smoothly and extend its lifespan. We use quality synthetic and conventional oils.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-talking-smartphone-with-lifted-car-coworker_496169-934.jpg", imageAlt: "Oil change service being performed"
|
|
},
|
|
{
|
|
id: "tire-service", title: "Tire Service & Alignment", description: "Professional tire rotation, balancing, and alignment to ensure even wear, better fuel economy, and safer driving.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-tyre_1170-1322.jpg", imageAlt: "Tire service and alignment"
|
|
},
|
|
{
|
|
id: "brake-service", title: "Brake Service & Repair", description: "Complete brake system inspection, pad replacement, and repairs to keep you safe on the road.", imageSrc: "http://img.b2bpic.net/free-photo/auto-mechanic-checking-car_1303-14048.jpg", imageAlt: "Brake service and repair"
|
|
},
|
|
{
|
|
id: "diagnostics", title: "Computer Diagnostics", description: "Advanced diagnostic equipment to identify issues quickly and accurately, saving you time and money.", imageSrc: "http://img.b2bpic.net/free-photo/car-mechanic-checking-up-car-car-service_1303-28492.jpg", imageAlt: "Computer diagnostic equipment"
|
|
}
|
|
]}
|
|
gridVariant="two-columns-alternating-heights"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
tag="Professional Care"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
title="Why Choose Nick's Auto Service"
|
|
description="Industry-leading standards and customer satisfaction metrics."
|
|
metrics={[
|
|
{
|
|
id: "reliability", value: "98%", title: "Customer Satisfaction", items: ["Honest diagnostics", "Fair pricing", "Professional service"]
|
|
},
|
|
{
|
|
id: "speed", value: "24-48", title: "Hour Turnaround", items: ["Quick appointments", "Efficient service", "Minimal downtime"]
|
|
},
|
|
{
|
|
id: "warranty", value: "12mo", title: "Warranty", items: ["Parts guarantee", "Labor coverage", "Peace of mind"]
|
|
}
|
|
]}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardThirteen
|
|
title="Customer Testimonials"
|
|
description="Real feedback from satisfied customers who trust Nick's Auto Service with their vehicles."
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Sarah Mitchell", handle: "Toyota Owner", testimonial: "Nick's team fixed my transmission issue quickly and professionally. The entire experience was transparent and they kept me updated every step of the way.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-car-showroom-saleswoman-ready-assist-customers_482257-124534.jpg", imageAlt: "Sarah Mitchell testimonial"
|
|
},
|
|
{
|
|
id: "2", name: "James Rodriguez", handle: "Fleet Manager", testimonial: "We've been bringing all our company vehicles to Nick's for over 5 years. Reliable, honest, and they always meet our tight deadlines.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-garage-holding-car-key_107420-95940.jpg", imageAlt: "James Rodriguez testimonial"
|
|
},
|
|
{
|
|
id: "3", name: "Emily Chen", handle: "Honda Owner", testimonial: "Best auto shop in town! Fair prices, excellent service, and they actually explain what's going on with your car. Highly recommended.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/female-employee-black-suit-looks-positive_114579-21797.jpg", imageAlt: "Emily Chen testimonial"
|
|
},
|
|
{
|
|
id: "4", name: "Michael Brown", handle: "Truck Owner", testimonial: "Nick diagnosed my truck's problem correctly on the first try. Saved me hundreds of dollars and the work was done perfectly.", rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-talking-mobile-phone_1170-1328.jpg", imageAlt: "Michael Brown testimonial"
|
|
}
|
|
]}
|
|
showRating={true}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Find answers to common questions about our services, pricing, and appointment scheduling."
|
|
faqs={[
|
|
{
|
|
id: "1", title: "How often should I get my oil changed?", content: "Most modern vehicles need an oil change every 5,000 to 7,500 miles or every 3-6 months. Consult your owner's manual for specific recommendations based on your vehicle and oil type."
|
|
},
|
|
{
|
|
id: "2", title: "Do you offer warranty on repairs?", content: "Yes! We provide a 12-month warranty on parts and labor for most repairs. This gives you peace of mind knowing your vehicle is protected."
|
|
},
|
|
{
|
|
id: "3", title: "How can I schedule an appointment?", content: "You can book online through our website, call us directly, or visit our shop in person. We typically offer same-week appointments and emergency service."
|
|
},
|
|
{
|
|
id: "4", title: "What payment methods do you accept?", content: "We accept cash, all major credit cards, and digital payment methods. We also offer financing options for major repairs."
|
|
},
|
|
{
|
|
id: "5", title: "Can you work on all vehicle makes and models?", content: "Yes, our certified technicians have experience with domestic and foreign vehicles of all makes and models, from compact cars to trucks."
|
|
},
|
|
{
|
|
id: "6", title: "How long does a typical service take?", content: "Most services are completed within 24-48 hours. Oil changes typically take 30-45 minutes, while more complex repairs may take longer."
|
|
}
|
|
]}
|
|
faqsAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
textPosition="left"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Get Started"
|
|
tagIcon={Phone}
|
|
title="Ready to Get Your Vehicle Serviced?"
|
|
description="Contact Nick's Auto Service today to schedule your appointment or ask any questions about our services."
|
|
buttons={[
|
|
{ text: "Call (555) 123-4567", href: "tel:+15551234567" },
|
|
{ text: "Email us", href: "mailto:info@nicksautoservice.com" }
|
|
]}
|
|
background={{ variant: "radial-gradient" }}
|
|
useInvertedBackground={true}
|
|
tagAnimation="slide-up"
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/mechanic-using-digital-tablet-while-servicing-car-engine_1170-1367.jpg?_wi=2"
|
|
imageAlt="Nick's Auto Service garage"
|
|
logoText="Nick's Auto Service"
|
|
copyrightText="© 2025 Nick's Auto Service. All rights reserved."
|
|
columns={[
|
|
{
|
|
title: "Services", items: [
|
|
{ label: "Oil Changes", href: "#services" },
|
|
{ label: "Tire Service", href: "#services" },
|
|
{ label: "Brake Repair", href: "#services" },
|
|
{ label: "Diagnostics", href: "#services" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#about" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Warranty", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |