Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-03-28 08:27:23 +00:00

View File

@@ -17,296 +17,171 @@ export default function LandingPage() {
defaultButtonVariant="directional-hover"
defaultTextAnimation="entrance-slide"
borderRadius="rounded"
contentWidth="medium"
sizing="medium"
background="circleGradient"
cardStyle="glass-elevated"
primaryButtonStyle="gradient"
secondaryButtonStyle="glass"
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Features",
id: "about",
},
{
name: "Specs",
id: "product",
},
{
name: "Testimonials",
id: "testimonial",
},
{
name: "Contact",
id: "contact",
},
]}
brandName="BMW M4 Competition"
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={[
{ name: "Features", id: "about" },
{ name: "Specs", id: "product" },
{ name: "Testimonials", id: "testimonial" },
{ name: "Contact", id: "contact" },
]}
brandName="BMW M4 Competition"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
title="Command the Asphalt"
description="Experience the M4 Competition—a fusion of race-proven engineering and luxurious precision. Unleash 503 horsepower and redefine what's possible."
testimonials={[
{
name: "Marcus R.",
handle: "@marcus_r",
testimonial: "The precision of the M4 Competition is unmatched. It feels like an extension of myself on the track.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png?_wi=1",
},
{
name: "Elena K.",
handle: "@elena_k",
testimonial: "Power, agility, and style. The M4 is truly the peak of engineering excellence.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-woman-posing-with-a-modern-sedan-looki-1774686392953-88ce751c.png",
},
{
name: "David W.",
handle: "@david_w",
testimonial: "Test-driving this machine was life-changing. I had to take it home.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/middle-aged-man-leaning-on-a-sports-car--1774686390954-96760978.png",
},
{
name: "Sarah P.",
handle: "@sarah_p",
testimonial: "Nothing beats the roar of the M4 engine. Absolutely incredible performance.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/young-energetic-driver-in-racing-gear-sm-1774686390406-78a8db6d.png",
},
{
name: "James L.",
handle: "@james_l",
testimonial: "The most exhilarating drive I've ever owned. A masterclass in performance.",
rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png?_wi=2",
},
]}
buttons={[
{
text: "Configure Your Build",
href: "#contact",
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-sleek-bmw-m4-competition-in-a-dramatic-1774686390135-561f2c5a.png"
imageAlt="BMW M4 Competition Front View"
mediaAnimation="slide-up"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
useInvertedBackground={false}
background={{
variant: "gradient-bars"}}
title="Command the Asphalt"
description="Experience the M4 Competition—a fusion of race-proven engineering and luxurious precision. Unleash 503 horsepower and redefine what's possible."
testimonials={[
{
name: "Marcus R.", handle: "@marcus_r", testimonial: "The precision of the M4 Competition is unmatched. It feels like an extension of myself on the track.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png"},
{
name: "Elena K.", handle: "@elena_k", testimonial: "Power, agility, and style. The M4 is truly the peak of engineering excellence.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-woman-posing-with-a-modern-sedan-looki-1774686392953-88ce751c.png"},
{
name: "David W.", handle: "@david_w", testimonial: "Test-driving this machine was life-changing. I had to take it home.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/middle-aged-man-leaning-on-a-sports-car--1774686390954-96760978.png"},
{
name: "Sarah P.", handle: "@sarah_p", testimonial: "Nothing beats the roar of the M4 engine. Absolutely incredible performance.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/young-energetic-driver-in-racing-gear-sm-1774686390406-78a8db6d.png"},
{
name: "James L.", handle: "@james_l", testimonial: "The most exhilarating drive I've ever owned. A masterclass in performance.", rating: 5,
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png"},
]}
buttons={[
{ text: "Configure Your Build", href: "#contact" },
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-sleek-bmw-m4-competition-in-a-dramatic-1774686390135-561f2c5a.png"
imageAlt="BMW M4 Competition Front View"
mediaAnimation="slide-up"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Born on the Track"
description={[
"The BMW M4 Competition isn't just built for the road; it's born from motorsport heritage. Every curve, every intake, and every component serves a singular purpose: maximum performance.",
"Featuring the M TwinPower Turbo inline 6-cylinder petrol engine, this car achieves a balance of raw power and sophisticated handling that leaves the competition in the rearview.",
]}
buttons={[
{
text: "Explore Performance",
href: "#product",
},
]}
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Born on the Track"
description={[
"The BMW M4 Competition isn't just built for the road; it's born from motorsport heritage. Every curve, every intake, and every component serves a singular purpose: maximum performance.", "Featuring the M TwinPower Turbo inline 6-cylinder petrol engine, this car achieves a balance of raw power and sophisticated handling that leaves the competition in the rearview."]}
buttons={[{ text: "Explore Performance", href: "#product" }]}
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "m4-1",
brand: "BMW M",
name: "M4 Competition Coupe - Racing Blue",
price: "$79,900",
rating: 5,
reviewCount: "12",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-side-profile-in-racin-1774686391659-b22e7850.png",
},
{
id: "m4-2",
brand: "BMW M",
name: "M4 Competition Coupe - Metallic Grey",
price: "$82,500",
rating: 5,
reviewCount: "8",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-in-grey-metallic-fron-1774686390797-57940384.png",
},
{
id: "m4-3",
brand: "BMW M",
name: "M4 Competition Coupe - Black Sapphire",
price: "$85,000",
rating: 5,
reviewCount: "15",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-rear-view-with-quad-e-1774686391640-e9fa9d59.png",
},
]}
title="The M4 Lineup"
description="Explore our curated selection of M4 Competition builds, engineered to your exact specifications."
/>
</div>
<div id="product" data-section="product">
<ProductCardTwo
animationType="slide-up"
textboxLayout="split-description"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
products={[
{
id: "m4-1", brand: "BMW M", name: "M4 Competition Coupe - Racing Blue", price: "$79,900", rating: 5,
reviewCount: "12", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-side-profile-in-racin-1774686391659-b22e7850.png"},
{
id: "m4-2", brand: "BMW M", name: "M4 Competition Coupe - Metallic Grey", price: "$82,500", rating: 5,
reviewCount: "8", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-in-grey-metallic-fron-1774686390797-57940384.png"},
{
id: "m4-3", brand: "BMW M", name: "M4 Competition Coupe - Black Sapphire", price: "$85,000", rating: 5,
reviewCount: "15", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-rear-view-with-quad-e-1774686391640-e9fa9d59.png"},
]}
title="The M4 Lineup"
description="Explore our curated selection of M4 Competition builds, engineered to your exact specifications."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="split-description"
useInvertedBackground={false}
metrics={[
{
id: "hp",
value: "503 hp",
title: "Horsepower",
description: "Engineered for explosive acceleration.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/dashboard-speedometer-showing-high-rpm-d-1774686390935-f8c13d3d.png",
},
{
id: "accel",
value: "3.8s",
title: "0-60 mph",
description: "Blistering speed at every launch.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/blurry-racetrack-view-from-outside-indic-1774686390055-3be5995a.png",
},
{
id: "torque",
value: "479 lb-ft",
title: "Peak Torque",
description: "Unmatched force in every gear.",
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/close-up-of-high-performance-brake-disc--1774686390240-191c7d9d.png",
},
]}
title="Technical Prowess"
description="Performance figures that redefine expectations."
/>
</div>
<div id="metrics" data-section="metrics">
<MetricCardEleven
textboxLayout="split-description"
useInvertedBackground={false}
animationType="slide-up"
metrics={[
{
id: "hp", value: "503 hp", title: "Horsepower", description: "Engineered for explosive acceleration.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/dashboard-speedometer-showing-high-rpm-d-1774686390935-f8c13d3d.png"},
{
id: "accel", value: "3.8s", title: "0-60 mph", description: "Blistering speed at every launch.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/blurry-racetrack-view-from-outside-indic-1774686390055-3be5995a.png"},
{
id: "torque", value: "479 lb-ft", title: "Peak Torque", description: "Unmatched force in every gear.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/close-up-of-high-performance-brake-disc--1774686390240-191c7d9d.png"},
]}
title="Technical Prowess"
description="Performance figures that redefine expectations."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFive
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{
id: "t1",
name: "Marcus R.",
date: "2024-05-12",
title: "Exceptional",
quote: "The precision is unmatched. I feel in total control.",
tag: "M4 Owner",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png",
},
{
id: "t2",
name: "Elena K.",
date: "2024-06-01",
title: "Stunning",
quote: "Power and style in perfect harmony.",
tag: "Enthusiast",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-woman-posing-with-a-modern-sedan-looki-1774686392953-88ce751c.png",
},
{
id: "t3",
name: "David W.",
date: "2024-07-15",
title: "Dream Car",
quote: "Living the dream every time I hit the start button.",
tag: "Driver",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/middle-aged-man-leaning-on-a-sports-car--1774686390954-96760978.png",
},
{
id: "t4",
name: "Sarah P.",
date: "2024-08-20",
title: "Pure Power",
quote: "The M4 Competition never fails to deliver excitement.",
tag: "Track User",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/young-energetic-driver-in-racing-gear-sm-1774686390406-78a8db6d.png",
},
{
id: "t5",
name: "Robert M.",
date: "2024-09-10",
title: "Agility Master",
quote: "Cornering feels supernatural. Best BMW yet.",
tag: "Track Pro",
avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png",
},
]}
title="Drivers' Voices"
description="Hear what our owners have to say about the ultimate driving experience."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFive
textboxLayout="split-description"
useInvertedBackground={false}
testimonials={[
{
id: "t1", name: "Marcus R.", date: "2024-05-12", title: "Exceptional", quote: "The precision is unmatched. I feel in total control.", tag: "M4 Owner", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png"},
{
id: "t2", name: "Elena K.", date: "2024-06-01", title: "Stunning", quote: "Power and style in perfect harmony.", tag: "Enthusiast", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-woman-posing-with-a-modern-sedan-looki-1774686392953-88ce751c.png"},
{
id: "t3", name: "David W.", date: "2024-07-15", title: "Dream Car", quote: "Living the dream every time I hit the start button.", tag: "Driver", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/middle-aged-man-leaning-on-a-sports-car--1774686390954-96760978.png"},
{
id: "t4", name: "Sarah P.", date: "2024-08-20", title: "Pure Power", quote: "The M4 Competition never fails to deliver excitement.", tag: "Track User", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/young-energetic-driver-in-racing-gear-sm-1774686390406-78a8db6d.png"},
{
id: "t5", name: "Robert M.", date: "2024-09-10", title: "Agility Master", quote: "Cornering feels supernatural. Best BMW yet.", tag: "Track Pro", avatarSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png"},
]}
title="Drivers' Voices"
description="Hear what our owners have to say about the ultimate driving experience."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "gradient-bars",
}}
tag="Inquire"
title="Secure Your M4"
description="Ready to get behind the wheel? Reach out to our team to discuss custom builds and availability."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-blurred-abstract-shot-of-a-racetrack-d-1774686390438-0a7fcd70.png"
mediaAnimation="blur-reveal"
buttonText="Inquire Now"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "gradient-bars"}}
tag="Inquire"
title="Secure Your M4"
description="Ready to get behind the wheel? Reach out to our team to discuss custom builds and availability."
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-blurred-abstract-shot-of-a-racetrack-d-1774686390438-0a7fcd70.png"
mediaAnimation="blur-reveal"
buttonText="Inquire Now"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-clean-shot-of-a-luxury-garage-flooring-1774686390875-7583c671.png"
columns={[
{
title: "Vehicles",
items: [
{
label: "M4 Competition",
href: "#",
},
{
label: "Custom Builds",
href: "#",
},
],
},
{
title: "Brand",
items: [
{
label: "Heritage",
href: "#",
},
{
label: "Locations",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy",
href: "#",
},
{
label: "Terms",
href: "#",
},
],
},
]}
copyrightText="© 2025 | BMW M Performance"
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-clean-shot-of-a-luxury-garage-flooring-1774686390875-7583c671.png"
columns={[
{
title: "Vehicles", items: [
{ label: "M4 Competition", href: "#" },
{ label: "Custom Builds", href: "#" },
],
},
{
title: "Brand", items: [
{ label: "Heritage", href: "#" },
{ label: "Locations", href: "#" },
],
},
{
title: "Legal", items: [
{ label: "Privacy", href: "#" },
{ label: "Terms", href: "#" },
],
},
]}
copyrightText="© 2025 | BMW M Performance"
/>
</div>
</ReactLenis>
</ThemeProvider>
);