Bob AI: add bacground image for the whole Crafted Coffee, ...

src/components/sections/about/SplitAbout.tsx

@@ -106,6 +106,7 @@ const SplitAbout = ({
     <section
       aria-label={ariaLabel}
       className={cls("relative py-20 w-full", useInvertedBackground === "invertDefault" && "bg-foreground", className)}
+      style={{ backgroundImage: `url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80')`, backgroundSize: 'cover', backgroundPosition: 'center' }}
     >
       <div className={cls("w-content-width mx-auto flex flex-col gap-8", containerClassName)}>
         <CardStackTextBox

src/components/sections/feature/FeatureCardTwentyTwo.tsx

@@ -115,7 +115,17 @@ const FeatureCardTwentyTwo = ({
           buttonTextClassName={textBoxButtonTextClassName}
         />
 
-        <div className={cls("grid grid-cols-1 md:grid-cols-2 gap-8 card rounded-theme-capped p-5 md:p-8", gridClassName)}>
+        <div
+          className={cls(
+            "grid grid-cols-1 md:grid-cols-2 gap-8 card rounded-theme-capped p-5 md:p-8",
+            gridClassName,
+            "relative"
+          )}
+        >
+          <div
+            className="absolute inset-0 z-0"
+            style={{ backgroundImage: `url('https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80')`, backgroundSize: 'cover', backgroundPosition: 'center' }}
+          />
           {features.map((feature, index) => (
             <article
               key={feature.id}

src/components/sections/footer/FooterBaseCard.tsx

@@ -57,7 +57,14 @@ const FooterBaseCard = ({
       aria-label={ariaLabel}
       className={cls("relative w-full py-20", className)}
     >
-      <div className={cls("relative w-content-width mx-auto card rounded-theme-capped p-10", containerClassName, cardClassName)}>
+      <div
+        className={cls(
+          "relative w-content-width mx-auto card rounded-theme-capped p-10",
+          containerClassName,
+          cardClassName
+        )}
+        style={{ backgroundImage: "url(https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/uploaded-1770218130502-09ulnrl5.jpg)" }}
+      >
         <div className="relative z-1 flex flex-col md:flex-row gap-10 md:gap-0 justify-between items-start mb-10">
           {/* {logoSrc ? (
             <div className="flex-shrink-0">

src/components/sections/hero/HeroBillboard.tsx

@@ -130,7 +130,7 @@ const HeroBillboard = ({
         <div className="flex flex-col gap-6" >
           <div className={cls("w-full overflow-hidden rounded-theme-capped card p-4", mediaWrapperClassName)}>
             <MediaContent
-              imageSrc={imageSrc}
+              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_32SgGlSmvaVv2SYOkECykbr8Q49/uploaded-1770218022010-yzgaohcx.jpg"
               videoSrc={videoSrc}
               imageAlt={imageAlt}
               videoAriaLabel={videoAriaLabel}