Bob AI: add background image for Simple, Transparent Prici...

src/app/page.tsx

@@ -223,6 +223,38 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardFour />
+      </div>
+
+      <div id="product" data-section="product">
+        <ProductCardFour
+                  title="Bestsellers"
+                  description="Discover our top-selling iPhone models that customers love."
+                  tag="Top Picks"
+                  tagIcon={Package}
+                  textboxLayout="default"
+                  useInvertedBackground="noInvert"
+                  animationType="slide-up"
+                  gridVariant="uniform-all-items-equal"
+                  carouselMode="buttons"
+                  products={[
+                    {
+                      id: "1",              name: "iPhone 15 Pro Max",              price: "$1,199",              variant: "Titanium Gray  6 Colors",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 15 Pro Max",              isFavorited: false
+                    },
+                    {
+                      id: "2",              name: "iPhone 15 Pro",              price: "$999",              variant: "Space Black  5 Colors",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 15 Pro",              isFavorited: false
+                    },
+                    {
+                      id: "3",              name: "iPhone 15",              price: "$799",              variant: "Black  5 Colors",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 15",              isFavorited: false
+                    },
+                    {
+                      id: "4",              name: "iPhone 14 Pro Max",              price: "$999",              variant: "Gold  4 Colors",              imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80",              imageAlt: "iPhone 14 Pro Max",              isFavorited: false
+                    }
+                  ]}
+                />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="https://img.b2bpic.net/free-vector/abstract-technology-science-background-with-connecting-lines_1017-22915.jpg"

src/components/sections/pricing/PricingCardOne.tsx

@@ -53,6 +53,7 @@ interface PricingCardOneProps {
     textBoxButtonContainerClassName?: string;
     textBoxButtonClassName?: string;
     textBoxButtonTextClassName?: string;
+    backgroundImage?: string;
 }
 
 interface PricingCardItemProps {
@@ -142,6 +143,7 @@ const PricingCardOne = ({
     textBoxButtonContainerClassName = "",
     textBoxButtonClassName = "",
     textBoxButtonTextClassName = "",
+    backgroundImage = "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80"
 }: PricingCardOneProps) => {
     const theme = useTheme();
     const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
@@ -154,6 +156,7 @@ const PricingCardOne = ({
             uniformGridCustomHeightClasses={uniformGridCustomHeightClasses}
             animationType={animationType}
             supports3DAnimation={true}
+            backgroundImage={backgroundImage}
 
             title={title}
             titleSegments={titleSegments}

src/components/sections/product/ProductCardFour.tsx

@@ -53,6 +53,7 @@ interface ProductCardFourProps {
   textBoxButtonContainerClassName?: string;
   textBoxButtonClassName?: string;
   textBoxButtonTextClassName?: string;
+  backgroundImage?: string;
 }
 
 interface ProductCardItemProps {
@@ -150,6 +151,7 @@ const ProductCardFour = ({
   textBoxButtonContainerClassName = "",
   textBoxButtonClassName = "",
   textBoxButtonTextClassName = "",
+  backgroundImage = "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80",
 }: ProductCardFourProps) => {
   const theme = useTheme();
   const { products: fetchedProducts, isLoading } = useProducts();
@@ -193,7 +195,7 @@ const ProductCardFour = ({
       buttons={buttons}
       textboxLayout={textboxLayout}
       useInvertedBackground={useInvertedBackground}
-      className={className}
+      className={cls(className, "bg-cover bg-center", { backgroundImage: `url(${backgroundImage})` })}
       containerClassName={containerClassName}
       gridClassName={gridClassName}
       carouselClassName={carouselClassName}