464 lines
16 KiB
TypeScript
464 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
|
|
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
import { ShieldCheck, Wrench, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="elastic-effect"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="medium"
|
|
background="noise"
|
|
cardStyle="subtle-shadow"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Scooters",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "About",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "contact",
|
|
},
|
|
]}
|
|
brandName="SYM MotorHub"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardTestimonial
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "radial-gradient",
|
|
}}
|
|
title="Your Journey Starts with SYM"
|
|
description="Premium SYM scooters and expert service for every rider. Discover the perfect blend of performance, style, and reliability."
|
|
testimonials={[
|
|
{
|
|
name: "Mark D.",
|
|
handle: "@markrides",
|
|
testimonial: "Exceptional service! They really know their SYM bikes inside out.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-man-with-bicycle-nature_23-2148921726.jpg",
|
|
},
|
|
{
|
|
name: "Anna S.",
|
|
handle: "@anna_scoot",
|
|
testimonial: "Smooth buying experience, highly recommend for any SYM fan.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-business-woman-riding-electro-scooter-by-ofice-center_1303-31399.jpg",
|
|
},
|
|
{
|
|
name: "John R.",
|
|
handle: "@johnr_city",
|
|
testimonial: "Great parts selection, saved me time and money.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-sunglasses-relaxing-bench-after-riding-by-electric-scooter-downtown_613910-2140.jpg",
|
|
},
|
|
{
|
|
name: "Lisa K.",
|
|
handle: "@lisa_rides",
|
|
testimonial: "The best scooter shop in town! Truly professional.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/side-view-beauty-smiling-curly-woman-sunglasses-sitting-modern-motobike-outdoors-looking-away_171337-16699.jpg",
|
|
},
|
|
{
|
|
name: "Peter T.",
|
|
handle: "@pt_scoot",
|
|
testimonial: "Friendly staff and quick turnaround on maintenance.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/front-view-happy-old-man-with-white-helmet_23-2148269398.jpg",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/outdoor-activities-lifestyle-ecological-transport-concept-joyful-curly-haired-young-female-model-rides-electric-scooter-has-fun-enjoys-awesome-ride-leisure-time-poses-urban-place_273609-55768.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/handsome-young-man-riding-electric-scooter-using-phone_1303-31080.jpg",
|
|
alt: "Rider 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/attractive-fashionable-girl-sunglasses-hat-is-posing-photographer-with-her-new-scooter_613910-21812.jpg",
|
|
alt: "Rider 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/active-african-american-man-riding-electric-scooter-man-with-curly-hair-with-sunglasses-spending-time-outdoors-technology-activity-concept_74855-25536.jpg",
|
|
alt: "Rider 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-riding-electric-scooter-work-modern-girl-new-generation-electric-transport-ecology-ecological-transport-sunset_1321-4463.jpg",
|
|
alt: "Rider 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/sexy-blond-female-red-leather-jacket-posing-near-motorcycle_613910-9257.jpg",
|
|
alt: "Rider 5",
|
|
},
|
|
]}
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Authorized SYM Dealer",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Certified Mechanics",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Full Parts Inventory",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Performance Tuning",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Custom Modifications",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={false}
|
|
title="Why Choose SYM MotorHub?"
|
|
description={[
|
|
"Founded with a passion for scooters, we specialize in everything SYM. From sales to precision tuning, our technicians treat every ride like their own.",
|
|
"Quality service shouldn't be hard to find. We stock genuine parts and offer industry-leading expertise to keep your scooter performing at its peak.",
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyFive
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Expert SYM Tuning",
|
|
description: "Specialized performance upgrades and regular maintenance.",
|
|
icon: Wrench,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/closeup-person-refueling-modern-black-car-gas-station_1308-189562.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-red-geometric-shape_23-2148209971.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/outdoor-activities-lifestyle-ecological-transport-concept-joyful-curly-haired-young-female-model-rides-electric-scooter-has-fun-enjoys-awesome-ride-leisure-time-poses-urban-place_273609-55768.jpg?_wi=2",
|
|
imageAlt: "motor scooter fuel efficient symbol",
|
|
},
|
|
{
|
|
title: "Genuine Parts",
|
|
description: "OEM components sourced directly for perfect compatibility.",
|
|
icon: ShieldCheck,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/repair_24908-54063.jpg",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-vector/20-product-management-flat-color-icon-pack-like-management-data-goods-business-preferences_1142-17823.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-working-laptop-cafe_1303-16280.jpg",
|
|
imageAlt: "motor scooter fuel efficient symbol",
|
|
},
|
|
{
|
|
title: "Fast Shipping",
|
|
description: "Get parts delivered to your door in record time.",
|
|
icon: Zap,
|
|
mediaItems: [
|
|
{
|
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=5qzrv8",
|
|
},
|
|
{
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-woman-look-motorcycle-mirror-tropical-field_343596-2849.jpg",
|
|
},
|
|
],
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-sunglasses-posing-while-standing_171337-17574.jpg?_wi=1",
|
|
imageAlt: "motor scooter fuel efficient symbol",
|
|
},
|
|
]}
|
|
title="Unmatched Quality & Service"
|
|
description="We ensure your SYM scooter stays reliable, efficient, and road-ready all year round."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "1",
|
|
brand: "SYM",
|
|
name: "CityCom 300",
|
|
price: "$4,299",
|
|
rating: 5,
|
|
reviewCount: "12",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-woman-sunglasses-posing-while-standing_171337-17574.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "2",
|
|
brand: "SYM",
|
|
name: "Jet 14",
|
|
price: "$2,899",
|
|
rating: 4,
|
|
reviewCount: "8",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-motor-electric-bike-ebike-bicycle_114579-344.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
brand: "SYM",
|
|
name: "Symphony ST",
|
|
price: "$3,199",
|
|
rating: 5,
|
|
reviewCount: "15",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781734.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
brand: "SYM",
|
|
name: "Fiddle IV",
|
|
price: "$2,599",
|
|
rating: 4,
|
|
reviewCount: "20",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/stylish-bearded-male-step-electric-scooter-background_613910-3396.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
brand: "SYM",
|
|
name: "Cruisym 150",
|
|
price: "$3,799",
|
|
rating: 5,
|
|
reviewCount: "9",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/3d-render-cartoon-woman-riding-push-scooter-3d-art-design-illustration_460848-7132.jpg",
|
|
},
|
|
{
|
|
id: "6",
|
|
brand: "SYM",
|
|
name: "Maxsym 400",
|
|
price: "$6,499",
|
|
rating: 5,
|
|
reviewCount: "22",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/woman-throwing-up-keys-her-white-car-car-dealership_651396-3573.jpg",
|
|
},
|
|
]}
|
|
title="SYM Scooter Collection"
|
|
description="Explore our latest lineup of SYM models designed for city life."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "12K+",
|
|
title: "Happy Riders",
|
|
items: [
|
|
"Across the country",
|
|
"Riding every day",
|
|
],
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "500+",
|
|
title: "Genuine Parts",
|
|
items: [
|
|
"In our catalog",
|
|
"In stock now",
|
|
],
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "15",
|
|
title: "Expert Mechanics",
|
|
items: [
|
|
"Certified SYM techs",
|
|
"Always available",
|
|
],
|
|
},
|
|
]}
|
|
title="Shop Milestones"
|
|
description="Delivering performance to riders nationwide."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFifteen
|
|
useInvertedBackground={false}
|
|
testimonial="The best place to buy and service a SYM scooter. Honest, efficient, and they always use genuine parts."
|
|
rating={5}
|
|
author="David M., Daily Commuter"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiley-woman-doing-thumbs-up_23-2148628939.jpg",
|
|
alt: "Customer 1",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-woman-with-long-hairs-electric-scooter-girl-electric-scooter-drinks-coffee_1321-4604.jpg",
|
|
alt: "Customer 2",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/confident-office-employers-thumbing-up-smiling-two-happy-professional-businesswomen-standing-together-posing-meeting-room-teamwork-business-cooperation-concept_74855-6924.jpg",
|
|
alt: "Customer 3",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-young-female-builder-green-construction-suit-yellow-helmet-just-posing-with-smile-pink-space-architecture-construction-job_140725-28875.jpg",
|
|
alt: "Customer 4",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/portrait-smiling-girl-shows-okay-ok-signs-look-satisfied-recommend-good-company-perfect-quality-praise-good-job-well-done-standing-pleased-against-white-background_176420-54380.jpg",
|
|
alt: "Customer 5",
|
|
},
|
|
]}
|
|
ratingAnimation="slide-up"
|
|
avatarsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitMedia
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
faqs={[
|
|
{
|
|
id: "q1",
|
|
title: "How often should I service my scooter?",
|
|
content: "We recommend service every 3,000 miles to keep the engine in top shape.",
|
|
},
|
|
{
|
|
id: "q2",
|
|
title: "Do you carry parts for all models?",
|
|
content: "Yes, we maintain a huge inventory of OEM SYM parts for nearly every model.",
|
|
},
|
|
{
|
|
id: "q3",
|
|
title: "Can you handle custom modifications?",
|
|
content: "Definitely! Our mechanics are experts at tuning and customizing SYM platforms.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/unrecognizable-repairman-using-wrench-while-working-car-service-workshop_637285-9404.jpg"
|
|
mediaAnimation="slide-up"
|
|
title="Common Questions"
|
|
description="Find answers to help you maintain your SYM ride."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain",
|
|
}}
|
|
tag="Get In Touch"
|
|
title="Ready to Ride?"
|
|
description="Have questions about a specific model or need a repair estimate? Contact our team today."
|
|
buttons={[
|
|
{
|
|
text: "Contact Us",
|
|
href: "#",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/man-choosed-motorcycles-moto-shop-guy-black-jacket-man-helmet_1157-43599.jpg"
|
|
logoSrc="http://img.b2bpic.net/free-vector/automotive-logo-template_23-2150529703.jpg"
|
|
logoText="SYM MotorHub"
|
|
columns={[
|
|
{
|
|
title: "Company",
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Blog",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Careers",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Support",
|
|
items: [
|
|
{
|
|
label: "FAQ",
|
|
href: "#faq",
|
|
},
|
|
{
|
|
label: "Parts Search",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Legal",
|
|
items: [
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Terms of Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|