Add replaceable placeholder images with unique img src paths.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/ui/ProductCard.tsx

@@ -7,6 +7,7 @@ type ProductCardProps = {
   price: number;
   oldPrice?: number;
   discount?: number;
+  image: string;
   variant?: "sale" | "default" | "brand";
 };
 
@@ -16,12 +17,20 @@ export function ProductCard({
   price,
   oldPrice,
   discount,
+  image,
   variant = "default",
 }: ProductCardProps) {
   return (
     <article className="group w-[220px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[240px]">
       <div className="relative">
-        <Placeholder width="100%" height="200px" label="240×200" className="w-full rounded-none border-0 border-b border-dashed" />
+        <Placeholder
+          src={image}
+          alt={name}
+          width="100%"
+          height="200px"
+          label="240×200"
+          className="w-full rounded-none border-0 border-b border-dashed"
+        />
         {discount && (
           <span className="absolute top-3 right-3 rounded-md bg-red px-2 py-0.5 text-xs font-bold text-white">
             {discount}٪