src/components/sections/product/ProductMediaCards.tsx

@@ -1,10 +1,15 @@
-import { ArrowUpRight, Loader2 } from "lucide-react";
 import { motion } from "motion/react";
 import Button from "@/components/ui/Button";
 import TextAnimation from "@/components/ui/TextAnimation";
-import ImageOrVideo from "@/components/ui/ImageOrVideo";
 import GridOrCarousel from "@/components/ui/GridOrCarousel";
-import useProducts from "@/hooks/useProducts";
+
+type Product = {
+  name: string;
+  price: string;
+  imageSrc: string;
+  description?: string;
+  onClick?: () => void;
+};
 
 type ProductMediaCardsProps = {
   tag: string;
@@ -12,12 +17,7 @@ type ProductMediaCardsProps = {
   description: string;
   primaryButton?: { text: string; href: string };
   secondaryButton?: { text: string; href: string };
-  products?: {
-    name: string;
-    price: string;
-    imageSrc: string;
-    onClick?: () => void;
-  }[];
+  products?: Product[];
 };
 
 const ProductMediaCards = ({
@@ -26,35 +26,10 @@ const ProductMediaCards = ({
   description,
   primaryButton,
   secondaryButton,
-  products: productsProp,
+  products = [],
 }: ProductMediaCardsProps) => {
-  const { products: fetchedProducts, isLoading } = useProducts();
-  const isFromApi = fetchedProducts.length > 0;
-  const products = isFromApi
-    ? fetchedProducts.map((p) => ({
-        name: p.name,
-        price: p.price,
-        imageSrc: p.imageSrc,
-        onClick: p.onProductClick,
-      }))
-    : productsProp;
-
-  if (isLoading && !productsProp) {
-    return (
-      <section aria-label="Products section" className="py-20">
-        <div className="w-content-width mx-auto flex justify-center">
-          <Loader2 className="size-8 animate-spin text-foreground" strokeWidth={1.5} />
-        </div>
-      </section>
-    );
-  }
-
-  if (!products || products.length === 0) {
-    return null;
-  }
-
   return (
-    <section aria-label="Products section" className="py-20">
+    <section aria-label="Product section" className="py-20">
       <div className="flex flex-col gap-8">
         <div className="flex flex-col items-center w-content-width mx-auto gap-3 md:gap-2">
           <span className="px-3 py-1 text-sm card rounded">{tag}</span>
@@ -87,28 +62,36 @@ const ProductMediaCards = ({
           viewport={{ once: true, margin: "-15%" }}
           transition={{ duration: 0.6, ease: "easeOut" }}
         >
-          <GridOrCarousel carouselThreshold={3}>
-            {products.map((product) => (
-              <button
-                key={product.name}
-                onClick={product.onClick}
-                className="group h-full flex flex-col gap-5 p-5 text-left card rounded cursor-pointer"
-              >
-                <div className="aspect-square rounded overflow-hidden">
-                  <ImageOrVideo imageSrc={product.imageSrc} />
-                </div>
-
-                <div className="flex items-center justify-between gap-3">
-                  <div className="flex-1 min-w-0">
-                    <h3 className="text-base font-medium truncate">{product.name}</h3>
-                    <p className="text-2xl font-medium">{product.price}</p>
+          <GridOrCarousel>
+            {products.map((product, index) => (
+              <div key={`${product.name}-${index}`} className="group relative h-[400px] w-full [perspective:1000px]">
+                <div className="relative h-full w-full transition-transform duration-500 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+                  {/* Front */}
+                  <div className="absolute inset-0 [backface-visibility:hidden] flex flex-col gap-3 p-5 card rounded">
+                    <div className="w-full h-48 rounded overflow-hidden bg-accent/20">
+                      <img src={product.imageSrc} alt={product.name} className="w-full h-full object-cover" />
+                    </div>
+                    <div className="flex flex-col gap-1 mt-auto">
+                      <h3 className="text-xl font-medium">{product.name}</h3>
+                      <span className="text-lg text-primary-cta">{product.price}</span>
+                    </div>
+                    {product.onClick && (
+                      <Button text="View Details" onClick={product.onClick} variant="secondary" className="w-full mt-2" />
+                    )}
                   </div>
-
-                  <div className="flex items-center justify-center size-10 shrink-0 rounded primary-button">
-                    <ArrowUpRight className="size-4 text-primary-cta-text transition-transform duration-300 group-hover:rotate-45" strokeWidth={1.5} />
+                  
+                  {/* Back */}
+                  <div className="absolute inset-0 [backface-visibility:hidden] [transform:rotateY(180deg)] flex flex-col gap-3 p-5 card rounded bg-card border border-accent/20">
+                    <h3 className="text-xl font-medium mb-2">{product.name}</h3>
+                    <p className="text-base text-foreground/80 overflow-y-auto">
+                      {product.description || "Detailed description of the product goes here. This side reveals more information about the features, materials, and specifications."}
+                    </p>
+                    {product.onClick && (
+                      <Button text="Add to Cart" onClick={product.onClick} variant="primary" className="w-full mt-auto" />
+                    )}
                   </div>
                 </div>
-              </button>
+              </div>
             ))}
           </GridOrCarousel>
         </motion.div>
@@ -117,4 +100,4 @@ const ProductMediaCards = ({
   );
 };
 
-export default ProductMediaCards;
+export default ProductMediaCards;