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 (
@@ -266,6 +267,14 @@ export default function LandingPage() {
                 />
       </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;
+  --background: #f9f9f9;
-  --card: #dad6cd;
+  --card: #e6e6e6;
-  --foreground: #2a2928;
+  --foreground: #2c2c2c;
-  --primary-cta: #2a2928;
+  --primary-cta: #2c2c2c;
-  --secondary-cta: #ecebea;
+  --secondary-cta: #f9f9f9;
   --accent: #ffffff;
-  --background-accent: #ffffff; */
+  --background-accent: #ffffff;
-
-  --background: #f5f5f5;
-  --card: #d3d3d3;
-  --foreground: #333333;
-  --primary-cta: #333333;
-  --secondary-cta: #d3d3d3;
-  --accent: #e6e6e6;
-  --background-accent: #e6e6e6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);