first commit

src/components/ui/ProductCard.tsx

@@ -0,0 +1,59 @@
+// src/components/ui/ProductCard.tsx
+import Image from "next/image";
+import Link from "next/link";
+import { Plus } from "lucide-react";
+
+interface ProductCardProps {
+  id: string;
+  title: string;
+  category: string;
+  price: number;
+  imageUrl: string;
+  index?: number; // Para escalonar animaciones si queremos
+}
+
+export default function ProductCard({ id, title, category, price, imageUrl, index = 1 }: ProductCardProps) {
+  return (
+    <Link href={`/product/${id}`} className="group block cursor-pointer">
+      {/* Contenedor de Imagen (Gris pálido, bordes muy redondos) */}
+      <div className="bg-light rounded-[2rem] aspect-[3/4] flex items-center justify-center mb-5 relative overflow-hidden transition-colors duration-300 group-hover:bg-[#f0f0f0]">
+        
+        {/* Número de índice estilo editorial */}
+        <span className="absolute top-6 left-6 text-xs font-medium text-gray-300 tracking-widest z-20">
+          {index.toString().padStart(2, '0')}
+        </span>
+
+        {/* Botón flotante "Quick Add" (aparece en hover) */}
+        <button className="absolute bottom-6 right-6 w-10 h-10 bg-white rounded-full flex items-center justify-center shadow-sm translate-y-20 opacity-0 group-hover:translate-y-0 group-hover:opacity-100 transition-all duration-300 z-20 hover:bg-accent hover:text-white">
+          <Plus className="w-5 h-5" />
+        </button>
+
+        {/* Imagen del Producto */}
+        <div className="relative w-3/4 h-3/4 transition-transform duration-700 ease-[cubic-bezier(0.25,1,0.5,1)] group-hover:scale-110">
+          <img
+            src={imageUrl}
+            alt={title}
+            className="w-full h-full object-contain drop-shadow-md group-hover:drop-shadow-xl transition-all duration-500"
+          />
+        </div>
+      </div>
+
+      {/* Información del Producto */}
+      <div className="flex justify-between items-start px-2">
+        <div>
+          <h3 className="text-lg font-medium text-dark leading-tight group-hover:text-accent transition-colors">
+            {title}
+          </h3>
+          <p className="text-xs text-gray-400 uppercase tracking-wider mt-1 font-medium">
+            {category}
+          </p>
+        </div>
+        <div className="text-right">
+          <span className="text-dark font-medium block">
+            {new Intl.NumberFormat('es-ES', { style: 'currency', currency: 'EUR' }).format(price)}
+          </span>
+        </div>
+      </div>
+    </Link>
+  );
+}