Update src/app/page.tsx
This commit is contained in:
372
src/app/page.tsx
372
src/app/page.tsx
@@ -29,247 +29,155 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Services", id: "services"},
|
||||
{
|
||||
name: "Reviews", id: "reviews"},
|
||||
{
|
||||
name: "FAQ", id: "faq"},
|
||||
{
|
||||
name: "Contact", id: "contact"},
|
||||
]}
|
||||
brandName="Locksmith 417"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "FAQ", id: "faq" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="Locksmith 417"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{
|
||||
variant: "gradient-bars"}}
|
||||
title="Professional Auto Locksmith 30 Minutes or Less"
|
||||
description="Sameday ignition repair, fob programming, and emergency lockout service. Fully licensed, 4.9-star rated, and 50% less than dealerships."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call for a Quote", href: "tel:4175550100"},
|
||||
]}
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580573.jpg", imageAlt: "Professional locksmith"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-work-van_23-2149891032.jpg", imageAlt: "Ignition repair"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-opening-van-s-door_23-2149908130.jpg", imageAlt: "Lockout service"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-jeweler-making-jewellery_23-2150931420.jpg", imageAlt: "Professional locksmith"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-with-lamp_1170-1291.jpg", imageAlt: "Ignition repair"},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardGallery
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Professional Auto Locksmith 30 Minutes or Less"
|
||||
description="Sameday ignition repair, fob programming, and emergency lockout service. Fully licensed, 4.9-star rated, and 50% less than dealerships."
|
||||
buttons={[{ text: "Call for a Quote", href: "tel:4175550100" }]}
|
||||
mediaItems={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/car-being-taking-care-workshop_23-2149580573.jpg", imageAlt: "Professional locksmith" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-work-van_23-2149891032.jpg", imageAlt: "Ignition repair" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-opening-van-s-door_23-2149908130.jpg", imageAlt: "Lockout service" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/side-view-jeweler-making-jewellery_23-2150931420.jpg", imageAlt: "Professional locksmith" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/mechanic-examining-car-with-lamp_1170-1291.jpg", imageAlt: "Ignition repair" }
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", value: "30m", title: "Avg Response Time", items: [
|
||||
"Always on time", "Mobile service", "Fully equipped"],
|
||||
},
|
||||
{
|
||||
id: "m2", value: "4.9★", title: "Rating", items: [
|
||||
"Verified reviews", "Top-rated", "Client approved"],
|
||||
},
|
||||
{
|
||||
id: "m3", value: "50%", title: "Dealer Savings", items: [
|
||||
"Better pricing", "Direct savings", "Budget friendly"],
|
||||
},
|
||||
]}
|
||||
title="Quality You Can Trust"
|
||||
description="We pride ourselves on speed, affordability, and expert service."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", value: "30m", title: "Avg Response Time", items: ["Always on time", "Mobile service", "Fully equipped"] },
|
||||
{ id: "m2", value: "4.9★", title: "Rating", items: ["Verified reviews", "Top-rated", "Client approved"] },
|
||||
{ id: "m3", value: "50%", title: "Dealer Savings", items: ["Better pricing", "Direct savings", "Budget friendly"] }
|
||||
]}
|
||||
title="Quality You Can Trust"
|
||||
description="We pride ourselves on speed, affordability, and expert service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Ignition Repair", description: "Professional repair and replacement for faulty ignition switches.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-driver-opening-ev-car-charging-port-flap-attaching-electric-cable_482257-130208.jpg", imageAlt: "Ignition repair"},
|
||||
items: [
|
||||
{
|
||||
text: "Stuck key removal", icon: Wrench,
|
||||
},
|
||||
{
|
||||
text: "Ignition switch fix", icon: Settings,
|
||||
},
|
||||
{
|
||||
text: "Cylinder replacement", icon: Shield,
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
{
|
||||
title: "Fob Programming", description: "Advanced electronic key programming for all major vehicle makes.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-eye-working_23-2148920069.jpg", imageAlt: "Fob programming"},
|
||||
items: [
|
||||
{
|
||||
text: "Transponder keys", icon: Zap,
|
||||
},
|
||||
{
|
||||
text: "Remote entry", icon: Smartphone,
|
||||
},
|
||||
{
|
||||
text: "Key duplication", icon: Copy,
|
||||
},
|
||||
],
|
||||
reverse: true,
|
||||
},
|
||||
{
|
||||
title: "Emergency Lockouts", description: "Fast, damage-free entry for your vehicle, anywhere in our range.", media: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-giving-order-curbside-pickup_23-2149106378.jpg", imageAlt: "Lockout service"},
|
||||
items: [
|
||||
{
|
||||
text: "24/7 Availability", icon: Clock,
|
||||
},
|
||||
{
|
||||
text: "Damage-free entry", icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
text: "Mobile service", icon: Car,
|
||||
},
|
||||
],
|
||||
reverse: false,
|
||||
},
|
||||
]}
|
||||
title="Comprehensive Automotive Services"
|
||||
description="From emergency lockouts to complex ignition repairs, we handle everything."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Ignition Repair", description: "Professional repair and replacement for faulty ignition switches.", media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-driver-opening-ev-car-charging-port-flap-attaching-electric-cable_482257-130208.jpg", imageAlt: "Ignition repair" },
|
||||
items: [{ text: "Stuck key removal", icon: Wrench }, { text: "Ignition switch fix", icon: Settings }, { text: "Cylinder replacement", icon: Shield }],
|
||||
reverse: false
|
||||
},
|
||||
{
|
||||
title: "Fob Programming", description: "Advanced electronic key programming for all major vehicle makes.", media: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-doctor-eye-working_23-2148920069.jpg", imageAlt: "Fob programming" },
|
||||
items: [{ text: "Transponder keys", icon: Zap }, { text: "Remote entry", icon: Smartphone }, { text: "Key duplication", icon: Copy }],
|
||||
reverse: true
|
||||
},
|
||||
{
|
||||
title: "Emergency Lockouts", description: "Fast, damage-free entry for your vehicle, anywhere in our range.", media: { imageSrc: "http://img.b2bpic.net/free-photo/man-giving-order-curbside-pickup_23-2149106378.jpg", imageAlt: "Lockout service" },
|
||||
items: [{ text: "24/7 Availability", icon: Clock }, { text: "Damage-free entry", icon: CheckCircle }, { text: "Mobile service", icon: Car }],
|
||||
reverse: false
|
||||
}
|
||||
]}
|
||||
title="Comprehensive Automotive Services"
|
||||
description="From emergency lockouts to complex ignition repairs, we handle everything."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Locksmith 417?"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "License", value: "Fully Licensed"},
|
||||
{
|
||||
icon: Star,
|
||||
label: "Rating", value: "4.9/5 stars"},
|
||||
{
|
||||
icon: DollarSign,
|
||||
label: "Savings", value: "50% Savings"},
|
||||
],
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Choose Locksmith 417?"
|
||||
metrics={[
|
||||
{ icon: Award, label: "License", value: "Fully Licensed" },
|
||||
{ icon: Star, label: "Rating", value: "4.9/5 stars" },
|
||||
{ icon: DollarSign, label: "Savings", value: "50% Savings" }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-woman-holding-car-keys_23-2148384904.jpg"},
|
||||
{
|
||||
id: "t2", name: "Mark D.", imageSrc: "http://img.b2bpic.net/free-photo/feeling-happy-pointing-self-with-excited_1194-400315.jpg"},
|
||||
{
|
||||
id: "t3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-holds-car-key-while-sits-automobile_176532-8018.jpg"},
|
||||
{
|
||||
id: "t4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/happy-european-male-showing-face-mask-vibrant-yellow-wall_181624-52117.jpg"},
|
||||
{
|
||||
id: "t5", name: "Jennifer L.", imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-female-customer-workshop_637285-9789.jpg"},
|
||||
]}
|
||||
cardTitle="What Our Customers Say"
|
||||
cardTag="Trusted Reviews"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTwelve
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "t1", name: "Sarah J.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-blonde-woman-holding-car-keys_23-2148384904.jpg" },
|
||||
{ id: "t2", name: "Mark D.", imageSrc: "http://img.b2bpic.net/free-photo/feeling-happy-pointing-self-with-excited_1194-400315.jpg" },
|
||||
{ id: "t3", name: "Emily R.", imageSrc: "http://img.b2bpic.net/free-photo/handsome-male-holds-car-key-while-sits-automobile_176532-8018.jpg" },
|
||||
{ id: "t4", name: "David K.", imageSrc: "http://img.b2bpic.net/free-photo/happy-european-male-showing-face-mask-vibrant-yellow-wall_181624-52117.jpg" },
|
||||
{ id: "t5", name: "Jennifer L.", imageSrc: "http://img.b2bpic.net/free-photo/happy-auto-repairman-handshaking-with-female-customer-workshop_637285-9789.jpg" }
|
||||
]}
|
||||
cardTitle="What Our Customers Say"
|
||||
cardTag="Trusted Reviews"
|
||||
cardAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Auto Insurance Co", "Roadside Rescue", "Locksmith Association", "Auto Parts Pro", "Fleet Logistics", "Vehicle Care Network", "Consumer Trust"]}
|
||||
title="Trusted Partners"
|
||||
description="Serving insurance providers and property managers throughout the area."
|
||||
/>
|
||||
</div>
|
||||
<div id="social" data-section="social">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["Auto Insurance Co", "Roadside Rescue", "Locksmith Association", "Auto Parts Pro", "Fleet Logistics", "Vehicle Care Network", "Consumer Trust"]}
|
||||
title="Trusted Partners"
|
||||
description="Serving insurance providers and property managers throughout the area."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1", title: "How fast do you arrive?", content: "We aim to reach you within 30 minutes or less on average."},
|
||||
{
|
||||
id: "f2", title: "Are you cheaper than a dealership?", content: "Yes, our services are typically 50% less than standard dealership rates."},
|
||||
{
|
||||
id: "f3", title: "Do you work with fleet vehicles?", content: "Absolutely, we specialize in providing locksmith partnerships for fleet managers."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common concerns about our automotive locksmith services."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "f1", title: "How fast do you arrive?", content: "We aim to reach you within 30 minutes or less on average." },
|
||||
{ id: "f2", title: "Are you cheaper than a dealership?", content: "Yes, our services are typically 50% less than standard dealership rates." },
|
||||
{ id: "f3", title: "Do you work with fleet vehicles?", content: "Absolutely, we specialize in providing locksmith partnerships for fleet managers." }
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Answers to common concerns about our automotive locksmith services."
|
||||
faqsAnimation="blur-reveal"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient"}}
|
||||
tag="Contact Us"
|
||||
title="Need Help Now?"
|
||||
description="Call us or enter your email to get a quote and professional service today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg"
|
||||
imageAlt="Emergency locksmith service"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Contact Us"
|
||||
title="Need Help Now?"
|
||||
description="Call us or enter your email to get a quote and professional service today."
|
||||
mediaAnimation="slide-up"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/male-car-mechanic-working-car-repair-shop_23-2150367551.jpg"
|
||||
imageAlt="Emergency locksmith service"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About", href: "#about"},
|
||||
{
|
||||
label: "Reviews", href: "#reviews"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Services", items: [
|
||||
{
|
||||
label: "Ignition Repair", href: "#services"},
|
||||
{
|
||||
label: "Fob Programming", href: "#services"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="Locksmith 417"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Company", items: [{ label: "About", href: "#about" }, { label: "Reviews", href: "#reviews" }] },
|
||||
{ title: "Services", items: [{ label: "Ignition Repair", href: "#services" }, { label: "Fob Programming", href: "#services" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
]}
|
||||
logoText="Locksmith 417"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user