267 lines
11 KiB
TypeScript
267 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import { Award, Gauge, Settings, Shield, Smile, Trophy, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="bounce-effect"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="mediumSmall"
|
|
sizing="largeSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home", id: "hero"},
|
|
{
|
|
name: "Products", id: "products"},
|
|
{
|
|
name: "Contact", id: "contact"},
|
|
]}
|
|
brandName="MotoPerformance"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Unleash Racing Performance"
|
|
description="Experience the pinnacle of motorcycle engine protection and performance. Trusted by champions worldwide."
|
|
buttons={[
|
|
{
|
|
text: "Explore Products", href: "#products"},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/amazing-brand-new-motorbike-is-standing-dark-underground-parking_613910-17459.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-riding-dirt-bikes_23-2151493430.jpg", alt: "Rider 1"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-sexy-man-motorbike_1303-22178.jpg", alt: "Rider 2"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/view-cool-powerful-motorcycle_23-2150704687.jpg", alt: "Rider 3"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/cool-motorcycle-outdoors_23-2150849561.jpg", alt: "Rider 4"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/full-shot-adult-with-equipment-riding-motorcycle_23-2150781572.jpg", alt: "Rider 5"},
|
|
]}
|
|
avatarText="Join 50,000+ Pro Riders"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon", text: "High Viscosity", icon: Zap,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Heat Resistant", icon: Gauge,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Friction Reduced", icon: Settings,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Engine Clean", icon: Shield,
|
|
},
|
|
{
|
|
type: "text-icon", text: "Race Proven", icon: Trophy,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
useInvertedBackground={false}
|
|
title="Legacy of Engineering Excellence"
|
|
buttons={[
|
|
{
|
|
text: "Our Heritage", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentySix
|
|
textboxLayout="inline-image"
|
|
useInvertedBackground={true}
|
|
features={[
|
|
{
|
|
title: "Max Heat Resistance", description: "Stable viscosity even in high-heat racing conditions.", buttonIcon: Zap,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-angle-view-biker-repairing-his-bike_1098-19051.jpg?_wi=1"},
|
|
{
|
|
title: "Extreme Endurance", description: "Longer engine life through superior synthetic bases.", buttonIcon: Award,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cyclist-riding-bmx-bike_107420-65680.jpg"},
|
|
{
|
|
title: "Precision Friction Reduction", description: "Optimized power transfer to the rear wheel.", buttonIcon: Settings,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-bicycle-outdoors_23-2148889106.jpg"},
|
|
{
|
|
title: "Advanced Detergency", description: "Keeping your engine clean from deposits.", buttonIcon: Shield,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-male-white-special-suit-yellow-special-helmet-holding-globe-blue-wall-man-suit-danger-special-equipment-color_140725-26587.jpg"},
|
|
]}
|
|
title="Advanced Engine Technology"
|
|
description="Superior protection for every ride."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1", name: "Racing 4T 300V", price: "$34.99", imageSrc: "http://img.b2bpic.net/free-photo/objects-with-reflective-effect_23-2150141925.jpg"},
|
|
{
|
|
id: "p2", name: "RBF 660 Brake Fluid", price: "$29.50", imageSrc: "http://img.b2bpic.net/free-photo/man-taking-protection-before-ride_23-2148321939.jpg"},
|
|
{
|
|
id: "p3", name: "C4 Chain Lube", price: "$15.99", imageSrc: "http://img.b2bpic.net/free-photo/man-fixing-motorcycle-modern-workshop_158595-8105.jpg"},
|
|
{
|
|
id: "p4", name: "Motocool Expert", price: "$18.75", imageSrc: "http://img.b2bpic.net/free-photo/car-engine_1373-184.jpg"},
|
|
{
|
|
id: "p5", name: "Fork Oil 15W", price: "$14.50", imageSrc: "http://img.b2bpic.net/free-photo/engine-lamp-metal-shiny-chrome_1203-4586.jpg"},
|
|
{
|
|
id: "p6", name: "Engine Flush", price: "$12.00", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-motorcycle-parts_23-2150704839.jpg"},
|
|
]}
|
|
title="Racing Grade Supplies"
|
|
description="Essential fluids for ultimate engine health."
|
|
/>
|
|
</div>
|
|
|
|
<div id="pricing" data-section="pricing">
|
|
<PricingCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
plans={[
|
|
{
|
|
id: "basic", title: "Rider Essential", price: "$99", period: "/yr", features: [
|
|
"Oil Change", "Filter Swap", "Safety Check"],
|
|
button: {
|
|
text: "Select"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/two-attractive-repairmans-are-fixing-broken-bicycle-their-dark-workshop_613910-21465.jpg", imageAlt: "motorcycle workshop professional tools"},
|
|
{
|
|
id: "pro", title: "Performance Pro", price: "$249", period: "/yr", features: [
|
|
"Full Service", "Brake Bleed", "Chain Tuning", "Diagnostic"],
|
|
button: {
|
|
text: "Select"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/amazing-brand-new-motorbike-is-standing-dark-underground-parking_613910-17459.jpg?_wi=2", imageAlt: "motorcycle workshop professional tools"},
|
|
{
|
|
id: "race", title: "Racing Elite", price: "$599", period: "/yr", features: [
|
|
"Track Prep", "Engine Tuning", "Fluid Overhaul", "Priority Service"],
|
|
button: {
|
|
text: "Select"},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-angle-view-biker-repairing-his-bike_1098-19051.jpg?_wi=2", imageAlt: "motorcycle workshop professional tools"},
|
|
]}
|
|
title="Service Packages"
|
|
description="Premium maintenance for dedicated riders."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1", value: "50+", title: "Racing Titles", description: "Won with our support.", icon: Award,
|
|
},
|
|
{
|
|
id: "m2", value: "1M+", title: "Engine Cycles", description: "Protected globally.", icon: Zap,
|
|
},
|
|
{
|
|
id: "m3", value: "99.9%", title: "Customer Satisfaction", description: "Validated by riders.", icon: Smile,
|
|
},
|
|
]}
|
|
title="Performance By The Numbers"
|
|
description="Proven reliability on every track."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={true}
|
|
testimonial="The performance gains and stability on the track have been absolutely phenomenal. Wouldn't trust anything else."
|
|
rating={5}
|
|
author="Mark 'The Hawk' Thompson"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/motorcycle-rider-profile-cyberpunk-style_23-2151982346.jpg", alt: "Mark"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/close-up-motorcycle-helmet_23-2151574358.jpg", alt: "Sarah"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/man-riding-dirt-bike_23-2151493409.jpg", alt: "John"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg", alt: "Mike"},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/model-with-motorcycle-helmet_23-2151585663.jpg", alt: "Elena"},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "sparkles-gradient"}}
|
|
tag="Get in Touch"
|
|
title="Ready to Optimize?"
|
|
description="Speak with our performance specialists today."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us", href: "#"},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About", href: "#"},
|
|
{
|
|
label: "Products", href: "#products"},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Support", href: "#"},
|
|
{
|
|
label: "Privacy", href: "#"},
|
|
],
|
|
},
|
|
]}
|
|
logoText="MotoPerformance"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|