From 4fb21dc5e6baa6e0453ac66fa7bed8a998ec8efd Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Sun, 26 Apr 2026 15:25:50 +0000
Subject: [PATCH] Bob AI: Modify the ProductCard component to implement a 3D
 flip anim

---
 .../sections/product/ProductRatingCards.tsx   | 59 +++++++++++--------
 1 file changed, 36 insertions(+), 23 deletions(-)

diff --git a/src/components/sections/product/ProductRatingCards.tsx b/src/components/sections/product/ProductRatingCards.tsx
index a541e30..11daf1b 100644
--- a/src/components/sections/product/ProductRatingCards.tsx
+++ b/src/components/sections/product/ProductRatingCards.tsx
@@ -20,6 +20,7 @@ type ProductRatingCardsProps = {
     rating: number;
     reviewCount: string;
     imageSrc: string;
+    description?: string;
     onClick?: () => void;
   }[];
 };
@@ -42,6 +43,7 @@ const ProductRatingCards = ({
         rating: p.rating || 0,
         reviewCount: p.reviewCount || "0",
         imageSrc: p.imageSrc,
+        description: p.description || "Detailed description coming soon...",
         onClick: p.onProductClick,
       }))
     : productsProp;
@@ -99,36 +101,47 @@ const ProductRatingCards = ({
               <button
                 key={product.name}
                 onClick={product.onClick}
-                className="group h-full flex flex-col gap-5 p-5 text-left card rounded cursor-pointer"
+                className="group h-full perspective-1000 cursor-pointer text-left"
               >
-                <div className="aspect-square rounded overflow-hidden">
-                  <ImageOrVideo imageSrc={product.imageSrc} />
-                </div>
+                <div className="relative w-full h-full transform-style-preserve-3d transition-transform duration-700 group-hover:rotate-y-180">
+                  {/* Front Face */}
+                  <div className="relative w-full h-full backface-hidden flex flex-col gap-5 p-5 card rounded">
+                    <div className="aspect-square rounded overflow-hidden">
+                      <ImageOrVideo imageSrc={product.imageSrc} />
+                    </div>
 
-                <div className="flex flex-col gap-2">
-                  <span className="secondary-button w-fit px-2 py-0.5 text-sm text-secondary-cta-text rounded">{product.brand}</span>
+                    <div className="flex flex-col gap-2">
+                      <span className="secondary-button w-fit px-2 py-0.5 text-sm text-secondary-cta-text rounded">{product.brand}</span>
 
-                  <div className="flex flex-col gap-1">
-                    <h3 className="text-xl font-medium truncate">{product.name}</h3>
+                      <div className="flex flex-col gap-1">
+                        <h3 className="text-xl font-medium truncate">{product.name}</h3>
 
-                    <div className="flex items-center gap-2">
-                      <div className="flex items-center gap-1">
-                        {Array.from({ length: 5 }).map((_, index) => (
-                          <Star
-                            key={index}
-                            className={cls(
-                              "size-4 text-accent",
-                              index < Math.floor(product.rating) ? "fill-accent" : "opacity-20"
-                            )}
-                            strokeWidth={1.5}
-                          />
-                        ))}
+                        <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-1">
+                            {Array.from({ length: 5 }).map((_, index) => (
+                              <Star
+                                key={index}
+                                className={cls(
+                                  "size-4 text-accent",
+                                  index < Math.floor(product.rating) ? "fill-accent" : "opacity-20"
+                                )}
+                                strokeWidth={1.5}
+                              />
+                            ))}
+                          </div>
+                          <span className="text-sm">({product.reviewCount})</span>
+                        </div>
                       </div>
-                      <span className="text-sm">({product.reviewCount})</span>
+
+                      <p className="text-2xl font-medium">{product.price}</p>
                     </div>
                   </div>
 
-                  <p className="text-2xl font-medium">{product.price}</p>
+                  {/* Back Face */}
+                  <div className="absolute inset-0 backface-hidden rotate-y-180 p-5 card rounded flex flex-col items-center justify-center text-center">
+                    <h3 className="text-xl font-medium mb-4">{product.name}</h3>
+                    <p className="text-base opacity-80">{product.description || "Detailed description coming soon..."}</p>
+                  </div>
                 </div>
               </button>
             ))}
@@ -139,4 +152,4 @@ const ProductRatingCards = ({
   );
 };
 
-export default ProductRatingCards;
+export default ProductRatingCards;
\ No newline at end of file
-- 
2.49.1