343 lines
11 KiB
TypeScript
343 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="pill"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Features",
|
|
id: "features",
|
|
},
|
|
{
|
|
name: "Testimonials",
|
|
id: "testimonials",
|
|
},
|
|
{
|
|
name: "FAQ",
|
|
id: "faq",
|
|
},
|
|
]}
|
|
brandName="AutoTrack"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitKpi
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
title="Never Miss a Service Beat Again."
|
|
description="AutoTrack takes the guesswork out of vehicle care. Monitor oil changes, fuel levels, and essential maintenance, all in one intuitive dashboard."
|
|
kpis={[
|
|
{
|
|
value: "15k+",
|
|
label: "Vehicles Tracked",
|
|
},
|
|
{
|
|
value: "98%",
|
|
label: "Client Satisfaction",
|
|
},
|
|
{
|
|
value: "24/7",
|
|
label: "Real-time Alerts",
|
|
},
|
|
]}
|
|
enableKpiAnimation={true}
|
|
buttons={[
|
|
{
|
|
text: "Get Started",
|
|
href: "#features",
|
|
},
|
|
]}
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8yw2kn&_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=46yyvb",
|
|
alt: "young woman smartphone portrait",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rzfmtd",
|
|
alt: "mechanic smiling portrait",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=defjlb",
|
|
alt: "man driving car smiling",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=st090z",
|
|
alt: "woman entrepreneur sitting in car",
|
|
},
|
|
{
|
|
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z5lj6u",
|
|
alt: "young student car owner",
|
|
},
|
|
]}
|
|
avatarText="Trusted by 5,000+ drivers"
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Oil Monitoring",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Fuel Stats",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "GPS Tracking",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Service Alerts",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Vehicle Health",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="uniform-all-items-equal"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "5k",
|
|
description: "Miles until next service",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "45%",
|
|
description: "Remaining fuel capacity",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "12",
|
|
description: "Active tracking alerts",
|
|
},
|
|
]}
|
|
title="Stay Informed, Stay Safe"
|
|
description="We make complex maintenance simple. Get clear insights into your vehicle's health."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
negativeCard={{
|
|
items: [
|
|
"No more forgotten services",
|
|
"Stop manual tracking",
|
|
"No more empty tanks",
|
|
"Less downtime",
|
|
"Fewer surprise repairs",
|
|
],
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Automated oil change alerts",
|
|
"Fuel monitoring system",
|
|
"GPS parking location tracker",
|
|
"Predictive diagnostics",
|
|
"Service history logs",
|
|
],
|
|
}}
|
|
title="Maintenance Without the Stress"
|
|
description="Features designed to keep your car performing at its peak."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Sarah J.",
|
|
date: "Jan 2025",
|
|
title: "Great App",
|
|
quote: "I never have to worry about my oil changes anymore. Everything is automated!",
|
|
tag: "Trusted",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=46yyvb",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=8yw2kn&_wi=2",
|
|
imageAlt: "young woman smartphone portrait",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Mark D.",
|
|
date: "Dec 2024",
|
|
title: "Lifesaver",
|
|
quote: "The parking locator is a game changer for me. Simple and effective.",
|
|
tag: "Verified",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=rzfmtd",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=k6ziex",
|
|
imageAlt: "young woman smartphone portrait",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Elena R.",
|
|
date: "Nov 2024",
|
|
title: "Highly Recommend",
|
|
quote: "User-friendly interface that just works. Keeps my car in top shape.",
|
|
tag: "Verified",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=defjlb",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s27ba7",
|
|
imageAlt: "young woman smartphone portrait",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "David W.",
|
|
date: "Oct 2024",
|
|
title: "Fantastic",
|
|
quote: "I wish I had this years ago. Saves me so much time and money.",
|
|
tag: "Trusted",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=st090z",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=wax06v",
|
|
imageAlt: "young woman smartphone portrait",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Emily K.",
|
|
date: "Sep 2024",
|
|
title: "Must have",
|
|
quote: "The alerts are always timely. I feel much safer on the road.",
|
|
tag: "Verified",
|
|
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=z5lj6u",
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=3gepkr",
|
|
imageAlt: "young woman smartphone portrait",
|
|
},
|
|
]}
|
|
title="Loved by Drivers Everywhere"
|
|
description="Hear what our community says about keeping their cars healthy with AutoTrack."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "How does AutoTrack track my car data?",
|
|
content: "Our app connects with industry-standard sensors and historical maintenance data to predict service intervals.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Is my location data secure?",
|
|
content: "Yes, we use advanced encryption to ensure your parking location and driving patterns remain private.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Do I need special hardware?",
|
|
content: "No, AutoTrack works entirely via our mobile interface using your driving behavior and vehicle model data.",
|
|
},
|
|
]}
|
|
sideTitle="Questions? We've Got Answers."
|
|
sideDescription="Check out our FAQs to understand how we can help you keep your vehicle on the road."
|
|
faqsAnimation="blur-reveal"
|
|
/>
|
|
</div>
|
|
|
|
<div id="social" data-section="social">
|
|
<SocialProofOne
|
|
textboxLayout="default"
|
|
useInvertedBackground={true}
|
|
names={[
|
|
"AutoTech Labs",
|
|
"SpeedService Pro",
|
|
"Innovation Motor",
|
|
"Global Auto Insights",
|
|
"DriveSoft Solutions",
|
|
"Future Mobility Corp",
|
|
"Performance Metrics Inc",
|
|
]}
|
|
title="Trusted Industry Leaders"
|
|
description="We are proud to be recognized by leaders in the automotive technology sector."
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Join Now"
|
|
title="Get Started Today"
|
|
description="Ready to take control of your vehicle maintenance? Sign up now for free access."
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=erp772"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=omk2er"
|
|
logoText="AutoTrack"
|
|
columns={[
|
|
{
|
|
title: "Navigation",
|
|
items: [
|
|
{
|
|
label: "Features",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Testimonials",
|
|
href: "#testimonials",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "Help Center",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|