Bob AI: make background color green for hero section

src/app/page.tsx

@@ -2,7 +2,7 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import ProductCardOne from '@/components/sections/product/ProductCardOne';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
@@ -41,19 +41,21 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
-        <HeroSplit
-          background={{ variant: "glowing-orb" }}
+        <HeroBillboardGallery
           title="Introducing iPhone 15 Pro"
           description="Experience the future of mobile technology. Titanium design, advanced camera system, and breakthrough performance in your pocket."
+          background={{ variant: "sparkles-gradient" }}
           tag="Now Available"
           tagIcon={Sparkles}
           buttons={[
             { text: "Shop Now", href: "products" },
             { text: "Learn More", href: "features" }
           ]}
-          imageSrc="https://img.b2bpic.net/free-photo/mockup-mobile-phone-screen_53876-63379.jpg"
-          imageAlt="iPhone 15 Pro Premium Smartphone"
-          imagePosition="right"
+          mediaItems={[
+            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Premium Smartphone" },
+            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Camera Features" },
+            { imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro Design and Build" }
+          ]}
         />
       </div>
       <div id="products" data-section="products">

src/components/sections/hero/HeroBillboardGallery.tsx

@@ -99,7 +99,7 @@ const HeroBillboardGallery = ({
     <section
       aria-label={ariaLabel}
       className={cls(
-        "relative w-full py-hero-page-padding md:h-svh md:py-0",
+        "relative w-full py-hero-page-padding md:h-svh md:py-0 bg-green-500",
         className
       )}
     >

src/components/sections/hero/HeroSplit.tsx

@@ -129,7 +129,7 @@ const HeroSplit = ({
       style={{ backgroundImage: 'url(https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80)', backgroundSize: 'cover', backgroundPosition: 'center' }}
     >
       <HeroBackgrounds {...background} />
-      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10", containerClassName)}>
+      <div className={cls("w-content-width mx-auto flex flex-col md:flex-row gap-13 md:gap-15 items-center relative z-10 rounded-2xl", containerClassName)}>
         {imagePosition === "left" && mediaContent}
 
         <div className={cls("w-full md:w-1/2")}>