Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 9b7d8d8993 | |||
| b80837eb4f |
221
src/app/page.tsx
221
src/app/page.tsx
@@ -2,14 +2,15 @@
|
|||||||
|
|
||||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||||
import ReactLenis from "lenis/react";
|
import ReactLenis from "lenis/react";
|
||||||
import ContactText from '@/components/sections/contact/ContactText';
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
||||||
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
||||||
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
import FeatureCardNineteen from '@/components/sections/feature/FeatureCardNineteen';
|
||||||
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
|
||||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
|
||||||
import MediaAbout from '@/components/sections/about/MediaAbout';
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||||
import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
|
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
|
||||||
|
import { Star, ShieldCheck, Zap } from "lucide-react";
|
||||||
|
|
||||||
export default function LandingPage() {
|
export default function LandingPage() {
|
||||||
return (
|
return (
|
||||||
@@ -23,194 +24,118 @@ export default function LandingPage() {
|
|||||||
cardStyle="outline"
|
cardStyle="outline"
|
||||||
primaryButtonStyle="gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="radial-glow"
|
secondaryButtonStyle="radial-glow"
|
||||||
headingFontWeight="normal"
|
headingFontWeight="semibold"
|
||||||
>
|
>
|
||||||
<ReactLenis root>
|
<ReactLenis root>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleFullscreen
|
<NavbarLayoutFloatingOverlay
|
||||||
navItems={[
|
navItems={[
|
||||||
{
|
{ name: "Home", id: "hero" },
|
||||||
name: "Home",
|
{ name: "About", id: "about" },
|
||||||
id: "hero",
|
{ name: "Benefits", id: "benefits" },
|
||||||
},
|
{ name: "Testimonials", id: "testimonials" },
|
||||||
{
|
{ name: "FAQ", id: "faq" },
|
||||||
name: "About",
|
{ name: "Contact", id: "contact" },
|
||||||
id: "about",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Benefits",
|
|
||||||
id: "benefits",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Testimonials",
|
|
||||||
id: "testimonials",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "Contact",
|
|
||||||
id: "contact",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
brandName="ClearView Restore"
|
brandName="ClearView Restore"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroBillboardScroll
|
<HeroSplitDualMedia
|
||||||
background={{
|
|
||||||
variant: "canvas-reveal",
|
|
||||||
}}
|
|
||||||
title="Bring Your Headlights Back to Life"
|
title="Bring Your Headlights Back to Life"
|
||||||
description="Don't settle for dim, yellowed headlights. Our professional restoration service restores clarity, brightness, and safety for any vehicle model."
|
description="Professional-grade restoration for superior clarity and nighttime visibility. Don't let yellowed, oxidized lenses dim your driving experience—restore your vehicle's safety and style."
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193582.jpg"
|
tag="Professional Restoration"
|
||||||
imageAlt="Headlight restoration before and after"
|
rating={5}
|
||||||
|
ratingText="5-star rated service"
|
||||||
|
background={{ variant: "sparkles-gradient" }}
|
||||||
|
mediaItems={[
|
||||||
|
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193582.jpg", imageAlt: "Headlight restoration" },
|
||||||
|
{ imageSrc: "http://img.b2bpic.net/free-photo/led-headlight-blue-car_23-2147962992.jpg", imageAlt: "Clear headlights" }
|
||||||
|
]}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
<MediaAbout
|
<SplitAbout
|
||||||
|
title="Engineered for Clarity"
|
||||||
|
description="We combine advanced chemical processes with precise mechanical polishing to remove oxidation and yellowing. Our durable clear-coat protection ensures your headlights stay bright and safe for years."
|
||||||
|
tag="Our Process"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
title="Restoration You Can Trust"
|
textboxLayout="split"
|
||||||
description="We specialize in restoring cloudy, oxidized headlights to factory clarity. Our multi-step process uses specialized abrasives and protective coatings to ensure your headlights stay clear for years to come. Safety is our priority."
|
bulletPoints={[
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/led-headlight-blue-car_23-2147962992.jpg"
|
{ title: "Deep Oxidation Removal", description: "Advanced sanding techniques reach even the worst degradation.", icon: ShieldCheck },
|
||||||
imageAlt="Professional headlight restoration"
|
{ title: "UV Protection", description: "High-grade ceramic coating prevents future yellowing.", icon: Zap },
|
||||||
|
{ title: "Factory Clarity", description: "Restore original light output to factory standards.", icon: Star },
|
||||||
|
]}
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/head-lights-car_1339-1874.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="benefits" data-section="benefits">
|
<div id="benefits" data-section="benefits">
|
||||||
<FeatureCardTwelve
|
<FeatureCardNineteen
|
||||||
animationType="slide-up"
|
title="Why Choose ClearView?"
|
||||||
|
description="Expert care for your vehicle's most important visibility component."
|
||||||
textboxLayout="split"
|
textboxLayout="split"
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
features={[
|
features={[
|
||||||
{
|
{ tag: "Performance", title: "Nighttime Visibility", subtitle: "Drive with confidence", description: "See further and react faster with fully transparent lenses.", imageSrc: "http://img.b2bpic.net/free-photo/headlight-lamp_74190-5517.jpg" },
|
||||||
id: "1",
|
{ tag: "Economics", title: "Cost Savings", subtitle: "Avoid expensive replacements", description: "Restoring is a fraction of the cost of buying new assembly units.", imageSrc: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver_23-2151489876.jpg" }
|
||||||
label: "Safety",
|
|
||||||
title: "Enhanced Visibility",
|
|
||||||
items: [
|
|
||||||
"Brighter nighttime driving",
|
|
||||||
"Better beam distance",
|
|
||||||
"Improved road safety",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
label: "Value",
|
|
||||||
title: "Increased Resale Value",
|
|
||||||
items: [
|
|
||||||
"Better first impressions",
|
|
||||||
"Looks brand new",
|
|
||||||
"Higher trade-in appeal",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
label: "Savings",
|
|
||||||
title: "Cost Effective",
|
|
||||||
items: [
|
|
||||||
"Fraction of replacement cost",
|
|
||||||
"Fast turnaround",
|
|
||||||
"Professional results",
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
title="Why Choose Our Service?"
|
|
||||||
description="Experience the difference of clear optics."
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="testimonials" data-section="testimonials">
|
<div id="testimonials" data-section="testimonials">
|
||||||
<TestimonialCardTwelve
|
<TestimonialCardThirteen
|
||||||
|
title="Loved by Drivers Everywhere"
|
||||||
|
description="Real results from satisfied customers across the country."
|
||||||
|
textboxLayout="split"
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
|
showRating={true}
|
||||||
|
animationType="depth-3d"
|
||||||
testimonials={[
|
testimonials={[
|
||||||
{
|
{ id: "1", name: "Alex Rivera", handle: "@driver_lex", testimonial: "Unbelievable transformation! My car looks years younger.", rating: 5 },
|
||||||
id: "1",
|
{ id: "2", name: "Jordan P.", handle: "@jp_auto", testimonial: "Finally passed inspection. Saved me hundreds on new lenses.", rating: 5 },
|
||||||
name: "Mark Stevens",
|
{ id: "3", name: "Sarah K.", handle: "@sara_k", testimonial: "Fast, professional, and genuinely clear results.", rating: 5 },
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/man-working-as-truck-driver_23-2151489876.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
name: "Elena Rodriguez",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/young-man-polishing-his-car-with-rag_1303-21780.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
name: "Jason Miller",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/female-mechanic-with-arms-crossed-spanner_1170-1437.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "4",
|
|
||||||
name: "Sarah Jenkins",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/head-lights-car_1339-1874.jpg",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "5",
|
|
||||||
name: "David Thorne",
|
|
||||||
imageSrc: "http://img.b2bpic.net/free-photo/handsome-young-man-looking-camera-sitting-car-view-from-rear-seat_231208-863.jpg",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
cardTitle="Client Success Stories"
|
|
||||||
cardTag="What they say"
|
|
||||||
cardAnimation="blur-reveal"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="faq" data-section="faq">
|
<div id="faq" data-section="faq">
|
||||||
<FaqSplitMedia
|
<FaqSplitText
|
||||||
textboxLayout="split"
|
sideTitle="Need Answers?"
|
||||||
|
sideDescription="We've answered the most common questions about our professional headlight restoration process."
|
||||||
useInvertedBackground={false}
|
useInvertedBackground={false}
|
||||||
|
faqsAnimation="slide-up"
|
||||||
faqs={[
|
faqs={[
|
||||||
{
|
{ id: "1", title: "How long will it last?", content: "Our UV-resistant sealing process ensures lasting clarity, typically 1-2 years based on environmental exposure." },
|
||||||
id: "1",
|
{ id: "2", title: "Does it work on all cars?", content: "Our restoration method is universally compatible with all plastic/polycarbonate lenses." },
|
||||||
title: "How long does restoration last?",
|
{ id: "3", title: "How long is the process?", content: "The procedure typically takes about 60-90 minutes at our facility." },
|
||||||
content: "Our protective coating usually lasts between 12-24 months depending on climate.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "2",
|
|
||||||
title: "Does it work on any headlight?",
|
|
||||||
content: "Yes, our process is effective on all polycarbonate headlight lenses.",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: "3",
|
|
||||||
title: "How long does the service take?",
|
|
||||||
content: "Typically 60-90 minutes depending on the level of oxidation.",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
imageSrc="http://img.b2bpic.net/free-photo/headlight-lamp_74190-5517.jpg"
|
|
||||||
imageAlt="Clean headlights at night"
|
|
||||||
mediaAnimation="slide-up"
|
|
||||||
title="Frequently Asked Questions"
|
|
||||||
description="Have questions about our service? Here's what you need to know."
|
|
||||||
faqsAnimation="blur-reveal"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact">
|
||||||
<ContactText
|
<ContactSplitForm
|
||||||
|
title="Get Your Headlights Restored"
|
||||||
|
description="Book an appointment and reclaim your night visibility today. Simply fill out the form below and we will contact you to schedule your service."
|
||||||
useInvertedBackground={true}
|
useInvertedBackground={true}
|
||||||
background={{
|
inputs={[
|
||||||
variant: "rotated-rays-static-grid",
|
{ name: "name", type: "text", placeholder: "Full Name" },
|
||||||
}}
|
{ name: "email", type: "email", placeholder: "Email Address" },
|
||||||
text="Ready to see clearly again? Book your restoration today and experience the difference."
|
{ name: "phone", type: "tel", placeholder: "Phone Number" },
|
||||||
buttons={[
|
|
||||||
{
|
|
||||||
text: "Contact Us",
|
|
||||||
href: "#",
|
|
||||||
},
|
|
||||||
]}
|
]}
|
||||||
|
imageSrc="http://img.b2bpic.net/free-photo/young-man-polishing-his-car-with-rag_1303-21780.jpg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
<FooterLogoReveal
|
<FooterBaseCard
|
||||||
logoText="ClearView"
|
logoText="ClearView Restore"
|
||||||
leftLink={{
|
columns={[
|
||||||
text: "Terms of Service",
|
{ title: "Services", items: [{ label: "Headlight Restoration", href: "#" }] },
|
||||||
href: "#",
|
{ title: "Company", items: [{ label: "About Us", href: "#" }, { label: "Contact", href: "#" }] }
|
||||||
}}
|
]}
|
||||||
rightLink={{
|
|
||||||
text: "Privacy Policy",
|
|
||||||
href: "#",
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</ReactLenis>
|
</ReactLenis>
|
||||||
|
|||||||
Reference in New Issue
Block a user