Wire homepage banners to Meshkee static-image slots.

Publish a slot catalog so the dashboard can import keys, and keep local placeholders when a slot is empty.

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

components/SlotImage.tsx

@@ -0,0 +1,49 @@
+import type { StaticImageWithUrl } from "@/lib/static-images";
+import { slotAlt, slotAspectStyle } from "@/lib/static-images";
+
+type Props = {
+  image: StaticImageWithUrl;
+  alt?: string;
+  className?: string;
+  imgClassName?: string;
+  aspectRatio?: string;
+  fallbackAspect?: string;
+  fill?: boolean;
+};
+
+export function SlotImage({
+  image,
+  alt,
+  className = "",
+  imgClassName,
+  aspectRatio,
+  fallbackAspect,
+  fill = false,
+}: Props) {
+  const style = fill ? undefined : slotAspectStyle(aspectRatio, fallbackAspect);
+  const img = (
+    // Slot URLs come from Meshkee CDN and may not be in next/image remotePatterns.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={image.url}
+      alt={slotAlt(image, alt)}
+      style={style}
+      className={
+        imgClassName ??
+        (fill
+          ? "absolute inset-0 h-full w-full object-cover"
+          : "h-auto w-full object-cover")
+      }
+    />
+  );
+
+  if (!image.linkUrl) {
+    return className ? <div className={className}>{img}</div> : img;
+  }
+
+  return (
+    <a href={image.linkUrl} className={className || (fill ? "absolute inset-0 block" : "block")}>
+      {img}
+    </a>
+  );
+}