Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -2,18 +2,23 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
-import { Smile, TrendingUp, Wrench } from "lucide-react";
+import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import { Smile, ShieldCheck, Zap } from "lucide-react";
 
 export default function LandingPage() {
+  const whatsappNumber = "09881196633";
+  const handleWhatsApp = () => {
+    window.open(`https://wa.me/${whatsappNumber}`, "_blank");
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="shift-hover"
@@ -31,113 +36,55 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Products", id: "products" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "Contact", id: "contact" }
       ]}
       brandName="B U Bhandari Honda"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "plain",
-      }}
-      title="Redefining Your Ride at B U Bhandari Honda"
+      <HeroLogoBillboard
+      logoText="B U Bhandari Honda"
       description="Experience the legacy of performance, precision, and passion in the heart of Viman Nagar. Discover the full range of Honda motorcycles and scooters today."
       buttons={[
-        {
-          text: "Book a Test Ride",
-          href: "#contact",
-        },
+        { text: "Book a Test Ride", href: "#contact" },
+        { text: "Chat on WhatsApp", onClick: handleWhatsApp }
       ]}
+      background={{ variant: "gradient-bars" }}
       imageSrc="http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849385.jpg?_wi=1"
-      imageAlt="B U Bhandari Honda Viman Nagar Showroom"
+      mediaAnimation="blur-reveal"
     />
   </div>
 
   <div id="about" data-section="about">
-      <AboutMetric
+      <MetricSplitMediaAbout
       useInvertedBackground={false}
       title="Why Choose Us?"
+      description="Decades of trust and commitment to excellence on every road."
       metrics={[
-        {
-          icon: Wrench,
-          label: "Expert Service",
-          value: "15+ Years",
-        },
-        {
-          icon: Smile,
-          label: "Happy Riders",
-          value: "50,000+",
-        },
-        {
-          icon: TrendingUp,
-          label: "Annual Sales",
-          value: "8,000+",
-        },
+        { title: "Years of Service", value: "15+" },
+        { title: "Happy Riders", value: "50k+" },
+        { title: "Annual Sales", value: "8k+" }
       ]}
+      imageSrc="http://img.b2bpic.net/free-photo/mechanical-wrenches_23-2148557972.jpg"
       metricsAnimation="slide-up"
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardOne
+      <ProductCardTwo
       animationType="slide-up"
       textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
+      gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "p1",
-          name: "Honda Activa",
-          price: "₹75,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781778.jpg?_wi=1",
-        },
-        {
-          id: "p2",
-          name: "Honda CB Shine",
-          price: "₹82,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-biker-girl-wearing-black-leather-jacket-leaning-her-superbike-outside-building-sunny-day_613910-5939.jpg",
-        },
-        {
-          id: "p3",
-          name: "Honda Hornet 2.0",
-          price: "₹1,38,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-afro-american-man-taking-off-helmet_171337-10264.jpg",
-        },
-        {
-          id: "p4",
-          name: "Honda SP 125",
-          price: "₹86,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-city-with-electric-scooter_23-2148162582.jpg",
-        },
-        {
-          id: "p5",
-          name: "Honda Unicorn",
-          price: "₹1,10,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/brutal-bearded-male-sunglasses-dressed-gray-t-shirt-black-pants-sitting-his-custom-made-retro-motorcycle-against-skyscraper_613910-18681.jpg",
-        },
-        {
-          id: "p6",
-          name: "Honda Dio",
-          price: "₹72,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-riding-electric-scooter_23-2148803151.jpg",
-        },
+        { id: "p1", brand: "Honda", name: "Activa", price: "₹75,000", rating: 4.8, reviewCount: "1.2k", imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781778.jpg?_wi=1" },
+        { id: "p2", brand: "Honda", name: "CB Shine", price: "₹82,000", rating: 4.7, reviewCount: "850", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-biker-girl-wearing-black-leather-jacket-leaning-her-superbike-outside-building-sunny-day_613910-5939.jpg" },
+        { id: "p3", brand: "Honda", name: "Hornet 2.0", price: "₹1,38,000", rating: 4.9, reviewCount: "900", imageSrc: "http://img.b2bpic.net/free-photo/portrait-afro-american-man-taking-off-helmet_171337-10264.jpg" },
+        { id: "p4", brand: "Honda", name: "SP 125", price: "₹86,000", rating: 4.6, reviewCount: "700", imageSrc: "http://img.b2bpic.net/free-photo/modern-woman-city-with-electric-scooter_23-2148162582.jpg" }
       ]}
       title="Our Iconic Fleet"
       description="From daily commuters to performance beasts, find your perfect Honda match."
