5 Commits

Author SHA1 Message Date
5e695dceb7 Merge version_2 into main
Merge version_2 into main
2026-04-26 03:20:42 +00:00
730a51cf8c Update src/app/page.tsx 2026-04-26 03:20:36 +00:00
a800155eb2 Merge version_2 into main
Merge version_2 into main
2026-04-26 03:20:06 +00:00
9ad9e63c68 Update src/app/styles/variables.css 2026-04-26 03:20:03 +00:00
2f4f042c3e Update src/app/page.tsx 2026-04-26 03:20:02 +00:00
2 changed files with 49 additions and 205 deletions

View File

@@ -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,88 +68,21 @@ 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>
<div id="models" data-section="models">
<ProductCardThree
useInvertedBackground={false}
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 +96,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 +110,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 +123,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 +134,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 +145,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 +156,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 +169,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>

View File

@@ -12,13 +12,13 @@
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #fffaf5e6;
--primary-cta: #ffaa70;
--foreground: #f8f5ff;
--primary-cta: #ff6207;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta-text: #fffaf5e6;
--accent: #737373;
--background-accent: #737373;
--accent: #1f7cff;
--background-accent: #e34400;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);