From c56446fe948bfdedbdc8baa39c6fa20f655a306c Mon Sep 17 00:00:00 2001
From: kudindmitriy <kudin.dima@gmail.com>
Date: Wed, 4 Feb 2026 18:52:53 +0200
Subject: [PATCH] Bob AI: add a background image to the whole bestsellers se...

---
 src/components/sections/product/ProductCardFour.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/sections/product/ProductCardFour.tsx b/src/components/sections/product/ProductCardFour.tsx
index 6335e79..503be2c 100644
--- a/src/components/sections/product/ProductCardFour.tsx
+++ b/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}