Bob AI: why did you use hero section for products?

src/app/page.tsx

@@ -11,6 +11,7 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import { Facebook, Instagram, Linkedin, Mail, Shield, Sparkles, Star, Twitter, Zap } from "lucide-react";
+import HeroBillboard from '@/components/sections/hero/HeroBillboard';
 
 export default function LandingPage() {
   return (
@@ -72,29 +73,48 @@ export default function LandingPage() {
 
       <div id="products" data-section="products">
         <ProductCardOne
-          title="Our iPhone Collection"
-          description="Explore our latest iPhone models with premium features and exceptional performance."
-          tag="Featured Devices"
-          tagIcon={Sparkles}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="invertDefault"
-          gridVariant="three-columns-all-equal-width"
-          carouselMode="buttons"
-          products={[
-            {
-              id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              imageSrc: "https://img.b2bpic.net/free-photo/busy-cheerful-man-just-got-very-good-message-by-his-smartphone_613910-20877.jpg",              imageAlt: "iPhone 15 Pro Max"
-            },
-            {
-              id: "2",              name: "iPhone 15 Pro",              price: "$999",              imageSrc: "https://img.b2bpic.net/free-photo/businesswoman-holding-credit-card_23-2149405934.jpg",              imageAlt: "iPhone 15 Pro"
-            },
-            {
-              id: "3",              name: "iPhone 15",              price: "$799",              imageSrc: "https://img.b2bpic.net/free-photo/high-angle-smartphone-wooden-board_23-2149554988.jpg",              imageAlt: "iPhone 15"
-            }
-          ]}
-          buttons={[
-            { text: "View All Models", href: "#pricing" }
-          ]}
+            title="Best Selling Products"
+            description="Discover our top-selling items that customers love the most."
+            tag="Top Picks"
+            tagIcon={Sparkles}
+            textboxLayout="default"
+            animationType="slide-up"
+            useInvertedBackground="invertDefault"
+            gridVariant="three-columns-all-equal-width"
+            carouselMode="buttons"
+            products={[
+                {
+                    id: "1",
+                    name: "iPhone 15 Pro Max",
+                    price: "$1,199",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "iPhone 15 Pro Max"
+                },
+                {
+                    id: "2",
+                    name: "iPhone 15 Pro",
+                    price: "$999",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "iPhone 15 Pro"
+                },
+                {
+                    id: "3",
+                    name: "iPhone 15",
+                    price: "$799",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "iPhone 15"
+                },
+                {
+                    id: "4",
+                    name: "iPhone SE",
+                    price: "$449",
+                    imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+                    imageAlt: "iPhone SE"
+                }
+            ]}
+            buttons={[
+                { text: "View All Best Sellers", href: "#best-sellers" }
+            ]}
         />
       </div>
 
@@ -216,6 +236,45 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardOne
+                  title="Our Notable iPhone Selection"
+                  description="Take a look at our selection of iPhones that might not be the latest, but still offer great value."
+                  tag="Previously Featured"
+                  tagIcon={Sparkles}
+                  textboxLayout="default"
+                  animationType="slide-up"
+                  useInvertedBackground="invertDefault"
+                  gridVariant="three-columns-all-equal-width"
+                  carouselMode="buttons"
+                  products={[
+                    {
+                      id: "1",              name: "iPhone 12",              price: "$699",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 12"
+                    },
+                    {
+                      id: "2",              name: "iPhone 11",              price: "$599",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 11"
+                    },
+                    {
+                      id: "3",              name: "iPhone XR",              price: "$499",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone XR"
+                    },
+                    {
+                      id: "4",              name: "iPhone 8",              price: "$399",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 8"
+                    }
+                  ]}
+                  buttons={[
+                    { text: "View All Models", href: "#pricing" }
+                  ]}
+                />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard title="Welcome to the Worst Products Hall of Shame!" description="Check out our most regrettable creations. We promise, these are the worst!" background={{ variant: "downward-rays-animated" }} buttons={[{ label: "Shop Our Best Products", href: "/products" }]} marqueeItems={[{ label: "The FlopPhone", href: "#" }, { label: "Screenless Screen", href: "#" }, { label: "Battery Drain 3000", href: "#" }, { label: "Keyboardless Keyboard", href: "#" }]} marqueeSpeed={50} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" imageAlt="Worst Products" />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboard title="Explore the Latest iPhone Models!" description="Discover the newest features and innovations in the iPhone lineup." background={{ variant: "downward-rays-animated" }} buttons={[{ label: "Shop iPhones", href: "/iphone" }]} marqueeItems={[{ label: "iPhone 14 Pro", href: "#" }, { label: "iPhone 14", href: "#" }, { label: "iPhone SE", href: "#" }, { label: "iPhone 13", href: "#" }]} marqueeSpeed={50} imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80" imageAlt="Latest iPhone Models" />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterCard
           logoText="iPhone"

src/app/styles/variables.css

@@ -2,21 +2,13 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f4ef;
-  --card: #dad6cd;
-  --foreground: #2a2928;
-  --primary-cta: #2a2928;
-  --secondary-cta: #ecebea;
+  --background: #f9f9f9;
+  --card: #e6e6e6;
+  --foreground: #2c2c2c;
+  --primary-cta: #2c2c2c;
+  --secondary-cta: #f9f9f9;
   --accent: #ffffff;
-  --background-accent: #ffffff; */
-
-  --background: #2e3440;
-  --card: #4c566a;
-  --foreground: #d8dee9;
-  --primary-cta: #d8dee9;
-  --secondary-cta: #4c566a;
-  --accent: #88c0d0;
-  --background-accent: #88c0d0;
+  --background-accent: #ffffff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);