Bob AI: it's a bad section, replace it with something that...

src/app/page.tsx

@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
@@ -11,6 +11,7 @@ import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCar
 import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import { Sparkles, TrendingUp, Star, Crown, Users, Award, Zap, Mail } from "lucide-react";
+import HeroSplit from '@/components/sections/hero/HeroSplit';
 
 export default function LandingPage() {
   return (
@@ -66,29 +67,45 @@ export default function LandingPage() {
       </div>
 
       <div id="products" data-section="products">
-        <ProductCardOne
+        <HeroSplit
-          title="Featured iPhones"
+          title="Best Selling iPhones"
-          description="Explore our latest collection of premium iPhones with cutting-edge technology"
+          description="Discover our top-selling iPhones with the latest features and designs"
+          background={{ variant: "downward-rays-animated-grid" }}
           tag="Best Sellers"
           tagIcon={TrendingUp}
-          textboxLayout="default"
-          animationType="slide-up"
-          useInvertedBackground="invertDefault"
-          gridVariant="three-columns-all-equal-width"
-          products={[
-            {
-              id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-16-pro-social-media-cover-design-template_47987-25428.jpg",              imageAlt: "iPhone 15 Pro Max"
-            },
-            {
-              id: "2",              name: "iPhone 15 Pro",              price: "$999",              imageSrc: "https://img.b2bpic.net/free-psd/new-smartphone-a18-bionic-social-media-banner-design-template_47987-33085.jpg",              imageAlt: "iPhone 15 Pro"
-            },
-            {
-              id: "3",              name: "iPhone 14 Pro",              price: "$799",              imageSrc: "https://img.b2bpic.net/free-psd/smartphone-camera-control-social-media-banner-design-template_47987-25416.jpg",              imageAlt: "iPhone 14 Pro"
-            }
-          ]}
           buttons={[
             { text: "View All Models", href: "#products" }
           ]}
+          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 14 Pro",
+              price: "$799",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 14 Pro"
+            },
+            {
+              id: "4",
+              name: "iPhone 13 Pro",
+              price: "$699",
+              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",
+              imageAlt: "iPhone 13 Pro"
+            }
+          ]}
         />
       </div>
 
@@ -210,6 +227,25 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="hero" data-section="hero">
+        <HeroSplit
+          title="Discover Our Bestsellers"
+          description="Explore the top-selling iPhone models that everyone is talking about."
+          background={{ variant: "downward-rays-animated" }}
+          buttons={[
+            {
+              label: "Shop Now",
+              href: "/products",
+              variant: "primary",
+            },
+          ]}
+          imageSrc="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80"
+          imageAlt="iPhone Bestsellers"
+          imagePosition="right"
+          className="py-16"
+        />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterSimple
           columns={[

src/app/styles/variables.css

@@ -10,13 +10,13 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #2a303c;
+  --background: #ffff00;
-  --card: #333a4a;
+  --card: #ffff88;
-  --foreground: #ffffff;
+  --foreground: #000000;
-  --primary-cta: #ffffff;
+  --primary-cta: #000000;
-  --secondary-cta: #2a303c;
+  --secondary-cta: #ffff00;
-  --accent: #5e81ac;
+  --accent: #ffff00;
-  --background-accent: #5e81ac;
+  --background-accent: #ffff00;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);