Files
82cdeccf-6bb4-445a-abcf-2ec…/src/app/page.tsx
2026-05-14 03:42:36 +00:00

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>
);
}