Update src/app/page.tsx

Update src/app/styles/variables.css
2026-04-17 05:21:20 +00:00 · 2026-04-17 05:20:52 +00:00 · 2026-04-17 05:20:52 +00:00 · 2026-04-17 05:13:21 +00:00
2 changed files with 74 additions and 105 deletions
--- a/src/app/page.tsx
+++ b/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 ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FooterBase from '@/components/sections/footer/FooterBase';
+import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
+import ProductCardThree from '@/components/sections/product/ProductCardThree';
+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"
-      imageAlt="Luxury car interior upgrade"
-      mediaAnimation="slide-up"
-      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" },
+      leftCarouselItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/young-man-is-man-wheel-arboreal-car_146671-18656.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/car-elements-details-inside_1303-21769.jpg" }
      ]}
-      avatarText="Trusted by 5000+ drivers"
-      marqueeItems={[
-        { type: "text", text: "Premium Quality" },
-        { type: "text", text: "Fast Shipping" },
-        { type: "text", text: "Genuine Parts" },
-        { type: "text", text: "Expert Support" },
-        { type: "text", text: "Custom Fit" },
+      rightCarouselItems={[
+        { imageSrc: "http://img.b2bpic.net/free-photo/wooden-interior-luxury-car_114579-4011.jpg" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/close-up-carbon-fibre-headlight-sports-car_181624-23606.jpg" }
      ]}
    />
  </div>

  <div id="features" data-section="features">
-      <FeatureCardTwentySix
-      textboxLayout="default"
+      <FeatureCardTwentyFour
+      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"
-      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."
-      imageSrc="http://img.b2bpic.net/free-photo/vehicle-covered-with-white-sheet-yellow-tape-car-service-garage_181624-3084.jpg"
+      heading={[{ type: "text", content: "About Muhallab" }]}
+      buttons={[{ text: "Read More" }]}
    />
  </div>

  <div id="metrics" data-section="metrics">
-      <MetricCardTwo
+      <MetricCardSeven
      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="uniform-all-items-equal"
+      textboxLayout="split"
      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."
-      rating={5}
-      author="Ahmed Al-Farsi"
-      avatars={[
-        { src: "http://img.b2bpic.net/free-photo/benchman-owner-car-making-deal_114579-2805.jpg", alt: "Sarah" },
-        { src: "http://img.b2bpic.net/free-photo/client-vehicle-distributor-checkup_482257-115279.jpg", alt: "Michael" },
-        { src: "http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2409.jpg", alt: "Emily" },
-        { 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" },
-        { src: "http://img.b2bpic.net/free-photo/stylish-elegant-woman-car-salon_1157-31957.jpg", alt: "Anna" },
+      animationType="slide-up"
+      textboxLayout="split"
+      title="What Drivers Say"
+      description="Real feedback from our satisfied customers."
+      kpiItems={[
+        { value: "4.9", label: "Rating" },
+        { value: "5000+", label: "Clients" },
+        { value: "100%", label: "Satisfaction" }
+      ]}
+      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
-      textboxLayout="default"
+      <FaqSplitText
      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
-      useInvertedBackground={false}
+      <ContactSplit
      title="Get in Touch"
-      description="Ready to upgrade your ride? Reach out to us today."
-      inputs={[
-        { 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 },
-      ]}
+      description="Ready to upgrade your ride?"
+      tag="Contact Us"
      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
-      imageSrc="http://img.b2bpic.net/free-photo/urban-transport-concept_23-2148996486.jpg"
+      <FooterBase
      logoText="Muhallab Car Accessories"
      columns={[
-        {
-          title: "Navigate",          items: [
-            { label: "Home", href: "#home" },
-            { label: "Shop", href: "#products" },
-          ],
-        },
-        {
-          title: "Support",          items: [
-            { label: "FAQ", href: "#faq" },
-            { label: "Contact", href: "#contact" },
-          ],
-        },
+        { title: "Navigate", items: [{ label: "Home", href: "#home" }, { label: "Shop", href: "#products" }] },
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "#contact" }] },
      ]}
    />
  </div>
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #f5faff;
-  --card: #f1f8ff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
+  --background: #f5f4ef;
+  --card: #dad6cd;
+  --foreground: #2a2928;
+  --primary-cta: #2a2928;
  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #ecebea;
  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --accent: #ffffff;
+  --background-accent: #c6b180;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
Author	SHA1	Message	Date
bender	be2b6d2ca8	Update src/app/page.tsx	2026-04-17 05:21:20 +00:00
bender	245ef5fd44	Update src/app/styles/variables.css	2026-04-17 05:20:52 +00:00
bender	dbbc638f94	Update src/app/page.tsx	2026-04-17 05:20:52 +00:00
bender	e54263ca30	Merge version_1 into main Merge version_1 into main	2026-04-17 05:13:21 +00:00