only front-end init

components/ProductCard.tsx

@@ -0,0 +1,57 @@
+import { Star } from "lucide-react";
+import { Product } from "@/data/products";
+import { Badge } from "@/components/ui/badge";
+import Link from "next/link";
+
+interface ProductCardProps {
+  product: Product;
+}
+
+export default function ProductCard({ product }: ProductCardProps) {
+  return (
+    <Link href={`/produit/${product.id}`} className="group block">
+      <div className="relative overflow-hidden rounded-lg bg-muted aspect-[3/4] mb-3">
+        <img
+          src={product.image}
+          alt={product.name}
+          className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+          loading="lazy"
+        />
+        <div className="absolute top-3 left-3 flex gap-2">
+          {product.isNew && (
+            <Badge className="bg-primary text-primary-foreground text-[10px] uppercase tracking-wider">
+              Nouveau
+            </Badge>
+          )}
+          {product.isBestseller && (
+            <Badge variant="secondary" className="text-[10px] uppercase tracking-wider">
+              Bestseller
+            </Badge>
+          )}
+        </div>
+        {product.originalPrice && (
+          <Badge className="absolute top-3 right-3 bg-destructive text-destructive-foreground text-[10px]">
+            -{Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}%
+          </Badge>
+        )}
+      </div>
+      <div className="space-y-1">
+        <h3 className="text-sm font-medium text-foreground group-hover:text-primary transition-colors">
+          {product.name}
+        </h3>
+        <div className="flex items-center gap-1">
+          <Star className="h-3 w-3 fill-primary text-primary" />
+          <span className="text-xs text-muted-foreground">
+            {product.rating} ({product.reviewCount})
+          </span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold">{product.price} €</span>
+          {product.originalPrice && (
+            <span className="text-xs text-muted-foreground line-through">{product.originalPrice} €</span>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};