Update src/app/page.tsx
This commit is contained in:
245
src/app/page.tsx
245
src/app/page.tsx
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import { useEffect, useState } from "react";
|
||||
import AboutMetric from '@/components/sections/about/AboutMetric';
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
||||
@@ -15,6 +16,18 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
|
||||
import { Film, Instagram, Palette, Shield, Twitter, Zap } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
const [isChaseActive, setIsChaseActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key.toLowerCase() === 'p') {
|
||||
setIsChaseActive(prev => !prev);
|
||||
}
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
@@ -29,25 +42,23 @@ export default function LandingPage() {
|
||||
headingFontWeight="light"
|
||||
>
|
||||
<ReactLenis root>
|
||||
{isChaseActive && (
|
||||
<div className="fixed inset-0 z-[9999] pointer-events-none overflow-hidden">
|
||||
<div className="absolute inset-0 bg-red-500/20 animate-pulse" />
|
||||
<div className="absolute top-1/2 left-0 w-full h-2 bg-blue-600/50 flex justify-between px-20 animate-bounce">
|
||||
<div className="text-6xl">🚓</div>
|
||||
<div className="text-6xl">🏃</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Models",
|
||||
id: "models",
|
||||
},
|
||||
{
|
||||
name: "Customizer",
|
||||
id: "customizer",
|
||||
},
|
||||
{
|
||||
name: "Performance",
|
||||
id: "metrics",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Models", id: "models" },
|
||||
{ name: "Customizer", id: "customizer" },
|
||||
{ name: "Performance", id: "metrics" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="E-Moto Lab"
|
||||
/>
|
||||
@@ -57,42 +68,8 @@ export default function LandingPage() {
|
||||
<HeroOverlay
|
||||
title="Configure Your Electric Future"
|
||||
description="The ultimate configurator for high-performance electric dirt bikes. Customize frames, plastics, and components in real-time."
|
||||
buttons={[
|
||||
{
|
||||
text: "Start Customizing",
|
||||
href: "#models",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#about",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Start Customizing", href: "#models" }, { text: "Learn More", href: "#about" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/spectacular-view-mountains-pines-low-gloomy-clouds-with-backpack-scooter-front_613910-2583.jpg"
|
||||
imageAlt="Futuristic electric dirt bike configurator"
|
||||
showBlur={true}
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/motorbike-rider-with-helmet-holding-laptop_23-2148585487.jpg",
|
||||
alt: "Motorbike rider with helmet holding laptop",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/man-riding-dirt-bike_23-2151493473.jpg",
|
||||
alt: "Man riding dirt bike",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/stylish-motorbike-with-laptop-top_23-2148585485.jpg",
|
||||
alt: "Stylish motorbike with laptop on top",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/people-racing-dirt-bikes_23-2151493510.jpg",
|
||||
alt: "People racing dirt bikes",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-9921.jpg",
|
||||
alt: "Positive bearded redhead male in leather jacket holds motorcycle helmet on grey background.",
|
||||
},
|
||||
]}
|
||||
avatarText="Join 5,000+ builders"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -101,44 +78,10 @@ export default function LandingPage() {
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Stark VARG",
|
||||
price: "From $12,900",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-woman-sitting-modern-motorbike_171337-17535.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Sur-Ron Light Bee X",
|
||||
price: "From $4,300",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/active-man-trying-repair-motorbike_23-2148585450.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Talaria Sting R",
|
||||
price: "From $4,500",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-cafe_1303-16281.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "E Ride Pro SS",
|
||||
price: "From $4,999",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/active-rider-watching-his-motorbike-desert_23-2148585482.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Razor MX650",
|
||||
price: "From $799",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-three-wheeled-vehicle-mobility-fast-travel_23-2151016502.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Tuttio Pro",
|
||||
price: "From $3,800",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-mini-three-wheeled-mobility-vehicle_23-2151016408.jpg",
|
||||
},
|
||||
{ id: "p1", name: "Stark VARG", price: "From $12,900", imageSrc: "http://img.b2bpic.net/free-photo/happy-curly-woman-sitting-modern-motorbike_171337-17535.jpg" },
|
||||
{ id: "p2", name: "Sur-Ron Light Bee X", price: "From $4,300", imageSrc: "http://img.b2bpic.net/free-photo/active-man-trying-repair-motorbike_23-2148585450.jpg" },
|
||||
{ id: "p3", name: "Talaria Sting R", price: "From $4,500", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-cafe_1303-16281.jpg" },
|
||||
]}
|
||||
title="Select Your Base Platform"
|
||||
description="Choose from our curated selection of industry-leading electric platforms for your next build."
|
||||
@@ -152,21 +95,9 @@ export default function LandingPage() {
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "120km",
|
||||
description: "Extended Range",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "85Nm",
|
||||
description: "Instant Torque",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "45kg",
|
||||
description: "Ultra Lightweight",
|
||||
},
|
||||
{ id: "m1", value: "120km", description: "Extended Range" },
|
||||
{ id: "m2", value: "85Nm", description: "Instant Torque" },
|
||||
{ id: "m3", value: "45kg", description: "Ultra Lightweight" },
|
||||
]}
|
||||
title="Build Performance Stats"
|
||||
description="Track the impact of your modifications on range, torque, and weight."
|
||||
@@ -178,21 +109,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="Advanced Customization Engine"
|
||||
metrics={[
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Custom Parts",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
label: "Color Options",
|
||||
value: "Unlimited",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
label: "Safety Tested",
|
||||
value: "100%",
|
||||
},
|
||||
{ icon: Zap, label: "Custom Parts", value: "500+" },
|
||||
{ icon: Palette, label: "Color Options", value: "Unlimited" },
|
||||
{ icon: Shield, label: "Safety Tested", value: "100%" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -203,46 +122,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
title: "Game Changer",
|
||||
quote: "The configurator made building my Sur-Ron so intuitive. Best interface I've used.",
|
||||
name: "Alex R.",
|
||||
role: "Pro Rider",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/biker-girl-leather-jacket-motorcycle_158595-452.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
title: "Top Quality",
|
||||
quote: "Incredible customization options. My Talaria looks absolutely unique now.",
|
||||
name: "Sarah K.",
|
||||
role: "Modder",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-male-trying-repair-motorcycle_23-2148585453.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
title: "Highly Recommend",
|
||||
quote: "Fast, reliable, and the visual feedback is spot on.",
|
||||
name: "Mike J.",
|
||||
role: "Trail Addict",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-9915.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
title: "Perfect Build",
|
||||
quote: "Found parts I didn't even know existed. Pure perfection.",
|
||||
name: "Leo P.",
|
||||
role: "Mechanic",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/man-cycling-outdoors-with-his-bike_23-2149748610.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
title: "Unrivaled Style",
|
||||
quote: "The galaxy theme and build tools are the future of bike shops.",
|
||||
name: "Jen D.",
|
||||
role: "Urban Rider",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-couple-love-motorcycle_285396-7717.jpg",
|
||||
},
|
||||
{ id: "t1", title: "Game Changer", quote: "The configurator made building my Sur-Ron so intuitive.", name: "Alex R.", role: "Pro Rider", imageSrc: "http://img.b2bpic.net/free-photo/biker-girl-leather-jacket-motorcycle_158595-452.jpg" },
|
||||
]}
|
||||
title="Rider Stories"
|
||||
description="See how our community builds their dream rides."
|
||||
@@ -253,15 +133,7 @@ export default function LandingPage() {
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"ODI Components",
|
||||
"GUTS Racing",
|
||||
"Sur-Ron",
|
||||
"Talaria",
|
||||
"E-Ride Labs",
|
||||
"Fox Suspension",
|
||||
"Renthal",
|
||||
]}
|
||||
names={["ODI Components", "GUTS Racing", "Sur-Ron", "Talaria", "E-Ride Labs"]}
|
||||
title="Trusted by Performance Brands"
|
||||
description="We partner with top-tier manufacturers to bring you factory-direct customization."
|
||||
/>
|
||||
@@ -272,21 +144,7 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Can I ship to any country?",
|
||||
content: "Yes, we ship our custom parts kits globally with full tracking.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "Is installation difficult?",
|
||||
content: "All our parts come with video tutorials for easy, bolt-on installation.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How do returns work?",
|
||||
content: "We offer a 30-day return policy for unused, uninstalled components.",
|
||||
},
|
||||
{ id: "f1", title: "Can I ship to any country?", content: "Yes, we ship our custom parts kits globally with full tracking." },
|
||||
]}
|
||||
title="Got Questions?"
|
||||
description="Here is everything you need to know about our customization process."
|
||||
@@ -297,14 +155,11 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
tag="Stay Updated"
|
||||
title="Join the Elite Build Crew"
|
||||
description="Get early access to new frames, exclusive part drops, and build tutorials."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/mountain-biker-training-brown-hill_181624-52561.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -313,21 +168,9 @@ export default function LandingPage() {
|
||||
logoText="E-Moto Lab"
|
||||
copyrightText="© 2025 E-Moto Lab. Build your ride."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Film,
|
||||
href: "#",
|
||||
ariaLabel: "Youtube",
|
||||
},
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Film, href: "#", ariaLabel: "Youtube" },
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user