bender/82cdeccf-6bb4-445a-abcf-2ecd7ae80b2f
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update src/app/page.tsx

Browse Source
This commit is contained in:
bender
2026-05-14 03:43:10 +00:00
parent 8b1ae1c7d9
commit fd3d641691
1 changed files with 57 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

364
src/app/page.tsx
View File

@@ -32,22 +32,10 @@ export default function LandingPage() {
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Home",
id: "hero",
},
{
name: "Scooters",
id: "products",
},
{
name: "About",
id: "about",
},
{
name: "Contact",
id: "contact",
},
{ name: "Home", id: "hero" },
{ name: "Scooters", id: "products" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
]}
brandName="SYM MotorHub"
/>
@@ -56,93 +44,31 @@ export default function LandingPage() {
<div id="hero" data-section="hero">
<HeroBillboardTestimonial
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
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",
},
{ 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"
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"
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",
},
{ 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",
},
{ 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>
@@ -152,9 +78,7 @@ export default function LandingPage() {
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.",
]}
"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>
@@ -165,50 +89,26 @@ export default function LandingPage() {
useInvertedBackground={false}
features={[
{
title: "Expert SYM Tuning",
description: "Specialized performance upgrades and regular maintenance.",
icon: Wrench,
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",
{ 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" }
]
},
{
title: "Genuine Parts",
description: "OEM components sourced directly for perfect compatibility.",
icon: ShieldCheck,
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",
{ imageSrc: "http://img.b2b-vector/repair_24908-54063.jpg" },
{ imageSrc: "http://img.b2b-vector/20-product-management-flat-color-icon-pack-like-management-data-goods-business-preferences_1142-17823.jpg" }
]
},
{
title: "Fast Shipping",
description: "Get parts delivered to your door in record time.",
icon: Zap,
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",
},
{ 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" }
]
}
]}
title="Unmatched Quality & Service"
description="We ensure your SYM scooter stays reliable, efficient, and road-ready all year round."
@@ -222,60 +122,12 @@ export default function LandingPage() {
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",
},
{ 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" },
{ 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."
@@ -288,33 +140,9 @@ export default function LandingPage() {
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",
],
},
{ 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."
@@ -328,26 +156,11 @@ export default function LandingPage() {
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",
},
{ 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"
@@ -359,21 +172,9 @@ export default function LandingPage() {
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.",
},
{ 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"
@@ -386,18 +187,11 @@ export default function LandingPage() {
<div id="contact" data-section="contact">
<ContactCTA
useInvertedBackground={false}
background={{
variant: "plain",
}}
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: "#",
},
]}
buttons={[{ text: "Contact Us", href: "#" }]}
/>
</div>
@@ -407,53 +201,9 @@ export default function LandingPage() {
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: "#",
},
],
},
{ 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>