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,7 @@ interface ProductCardItemProps {
   actionButtonClassName?: string;
 }
 
-const ProductCardItem = memo(({
+const FlipCard = memo(({
   product,
   shouldUseLightText,
   cardClassName = "",
@@ -77,6 +80,104 @@ const ProductCardItem = memo(({
   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">
+            <div className={cls("relative overflow-hidden flex-1", imageClassName)}>
+              <ProductImage
+                src={product.image}
+                alt={product.name}
+                className="w-full h-full object-cover"
+              />
+            </div>
+            <div className="p-4 bg-white dark:bg-slate-900">
+              <h3 className={cls("font-semibold text-lg", cardNameClassName)}>
+                {product.name}
+              </h3>
+              {product.price && (
+                <p className={cls("text-sm font-medium mt-1", cardPriceClassName)}>
+                  ${product.price}
+                </p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Back Side - Product Details */}
+        <div
+          className={cls(
+            "absolute w-full h-full p-6 bg-white dark:bg-slate-900 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 text-gray-600 dark:text-gray-300 mb-4">
+                {product.description}
+              </p>
+            )}
+            {product.ingredients && (
+              <div className="mb-4">
+                <p className="text-xs font-semibold text-gray-700 dark:text-gray-200 mb-2">
+                  Ingredients:
+                </p>
+                <p className="text-xs text-gray-600 dark:text-gray-300">
+                  {product.ingredients}
+                </p>
+              </div>
+            )}
+          </div>
+          {product.price && (
+            <p className={cls("text-lg font-bold", cardPriceClassName)}>
+              ${product.price}
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+});
+
+FlipCard.displayName = "FlipCard";
+
+const ProductCardItem = memo(({
+  product,
+  shouldUseLightText,
+  cardClassName = "rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-shadow",
+  imageClassName = "",
+  cardNameClassName = "",
+  cardPriceClassName = "",
+  cardVariantClassName = "",
+  actionButtonClassName = "",
 }: ProductCardItemProps) => {
   return (
     <article