233 lines
13 KiB
TypeScript
233 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
|
import HeroSplitLarge from '@/components/sections/hero/HeroSplitLarge';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
|
import TeamCardTwo from '@/components/sections/team/TeamCardTwo';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
import { Bike, Instagram, Facebook, Twitter, Linkedin, Globe } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="sharp"
|
|
contentWidth="smallMedium"
|
|
sizing="largeSizeMediumTitles"
|
|
background="circleGradient"
|
|
cardStyle="outline-light"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="layered"
|
|
headingFontWeight="semibold"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleCentered
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Team", id: "team" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
button={{ text: "Join Ride", href: "contact" }}
|
|
brandName="Rider's Hub"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitLarge
|
|
title="Ride Together, Live Bold"
|
|
description="Join a passionate community of motorcycle enthusiasts united by the open road. Experience camaraderie, exclusive events, and unforgettable adventures with riders who share your passion."
|
|
tag="Welcome to the Pack"
|
|
tagIcon={Bike}
|
|
buttons={[
|
|
{ text: "Find Your Chapter", href: "contact" },
|
|
{ text: "Learn More", href: "about" }
|
|
]}
|
|
imageSrc="https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg"
|
|
imageAlt="Motorcycle rider on open road"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
heading={[
|
|
{ type: "text", content: "United by passion," },
|
|
{ type: "image", src: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg", alt: "Biker community" },
|
|
{ type: "text", content: "connected by the ride" }
|
|
]}
|
|
buttons={[
|
|
{ text: "Join Our Community", href: "contact" }
|
|
]}
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
title="Why Ride With Us"
|
|
description="Discover what makes our biking community the ultimate destination for motorcycle enthusiasts"
|
|
features={[
|
|
{
|
|
id: 1,
|
|
title: "Exclusive Riding Events", description: "Join organized rides, track days, and charity events designed for every skill level. Connect with experienced riders while exploring scenic routes and building lasting friendships on two wheels.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/full-shot-happy-friends-ready-prom_23-2149096505.jpg" }
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Safety & Expertise", description: "Access professional safety training, maintenance workshops, and expert guidance. Our certified instructors and veteran riders ensure you ride smarter and stay protected on every journey.", phoneOne: { imageSrc: "https://img.b2bpic.net/free-photo/closeup-shot-male-holding-his-motorcycle-helmet-with-blurred-distance_181624-26350.jpg" },
|
|
phoneTwo: { imageSrc: "https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg" }
|
|
}
|
|
]}
|
|
showStepNumbers={true}
|
|
textboxLayout="default"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardEleven
|
|
title="Our Community Impact"
|
|
description="Real numbers reflecting our commitment to the biker lifestyle and community growth"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "15K+", title: "Active Riders", description: "Members across our chapters nationwide", imageSrc: "https://img.b2bpic.net/free-photo/happy-friends-with-motorcycle-full-shot_23-2149096502.jpg"
|
|
},
|
|
{
|
|
id: "2", value: "200+", title: "Annual Events", description: "Organized rides, rallies, and meetups", imageSrc: "https://img.b2bpic.net/free-photo/dirt-bike-rider-with-his-motorcycle-racing-circuits-adventure_23-2151482725.jpg"
|
|
},
|
|
{
|
|
id: "3", value: "50K+", title: "Miles Ridden", description: "Collective journeys every month", imageSrc: "https://img.b2bpic.net/free-photo/long-shot-man-riding-motorbike_23-2150810233.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="team" data-section="team">
|
|
<TeamCardTwo
|
|
title="Meet Our Crew Leaders"
|
|
description="Experienced riders leading chapters and shaping our community vision"
|
|
members={[
|
|
{
|
|
id: "1", name: "Marcus Stone", role: "National Director", description: "Veteran rider with 25 years on the road. Passionate about building inclusive communities where every rider belongs.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-male-biker-yellow-helmet-side-busy-road-thailand-sunset-time_343596-2829.jpg", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Facebook, url: "https://facebook.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "2", name: "Sierra Reeves", role: "Events Coordinator", description: "Organizes epic rides and community gatherings. Her energy and dedication unite riders across regions.", imageSrc: "https://img.b2bpic.net/free-photo/smiling-biker-protection-holds-black-helmet-isolated-grey-background_613910-7302.jpg", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Twitter, url: "https://twitter.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "3", name: "Jake Thompson", role: "Safety & Training Lead", description: "MSF certified instructor dedicated to ensuring every rider develops skills and confidence for the open road.", imageSrc: "https://img.b2bpic.net/free-photo/man-choosed-motorcycles-moto-shop-guy-black-jacket-man-helmet_1157-43598.jpg", socialLinks: [
|
|
{ icon: Linkedin, url: "https://linkedin.com" },
|
|
{ icon: Instagram, url: "https://instagram.com" }
|
|
]
|
|
},
|
|
{
|
|
id: "4", name: "Elena Cross", role: "Community Manager", description: "Bridges members across chapters and ensures our community thrives with shared values and mutual respect.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-sexy-man-motorbike_1303-22182.jpg", socialLinks: [
|
|
{ icon: Instagram, url: "https://instagram.com" },
|
|
{ icon: Globe, url: "https://example.com" }
|
|
]
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
gridVariant="four-items-2x2-equal-grid"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
title="Stories from Our Riders"
|
|
description="Real experiences from community members who've found their tribe"
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "David Chen", role: "Rider, Chicago Chapter", testimonial: "Joining this community transformed my riding. I found lifelong friends, learned invaluable safety skills, and discovered remote roads I never knew existed. The camaraderie is unmatched.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-biker-travelling-mototrcycle_1303-22138.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Rachel Williams", role: "Rider, Austin Chapter", testimonial: "As a solo female rider, I was nervous about fitting in. This community welcomed me with open arms. Now I lead rides and mentor new riders. Best decision ever.", imageSrc: "https://img.b2bpic.net/free-photo/motor-biker-wears-shearling-denim-jacket-black-blank-henley-shirt-holds-vintage-beige-motorcycle-helmet-isolated-center-white-brick-wall_346278-970.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Tony Martinez", role: "Rider, Miami Chapter", testimonial: "The safety training programs saved my life on the highway. Professional instructors, genuine community support, and real camaraderie. This is what riding is all about.", imageSrc: "https://img.b2bpic.net/free-photo/portrait-male-biker-yellow-helmet-side-busy-road-thailand-sunset-time_343596-2837.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Lisa Anderson", role: "Rider, Denver Chapter", testimonial: "Every ride brings new adventures and friendships. The community events are perfectly organized, the people are authentic, and the riding is unforgettable. Highly recommend.", imageSrc: "https://img.b2bpic.net/free-photo/handsome-man-biker-travelling-mototrcycle_1303-22142.jpg"
|
|
}
|
|
]}
|
|
textboxLayout="default"
|
|
animationType="slide-up"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Ready to Ride?"
|
|
description="Join our community and start your next adventure. Connect with thousands of passionate riders, attend exclusive events, and become part of something bigger."
|
|
inputs={[
|
|
{
|
|
label: "Full Name", type: "text", placeholder: "Your name", required: true
|
|
},
|
|
{
|
|
label: "Email Address", type: "email", placeholder: "your@email.com", required: true
|
|
},
|
|
{
|
|
label: "Preferred Chapter", type: "text", placeholder: "e.g., Chicago, Austin, Miami", required: false
|
|
}
|
|
]}
|
|
textarea={{
|
|
label: "Tell Us About Your Ride", placeholder: "Your motorcycle model, riding experience, interests...", required: false
|
|
}}
|
|
buttonText="Join the Pack"
|
|
imageSrc="https://img.b2bpic.net/free-photo/person-taking-driver-s-license-exam_23-2149891421.jpg"
|
|
imageAlt="Motorcycle community"
|
|
mediaPosition="right"
|
|
useInvertedBackground="noInvert"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterBase
|
|
logoText="Rider's Hub"
|
|
columns={[
|
|
{
|
|
title: "Community", items: [
|
|
{ label: "Find a Chapter", href: "https://example.com" },
|
|
{ label: "Events Calendar", href: "https://example.com" },
|
|
{ label: "Local Groups", href: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Resources", items: [
|
|
{ label: "Safety Training", href: "https://example.com" },
|
|
{ label: "Maintenance Tips", href: "https://example.com" },
|
|
{ label: "Route Guides", href: "https://example.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Connect", items: [
|
|
{ label: "Join Us", href: "contact" },
|
|
{ label: "Social Media", href: "https://instagram.com" },
|
|
{ label: "Contact Support", href: "contact" }
|
|
]
|
|
}
|
|
]}
|
|
copyrightText="© 2025 Rider's Hub | United by the Ride"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |