Update src/app/globals.css

src/app/globals.css

@@ -4,13 +4,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  --background: #f5faff;;
-  --card: #f1f8ff;;
-  --foreground: #001122;;
-  --primary-cta: #15479c;;
-  --secondary-cta: #ffffff;;
-  --accent: #a8cce8;;
-  --background-accent: #7ba3cf;;
+  --background: #f8faff;
+  --card: #f0f4ff;
+  --foreground: #1a1a2e;
+  --primary-cta: #3b82f6;
+  --secondary-cta: #ffffff;
+  --accent: #d5c6ff;
+  --background-accent: #b394fa;
 
   /* 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-merriweather), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -508,5 +508,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-merriweather), sans-serif;
+  font-family: var(--font-inter-tight), sans-serif;
 }

src/app/page.tsx

@@ -1,17 +1,16 @@
 "use client";
 
-import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import HeroSplitAvatars from '@/components/sections/hero/HeroSplitAvatars';
-import TagAbout from '@/components/sections/about/TagAbout';
-import FeatureCardTwenty from '@/components/sections/feature/FeatureCardTwenty';
-import ProductCardSeven from '@/components/sections/product/ProductCardSeven';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
-import ContactInline from '@/components/sections/contact/ContactInline';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Crown, Droplets, Gauge, Sparkles, Star, TrendingUp, Zap } from "lucide-react";
+import NavbarStyleMinimal from "@/components/navbar/NavbarStyleMinimal";
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
+import MediaSplitTabsAbout from '@/components/sections/about/MediaSplitTabsAbout';
+import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import MetricCardTen from '@/components/sections/metrics/MetricCardTen';
+import TestimonialCardNine from '@/components/sections/testimonial/TestimonialCardNine';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterBaseSocial from '@/components/sections/footer/FooterBaseSocial';
+import { Youtube, Twitter, Linkedin, Instagram } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,96 +27,133 @@ export default function LandingPage() {
       headingFontWeight="extrabold"
     >
       <div id="nav" data-section="nav">
-        <NavbarLayoutFloatingInline
-          brandName="AUDI"
-          navItems={[
-            { name: "Models", id: "product" },
-            { name: "Features", id: "feature" },
-            { name: "About", id: "about" },
-            { name: "Contact", id: "contact" }
-          ]}
+        <NavbarStyleMinimal
+          brandName="AUDI A10"
           button={{
-            text: "Test Drive",
+            text: "Reserve Now",
             href: "contact"
           }}
         />
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplitAvatars
+        <HeroBillboard
           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 Innovation"
-          tagIcon={Zap}
+          tag="Premium Luxury Sedan"
           imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507382209-vmocpnfc.jpg"
           imageAlt="AUDI A10 luxury sedan"
-          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"
+          frameStyle="card"
           buttons={[
-            { text: "Explore Now", href: "product" },
-            { text: "Learn More", href: "feature" }
+            {
+              text: "Explore Features",
+              href: "feature"
+            },
+            {
+              text: "View Models",
+              href: "product"
+            }
           ]}
         />
       </div>
 
       <div id="about" data-section="about">
-        <TagAbout
-          tag="Why A10"
-          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."
+        <MediaSplitTabsAbout
+          title="Why Choose AUDI A10"
+          description="The AUDI A10 represents decades of engineering excellence combined with cutting-edge technology."
+          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">
-        <FeatureCardTwenty
-          title="Premium Features"
+        <FeatureCardOne
+          title=""
           description="Engineered to perfection. The A10 combines advanced technology with timeless elegance, delivering innovation at every turn."
-          tag="Innovation"
-          tagIcon={Sparkles}
-          images={[
-            { id: 1, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg", imageAlt: "AUDI A10 side profile" },
-            { id: 2, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507384431-4qc5pz5y.jpg", imageAlt: "AUDI A10 luxury interior" },
-            { 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" }
+          features={[
+            {
+              title: "Aerodynamic Design",
+              description: "Sculpted with precision for optimal performance and visual impact.",
+              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507383197-f10wtv51.jpg",
+              imageAlt: "AUDI A10 side profile"
+            },
+            {
+              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">
-        <ProductCardSeven
+        <ProductCardTwo
           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: "From $55,000",
+              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"
             },
             {
               id: "2",
+              brand: "AUDI",
               name: "A10 Sport",
-              price: "From $65,000",
+              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"
             },
             {
               id: "3",
+              brand: "AUDI",
               name: "A10 Premium",
-              price: "From $75,000",
+              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"
             }
@@ -126,49 +162,47 @@ export default function LandingPage() {
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
+          cardRatingClassName="text-red-500"
         />
       </div>
 
       <div id="metric" data-section="metric">
-        <MetricCardOne
+        <MetricCardTen
           title="A10 Performance Metrics"
           description="Industry-leading specifications that set new standards"
-          tag="Performance"
-          tagIcon={Zap}
           metrics={[
             {
               id: "1",
-              value: "382",
-              title: "HP",
-              description: "Peak horsepower output",
-              icon: Zap
+              title: "Peak Horsepower",
+              subtitle: "Maximum performance output",
+              category: "Performance",
+              value: "382 HP"
             },
             {
               id: "2",
-              value: "3.8",
-              title: "seconds",
-              description: "0-60 acceleration",
-              icon: Gauge
+              title: "0-60 Acceleration",
+              subtitle: "Lightning-fast performance",
+              category: "Speed",
+              value: "3.8s"
             },
             {
               id: "3",
-              value: "186",
-              title: "mph",
-              description: "Top speed",
-              icon: TrendingUp
+              title: "Top Speed",
+              subtitle: "Maximum velocity capability",
+              category: "Capability",
+              value: "186 mph"
             },
             {
               id: "4",
-              value: "32",
-              title: "mpg",
-              description: "Combined fuel economy",
-              icon: Droplets
+              title: "Fuel Economy",
+              subtitle: "Combined efficiency rating",
+              category: "Efficiency",
+              value: "32 mpg"
             }
           ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
+          animationType="slide-up"
         />
       </div>
 
@@ -176,8 +210,6 @@ 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}
           testimonials={[
             {
               id: "1",
@@ -202,30 +234,6 @@ 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"
@@ -234,11 +242,35 @@ export default function LandingPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactInline
-          text="Ready to experience the A10?"
-          inputPlaceholder="Enter your email"
-          buttonText="Get Updates"
+        <ContactSplitForm
+          title="Ready to Experience the A10?"
+          description="Get in touch with us to schedule a test drive or learn more about the AUDI A10. We'd love to hear from you."
+          inputs={[
+            {
+              name: "name",
+              type: "text",
+              placeholder: "Your Name",
+              required: true
+            },
+            {
+              name: "email",
+              type: "email",
+              placeholder: "Your Email",
+              required: true
+            }
+          ]}
+          textarea={{
+            name: "message",
+            placeholder: "Tell us about your interest in the A10...",
+            rows: 5,
+            required: true
+          }}
           useInvertedBackground="noInvert"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766507382209-vmocpnfc.jpg"
+          imageAlt="AUDI A10"
+          mediaPosition="right"
+          buttonText="Send Message"
+          onSubmit={(data) => console.log("Form submitted:", data)}
         />
       </div>
 
@@ -246,60 +278,55 @@ 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",
+              name: "A10 Standard Edition",
               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",
-              onProductClick: () => console.log("A10 Standard clicked")
+              imageAlt: "AUDI A10 Standard"
             },
             {
               id: "2",
               brand: "AUDI",
-              name: "A10 Sport",
+              name: "A10 Sport Edition",
               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",
-              onProductClick: () => console.log("A10 Sport clicked")
+              imageAlt: "AUDI A10 Sport"
             },
             {
               id: "3",
               brand: "AUDI",
-              name: "A10 Premium",
+              name: "A10 Premium Edition",
               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",
-              onProductClick: () => console.log("A10 Premium clicked")
+              imageAlt: "AUDI A10 Premium"
             }
           ]}
           gridVariant="uniform-all-items-equal"
           animationType="slide-up"
           textboxLayout="default"
           useInvertedBackground="noInvert"
+          cardRatingClassName="text-red-500"
         />
       </div>
 
       <div id="footer" data-section="footer">
-        <FooterBaseCard
-          logoText="AUDI"
+        <FooterBaseSocial
           columns={[
             {
               title: "Models",
               items: [
-                { label: "A10 Standard", href: "#" },
-                { label: "A10 Sport", href: "#" },
-                { label: "A10 Premium", href: "#" }
+                { label: "A10 Standard", href: "product" },
+                { label: "A10 Sport", href: "product" },
+                { label: "A10 Premium", href: "product" }
               ]
             },
             {
@@ -313,20 +340,20 @@ export default function LandingPage() {
             {
               title: "Support",
               items: [
-                { label: "Contact Us", href: "#" },
+                { label: "Contact Us", href: "contact" },
                 { 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>