Bob AI: add background image for the whole hero section

src/app/page.tsx

@@ -56,7 +56,6 @@ export default function LandingPage() {
           imagePosition="right"
         />
       </div>
-
       <div id="products" data-section="products">
         <ProductCardTwo
             title="Explore Our Latest Smartphones"
@@ -111,7 +110,6 @@ export default function LandingPage() {
             useInvertedBackground="invertDefault"
         />
       </div>
-
       <div id="features" data-section="features">
         <FeatureCardSix
           title="Engineered to Perfection"

src/components/sections/hero/HeroSplit.tsx

@@ -126,6 +126,7 @@ const HeroSplit = ({
     <section
       aria-label={ariaLabel}
       className={cls("relative w-full h-fit py-hero-page-padding md:py-0 md:h-svh flex items-center", className)}
+      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)}>