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

src/components/sections/product/ProductCardFour.tsx

@@ -2,6 +2,8 @@
 
 import { memo, useCallback } from "react";
 import { useRouter } from "next/navigation";
+
+import { useState } from "react";
 import CardStack from "@/components/cardStack/CardStack";
 import ProductImage from "@/components/shared/ProductImage";
 import { cls, shouldUseInvertedText } from "@/lib/utils";
@@ -68,7 +70,118 @@ interface ProductCardItemProps {
   actionButtonClassName?: string;
 }
 
-const ProductCardItem = memo(({
+const ProductCardItemComponent = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
+}: ProductCardItemProps) => {
+  const [isFlipped, setIsFlipped] = useState(false);
+
+  return (
+    <div
+      className={cls(
+        "relative w-full h-full cursor-pointer perspective",
+        cardClassName
+      )}
+      onMouseEnter={() => setIsFlipped(true)}
+      onMouseLeave={() => setIsFlipped(false)}
+      style={{
+        perspective: "1000px",
+      }}
+    >
+      <div
+        style={{
+          transformStyle: "preserve-3d",
+          transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)",
+          transition: "transform 0.6s ease-in-out",
+        }}
+        className="w-full h-full"
+      >
+        {/* Front Side - Product Image and Name */}
+        <div
+          style={{
+            backfaceVisibility: "hidden",
+          }}
+          className="w-full h-full flex flex-col"
+        >
+          <div className={cls("relative flex-1 overflow-hidden bg-gray-100", imageClassName)}>
+            <ProductImage
+              src={product.image}
+              alt={product.name}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <div className="p-4 bg-white">
+            <h3 className={cls("font-semibold text-lg", cardNameClassName, shouldUseLightText ? "text-white" : "text-gray-900")}>
+              {product.name}
+            </h3>
+            {product.price && (
+              <p className={cls("text-sm mt-1", cardPriceClassName, shouldUseLightText ? "text-gray-300" : "text-gray-600")}>
+                ${product.price}
+              </p>
+            )}
+          </div>
+        </div>
+
+        {/* Back Side - Product Details */}
+        <div
+          style={{
+            backfaceVisibility: "hidden",
+            transform: "rotateY(180deg)",
+          }}
+          className="w-full h-full flex flex-col bg-white p-4 absolute inset-0"
+        >
+          <div className="flex-1 overflow-y-auto">
+            <h3 className={cls("font-semibold text-lg mb-3", shouldUseLightText ? "text-white" : "text-gray-900")}>
+              {product.name}
+            </h3>
+            {product.description && (
+              <p className={cls("text-sm mb-3", shouldUseLightText ? "text-gray-300" : "text-gray-700")}>
+                {product.description}
+              </p>
+            )}
+            {product.variant && (
+              <div className="mb-3">
+                <p className={cls("text-xs font-semibold mb-1", shouldUseLightText ? "text-gray-400" : "text-gray-500")}>
+                  Variant
+                </p>
+                <p className={cls("text-sm", cardVariantClassName, shouldUseLightText ? "text-gray-300" : "text-gray-700")}>
+                  {product.variant}
+                </p>
+              </div>
+            )}
+            {product.price && (
+              <div className="mb-3">
+                <p className={cls("text-lg font-bold", cardPriceClassName, shouldUseLightText ? "text-white" : "text-gray-900")}>
+                  ${product.price}
+                </p>
+              </div>
+            )}
+          </div>
+          <button
+            className={cls(
+              "w-full py-2 px-4 bg-blue-600 text-white rounded font-medium hover:bg-blue-700 transition-colors",
+              actionButtonClassName
+            )}
+          >
+            Add to Cart
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+ProductCardItemComponent.displayName = "ProductCardItem";
+
+const ProductCardItem = ProductCardItemComponent;
+
+const ProductCardItemOld = memo(({
   product,
   shouldUseLightText,
   cardClassName = "",
@@ -170,7 +283,6 @@ const ProductCardFour = ({
     }
   }, [isFromApi, router]);
 
-
   if (isLoading && !productsProp) {
     return (
       <div className="w-content-width mx-auto py-20 text-center">