Bob AI: add bakground image for the wholebestsellers secti...

src/app/page.tsx

@@ -264,6 +264,36 @@ export default function LandingPage() {
         />
       </div>
 
+      <div id="product" data-section="product">
+        <ProductCardTwo
+                  title="Bestsellers"
+                  description="Discover our top-selling iPhone models that customers love the most."
+                  tag="Top Picks"
+                  tagIcon={Star}
+                  textboxLayout="default"
+                  useInvertedBackground="invertDefault"
+                  animationType="slide-up"
+                  gridVariant="three-columns-all-equal-width"
+                  products={[
+                    {
+                      id: "1", brand: "Apple", name: "iPhone 16 Pro Max", price: "$1,199.00", rating: 5, reviewCount: "12.5k", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 16 Pro Max"
+                    },
+                    {
+                      id: "2", brand: "Apple", name: "iPhone 16 Pro", price: "$999.00", rating: 5, reviewCount: "10.2k", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 16 Pro"
+                    },
+                    {
+                      id: "3", brand: "Apple", name: "iPhone 16", price: "$799.00", rating: 5, reviewCount: "8.9k", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 16"
+                    },
+                    {
+                      id: "4", brand: "Apple", name: "iPhone 15 Pro", price: "$899.00", rating: 4.5, reviewCount: "7.8k", imageSrc: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80", imageAlt: "iPhone 15 Pro"
+                    }
+                  ]}
+                  buttons={[
+                    { text: "View All Bestsellers", href: "#bestsellers" }
+                  ]}
+                />
+      </div>
+
       <div id="footer" data-section="footer">
         <FooterMedia
           imageSrc="https://img.b2bpic.net/free-vector/abstract-technology-wire-wave-blue-background_1035-17376.jpg"

src/components/sections/product/ProductCardTwo.tsx

@@ -57,6 +57,7 @@ interface ProductCardTwoProps {
     textBoxButtonContainerClassName?: string;
     textBoxButtonClassName?: string;
     textBoxButtonTextClassName?: string;
+    backgroundImage?: string;
 }
 
 interface ProductCardItemProps {
@@ -174,6 +175,7 @@ const ProductCardTwo = ({
     textBoxButtonContainerClassName = "",
     textBoxButtonClassName = "",
     textBoxButtonTextClassName = "",
+    backgroundImage = "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=1920&q=80",
 }: ProductCardTwoProps) => {
     const theme = useTheme();
     const { products: fetchedProducts, isLoading } = useProducts();
@@ -222,7 +224,7 @@ const ProductCardTwo = ({
             tagIcon={tagIcon}
             buttons={buttons}
             textboxLayout={textboxLayout}
-            className={className}
+            className={cls(className, "bg-cover bg-center", { [backgroundImage]: backgroundImage })}
             containerClassName={containerClassName}
             gridClassName={gridClassName}
             carouselClassName={carouselClassName}