Bob AI: Add flip animation on hover to product cards. Implement CSS

src/components/sections/product/ProductCardThree.tsx

@@ -111,12 +111,39 @@ const ProductCardItem = memo(({
         }
     }, [isFromApi, onBuyClick, product, quantity]);
 
+    const [isFlipped, setIsFlipped] = useState(false);
+
     return (
         <article
-            className={cls("card group relative h-full flex flex-col gap-4 cursor-pointer p-4 rounded-theme-capped", cardClassName)}
+            className={cls("card group relative h-full cursor-pointer", cardClassName)}
             onClick={handleClick}
             role="article"
             aria-label={`${product.name} - ${product.price}`}
+            onMouseEnter={() => setIsFlipped(true)}
+            onMouseLeave={() => setIsFlipped(false)}
+            style={{
+                perspective: "1000px",
+            }}
+        >
+            <div
+                style={{
+                    position: "relative",
+                    width: "100%",
+                    height: "100%",
+                    transition: "transform 0.6s",
+                    transformStyle: "preserve-3d",
+                    transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+                }}
+            >
+                {/* Front of card */}
+                <div
+                    style={{
+                        position: "absolute",
+                        width: "100%",
+                        height: "100%",
+                        backfaceVisibility: "hidden",
+                    }}
+                    className={cls("flex flex-col gap-4 p-4 rounded-theme-capped", cardClassName)}
                 >
                     <ProductImage
                         imageSrc={product.imageSrc}
@@ -160,6 +187,32 @@ const ProductCardItem = memo(({
                             />
                         </div>
                     </div>
+                </div>
+
+                {/* Back of card */}
+                <div
+                    style={{
+                        position: "absolute",
+                        width: "100%",
+                        height: "100%",
+                        backfaceVisibility: "hidden",
+                        transform: "rotateY(180deg)",
+                    }}
+                    className={cls("flex flex-col gap-4 p-4 rounded-theme-capped justify-center items-center", cardClassName)}
+                >
+                    <div className="flex flex-col gap-3 text-center">
+                        <h3 className={cls("text-lg font-medium leading-[1.15]", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            {product.name}
+                        </h3>
+                        <p className={cls("text-sm leading-relaxed", shouldUseLightText ? "text-background/80" : "text-foreground/80")}>
+                            {product.description || "Premium quality product"}
+                        </p>
+                        <div className={cls("text-2xl font-bold mt-2", shouldUseLightText ? "text-background" : "text-foreground")}>
+                            {product.price}
+                        </div>
+                    </div>
+                </div>
+            </div>
         </article>
     );
 });