From d91fa3defc23d6c55721606beb288cff66f67de8 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Thu, 23 Apr 2026 14:45:11 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 189 +++++++++++++++--------------------------------
 1 file changed, 61 insertions(+), 128 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 4480218..967085b 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,45 +3,39 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
-import HeroLogo from '@/components/sections/hero/HeroLogo';
+import FeatureCardTwentyNine from '@/components/sections/feature/featureCardTwentyNine/FeatureCardTwentyNine';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { Gauge, Rocket, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
         defaultButtonVariant="hover-magnetic"
-        defaultTextAnimation="background-highlight"
-        borderRadius="soft"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
         contentWidth="mediumLarge"
-        sizing="mediumSizeLargeTitles"
-        background="aurora"
+        sizing="largeSizeMediumTitles"
+        background="noiseDiagonalGradient"
         cardStyle="glass-depth"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="layered"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
         headingFontWeight="extrabold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
-      <NavbarLayoutFloatingInline
+      <NavbarLayoutFloatingOverlay
       navItems={[
-        {
-          name: "BORN TO RACE",          id: "hero"},
-        {
-          name: "ENGINE",          id: "engine"},
-        {
-          name: "PERFORMANCE",          id: "performance"},
-        {
-          name: "MODELS",          id: "showroom"},
-        {
-          name: "DNA",          id: "racing"},
-        {
-          name: "CONFIGURATOR",          id: "configurator"},
+        { name: "BORN TO RACE", id: "hero" },
+        { name: "ENGINE", id: "engine" },
+        { name: "PERFORMANCE", id: "performance" },
+        { name: "MODELS", id: "showroom" },
+        { name: "DNA", id: "racing" },
+        { name: "CONFIGURATOR", id: "configurator" },
       ]}
       brandName="DUCATI"
       button={{ text: "CONFIGURATOR", href: "#configurator" }}
@@ -49,32 +43,28 @@ export default function LandingPage() {
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroLogo
-      logoText="BORN TO RACE"
+      <HeroBillboardScroll
+      title="BORN TO RACE"
       description="Unleash the ultimate power of the V4 engine. Experience the peak of Italian racing engineering."
+      background={{ variant: "rotated-rays-animated" }}
       buttons={[
-        {
-          text: "DISCOVER",          href: "#"},
-        {
-          text: "CONFIGURE",          href: "#configurator"},
+        { text: "DISCOVER", href: "#" },
+        { text: "CONFIGURE", href: "#configurator" },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/person-riding-powerful-motorcycle_23-2150704855.jpg"
     />
   </div>
 
   <div id="engine" data-section="engine">
-      <FeatureCardOne
-      animationType="depth-3d"
+      <FeatureCardTwentyNine
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Crankshaft Power",          description: "High-revving precision components.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-vehicle-engine_482257-76670.jpg"},
-        {
-          title: "Piston Engineering",          description: "Forged aluminum alloy performance.",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-motorcycle-parts_23-2150704695.jpg"},
-        {
-          title: "Valve System",          description: "Desmodromic timing synchronization.",          imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545669.jpg"},
+        { title: "Crankshaft Power", description: "High-revving precision components.", imageSrc: "http://img.b2bpic.net/free-photo/3d-render-vehicle-engine_482257-76670.jpg", titleImageSrc: "", buttonText: "Learn More" },
+        { title: "Piston Engineering", description: "Forged aluminum alloy performance.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-motorcycle-parts_23-2150704695.jpg", titleImageSrc: "", buttonText: "Learn More" },
+        { title: "Valve System", description: "Desmodromic timing synchronization.", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545669.jpg", titleImageSrc: "", buttonText: "Learn More" },
       ]}
       title="DESMODROMIC V4"
       description="The heart of every Ducati."
@@ -82,21 +72,14 @@ export default function LandingPage() {
   </div>
 
   <div id="performance" data-section="performance">
-      <MetricCardOne
-      animationType="depth-3d"
+      <MetricCardThree
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="bento-grid"
       useInvertedBackground={true}
       metrics={[
-        {
-          id: "m1",          value: "240HP",          title: "Maximum Power",          description: "Raw speed at your command.",          icon: Zap,
-        },
-        {
-          id: "m2",          value: "15.5k",          title: "RPM Peak",          description: "Engine revolutions per minute.",          icon: Gauge,
-        },
-        {
-          id: "m3",          value: "299km/h",          title: "Top Speed",          description: "Aerodynamically perfected limits.",          icon: Rocket,
-        },
+        { id: "m1", value: "240HP", title: "Maximum Power", icon: Zap },
+        { id: "m2", value: "15.5k", title: "RPM Peak", icon: Gauge },
+        { id: "m3", value: "299km/h", title: "Top Speed", icon: Rocket },
       ]}
       title="RACING STATS"
       description="Numbers that define dominance on track."
@@ -104,30 +87,16 @@ export default function LandingPage() {
   </div>
 
   <div id="showroom" data-section="showroom">
-      <ProductCardTwo
-      animationType="slide-up"
+      <ProductCardFour
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",          brand: "Panigale",          name: "V4 R",          price: "$45,000",          rating: 5,
-          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-cool-motorcycle_23-2150849573.jpg"},
-        {
-          id: "p2",          brand: "Streetfighter",          name: "V4 S",          price: "$28,000",          rating: 5,
-          reviewCount: "89",          imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-beautiful-traveling-couple_1296-426.jpg"},
-        {
-          id: "p3",          brand: "Monster",          name: "Naked",          price: "$15,000",          rating: 4,
-          reviewCount: "205",          imageSrc: "http://img.b2bpic.net/free-photo/macro-robotic-insect_23-2150916122.jpg"},
-        {
-          id: "p4",          brand: "Multistrada",          name: "V4 Pikes Peak",          price: "$32,000",          rating: 5,
-          reviewCount: "150",          imageSrc: "http://img.b2bpic.net/free-photo/man-sport-equipment-riding-motorcross-bike-mountains_93675-134872.jpg"},
-        {
-          id: "p5",          brand: "Diavel",          name: "V4",          price: "$26,000",          rating: 5,
-          reviewCount: "112",          imageSrc: "http://img.b2bpic.net/free-photo/view-cool-motorcycle_23-2150704653.jpg"},
-        {
-          id: "p6",          brand: "Limited",          name: "GP24",          price: "Request",          rating: 5,
-          reviewCount: "10",          imageSrc: "http://img.b2bpic.net/free-photo/confidence-sports-determination-concept_343059-610.jpg"},
+        { id: "p1", name: "V4 R", price: "$45,000", variant: "Racing", imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-with-cool-motorcycle_23-2150849573.jpg" },
+        { id: "p2", name: "V4 S", price: "$28,000", variant: "Sport", imageSrc: "http://img.b2bpic.net/free-photo/outdoor-portrait-beautiful-traveling-couple_1296-426.jpg" },
+        { id: "p3", name: "Naked", price: "$15,000", variant: "City", imageSrc: "http://img.b2bpic.net/free-photo/macro-robotic-insect_23-2150916122.jpg" },
+        { id: "p4", name: "V4 Pikes Peak", price: "$32,000", variant: "Touring", imageSrc: "http://img.b2bpic.net/free-photo/man-sport-equipment-riding-motorcross-bike-mountains_93675-134872.jpg" },
       ]}
       title="MODELS"
       description="Choose your racing machine."
@@ -135,18 +104,14 @@ export default function LandingPage() {
   </div>
 
   <div id="chassis" data-section="chassis">
-      <FeatureCardOne
-      animationType="depth-3d"
+      <FeatureCardTwentyNine
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="two-items-per-row"
+      gridVariant="two-columns-alternating-heights"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Trellis Frame",          description: "Lightweight steel lattice architecture.",          imageSrc: "http://img.b2bpic.net/free-vector/green-geometric-frame-design_1040-743.jpg"},
-        {
-          title: "Engine Mounts",          description: "Optimized structural rigidity for handling.",          imageSrc: "http://img.b2bpic.net/free-vector/geometric-frame-design_1040-776.jpg"},
-        {
-          title: "Swingarm Pivot",          description: "Perfectly balanced dynamic response.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-background-xray-cyclist_183364-119258.jpg"},
+        { title: "Trellis Frame", description: "Lightweight steel lattice architecture.", imageSrc: "http://img.b2bpic.net/free-vector/green-geometric-frame-design_1040-743.jpg", titleImageSrc: "", buttonText: "Details" },
+        { title: "Engine Mounts", description: "Optimized structural rigidity.", imageSrc: "http://img.b2bpic.net/free-vector/geometric-frame-design_1040-776.jpg", titleImageSrc: "", buttonText: "Details" },
       ]}
       title="CHASSIS X-RAY"
       description="The skeleton of performance."
@@ -163,20 +128,14 @@ export default function LandingPage() {
   </div>
 
   <div id="configurator" data-section="configurator">
-      <FeatureCardOne
-      animationType="slide-up"
+      <FeatureCardTwentyNine
+      animationType="blur-reveal"
       textboxLayout="split"
-      gridVariant="one-large-right-three-stacked-left"
+      gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={true}
       features={[
-        {
-          title: "Color Customization",          description: "Choose from iconic liveries.",          imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781626.jpg"},
-        {
-          title: "Wheel Styles",          description: "Carbon vs. Aluminum forged.",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-with-old-motorcycle_23-2148703210.jpg"},
-        {
-          title: "Exhaust System",          description: "Akrapovic track-ready performance.",          imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-presentation-indoors_23-2150849305.jpg"},
-        {
-          title: "Test Ride",          description: "Book your experience today.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-afro-american-man-taking-off-helmet_171337-10264.jpg"},
+        { title: "Color Customization", description: "Choose from iconic liveries.", imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781626.jpg", titleImageSrc: "", buttonText: "Design" },
+        { title: "Wheel Styles", description: "Carbon vs. Aluminum forged.", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-with-old-motorcycle_23-2148703210.jpg", titleImageSrc: "", buttonText: "Design" },
       ]}
       title="CONFIGURATOR"
       description="Design your personal legend."
@@ -184,18 +143,14 @@ export default function LandingPage() {
   </div>
 
   <div id="sound" data-section="sound">
-      <FeatureCardOne
-      animationType="scale-rotate"
+      <FeatureCardTwentyNine
+      animationType="blur-reveal"
       textboxLayout="split"
       gridVariant="asymmetric-60-wide-40-narrow"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Engine Note",          description: "A symphony of combustion.",          imageSrc: "http://img.b2bpic.net/free-photo/man-cafe-racer-style-motorbike_23-2148189641.jpg"},
-        {
-          title: "Vibration Frequency",          description: "Perfect firing order harmonics.",          imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585562.jpg"},
-        {
-          title: "Exhaust Tone",          description: "Aggressive, deep, and raw.",          imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585569.jpg"},
+        { title: "Engine Note", description: "A symphony of combustion.", imageSrc: "http://img.b2bpic.net/free-photo/man-cafe-racer-style-motorbike_23-2148189641.jpg", titleImageSrc: "", buttonText: "Listen" },
+        { title: "Exhaust Tone", description: "Aggressive, deep, and raw.", imageSrc: "http://img.b2bpic.net/free-photo/model-wearing-motorcycle-helmet-portrait_23-2151585569.jpg", titleImageSrc: "", buttonText: "Listen" },
       ]}
       title="15,500 RPM"
       description="Nothing sounds like this."
@@ -205,8 +160,7 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCenter
       useInvertedBackground={true}
-      background={{
-        variant: "animated-grid"}}
+      background={{ variant: "animated-grid" }}
       tag="GET IN TOUCH"
       title="JOIN THE ELITE"
       description="Receive updates on new models and exclusive track days."
@@ -215,37 +169,16 @@ export default function LandingPage() {
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBase
       logoText="DUCATI"
       columns={[
-        {
-          title: "MODELS",          items: [
-            {
-              label: "Panigale",              href: "#"},
-            {
-              label: "Streetfighter",              href: "#"},
-          ],
-        },
-        {
-          title: "COMPANY",          items: [
-            {
-              label: "Racing",              href: "#"},
-            {
-              label: "History",              href: "#"},
-          ],
-        },
-        {
-          title: "SUPPORT",          items: [
-            {
-              label: "Configuration",              href: "#"},
-            {
-              label: "Dealers",              href: "#"},
-          ],
-        },
+        { title: "MODELS", items: [{ label: "Panigale", href: "#" }, { label: "Streetfighter", href: "#" }] },
+        { title: "COMPANY", items: [{ label: "Racing", href: "#" }, { label: "History", href: "#" }] },
+        { title: "SUPPORT", items: [{ label: "Configuration", href: "#" }, { label: "Dealers", href: "#" }] },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}
\ No newline at end of file
-- 
2.49.1