Merge version_3 into main

Merge version_3 into main

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #0a0a0a;
+  --background: #f5faff;;
-  --card: #1a1a1a;
+  --card: #f1f8ff;;
-  --foreground: #fffffae6;
+  --foreground: #001122;;
-  --primary-cta: #facc15;
+  --primary-cta: #15479c;;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #ffffff;;
-  --accent: #737373;
+  --accent: #a8cce8;;
-  --background-accent: #737373;
+  --background-accent: #7ba3cf;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
@@ -495,7 +495,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-merriweather), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-merriweather), sans-serif;
 }

src/app/layout.tsx

@@ -1276,4 +1276,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
+}

src/app/page.tsx

@@ -1,16 +1,17 @@
 "use client";
 
-import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import NavbarStyleMinimal from "@/components/navbar/NavbarStyleMinimal";
+import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
-import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import TagAbout from '@/components/sections/about/TagAbout';
-import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
-import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
 import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactInline from '@/components/sections/contact/ContactInline';
-import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import { Youtube, Twitter, Linkedin, Instagram } from "lucide-react";
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { Crown, Droplets, Gauge, Sparkles, Star, TrendingUp, Zap } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -27,133 +28,96 @@ export default function LandingPage() {
       headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarStyleMinimal
+        <NavbarLayoutFloatingInline
-          brandName="AUDI A10"
+          brandName="AUDI"
+          navItems={[
+            { name: "Models", id: "product" },
+            { name: "Features", id: "feature" },
+            { name: "About", id: "about" },
+            { name: "Contact", id: "contact" }
+          ]}
           button={{
-            text: "Reserve Now",
+            text: "Test Drive",
             href: "contact"
           }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroBillboard
+        <HeroSplitAvatars
           title="Introducing AUDI A10"
           description="Experience the future of automotive excellence. The all-new A10 redefines performance, luxury, and innovation for the modern driver."
-          tag="Premium Luxury Sedan"
+          tag="Premium Innovation"
+          tagIcon={Zap}
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507382209-vmocpnfc.jpg"
           imageAlt="AUDI A10 luxury sedan"
-          frameStyle="card"
+          imagePosition="right"
+          avatars={[
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766504480835-8xmeyz3k.jpg", alt: "Customer 1" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414402772-ruzjnlgd.jpg", alt: "Customer 2" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507389329-xpn9l1hz.jpg", alt: "Customer 3" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507390312-7uh03hb3.jpg", alt: "Customer 4" },
+            { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg", alt: "Customer 5" }
+          ]}
+          avatarText="Join thousands of satisfied A10 drivers"
           buttons={[
-            {
+            { text: "Explore Now", href: "product" },
-              text: "Explore Features",
+            { text: "Learn More", href: "feature" }
-              href: "feature"
-            },
-            {
-              text: "View Models",
-              href: "product"
-            }
           ]}
         />
       </div>
 
       <div id="about" data-section="about">
-        <MediaSplitTabsAbout
+        <TagAbout
-          title="Why Choose AUDI A10"
+          tag="Why A10"
-          description="The AUDI A10 represents decades of engineering excellence combined with cutting-edge technology."
+          description="The AUDI A10 represents decades of engineering excellence combined with cutting-edge technology. Crafted for those who demand the finest in performance, comfort, and design. Every detail has been meticulously refined to deliver an unparalleled driving experience that transcends expectations."
-          tabs={[
-            {
-              id: "engineering",
-              label: "Engineering",
-              description: "Crafted for those who demand the finest in performance. Every detail has been meticulously refined to deliver an unparalleled driving experience that transcends expectations."
-            },
-            {
-              id: "comfort",
-              label: "Comfort",
-              description: "Luxury redefined with premium materials and innovative design. Experience ultimate comfort on every journey with ergonomic seating and climate control."
-            },
-            {
-              id: "technology",
-              label: "Technology",
-              description: "Advanced systems that adapt to you. Intelligent features work seamlessly to enhance your driving experience with cutting-edge innovation."
-            }
-          ]}
-          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg"
-          imageAlt="AUDI A10 side profile"
-          imagePosition="right"
           useInvertedBackground="noInvert"
         />
       </div>
 
       <div id="feature" data-section="feature">
-        <FeatureCardOne
+        <FeatureCardTwenty
           title="Premium Features"
           description="Engineered to perfection. The A10 combines advanced technology with timeless elegance, delivering innovation at every turn."
-          features={[
+          tag="Innovation"
-            {
+          tagIcon={Sparkles}
-              title: "Aerodynamic Design",
+          images={[
-              description: "Sculpted with precision for optimal performance and visual impact.",
+            { id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg", imageAlt: "AUDI A10 side profile" },
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
+            { id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg", imageAlt: "AUDI A10 luxury interior" },
-              imageAlt: "AUDI A10 side profile"
+            { id: 3, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg", imageAlt: "AUDI A10 headlight design" },
-            },
+            { id: 4, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507386084-fimpt5k0.jpg", imageAlt: "AUDI A10 wheel design" }
-            {
-              title: "Luxury Interior",
-              description: "Premium materials and meticulous craftsmanship create an exceptional cabin experience.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
-              imageAlt: "AUDI A10 luxury interior"
-            },
-            {
-              title: "LED Technology",
-              description: "Cutting-edge headlight and taillight systems for enhanced visibility and style.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
-              imageAlt: "AUDI A10 headlight design"
-            },
-            {
-              title: "Performance Wheels",
-              description: "Engineered for grip and elegance with premium tire technology.",
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507386084-fimpt5k0.jpg",
-              imageAlt: "AUDI A10 wheel design"
-            }
           ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
+          buttons={[{ text: "View Specifications" }]}
         />
       </div>
 
       <div id="product" data-section="product">
-        <ProductCardTwo
+        <ProductCardSeven
           title="A10 Models"
           description="Choose your perfect A10. Available in multiple trim levels to match your lifestyle and preferences."
+          tag="Premium Selection"
+          tagIcon={Crown}
           products={[
             {
               id: "1",
-              brand: "AUDI",
               name: "A10 Standard",
-              price: "$55,000",
+              price: "From $55,000",
-              rating: 5,
-              reviewCount: "2.3k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
               imageAlt: "AUDI A10 Standard"
             },
             {
               id: "2",
-              brand: "AUDI",
               name: "A10 Sport",
-              price: "$65,000",
+              price: "From $65,000",
-              rating: 5,
-              reviewCount: "1.8k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
               imageAlt: "AUDI A10 Sport"
             },
             {
               id: "3",
-              brand: "AUDI",
               name: "A10 Premium",
-              price: "$75,000",
+              price: "From $75,000",
-              rating: 5,
-              reviewCount: "1.5k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
               imageAlt: "AUDI A10 Premium"
             }
@@ -166,42 +130,45 @@ export default function LandingPage() {
       </div>
 
       <div id="metric" data-section="metric">
-        <MetricCardTen
+        <MetricCardOne
           title="A10 Performance Metrics"
           description="Industry-leading specifications that set new standards"
+          tag="Performance"
+          tagIcon={Zap}
           metrics={[
             {
               id: "1",
-              title: "Peak Horsepower",
+              value: "382",
-              subtitle: "Maximum performance output",
+              title: "HP",
-              category: "Performance",
+              description: "Peak horsepower output",
-              value: "382 HP"
+              icon: Zap
             },
             {
               id: "2",
-              title: "0-60 Acceleration",
+              value: "3.8",
-              subtitle: "Lightning-fast performance",
+              title: "seconds",
-              category: "Speed",
+              description: "0-60 acceleration",
-              value: "3.8s"
+              icon: Gauge
             },
             {
               id: "3",
-              title: "Top Speed",
+              value: "186",
-              subtitle: "Maximum velocity capability",
+              title: "mph",
-              category: "Capability",
+              description: "Top speed",
-              value: "186 mph"
+              icon: TrendingUp
             },
             {
               id: "4",
-              title: "Fuel Economy",
+              value: "32",
-              subtitle: "Combined efficiency rating",
+              title: "mpg",
-              category: "Efficiency",
+              description: "Combined fuel economy",
-              value: "32 mpg"
+              icon: Droplets
             }
           ]}
+          gridVariant="uniform-all-items-equal"
+          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
-          animationType="slide-up"
         />
       </div>
 
@@ -209,6 +176,9 @@ export default function LandingPage() {
         <TestimonialCardNine
           title="Trusted by Drivers Worldwide"
           description="Hear what AUDI A10 owners have to say about their driving experience"
+          tag="Customer Testimonials"
+          tagIcon={Star}
+          starColor="#ff0000"
           testimonials={[
             {
               id: "1",
@@ -233,6 +203,30 @@ export default function LandingPage() {
               role: "Automotive Enthusiast",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507389329-xpn9l1hz.jpg",
               imageAlt: "James Wilson"
+            },
+            {
+              id: "4",
+              quote: "A10 owners are part of an exclusive club. The quality and innovation speak for themselves every time I drive.",
+              name: "Emma Davis",
+              role: "Professional Driver",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507390312-7uh03hb3.jpg",
+              imageAlt: "Emma Davis"
+            },
+            {
+              id: "5",
+              quote: "Choosing the A10 was the best decision. It delivered beyond expectations in performance and reliability.",
+              name: "Robert Martinez",
+              role: "Tech Executive",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766414401529-6db20epg.jpg",
+              imageAlt: "Robert Martinez"
+            },
+            {
+              id: "6",
+              quote: "The A10 is a masterpiece. Every drive feels like a celebration of German engineering excellence.",
+              name: "Lisa Thompson",
+              role: "Creative Director",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507391527-mvixgtbc.jpg",
+              imageAlt: "Lisa Thompson"
             }
           ]}
           textboxLayout="default"
@@ -241,12 +235,11 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactCenter
+        <ContactInline
-          tag="Newsletter"
+          text="Ready to experience the A10?"
-          title="Ready to Experience the A10?"
+          inputPlaceholder="Enter your email"
-          description="Stay updated with the latest AUDI A10 news, exclusive offers, and special events."
+          buttonText="Get Updates"
           useInvertedBackground="noInvert"
-          onSubmit={(email) => console.log("Email submitted:", email)}
         />
       </div>
 
@@ -254,36 +247,41 @@ export default function LandingPage() {
         <ProductCardTwo
           title="A10 Featured Selection"
           description="Explore our most popular A10 variants with customer reviews and ratings."
+          tag="Customer Favorites"
+          tagIcon={Star}
           products={[
             {
               id: "1",
               brand: "AUDI",
-              name: "A10 Standard Edition",
+              name: "A10 Standard",
               price: "$55,000",
               rating: 5,
               reviewCount: "2.3k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
-              imageAlt: "AUDI A10 Standard"
+              imageAlt: "AUDI A10 Standard",
+              onProductClick: () => console.log("A10 Standard clicked")
             },
             {
               id: "2",
               brand: "AUDI",
-              name: "A10 Sport Edition",
+              name: "A10 Sport",
               price: "$65,000",
               rating: 5,
               reviewCount: "1.8k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg",
-              imageAlt: "AUDI A10 Sport"
+              imageAlt: "AUDI A10 Sport",
+              onProductClick: () => console.log("A10 Sport clicked")
             },
             {
               id: "3",
               brand: "AUDI",
-              name: "A10 Premium Edition",
+              name: "A10 Premium",
               price: "$75,000",
               rating: 5,
               reviewCount: "1.5k",
               imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507385348-h08ys5lv.jpg",
-              imageAlt: "AUDI A10 Premium"
+              imageAlt: "AUDI A10 Premium",
+              onProductClick: () => console.log("A10 Premium clicked")
             }
           ]}
           gridVariant="uniform-all-items-equal"
@@ -294,14 +292,15 @@ export default function LandingPage() {
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBaseSocial
+        <FooterBaseCard
+          logoText="AUDI"
           columns={[
             {
               title: "Models",
               items: [
-                { label: "A10 Standard", href: "product" },
+                { label: "A10 Standard", href: "#" },
-                { label: "A10 Sport", href: "product" },
+                { label: "A10 Sport", href: "#" },
-                { label: "A10 Premium", href: "product" }
+                { label: "A10 Premium", href: "#" }
               ]
             },
             {
@@ -315,23 +314,23 @@ export default function LandingPage() {
             {
               title: "Support",
               items: [
-                { label: "Contact Us", href: "contact" },
+                { label: "Contact Us", href: "#" },
                 { label: "Service Centers", href: "#" },
                 { label: "Owner Portal", href: "#" }
               ]
+            },
+            {
+              title: "Legal",
+              items: [
+                { label: "Terms of Service", href: "#" },
+                { label: "Warranty", href: "#" },
+                { label: "Recalls", href: "#" }
+              ]
             }
           ]}
-          description="Experience the pinnacle of automotive luxury and performance with AUDI A10. Engineering excellence meets timeless design."
-          socialLinks={[
-            { icon: Youtube, href: "https://youtube.com", ariaLabel: "YouTube" },
-            { icon: Twitter, href: "https://twitter.com", ariaLabel: "Twitter" },
-            { icon: Linkedin, href: "https://linkedin.com", ariaLabel: "LinkedIn" },
-            { icon: Instagram, href: "https://instagram.com", ariaLabel: "Instagram" }
-          ]}
-          logoText="AUDI A10"
           copyrightText="© 2025 AUDI. All rights reserved."
         />
       </div>
     </ThemeProvider>
   );
-}
+}