Add replaceable placeholder images with unique img src paths.

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

src/components/ui/Placeholder.tsx

@@ -1,4 +1,6 @@
 type PlaceholderProps = {
+  src: string;
+  alt?: string;
   width: string;
   height?: string;
   label?: string;
@@ -6,6 +8,8 @@ type PlaceholderProps = {
 };
 
 export function Placeholder({
+  src,
+  alt = "",
   width,
   height,
   label,
@@ -15,12 +19,17 @@ export function Placeholder({
     <div
       className={`relative flex shrink-0 items-center justify-center overflow-hidden border border-dashed border-red-muted/60 bg-red-light/40 ${className}`}
       style={{ width, ...(height ? { height } : {}) }}
-      aria-hidden="true"
     >
-      <div className="absolute inset-0 bg-[linear-gradient(135deg,transparent_45%,rgba(220,38,38,0.06)_50%,transparent_55%)]" />
-      <span className="font-display relative z-10 text-xs tracking-wider text-red-dark/50 uppercase">
-        {label ?? `${width} × ${height ?? ""}`}
-      </span>
+      <img
+        src={src}
+        alt={alt}
+        className="absolute inset-0 h-full w-full object-cover"
+      />
+      {label && (
+        <span className="font-display pointer-events-none relative z-10 rounded bg-white/70 px-1.5 py-0.5 text-xs tracking-wider text-red-dark/50 uppercase">
+          {label}
+        </span>
+      )}
     </div>
   );
 }