@@ -145,89 +92,28 @@ export default function LandingPage() {
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSixteen
-      animationType="depth-3d"
-      textboxLayout="default"
+      <FeatureCardTwentyFive
+      animationType="blur-reveal"
+      textboxLayout="split"
       useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "High maintenance cost of rival brands",
-          "Less fuel efficiency in competitors",
-          "Outdated technology designs",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Industry-leading fuel efficiency",
-          "Reliable engineering and longevity",
-          "World-class service network",
-        ],
-      }}
+      features={[
+        { title: "Fuel Efficiency", description: "Industry-leading mileage to keep you going.", icon: Zap, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-front-side-with-white-background_187299-39798.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/fuel-gauge_1145-1234.jpg" }] },
+        { title: "Reliable Engineering", description: "Built to last with world-class quality.", icon: ShieldCheck, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2409.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/engine-parts_1203-4567.jpg" }] }
+      ]}
       title="Why Honda Rules the Road"
       description="Engineered for excellence, designed for comfort."
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardFive
-      textboxLayout="default"
+      <TestimonialCardSix
+      animationType="slide-up"
+      textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Rahul Verma",
-          date: "Oct 2023",
-          title: "Great Experience",
-          quote: "Excellent service and quick delivery of my Activa.",
-          tag: "Top Rated",
-          avatarSrc: "http://img.b2bpic.net/free-photo/biker-girl-leather-jacket-motorcycle_158595-445.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-indoors_23-2150849385.jpg?_wi=2",
-          imageAlt: "professional headshot man smiling",
-        },
-        {
-          id: "t2",
-          name: "Ananya Patil",
-          date: "Nov 2023",
-          title: "Smooth Ride",
-          quote: "The staff at Viman Nagar are extremely helpful.",
-          tag: "Expert Staff",
-          avatarSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-corporate-woman-young-intern-walks-street-office-holds-mobile-phone-texts_1258-194216.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/mechanical-wrenches_23-2148557972.jpg",
-          imageAlt: "professional headshot man smiling",
-        },
-        {
-          id: "t3",
-          name: "Vikram Seth",
-          date: "Jan 2024",
-          title: "Best Dealership",
-          quote: "My Hornet 2.0 is perfect! Thanks B U Bhandari.",
-          tag: "High Performance",
-          avatarSrc: "http://img.b2bpic.net/free-photo/laughing-happily-with-arms-crossed-with-relaxed-positive-satisfied-pose_1194-413783.jpg",
-          imageSrc: "http://img.b2bpic.net/free-vector/linear-flat-people-faces-illustration-social-media-avatar-userpic-profiles_1416-966.jpg",
-          imageAlt: "professional headshot man smiling",
-        },
-        {
-          id: "t4",
-          name: "Suresh Gupta",
-          date: "Feb 2024",
-          title: "Highly Recommend",
-          quote: "Good transparency in pricing and process.",
-          tag: "Transparent",
-          avatarSrc: "http://img.b2bpic.net/free-photo/man-checking-out-new-car_23-2148130140.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/chart-statistics-front-side-with-white-background_187299-39798.jpg",
-          imageAlt: "professional headshot man smiling",
-        },
-        {
-          id: "t5",
-          name: "Meera Nair",
-          date: "Mar 2024",
-          title: "Excellent Service",
-          quote: "Regular service is seamless and efficient here.",
-          tag: "Reliable",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-mechanic_1170-2409.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/cool-motorcycle-studio_23-2150781778.jpg?_wi=2",
-          imageAlt: "professional headshot man smiling",
-        },
+        { id: "t1", name: "Rahul Verma", handle: "@rahulv", testimonial: "Excellent service and quick delivery of my Activa.", icon: Smile },
+        { id: "t2", name: "Ananya Patil", handle: "@ananyap", testimonial: "The staff at Viman Nagar are extremely helpful.", icon: Smile },
+        { id: "t3", name: "Vikram Seth", handle: "@vikrams", testimonial: "My Hornet 2.0 is perfect! Thanks B U Bhandari.", icon: Smile }
       ]}
       title="Riders' Voices"
       description="Hear from the community that trust us for their daily journey."
@@ -235,27 +121,17 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqDouble
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "f1",
-          title: "Can I book a test ride online?",
-          content: "Yes, use our contact section to request a test ride.",
-        },
-        {
-          id: "f2",
-          title: "What are your service center hours?",
-          content: "We operate from 9 AM to 7 PM, Monday through Saturday.",
-        },
-        {
-          id: "f3",
-          title: "Do you offer extended warranties?",
-          content: "Absolutely, we provide comprehensive Honda-approved extended warranty plans.",
-        },
+        { id: "f1", title: "Can I book a test ride online?", content: "Yes, use our contact section to request a test ride." },
+        { id: "f2", title: "What are your service center hours?", content: "We operate from 9 AM to 7 PM, Monday through Saturday." },
+        { id: "f3", title: "Do you offer extended warranties?", content: "Absolutely, we provide comprehensive Honda-approved extended warranty plans." }
       ]}
-      sideTitle="Frequently Asked Questions"
-      faqsAnimation="blur-reveal"
+      title="Frequently Asked Questions"
+      description="Everything you need to know about our services."
+      faqsAnimation="slide-up"
+      textboxLayout="split"
     />
   </div>
 
@@ -265,21 +141,9 @@ export default function LandingPage() {
       title="Visit or Reach Out"
       description="Ready to ride? Visit our Viman Nagar showroom or drop us a message below."
       inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Your Email",
-        },
-        {
-          name: "phone",
-          type: "tel",
-          placeholder: "Your Phone",
-        },
+        { name: "name", type: "text", placeholder: "Your Name" },
+        { name: "email", type: "email", placeholder: "Your Email" },
+        { name: "phone", type: "tel", placeholder: "Your Phone" }
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/stylish-elegant-old-man-car-salon_1157-31895.jpg"
     />
@@ -288,30 +152,8 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[
-        {
-          items: [
-            {
-              label: "Showroom",
-              href: "#",
-            },
-            {
-              label: "Service",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Test Ride",
-              href: "#contact",
-            },
-            {
-              label: "Privacy",
-              href: "#",
-            },
-          ],
-        },
+        { items: [{ label: "Showroom", href: "#" }, { label: "Service", href: "#" }] },
+        { items: [{ label: "Test Ride", href: "#contact" }, { label: "Privacy", href: "#" }] }
       ]}
       logoText="B U Bhandari Honda"
     />

src/app/styles/variables.css

@@ -12,13 +12,13 @@
 
   --background: #ffffff;
   --card: #f9f9f9;
-  --foreground: #000612e6;
-  --primary-cta: #15479c;
+  --foreground: #120006;
+  --primary-cta: #e63946;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1f3251;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #1f3251;
+  --background-accent: #f9f9f9;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);