Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 48174c72f1 |
195
src/app/page.tsx
195
src/app/page.tsx
@@ -4,135 +4,155 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
||||
import ProductCardFour from '@/components/sections/product/ProductCardFour';
|
||||
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import { Gauge, Zap, TrendingUp, ArrowRight } from "lucide-react";
|
||||
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
||||
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="hover-magnetic"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="directional-hover"
|
||||
defaultTextAnimation="entrance-slide"
|
||||
borderRadius="rounded"
|
||||
contentWidth="medium"
|
||||
sizing="largeSizeMediumTitles"
|
||||
background="noiseDiagonalGradient"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="primary-glow"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="bold"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Performance", id: "hero" },
|
||||
{ name: "Heritage", id: "about" },
|
||||
{ name: "Builds", id: "product" },
|
||||
{ name: "Specifications", id: "metrics" },
|
||||
{ name: "Voices", id: "testimonial" },
|
||||
{ name: "Features", id: "about" },
|
||||
{ name: "Specs", id: "product" },
|
||||
{ name: "Testimonials", id: "testimonial" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="BMW M4"
|
||||
button={{ text: "Configure", href: "#contact" }}
|
||||
brandName="BMW M4 Competition"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitKpi
|
||||
background={{ variant: "gradient-bars" }}
|
||||
<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."
|
||||
kpis={[
|
||||
{ value: "503 HP", label: "Power" },
|
||||
{ value: "3.8s", label: "0-60 MPH" },
|
||||
{ value: "479 LB-FT", label: "Torque" }
|
||||
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: "Build Now", 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?_wi=1"
|
||||
imageAlt="BMW M4 Competition"
|
||||
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"
|
||||
enableKpiAnimation={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
<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."
|
||||
bulletPoints={[
|
||||
{ title: "Race Heritage", description: "Derived from GT racing DNA.", icon: Gauge },
|
||||
{ title: "Precision Engineering", description: "Optimized for ultimate handling.", icon: Zap },
|
||||
{ title: "Modern Innovation", description: "The latest in M performance.", icon: TrendingUp }
|
||||
]}
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-side-profile-in-racin-1774686391659-b22e7850.png?_wi=1"
|
||||
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">
|
||||
<ProductCardFour
|
||||
title="M4 Performance Range"
|
||||
description="Custom curated builds featuring exclusive colors and track-focused performance enhancements."
|
||||
gridVariant="asymmetric-60-wide-40-narrow"
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
textboxLayout="split-description"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
products={[
|
||||
{ id: "1", name: "Racing Blue", price: "$79,900", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-side-profile-in-racin-1774686391659-b22e7850.png?_wi=2" },
|
||||
{ id: "2", name: "Metallic Grey", price: "$82,500", variant: "Sport", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-in-grey-metallic-fron-1774686390797-57940384.png" },
|
||||
{ id: "3", name: "Black Sapphire", price: "$85,000", variant: "Track", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/bmw-m4-competition-rear-view-with-quad-e-1774686391640-e9fa9d59.png" }
|
||||
{
|
||||
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">
|
||||
<MetricCardOne
|
||||
title="Technical Specifications"
|
||||
description="Performance metrics that define the M4 Competition experience."
|
||||
textboxLayout="split"
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
<MetricCardEleven
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
animationType="slide-up"
|
||||
metrics={[
|
||||
{ id: "1", value: "503", title: "Horsepower", description: "Explosive power delivery", icon: Zap },
|
||||
{ id: "2", value: "3.8", title: "0-60 MPH", description: "Rapid acceleration", icon: ArrowRight },
|
||||
{ id: "3", value: "479", title: "Lb-Ft", description: "Peak torque output", icon: Gauge },
|
||||
{ id: "4", value: "8-Spd", title: "Transmission", description: "M-Steptronic precision", icon: TrendingUp }
|
||||
{
|
||||
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">
|
||||
<TestimonialCardOne
|
||||
title="Drivers' Voices"
|
||||
description="Direct feedback from those who have tested the limits of the M4 Competition."
|
||||
gridVariant="bento-grid"
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
<TestimonialCardFive
|
||||
textboxLayout="split-description"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Marcus R.", role: "Owner", company: "Track Pro", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png" },
|
||||
{ id: "2", name: "Elena K.", role: "Driver", company: "Enthusiast", 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" },
|
||||
{ id: "3", name: "David W.", role: "Pro", company: "Racing Team", 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" }
|
||||
{
|
||||
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
|
||||
title="Reserve Your Experience"
|
||||
description="Connect with our specialists for a personalized consultation on your build."
|
||||
background={{ variant: "gradient-bars" }}
|
||||
buttonText="Inquire Now"
|
||||
tag="Inquire"
|
||||
useInvertedBackground={false}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/a-sleek-bmw-m4-competition-in-a-dramatic-1774686390135-561f2c5a.png?_wi=2"
|
||||
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>
|
||||
|
||||
@@ -140,11 +160,26 @@ export default function LandingPage() {
|
||||
<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: "The M4", items: [{ label: "Features", href: "#hero" }, { label: "Builds", href: "#product" }] },
|
||||
{ title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Locations", href: "#contact" }] },
|
||||
{ title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", href: "#" }] }
|
||||
{
|
||||
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 M4 Competition"
|
||||
copyrightText="© 2025 | BMW M Performance"
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #f5f5f5;
|
||||
--foreground: #f0f8ffe6;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #0a0a0a;
|
||||
--secondary-cta: #1a1a1a;
|
||||
--secondary-cta-text: #f0f8ffe6;
|
||||
--accent: #3f5c79;
|
||||
--background-accent: #004a93;
|
||||
--accent: #737373;
|
||||
--background-accent: #737373;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user