From 070a4f65a977c8a10ca5befd1af3203f30b8b769 Mon Sep 17 00:00:00 2001
From: kudinDmitriyUp <kudin.dmitriy.up@gmail.com>
Date: Mon, 27 Apr 2026 11:47:04 +0000
Subject: [PATCH] Bob AI: Implement a 3D flip animation for each product card
 in the p

---
 .../sections/product/ProductQuantityCards.tsx | 117 ++++++++++++------
 src/index.css                                 |  15 +++
 2 files changed, 97 insertions(+), 35 deletions(-)

diff --git a/src/components/sections/product/ProductQuantityCards.tsx b/src/components/sections/product/ProductQuantityCards.tsx
index 6dd48e7..647594c 100644
--- a/src/components/sections/product/ProductQuantityCards.tsx
+++ b/src/components/sections/product/ProductQuantityCards.tsx
@@ -17,6 +17,7 @@ type ProductQuantityCardsProps = {
     name: string;
     price: string;
     imageSrc: string;
+    description?: string;
     onAddToCart?: (quantity: number) => void;
   }[];
 };
@@ -37,6 +38,7 @@ const ProductQuantityCards = ({
         name: p.name,
         price: p.price,
         imageSrc: p.imageSrc,
+        description: p.description,
         onAddToCart: undefined as ((quantity: number) => void) | undefined,
       }))
     : productsProp;
@@ -90,7 +92,7 @@ const ProductQuantityCards = ({
           {(primaryButton || secondaryButton) && (
             <div className="flex flex-wrap justify-center gap-3 mt-3">
               {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
-              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary"animationDelay={0.1} />}
+              {secondaryButton && <Button text={secondaryButton.text} href={secondaryButton.href} variant="secondary" animationDelay={0.1} />}
             </div>
           )}
         </div>
@@ -100,42 +102,87 @@ const ProductQuantityCards = ({
             {products.map((product) => (
               <div
                 key={product.name}
-                className="h-full flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded"
+                className="group perspective-1000 w-full h-full min-h-[420px]"
               >
-                <div className="aspect-square rounded overflow-hidden">
-                  <ImageOrVideo imageSrc={product.imageSrc} />
-                </div>
-
-                <div className="flex flex-col gap-3">
-                  <h3 className="text-xl font-medium truncate">{product.name}</h3>
-
-                  <div className="flex items-center justify-between gap-3">
-                    <div className="flex items-center gap-2">
-                      <button
-                        onClick={() => handleDecrement(product.name)}
-                        className="flex items-center justify-center size-8 rounded card cursor-pointer"
-                        aria-label="Decrease quantity"
-                      >
-                        <Minus className="size-4" strokeWidth={1.5} />
-                      </button>
-
-                      <span className="w-fit text-base text-center font-medium">{getQuantity(product.name)}</span>
-
-                      <button
-                        onClick={() => handleIncrement(product.name)}
-                        className="flex items-center justify-center size-8 rounded card cursor-pointer"
-                        aria-label="Increase quantity"
-                      >
-                        <Plus className="size-4" strokeWidth={1.5} />
-                      </button>
+                <div className="relative w-full h-full transform-style-preserve-3d transition-transform duration-700 group-hover:rotate-y-180">
+                  {/* Front Face */}
+                  <div className="absolute inset-0 backface-hidden flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded">
+                    <div className="aspect-square rounded overflow-hidden shrink-0">
+                      <ImageOrVideo imageSrc={product.imageSrc} />
                     </div>
 
-                    <button
-                      onClick={() => product.onAddToCart?.(getQuantity(product.name))}
-                      className="h-8 px-5 rounded primary-button text-base text-primary-cta-text font-medium cursor-pointer"
-                    >
-                      {product.price}
-                    </button>
+                    <div className="flex flex-col gap-3 flex-1 justify-between">
+                      <h3 className="text-xl font-medium truncate">{product.name}</h3>
+
+                      <div className="flex items-center justify-between gap-3">
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => handleDecrement(product.name)}
+                            className="flex items-center justify-center size-8 rounded card cursor-pointer"
+                            aria-label="Decrease quantity"
+                          >
+                            <Minus className="size-4" strokeWidth={1.5} />
+                          </button>
+
+                          <span className="w-fit text-base text-center font-medium">{getQuantity(product.name)}</span>
+
+                          <button
+                            onClick={() => handleIncrement(product.name)}
+                            className="flex items-center justify-center size-8 rounded card cursor-pointer"
+                            aria-label="Increase quantity"
+                          >
+                            <Plus className="size-4" strokeWidth={1.5} />
+                          </button>
+                        </div>
+
+                        <button
+                          onClick={() => product.onAddToCart?.(getQuantity(product.name))}
+                          className="h-8 px-5 rounded primary-button text-base text-primary-cta-text font-medium cursor-pointer"
+                        >
+                          {product.price}
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Back Face */}
+                  <div className="absolute inset-0 backface-hidden rotate-y-180 flex flex-col gap-3 xl:gap-4 2xl:gap-5 p-3 xl:p-4 2xl:p-5 card rounded">
+                    <h3 className="text-xl font-medium">{product.name}</h3>
+                    
+                    <div className="flex-1 overflow-y-auto pr-2">
+                      <p className="text-base leading-relaxed opacity-80">
+                        {product.description || "Detailed product information will be displayed here. This includes specifications, materials, and care instructions to help you make an informed decision."}
+                      </p>
+                    </div>
+
+                    <div className="flex items-center justify-between gap-3 pt-3 border-t border-foreground/10 shrink-0">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => handleDecrement(product.name)}
+                          className="flex items-center justify-center size-8 rounded card cursor-pointer"
+                          aria-label="Decrease quantity"
+                        >
+                          <Minus className="size-4" strokeWidth={1.5} />
+                        </button>
+
+                        <span className="w-fit text-base text-center font-medium">{getQuantity(product.name)}</span>
+
+                        <button
+                          onClick={() => handleIncrement(product.name)}
+                          className="flex items-center justify-center size-8 rounded card cursor-pointer"
+                          aria-label="Increase quantity"
+                        >
+                          <Plus className="size-4" strokeWidth={1.5} />
+                        </button>
+                      </div>
+
+                      <button
+                        onClick={() => product.onAddToCart?.(getQuantity(product.name))}
+                        className="h-8 px-5 rounded primary-button text-base text-primary-cta-text font-medium cursor-pointer"
+                      >
+                        {product.price}
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -147,4 +194,4 @@ const ProductQuantityCards = ({
   );
 };
 
-export default ProductQuantityCards;
+export default ProductQuantityCards;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index 41b62ce..1723b8f 100644
--- a/src/index.css
+++ b/src/index.css
@@ -198,3 +198,18 @@ h6 {
      bg, a same-color border is invisible and the button disappears. */
   border: 1px solid color-mix(in srgb, var(--color-foreground) 18%, transparent);
 }
+
+@layer utilities {
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+  .transform-style-preserve-3d {
+    transform-style: preserve-3d;
+  }
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+  .rotate-y-180 {
+    transform: rotateY(180deg);
+  }
+}
\ No newline at end of file
-- 
2.49.1