Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -4,155 +4,135 @@ 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 HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
+import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
-import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
+import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
+import { Gauge, Zap, TrendingUp, ArrowRight } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="directional-hover"
+        defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="entrance-slide"
+        defaultTextAnimation="reveal-blur"
-        borderRadius="rounded"
+        borderRadius="pill"
         contentWidth="medium"
-        sizing="medium"
+        sizing="largeSizeMediumTitles"
-        background="circleGradient"
+        background="noiseDiagonalGradient"
-        cardStyle="glass-elevated"
+        cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="glass"
-        headingFontWeight="normal"
+        headingFontWeight="bold"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-          <NavbarLayoutFloatingOverlay
+          <NavbarLayoutFloatingInline
             navItems={[
-              { name: "Features", id: "about" },
+              { name: "Performance", id: "hero" },
-              { name: "Specs", id: "product" },
+              { name: "Heritage", id: "about" },
-              { name: "Testimonials", id: "testimonial" },
+              { name: "Builds", id: "product" },
+              { name: "Specifications", id: "metrics" },
+              { name: "Voices", id: "testimonial" },
               { name: "Contact", id: "contact" },
             ]}
-            brandName="BMW M4 Competition"
+            brandName="BMW M4"
+            button={{ text: "Configure", href: "#contact" }}
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroSplitTestimonial
+          <HeroSplitKpi
-            useInvertedBackground={false}
+            background={{ variant: "gradient-bars" }}
-            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={[
+            kpis={[
-              {
+              { value: "503 HP", label: "Power" },
-                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,
+              { value: "3.8s", label: "0-60 MPH" },
-                imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BYzlPywJP0TGoGmkGGZXdxr3Bm/professional-headshot-of-a-happy-custome-1774686392529-1502198c.png"},
+              { value: "479 LB-FT", label: "Torque" }
-              {
-                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={[
+            buttons={[{ text: "Build Now", href: "#contact" }]}
-              { 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?_wi=1"
-            ]}
+            imageAlt="BMW M4 Competition"
-            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">
-          <TextSplitAbout
+          <SplitAbout
-            useInvertedBackground={false}
             title="Born on the Track"
-            description={[
+            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."
-              "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."]}
+            bulletPoints={[
-            buttons={[{ text: "Explore Performance", href: "#product" }]}
+              { 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"
           />
         </div>
 
         <div id="product" data-section="product">
-          <ProductCardTwo
+          <ProductCardFour
+            title="M4 Performance Range"
+            description="Custom curated builds featuring exclusive colors and track-focused performance enhancements."
+            gridVariant="asymmetric-60-wide-40-narrow"
             animationType="slide-up"
-            textboxLayout="split-description"
+            textboxLayout="split"
-            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: "m4-1",                brand: "BMW M",                name: "M4 Competition Coupe - Racing Blue",                price: "$79,900",                rating: 5,
+              { 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" },
-                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: "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-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
+          <MetricCardOne
-            textboxLayout="split-description"
+            title="Technical Specifications"
-            useInvertedBackground={false}
+            description="Performance metrics that define the M4 Competition experience."
+            textboxLayout="split"
+            gridVariant="bento-grid"
             animationType="slide-up"
+            useInvertedBackground={false}
             metrics={[
-              {
+              { id: "1", value: "503", title: "Horsepower", description: "Explosive power delivery", icon: Zap },
-                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: "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: "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: "4", value: "8-Spd", title: "Transmission", description: "M-Steptronic precision", icon: TrendingUp }
-              {
-                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
+          <TestimonialCardOne
-            textboxLayout="split-description"
+            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"
             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: "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: "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: "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}
+            title="Reserve Your Experience"
-            background={{
+            description="Connect with our specialists for a personalized consultation on your build."
-              variant: "gradient-bars"}}
+            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"
+            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"
           />
         </div>
 
@@ -160,26 +140,11 @@ 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: "Vehicles",                items: [
+              { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Locations", href: "#contact" }] },
-                  { label: "M4 Competition", href: "#" },
+              { title: "Legal", items: [{ label: "Privacy", href: "#" }, { label: "Terms", 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"
+            copyrightText="© 2025 | BMW M4 Competition"
           />
         </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #0a0a0a;
   --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
+  --foreground: #f5f5f5;
   --primary-cta: #cee7ff;
   --primary-cta-text: #0a0a0a;
   --secondary-cta: #1a1a1a;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
+  --accent: #3f5c79;
-  --background-accent: #737373;
+  --background-accent: #004a93;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);