src/components/sections/product/ProductMediaCards.tsx

@@ -1,10 +1,16 @@
-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";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type Product = {
+  name: string;
+  price: string;
+  imageSrc: string;
+  description?: string;
+  onClick?: () => void;
+};
 
 type ProductMediaCardsProps = {
   tag: string;
@@ -12,12 +18,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 +27,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 +63,35 @@ const ProductMediaCards = ({
           viewport={{ once: true, margin: "-15%" }}
           transition={{ duration: 0.6, ease: "easeOut" }}
         >
-          <GridOrCarousel carouselThreshold={3}>
-            {products.map((product) => (
-              <button
-                key={product.name}
+          <GridOrCarousel>
+            {products.map((product, index) => (
+              <div
+                key={`${product.name}-${index}`}
+                className="group relative h-[400px] w-full perspective-1000 cursor-pointer"
                 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>
+                <div className="relative h-full w-full transition-transform duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]">
+                  {/* Front */}
+                  <div className="absolute inset-0 [backface-visibility:hidden] flex flex-col card rounded overflow-hidden">
+                    <div className="relative h-3/4 w-full overflow-hidden">
+                      <ImageOrVideo imageSrc={product.imageSrc} />
+                    </div>
+                    <div className="flex flex-col justify-center p-5 h-1/4">
+                      <h3 className="text-xl font-medium">{product.name}</h3>
+                      <span className="text-lg text-primary-cta">{product.price}</span>
+                    </div>
                   </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 items-center justify-center p-6 card rounded text-center">
+                    <h3 className="text-2xl font-medium mb-4">{product.name}</h3>
+                    <p className="text-base text-foreground/80">
+                      {product.description || "Detailed description of the product goes here. Experience the best quality and features."}
+                    </p>
+                    <span className="mt-6 text-xl font-bold text-primary-cta">{product.price}</span>
                   </div>
                 </div>
-              </button>
+              </div>
             ))}
           </GridOrCarousel>
         </motion.div>
@@ -117,4 +100,4 @@ const ProductMediaCards = ({
   );
 };
 
-export default ProductMediaCards;
+export default ProductMediaCards;

src/index.css

@@ -3,6 +3,12 @@
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
+@layer utilities {
+  .perspective-1000 {
+    perspective: 1000px;
+  }
+}
+
 :root {
   /* @colorThemes/lightTheme/grayBlueAccent */
   --background: #fbfaff;
@@ -177,4 +183,4 @@ h6 {
     radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0%, transparent 40%),
     var(--color-secondary-cta);
   box-shadow: 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent);
-}
+}