Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import { Shield, Zap, CheckCircle, Star, Users } from 'lucide-react';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
+import FooterBase from '@/components/sections/footer/FooterBase';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 
 export default function LandingPage() {
   return (
@@ -42,7 +41,7 @@ export default function LandingPage() {
   </div>
 
   <div id="home" data-section="home">
-      <HeroSplit
+      <HeroSplitDoubleCarousel
       background={{ variant: "gradient-bars" }}
       title="Upgrade Your Journey"
       description="Premium car accessories tailored for performance, comfort, and style. Transform your driving experience today."
@@ -50,152 +49,122 @@ export default function LandingPage() {
         { text: "Shop Now", href: "#products" },
         { text: "Learn More", href: "#about" },
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/young-man-is-man-wheel-arboreal-car_146671-18656.jpg"
+      leftCarouselItems={[
-      imageAlt="Luxury car interior upgrade"
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-man-is-man-wheel-arboreal-car_146671-18656.jpg" },
-      mediaAnimation="slide-up"
+        { imageSrc: "http://img.b2bpic.net/free-photo/car-elements-details-inside_1303-21769.jpg" }
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/car-elements-details-inside_1303-21769.jpg", alt: "Satisfied customer 1" },
-        { src: "http://img.b2bpic.net/free-photo/wooden-interior-luxury-car_114579-4011.jpg", alt: "Satisfied customer 2" },
-        { src: "http://img.b2bpic.net/free-photo/close-up-carbon-fibre-headlight-sports-car_181624-23606.jpg", alt: "Satisfied customer 3" },
-        { src: "http://img.b2bpic.net/free-photo/close-up-view-adult-person-switches-gear-luxury-new-car_146671-14422.jpg", alt: "Satisfied customer 4" },
-        { src: "http://img.b2bpic.net/free-photo/road-safety-close-up-view-interior-brand-new-modern-luxury-automobile_146671-16595.jpg", alt: "Satisfied customer 5" },
       ]}
-      avatarText="Trusted by 5000+ drivers"
+      rightCarouselItems={[
-      marqueeItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/wooden-interior-luxury-car_114579-4011.jpg" },
-        { type: "text", text: "Premium Quality" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-carbon-fibre-headlight-sports-car_181624-23606.jpg" }
-        { type: "text", text: "Fast Shipping" },
-        { type: "text", text: "Genuine Parts" },
-        { type: "text", text: "Expert Support" },
-        { type: "text", text: "Custom Fit" },
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardTwentySix
+      <FeatureCardTwentyFour
-      textboxLayout="default"
+      animationType="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
-      features={[
-        { title: "Premium Quality", description: "High-grade materials built for longevity.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-metal-surface_23-2148796570.jpg", buttonIcon: Shield },
-        { title: "Modern Styling", description: "Enhance your car's look instantly.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-black-car-lights_23-2148258066.jpg", buttonIcon: Zap },
-        { title: "Perfect Fit", description: "Accessories designed for your exact model.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194135.jpg", buttonIcon: CheckCircle },
-        { title: "Convenience First", description: "Products that make driving easier.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-driving-having-mobile-phone_23-2148763852.jpg", buttonIcon: Star },
-        { title: "Expert Guidance", description: "Technical support for all installations.", imageSrc: "http://img.b2bpic.net/free-photo/black-texture-lines_181624-13114.jpg", buttonIcon: Users },
-      ]}
       title="Why Muhallab?"
       description="We provide only the finest curated automotive enhancements."
+      features={[
+        { id: "f1", title: "Premium Quality", author: "Muhallab", description: "High-grade materials built for longevity.", tags: ["Quality", "Durable"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-metal-surface_23-2148796570.jpg" },
+        { id: "f2", title: "Modern Styling", author: "Muhallab", description: "Enhance your car's look instantly.", tags: ["Style", "Modern"], imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-black-car-lights_23-2148258066.jpg" },
+        { id: "f3", title: "Perfect Fit", author: "Muhallab", description: "Accessories designed for your exact model.", tags: ["Fit", "Precision"], imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-cleaning-car-exterior_23-2148194135.jpg" },
+        { id: "f4", title: "Expert Guidance", author: "Muhallab", description: "Technical support for all installations.", tags: ["Support", "Expert"], imageSrc: "http://img.b2bpic.net/free-photo/black-texture-lines_181624-13114.jpg" },
+      ]}
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardOne
+      <ProductCardThree
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
+      title="Latest Accessories"
+      description="Browse our curated selection of top-tier automotive products."
       products={[
         { id: "p1", name: "LED Headlights", price: "$129", imageSrc: "http://img.b2bpic.net/free-photo/led-headlight-white-car_23-2147962979.jpg" },
         { id: "p2", name: "Leather Steering Cover", price: "$45", imageSrc: "http://img.b2bpic.net/free-photo/country-style-concept-bearded-male-sunglasses-dressed-brown-leather-jacket-driving-retro-car_613910-20460.jpg" },
         { id: "p3", name: "Seat Organizer", price: "$35", imageSrc: "http://img.b2bpic.net/free-photo/modern-automobile-mechanic-composition_23-2147881877.jpg" },
         { id: "p4", name: "HD Dash Camera", price: "$180", imageSrc: "http://img.b2bpic.net/free-photo/mechanic-using-diagnostic-tool_1170-1365.jpg" },
-        { id: "p5", name: "Trunk Cargo Net", price: "$25", imageSrc: "http://img.b2bpic.net/free-photo/view-perforated-sheet-material-with-tiny-holes_23-2150185450.jpg" },
-        { id: "p6", name: "Custom Decals", price: "$20", imageSrc: "http://img.b2bpic.net/free-photo/detail-drive-antique-shiny-headlight_1203-6156.jpg" },
       ]}
-      title="Latest Accessories"
-      description="Browse our curated selection of top-tier automotive products."
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <InlineImageSplitTextAbout
       useInvertedBackground={false}
-      title="About Muhallab"
+      heading={[{ type: "text", content: "About Muhallab" }]}
-      description="Driven by a passion for quality and design, Muhallab Car Accessories is dedicated to elevating every vehicle through expert craftsmanship and premium gear. We serve enthusiasts who demand excellence in every detail of their drive."
+      buttons={[{ text: "Read More" }]}
-      imageSrc="http://img.b2bpic.net/free-photo/vehicle-covered-with-white-sheet-yellow-tape-car-service-garage_181624-3084.jpg"
     />
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+      <MetricCardSeven
       animationType="slide-up"
-      textboxLayout="default"
+      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
-      metrics={[
-        { id: "m1", value: "5000+", description: "Happy Drivers" },
-        { id: "m2", value: "12+", description: "Years Experience" },
-        { id: "m3", value: "100%", description: "Genuine Parts" },
-      ]}
       title="Our Impact"
       description="Proven results for car enthusiasts."
+      metrics={[
+        { id: "m1", value: "5000+", title: "Drivers", items: ["Happy Customers"] },
+        { id: "m2", value: "12+", title: "Experience", items: ["Years in Business"] },
+        { id: "m3", value: "100%", title: "Quality", items: ["Genuine Parts"] },
+      ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFifteen
+      <TestimonialCardSixteen
       useInvertedBackground={false}
-      testimonial="The best selection of car accessories I've found. Quality is unmatched and the fitment was perfect for my SUV."
+      animationType="slide-up"
-      rating={5}
+      textboxLayout="split"
-      author="Ahmed Al-Farsi"
+      title="What Drivers Say"
-      avatars={[
+      description="Real feedback from our satisfied customers."
-        { src: "http://img.b2bpic.net/free-photo/benchman-owner-car-making-deal_114579-2805.jpg", alt: "Sarah" },
+      kpiItems={[
-        { src: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg", alt: "Michael" },
+        { value: "4.9", label: "Rating" },
-        { src: "http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2409.jpg", alt: "Emily" },
+        { value: "5000+", label: "Clients" },
-        { src: "http://img.b2bpic.net/free-photo/happy-male-with-black-hair-beard-tattoes-his-hand-dressed-white-shirt-blue-jeans-shorts-driving-car_613910-7581.jpg", alt: "David" },
+        { value: "100%", label: "Satisfaction" }
-        { src: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-31957.jpg", alt: "Anna" },
+      ]}
+      testimonials={[
+        { id: "t1", name: "Ahmed Al-Farsi", role: "Car Enthusiast", company: "Muhallab", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/benchman-owner-car-making-deal_114579-2805.jpg" },
       ]}
-      ratingAnimation="slide-up"
-      avatarsAnimation="slide-up"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitMedia
+      <FaqSplitText
-      textboxLayout="default"
       useInvertedBackground={false}
-      faqs={[
-        { id: "q1", title: "Do you offer installation?", content: "Yes, we provide installation services for all electronic accessories." },
-        { id: "q2", title: "Are your parts original?", content: "We only stock genuine and high-quality aftermarket components." },
-        { id: "q3", title: "How long is shipping?", content: "We offer same-day shipping within the city and 2-3 days nationally." },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/serviceman-car-service-using-holographic-augmented-reality-show-customer-defective-vehicle-piston-hardworking-garage-employee-using-innovative-ar-tech-project-automobile-parts-woman_482257-74243.jpg"
-      title="Common Questions"
-      description="We are here to answer your doubts about our products."
       faqsAnimation="slide-up"
+      sideTitle="Common Questions"
+      sideDescription="We are here to answer your doubts."
+      faqs={[
+        { id: "q1", title: "Do you offer installation?", content: "Yes, we provide professional installation services." },
+        { id: "q2", title: "Are your parts original?", content: "We only stock genuine, high-quality components." },
+      ]}
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplitForm
+      <ContactSplit
-      useInvertedBackground={false}
       title="Get in Touch"
-      description="Ready to upgrade your ride? Reach out to us today."
+      description="Ready to upgrade your ride?"
-      inputs={[
+      tag="Contact Us"
-        { name: "name", type: "text", placeholder: "Your Name", required: true },
-        { name: "email", type: "email", placeholder: "Email Address", required: true },
-        { name: "car", type: "text", placeholder: "Your Car Model", required: true },
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/cars-lifting-maintenance-garage-service-station_627829-3956.jpg"
+      useInvertedBackground={false}
+      mediaAnimation="slide-up"
+      background={{ variant: "gradient-bars" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterBase
-      imageSrc="http://img.b2bpic.net/free-photo/urban-transport-concept_23-2148996486.jpg"
       logoText="Muhallab Car Accessories"
       columns={[
-        {
+        { title: "Navigate", items: [{ label: "Home", href: "#home" }, { label: "Shop", href: "#products" }] },
-          title: "Navigate",          items: [
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
-            { label: "Home", href: "#home" },
-            { label: "Shop", href: "#products" },
-          ],
-        },
-        {
-          title: "Support",          items: [
-            { label: "FAQ", href: "#faq" },
-            { label: "Contact", href: "#contact" },
-          ],
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
+  --background: #f5f4ef;
-  --card: #f1f8ff;
+  --card: #dad6cd;
-  --foreground: #001122;
+  --foreground: #2a2928;
-  --primary-cta: #15479c;
+  --primary-cta: #2a2928;
   --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ecebea;
   --secondary-cta-text: #001122;
-  --accent: #a8cce8;
+  --accent: #ffffff;
-  --background-accent: #7ba3cf;
+  --background-accent: #c6b180;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);