Merge version_1 into main #3
206
src/app/page.tsx
206
src/app/page.tsx
@@ -26,131 +26,99 @@ export default function LandingPage() {
|
||||
headingFontWeight="extrabold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Metro Auto Repair"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Metro Auto Repair"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Reliable Repairs. Honest Service. Every Time."
|
||||
description="Your trusted neighborhood auto repair shop in Gulshan-e-Iqbal, Karachi. Serving all makes and models with expert care."
|
||||
testimonials={[
|
||||
{ name: "Ali Khan", handle: "@alikhan", testimonial: "Excellent service and very transparent pricing. My go-to shop for routine maintenance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881684.jpg", imageAlt: "auto repair shop interior" },
|
||||
{ name: "Sara Ahmed", handle: "@saraahmed", testimonial: "Quick turnaround and skilled technicians. They fixed my engine issues perfectly.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mechanic-wiping-his-hands-with-napkin_1170-1551.jpg", imageAlt: "friendly experienced mechanic portrait" },
|
||||
{ name: "Zaid Mahmood", handle: "@zaidm", testimonial: "Honest service. They don't try to oversell unneeded parts. Highly recommended.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg", imageAlt: "engine diagnostic scan tool" },
|
||||
{ name: "Fatima Rizvi", handle: "@fatimar", testimonial: "The staff is professional and very knowledgeable about all car makes.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg", imageAlt: "oil change service car" },
|
||||
{ name: "Omar Siddiqui", handle: "@omarsid", testimonial: "Superb brake service. My car feels brand new again!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg", imageAlt: "car battery testing tool" }
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "Call Now", href: "tel:+923001234567" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881684.jpg"
|
||||
imageAlt="Professional auto repair shop"
|
||||
avatars={[
|
||||
{ src: "https://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg", alt: "Mechanic" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg", alt: "Customer" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881684.jpg", alt: "Mechanic" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/mechanic-wiping-his-hands-with-napkin_1170-1551.jpg", alt: "Mechanic" },
|
||||
{ src: "https://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg", alt: "Technician" }
|
||||
]}
|
||||
marqueeItems={[{ type: "text", text: "Engine Diagnostics" }, { type: "text", text: "Oil Changes" }, { type: "text", text: "Battery Services" }, { type: "text", text: "Brake Repairs" }, { type: "text", text: "Full Maintenance" }]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroBillboardTestimonial
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Reliable Repairs. Honest Service. Every Time."
|
||||
description="Your trusted neighborhood auto repair shop in Gulshan-e-Iqbal, Karachi. Serving all makes and models with expert care."
|
||||
testimonials={[
|
||||
{ name: "Ali Khan", handle: "@alikhan", testimonial: "Excellent service and very transparent pricing. My go-to shop for routine maintenance.", imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881684.jpg", imageAlt: "auto repair shop interior" },
|
||||
{ name: "Sara Ahmed", handle: "@saraahmed", testimonial: "Quick turnaround and skilled technicians. They fixed my engine issues perfectly.", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-wiping-his-hands-with-napkin_1170-1551.jpg", imageAlt: "friendly experienced mechanic portrait" },
|
||||
{ name: "Zaid Mahmood", handle: "@zaidm", testimonial: "Honest service. They don't try to oversell unneeded parts. Highly recommended.", imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg", imageAlt: "engine diagnostic scan tool" },
|
||||
{ name: "Fatima Rizvi", handle: "@fatimar", testimonial: "The staff is professional and very knowledgeable about all car makes.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg", imageAlt: "oil change service car" },
|
||||
{ name: "Omar Siddiqui", handle: "@omarsid", testimonial: "Superb brake service. My car feels brand new again!", imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg", imageAlt: "car battery testing tool" }
|
||||
]}
|
||||
buttons={[{ text: "Book Appointment", href: "#contact" }, { text: "Call Now", href: "tel:+923001234567" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881684.jpg"
|
||||
imageAlt="Professional auto repair shop"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Dependable and Affordable Service"
|
||||
description="At Metro Auto Repair, we pride ourselves on transparency, quick turnaround times, and professional results. Located in the heart of Gulshan-e-Iqbal, Karachi, we treat every car like our own."
|
||||
subdescription="With years of hands-on experience, our skilled technicians ensure your vehicle receives the best care, whether it's routine maintenance or complex engine diagnostics."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-wiping-his-hands-with-napkin_1170-1551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Wrench}
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={false}
|
||||
tag="About Us"
|
||||
title="Dependable and Affordable Service"
|
||||
description="At Metro Auto Repair, we pride ourselves on transparency, quick turnaround times, and professional results. Located in the heart of Gulshan-e-Iqbal, Karachi, we treat every car like our own."
|
||||
subdescription="With years of hands-on experience, our skilled technicians ensure your vehicle receives the best care, whether it's routine maintenance or complex engine diagnostics."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mechanic-wiping-his-hands-with-napkin_1170-1551.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
icon={Wrench}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Engine Diagnostics", description: "Advanced scanning tools to identify and fix engine issues efficiently.", icon: Settings,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Oil Change", description: "Keep your engine running smoothly with high-quality oil and filters.", icon: Droplet,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Battery Services", description: "Electrical diagnostics, battery checks, and reliable replacements.", icon: Zap,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Brake Services", description: "Precision brake and suspension service for total road safety.", icon: ShieldCheck,
|
||||
mediaItems: [
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Comprehensive auto repair solutions for your vehicle's performance, safety, and longevity."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Engine Diagnostics", description: "Advanced scanning tools to identify and fix engine issues efficiently.", icon: Settings, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/happy-african-american-auto-repairman-talking-customer-workshop_637285-8626.jpg" }] },
|
||||
{ title: "Oil Change", description: "Keep your engine running smoothly with high-quality oil and filters.", icon: Droplet, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/portrait-mechanic-work-his-garage_146671-19701.jpg" }] },
|
||||
{ title: "Battery Services", description: "Electrical diagnostics, battery checks, and reliable replacements.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/car-repairman-wearing-white-uniform-standing-holding-wrench-that-is-essential-tool-mechanic-with-laptop-checking-engine_1150-16590.jpg" }] },
|
||||
{ title: "Brake Services", description: "Precision brake and suspension service for total road safety.", icon: ShieldCheck, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-blue-light_23-2149413365.jpg" }] }
|
||||
]}
|
||||
title="Our Services"
|
||||
description="Comprehensive auto repair solutions for your vehicle's performance, safety, and longevity."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Customer Reviews"
|
||||
description="Hear what our clients say about our services."
|
||||
testimonials={[
|
||||
{ name: "Ali Khan", testimonial: "Excellent service!", rating: 5 },
|
||||
{ name: "Sara Ahmed", testimonial: "Very professional.", rating: 5 }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonial" data-section="testimonial">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Customer Reviews"
|
||||
description="Hear what our clients say about our services."
|
||||
testimonials={[
|
||||
{ name: "Ali Khan", testimonial: "Excellent service!", quote: "Great experience!" },
|
||||
{ name: "Sara Ahmed", testimonial: "Very professional.", quote: "Reliable and quick." }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to get your car back on the road? Book your appointment today or give us a call for a consultation."
|
||||
buttons={[
|
||||
{ text: "Call Now: +92 300 123 4567", href: "tel:+923001234567" },
|
||||
{ text: "Email Us", href: "mailto:info@metroautorepair.com" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Ready to get your car back on the road? Book your appointment today or give us a call for a consultation."
|
||||
buttons={[
|
||||
{ text: "Call Now: +92 300 123 4567", href: "tel:+923001234567" },
|
||||
{ text: "Email Us", href: "mailto:info@metroautorepair.com" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Metro Auto Repair"
|
||||
leftLink={{ text: "© 2024 Metro Auto Repair", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterLogoReveal
|
||||
logoText="Metro Auto Repair"
|
||||
leftLink={{ text: "© 2024 Metro Auto Repair", href: "#" }}
|
||||
rightLink={{ text: "Privacy Policy", href: "#" }}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user