251 lines
14 KiB
TypeScript
251 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
|
|
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
|
import MediaAbout from '@/components/sections/about/MediaAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import { Sparkles, CheckCircle, Wrench, Zap, Phone, Star, Users, HelpCircle } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="floatingGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="N&G Mechanical"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Services", id: "services" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Reviews", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardGallery
|
|
title="Trusted Local Mechanics You Can Rely On"
|
|
description="Honest, experienced mechanics providing reliable servicing and repairs with transparent pricing. Rated highly by local customers."
|
|
tag="Local Experts"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
background={{ variant: "floatingGradient" }}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/professional-mechanic-using-contemporary-technology-work_329181-11875.jpg", imageAlt: "Professional mechanic working on car engine" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/man-repairing-karting-car_1157-24737.jpg", imageAlt: "Brake repair service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19702.jpg", imageAlt: "Engine diagnostics service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/service-station-two-bearded-brutal-mechanics-repairing-car-garage_613910-19571.jpg", imageAlt: "Battery replacement service" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-servicing-car_1170-1399.jpg", imageAlt: "Suspension repair service" }
|
|
]}
|
|
buttons={[
|
|
{ text: "📞 Call Now", href: "#contact" },
|
|
{ text: "📅 Book a Service", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="services" data-section="services">
|
|
<FeatureCardOne
|
|
title="Our Services"
|
|
description="Comprehensive mechanical repair and servicing solutions for all your automotive needs"
|
|
tag="What We Offer"
|
|
tagIcon={Wrench}
|
|
tagAnimation="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Logbook Servicing", description: "Keep your vehicle running smoothly with regular scheduled maintenance", imageSrc: "http://img.b2bpic.net/free-photo/businessman-businesswoman-cafe_1157-14643.jpg", imageAlt: "Logbook servicing", button: { text: "Book Service", href: "#contact" }
|
|
},
|
|
{
|
|
title: "Brake Repairs", description: "Expert brake inspection and replacement to keep you safe on the road", imageSrc: "http://img.b2bpic.net/free-photo/man-repairing-karting-car_1157-24737.jpg", imageAlt: "Brake repair service", button: { text: "Book Service", href: "#contact" }
|
|
},
|
|
{
|
|
title: "Engine Diagnostics", description: "Advanced diagnostic testing to identify and fix engine problems quickly", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19702.jpg", imageAlt: "Engine diagnostics", button: { text: "Book Service", href: "#contact" }
|
|
},
|
|
{
|
|
title: "Battery Replacement", description: "Professional battery replacement and installation for all vehicle types", imageSrc: "http://img.b2bpic.net/free-photo/service-station-two-bearded-brutal-mechanics-repairing-car-garage_613910-19571.jpg", imageAlt: "Battery replacement", button: { text: "Book Service", href: "#contact" }
|
|
},
|
|
{
|
|
title: "Suspension Repairs", description: "Suspension system maintenance and repair for safe, comfortable driving", imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-servicing-car_1170-1399.jpg", imageAlt: "Suspension repair", button: { text: "Book Service", href: "#contact" }
|
|
},
|
|
{
|
|
title: "Ignition Coil Replacement", description: "Fast and efficient ignition coil replacement to get you back on the road", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-engine_1170-1282.jpg", imageAlt: "Ignition coil replacement", button: { text: "Book Service", href: "#contact" }
|
|
}
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<MediaAbout
|
|
title="Why Choose N&G Mechanical Repairs"
|
|
description="We believe in honest advice, fair pricing, and treating every customer like family. With years of experience serving our local community, we've built our reputation on reliability and integrity."
|
|
tag="About Us"
|
|
tagIcon={CheckCircle}
|
|
tagAnimation="slide-up"
|
|
imageSrc="http://img.b2bpic.net/free-photo/professional-mechanic-using-contemporary-technology-work_329181-11875.jpg"
|
|
imageAlt="Professional mechanics in our workshop"
|
|
useInvertedBackground={false}
|
|
buttons={[{ text: "Get in Touch", href: "#contact" }]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
title="Our Track Record"
|
|
description="Trusted by local families and businesses with proven expertise and reliability"
|
|
tag="Our Achievements"
|
|
tagIcon={Sparkles}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{ id: "1", icon: Star, title: "5-Star Rated", value: "100+" },
|
|
{ id: "2", icon: Users, title: "Happy Customers", value: "500+" },
|
|
{ id: "3", icon: Zap, title: "Years Experience", value: "15+" },
|
|
{ id: "4", icon: CheckCircle, title: "Services Done", value: "2000+" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSixteen
|
|
title="What Our Customers Say"
|
|
description="Real testimonials from satisfied local customers who trust us with their vehicles"
|
|
tag="Reviews"
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "1", name: "John Smith", role: "Local Customer", company: "Community", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-testing-car-car-showroom_1303-20298.jpg", imageAlt: "John Smith" },
|
|
{ id: "2", name: "Isabelle M.", role: "Family Customer", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/feedback-comment-survey-support-response-bar-word_53876-133787.jpg", imageAlt: "Isabelle M" },
|
|
{ id: "3", name: "Ameera", role: "Regular Customer", company: "Trusted", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/satisfied-customer-shaking-hands-with-mechanic_1170-1424.jpg", imageAlt: "Ameera" },
|
|
{ id: "4", name: "Niamh Foley", role: "Loyal Customer", company: "Family", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/young-woman-showing-thumbs-up-red-blouse-looking-happy-front-view_176474-110531.jpg", imageAlt: "Niamh Foley" },
|
|
{ id: "5", name: "Ali Al-Juboory", role: "Satisfied Customer", company: "Local", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-people-looking-laptop_23-2150171220.jpg", imageAlt: "Ali Al-Juboory" },
|
|
{ id: "6", name: "Abbas", role: "Expert Mechanic", company: "Trusted", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-wiping-hands-with-cleaning-cloth_1170-1321.jpg", imageAlt: "Abbas" }
|
|
]}
|
|
kpiItems={[
|
|
{ value: "180+", label: "Reviews & Ratings" },
|
|
{ value: "98%", label: "Customer Satisfaction" },
|
|
{ value: "15+", label: "Years In Business" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<MediaAbout
|
|
title="Need a Reliable Mechanic?"
|
|
description="Call our team today or request a service booking. We're here to help with all your automotive needs, with honest advice and fair pricing."
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-black-car-mechanic-using-computer-with-his-manager-auto-repair-shop_637285-4243.jpg"
|
|
imageAlt="Contact our mechanic team"
|
|
useInvertedBackground={true}
|
|
buttons={[
|
|
{ text: "📞 Call Now", href: "tel:+1234567890" },
|
|
{ text: "📅 Book a Service", href: "#contact" }
|
|
]}
|
|
buttonAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our services, pricing, and booking process"
|
|
tag="Help & Support"
|
|
tagIcon={HelpCircle}
|
|
tagAnimation="slide-up"
|
|
textboxLayout="default"
|
|
faqsAnimation="slide-up"
|
|
mediaAnimation="slide-up"
|
|
useInvertedBackground={false}
|
|
mediaPosition="right"
|
|
imageSrc="http://img.b2bpic.net/free-photo/professional-mechanic-using-contemporary-technology-work_329181-11875.jpg"
|
|
imageAlt="Our workshop team"
|
|
faqs={[
|
|
{ id: "1", title: "How do I book a service?", content: "You can book a service by calling us directly on the phone number at the top of the page, or by filling out our contact form below. We'll confirm your booking within 24 hours." },
|
|
{ id: "2", title: "What services do you offer?", content: "We offer comprehensive mechanical services including logbook servicing, brake repairs, engine diagnostics, battery replacement, suspension repairs, ignition coil replacement, and general mechanical work." },
|
|
{ id: "3", title: "Do you offer warranty on repairs?", content: "Yes, we stand behind our work. All repairs come with a warranty to give you peace of mind. Ask us about specific warranty terms for your service." },
|
|
{ id: "4", title: "How much do repairs typically cost?", content: "Our pricing is transparent and competitive. We provide detailed quotes before any work begins. The cost depends on your vehicle and the specific service needed." },
|
|
{ id: "5", title: "Can you fix my car today?", content: "We work hard to accommodate urgent requests. Call us to check availability for same-day service. Some repairs can be completed on the spot." },
|
|
{ id: "6", title: "Are you a local business?", content: "Yes! We're a trusted local mechanic serving our community for over 15 years. We're proud to be your neighborhood automotive repair experts." }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
tag="Get Started"
|
|
tagIcon={Phone}
|
|
tagAnimation="slide-up"
|
|
title="Request a Service Booking"
|
|
description="Fill out the form below or call us directly. We'll get back to you within 24 hours to confirm your booking and discuss your vehicle's needs."
|
|
background={{ variant: "floatingGradient" }}
|
|
useInvertedBackground={false}
|
|
imageSrc="http://img.b2bpic.net/free-photo/young-black-car-mechanic-using-computer-with-his-manager-auto-repair-shop_637285-4243.jpg"
|
|
imageAlt="Contact our team"
|
|
mediaPosition="right"
|
|
mediaAnimation="slide-up"
|
|
inputPlaceholder="your@email.com"
|
|
buttonText="Request Booking"
|
|
termsText="We'll contact you shortly to confirm your booking. Your information is safe with us."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
logoText="N&G Mechanical"
|
|
columns={[
|
|
{ items: [
|
|
{ label: "Home", href: "#hero" },
|
|
{ label: "Services", href: "#services" },
|
|
{ label: "About", href: "#about" }
|
|
] },
|
|
{ items: [
|
|
{ label: "Reviews", href: "#testimonials" },
|
|
{ label: "FAQ", href: "#faq" },
|
|
{ label: "Contact", href: "#contact" }
|
|
] },
|
|
{ items: [
|
|
{ label: "📞 Call Now", href: "tel:+1234567890" },
|
|
{ label: "📍 Find Us", href: "#" },
|
|
{ label: "⏰ Hours", href: "#" }
|
|
] },
|
|
{ items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms & Conditions", href: "#" },
|
|
{ label: "© 2025 N&G Mechanical", href: "#" }
|
|
] }
|
|
]}
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|