Merge version_1 into main #1
380
src/app/page.tsx
380
src/app/page.tsx
@@ -17,286 +17,122 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="icon-arrow"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "home",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Stats",
|
||||
id: "stats",
|
||||
},
|
||||
{
|
||||
name: "Sponsors",
|
||||
id: "sponsors",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="DriverName"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Home", id: "home" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Stats", id: "stats" },
|
||||
{ name: "Sponsors", id: "sponsors" },
|
||||
{ name: "Contact", id: "contact" }
|
||||
]}
|
||||
brandName="DriverName"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
title="Name Surname"
|
||||
description="Professional Racing Driver. Competing at the highest level of motorsport with speed, precision, and passion."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Team Manager",
|
||||
handle: "@racing-director",
|
||||
testimonial: "An incredible talent with unmatched focus.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-black-leather-gloves-protective-motorbike-helmet-attractive-self-determined-female-motocycle-racer-wearing-hands-body-protection-from-falls-accidents_343059-3286.jpg",
|
||||
imageAlt: "Team Manager headshot",
|
||||
},
|
||||
{
|
||||
name: "Race Engineer",
|
||||
handle: "@telemetry-pro",
|
||||
testimonial: "Precision like I've never seen before.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-age-biker-sports-jacket-holds-motorcycle-helmet-grey-background_613910-12160.jpg",
|
||||
imageAlt: "Race Engineer headshot",
|
||||
},
|
||||
{
|
||||
name: "Senior Driver",
|
||||
handle: "@f1-veteran",
|
||||
testimonial: "The future of the sport is bright.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-image-motorcyclist-studio-shot_613910-10818.jpg",
|
||||
imageAlt: "Senior Driver headshot",
|
||||
},
|
||||
{
|
||||
name: "Lead Mechanic",
|
||||
handle: "@crew-chief",
|
||||
testimonial: "Fastest hands in the paddock.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/isolated-shot-attractive-young-brown-eyed-caucasian-female-rider-posing-studio_343059-619.jpg",
|
||||
imageAlt: "Lead Mechanic headshot",
|
||||
},
|
||||
{
|
||||
name: "Journalist",
|
||||
handle: "@motorsport-daily",
|
||||
testimonial: "Consistently dominating the field.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/build-your-own-body-strength-fitness-exercise-get-fit_53876-13878.jpg",
|
||||
imageAlt: "Journalist headshot",
|
||||
},
|
||||
]}
|
||||
buttons={[
|
||||
{
|
||||
text: "View Results",
|
||||
href: "#stats",
|
||||
},
|
||||
{
|
||||
text: "Become a Sponsor",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg"
|
||||
imageAlt="Racing driver professional portrait"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg",
|
||||
alt: "Avatar 1",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q0satx",
|
||||
alt: "Avatar 2",
|
||||
},
|
||||
{
|
||||
src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dyhdr3",
|
||||
alt: "Avatar 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/ballerina-training-perform-eleegance-icon_53876-21256.jpg",
|
||||
alt: "Avatar 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/2020-sports-event-postponed-arrangement_23-2148596844.jpg",
|
||||
alt: "Avatar 5",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-photo/ballerina-training-perform-eleegance-icon_53876-13812.jpg",
|
||||
alt: "Sponsor 1",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/logo-template-design_1289-50.jpg",
|
||||
alt: "Sponsor 2",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/hand-drawn-creative-cardano-illustration_23-2149191328.jpg",
|
||||
alt: "Sponsor 3",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/red-button-logo_1176-239.jpg",
|
||||
alt: "Sponsor 4",
|
||||
},
|
||||
{
|
||||
type: "image",
|
||||
src: "http://img.b2bpic.net/free-vector/circular-travel-agency-logo_1071-77.jpg",
|
||||
alt: "Sponsor 5",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="home" data-section="home">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
title="Name Surname"
|
||||
description="Professional Racing Driver. Competing at the highest level of motorsport with speed, precision, and passion."
|
||||
testimonials={[
|
||||
{ name: "Team Manager", handle: "@racing-director", testimonial: "An incredible talent with unmatched focus.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-young-woman-black-leather-gloves-protective-motorbike-helmet-attractive-self-determined-female-motocycle-racer-wearing-hands-body-protection-from-falls-accidents_343059-3286.jpg", imageAlt: "Team Manager headshot" },
|
||||
{ name: "Race Engineer", handle: "@telemetry-pro", testimonial: "Precision like I've never seen before.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-middle-age-biker-sports-jacket-holds-motorcycle-helmet-grey-background_613910-12160.jpg", imageAlt: "Race Engineer headshot" },
|
||||
{ name: "Senior Driver", handle: "@f1-veteran", testimonial: "The future of the sport is bright.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-image-motorcyclist-studio-shot_613910-10818.jpg", imageAlt: "Senior Driver headshot" },
|
||||
{ name: "Lead Mechanic", handle: "@crew-chief", testimonial: "Fastest hands in the paddock.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/isolated-shot-attractive-young-brown-eyed-caucasian-female-rider-posing-studio_343059-619.jpg", imageAlt: "Lead Mechanic headshot" },
|
||||
{ name: "Journalist", handle: "@motorsport-daily", testimonial: "Consistently dominating the field.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/build-your-own-body-strength-fitness-exercise-get-fit_53876-13878.jpg", imageAlt: "Journalist headshot" }
|
||||
]}
|
||||
buttons={[
|
||||
{ text: "View Results", href: "#stats" },
|
||||
{ text: "Become a Sponsor", href: "#contact" }
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg"
|
||||
imageAlt="Racing driver professional portrait"
|
||||
mediaAnimation="blur-reveal"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/positive-bearded-redhead-male-leather-jacket-holds-motorcycle-helmet-grey-background_613910-1094.jpg", alt: "Avatar 1" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=q0satx", alt: "Avatar 2" },
|
||||
{ src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dyhdr3", alt: "Avatar 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/ballerina-training-perform-eleegance-icon_53876-21256.jpg", alt: "Avatar 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/2020-sports-event-postponed-arrangement_23-2148596844.jpg", alt: "Avatar 5" }
|
||||
]}
|
||||
marqueeItems={[
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-photo/ballerina-training-perform-eleegance-icon_53876-13812.jpg", alt: "Sponsor 1" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-vector/logo-template-design_1289-50.jpg", alt: "Sponsor 2" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-vector/hand-drawn-creative-cardano-illustration_23-2149191328.jpg", alt: "Sponsor 3" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-vector/red-button-logo_1176-239.jpg", alt: "Sponsor 4" },
|
||||
{ type: "image", src: "http://img.b2bpic.net/free-vector/circular-travel-agency-logo_1071-77.jpg", alt: "Sponsor 5" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="My Journey"
|
||||
metrics={[
|
||||
{
|
||||
label: "Years Racing",
|
||||
value: "10+",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
label: "Race Wins",
|
||||
value: "42",
|
||||
icon: Trophy,
|
||||
},
|
||||
{
|
||||
label: "Podiums",
|
||||
value: "87",
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="My Journey"
|
||||
metrics={[
|
||||
{ label: "Years Racing", value: "10+", icon: Award },
|
||||
{ label: "Race Wins", value: "42", icon: Trophy },
|
||||
{ label: "Podiums", value: "87", icon: Star }
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "1",
|
||||
value: "1.24.5",
|
||||
title: "Fastest Lap (Silverstone)",
|
||||
items: [
|
||||
"Pole Position",
|
||||
"Track Record",
|
||||
"2024 Season",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
value: "82%",
|
||||
title: "Top 3 Finishes",
|
||||
items: [
|
||||
"Consistent Pace",
|
||||
"High Reliability",
|
||||
"Racecraft",
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
value: "245 km/h",
|
||||
title: "Avg Cornering Speed",
|
||||
items: [
|
||||
"Aerodynamic Efficiency",
|
||||
"Aggressive Driving",
|
||||
"Confidence",
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Race Statistics"
|
||||
description="Key performance metrics from the current season and career history."
|
||||
/>
|
||||
</div>
|
||||
<div id="stats" data-section="stats">
|
||||
<MetricCardSeven
|
||||
animationType="depth-3d"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "1", value: "1.24.5", title: "Fastest Lap (Silverstone)", items: ["Pole Position", "Track Record", "2024 Season"] },
|
||||
{ id: "2", value: "82%", title: "Top 3 Finishes", items: ["Consistent Pace", "High Reliability", "Racecraft"] },
|
||||
{ id: "3", value: "245 km/h", title: "Avg Cornering Speed", items: ["Aerodynamic Efficiency", "Aggressive Driving", "Confidence"] }
|
||||
]}
|
||||
title="Race Statistics"
|
||||
description="Key performance metrics from the current season and career history."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="sponsors" data-section="sponsors">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"TechCorp",
|
||||
"SpeedPerformance",
|
||||
"AeroDynamics",
|
||||
"PrecisionParts",
|
||||
"GlobalEnergy",
|
||||
"TelemetrySolutions",
|
||||
"LogisticsExpress",
|
||||
]}
|
||||
title="Official Partners"
|
||||
description="Proudly supported by world-class leaders in innovation and technology."
|
||||
/>
|
||||
</div>
|
||||
<div id="sponsors" data-section="sponsors">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["TechCorp", "SpeedPerformance", "AeroDynamics", "PrecisionParts", "GlobalEnergy", "TelemetrySolutions", "LogisticsExpress"]}
|
||||
title="Official Partners"
|
||||
description="Proudly supported by world-class leaders in innovation and technology."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
text="Interested in partnering with a rising star in motorsport? Let's discuss sponsorship opportunities."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact for Sponsorship",
|
||||
href: "mailto:hello@racingdriver.com",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactText
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
text="Interested in partnering with a rising star in motorsport? Let's discuss sponsorship opportunities."
|
||||
buttons={[{ text: "Contact for Sponsorship", href: "mailto:hello@racingdriver.com" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Navigation",
|
||||
items: [
|
||||
{
|
||||
label: "Home",
|
||||
href: "#home",
|
||||
},
|
||||
{
|
||||
label: "About",
|
||||
href: "#about",
|
||||
},
|
||||
{
|
||||
label: "Results",
|
||||
href: "#stats",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Partnership",
|
||||
items: [
|
||||
{
|
||||
label: "Become a Sponsor",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoText="DriverName"
|
||||
copyrightText="© 2025 Racing Driver Website"
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{ title: "Navigation", items: [{ label: "Home", href: "#home" }, { label: "About", href: "#about" }, { label: "Results", href: "#stats" }] },
|
||||
{ title: "Partnership", items: [{ label: "Become a Sponsor", href: "#contact" }] }
|
||||
]}
|
||||
logoText="DriverName"
|
||||
copyrightText="© 2025 Racing Driver Website"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user