Bob AI: Add 3D flip animation to product cards on hover. Front side

src/components/sections/product/ProductCardFour.tsx

@@ -2,6 +2,9 @@
 
 import { memo, useCallback } from "react";
 import { useRouter } from "next/navigation";
+"use client";
+
+import { useState } from "react";
 import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
@@ -68,7 +71,113 @@ interface ProductCardItemProps {
   actionButtonClassName?: string;
 }
 
-const ProductCardItem = memo(({
+const FlipCard = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  return (
+    <div
+      className="h-full perspective"
+      onMouseEnter={() => setIsFlipped(true)}
+      onMouseLeave={() => setIsFlipped(false)}
+    >
+      <div
+        className="relative w-full h-full transition-transform duration-500 ease-out"
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+        }}
+      >
+        {/* Front Side - Product Image and Name */}
+        <div
+          className={cls(
+            "absolute w-full h-full",
+            cardClassName
+          )}
+          style={{ backfaceVisibility: "hidden" }}
+        >
+          <div className="flex flex-col h-full">
+            {product.image && (
+              <div className={cls("relative overflow-hidden bg-gray-100", imageClassName)}>
+                <ProductImage
+                  src={product.image}
+                  alt={product.name}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            )}
+            <div className="flex-1 p-4 flex flex-col justify-end">
+              <h3 className={cls("font-semibold text-lg", cardNameClassName)}>
+                {product.name}
+              </h3>
+              {product.price && (
+                <p className={cls("text-sm font-medium mt-2", cardPriceClassName)}>
+                  ${product.price}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Back Side - Product Details */}
+        <div
+          className={cls(
+            "absolute w-full h-full p-4 flex flex-col justify-between",
+            cardClassName
+          )}
+          style={{
+            backfaceVisibility: "hidden",
+            transform: "rotateY(180deg)",
+          }}
+        >
+          <div>
+            <h3 className={cls("font-semibold text-lg mb-3", cardNameClassName)}>
+              {product.name}
+            </h3>
+            {product.description && (
+              <p className="text-sm mb-3 line-clamp-3">
+                {product.description}
+              </p>
+            )}
+            {product.ingredients && (
+              <div className="text-xs mb-3">
+                <p className="font-semibold mb-1">Ingredients:</p>
+                <p className="line-clamp-2">{product.ingredients}</p>
+              </div>
+            )}
+          </div>
+          <div>
+            {product.price && (
+              <p className={cls("text-lg font-bold mb-3", cardPriceClassName)}>
+                ${product.price}
+              </p>
+            )}
+            <button
+              className={cls(
+                "w-full py-2 px-3 bg-blue-600 text-white rounded text-sm font-medium hover:bg-blue-700 transition-colors",
+                actionButtonClassName
+              )}
+            >
+              Add to Cart
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+FlipCard.displayName = "FlipCard";
+
+const ProductCardItemOriginal = memo(({
   product,
   shouldUseLightText,
   cardClassName = "",