Merge version_3_1776785606217 into main

Merge version_3_1776785606217 into main

src/components/sections/product/ProductVariantCards.tsx

@@ -13,11 +13,13 @@ type ProductVariantCardsProps = {
   primaryButton?: { text: string; href: string };
   secondaryButton?: { text: string; href: string };
   products?: {
+    id?: string;
     name: string;
     variant: string;
     price: string;
     imageSrc: string;
     onClick?: () => void;
+    description?: string;
   }[];
 };
 
@@ -33,11 +35,13 @@ const ProductVariantCards = ({
   const isFromApi = fetchedProducts.length > 0;
   const products = isFromApi
     ? fetchedProducts.map((p) => ({
+        id: p.id,
         name: p.name,
         variant: p.variant || "",
         price: p.price,
         imageSrc: p.imageSrc,
         onClick: p.onProductClick,
+        description: p.description,
       }))
     : productsProp;
 
@@ -91,32 +95,49 @@ const ProductVariantCards = ({
         >
           <GridOrCarousel carouselThreshold={3}>
             {products.map((product) => (
-              <button
-                key={product.name}
+              <div
+                key={product.id || product.name}
                 onClick={product.onClick}
-                className="group h-full flex flex-col gap-5 p-5 text-left card rounded cursor-pointer transition-transform duration-300 hover:scale-105"
+                className="relative group [perspective:1000px] h-full cursor-pointer"
+                role="button"
+                tabIndex={0}
+                onKeyDown={(e) => {
+                  if ((e.key === "Enter" || e.key === " ") && product.onClick) {
+                    e.preventDefault();
+                    product.onClick();
+                  }
+                }}
               >
-                <div className="relative aspect-square rounded overflow-hidden">
-                  <ImageOrVideo
-                    imageSrc={product.imageSrc}
-                    className="size-full object-cover"
-                  />
-                  <div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
-                    <div className="flex items-center justify-center size-12 rounded-full primary-button opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300">
-                      <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
+                <div className="relative w-full h-full transition-transform duration-700 transform-style-preserve-3d group-hover:rotate-y-180">
+                  {/* Front Face */}
+                  <div className="absolute w-full h-full backface-hidden card rounded flex flex-col gap-5 p-5 text-left">
+                    <div className="relative aspect-square rounded overflow-hidden">
+                      <ImageOrVideo
+                        imageSrc={product.imageSrc}
+                        className="size-full object-cover transition-filter duration-700 group-hover:blur-sm"
+                      />
+                      <div className="absolute inset-0 flex items-center justify-center group-hover:bg-background/20 group-hover:backdrop-blur-xs transition-all duration-300">
+                        <div className="flex items-center justify-center size-12 rounded-full primary-button opacity-0 group-hover:opacity-100 scale-75 group-hover:scale-100 transition-all duration-300">
+                          <ArrowUpRight className="size-5 text-primary-cta-text" strokeWidth={2} />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="flex items-center justify-between gap-3">
+                      <div className="flex flex-col flex-1 min-w-0">
+                        <h3 className="text-xl font-medium truncate leading-tight text-balance">{product.name}</h3>
+                        <p className="text-sm text-foreground/60">{product.variant}</p>
+                      </div>
+
+                      <span className="text-xl font-medium shrink-0">{product.price}</span>
                     </div>
                   </div>
-                </div>
-
-                <div className="flex items-center justify-between gap-3">
-                  <div className="flex flex-col flex-1 min-w-0">
-                    <h3 className="text-xl font-medium truncate leading-tight text-balance">{product.name}</h3>
-                    <p className="text-sm text-foreground/60">{product.variant}</p>
+                  {/* Back Face */}
+                  <div className="absolute w-full h-full backface-hidden rotate-y-180 card rounded flex items-center justify-center p-4 text-center">
+                    <p className="text-lg">{product.description || "Detailed information about this product."}</p>
                   </div>
-
-                  <span className="text-xl font-medium shrink-0">{product.price}</span>
                 </div>
-              </button>
+              </div>
             ))}
           </GridOrCarousel>
         </motion.div>

src/index.css

@@ -3,6 +3,15 @@
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
+@layer utilities {
+  .transform-style-preserve-3d {
+    transform-style: preserve-3d;
+  }
+  .backface-hidden {
+    backface-visibility: hidden;
+  }
+}
+
 :root {
   /* @colorThemes/lightTheme/grayBlueAccent */
   --background: #f6f0e9;
@@ -174,4 +183,4 @@ h6 {
   background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta));
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   border: 1px solid var(--color-secondary-cta);
-}
+}