gaming updates

src/components/cards/GameCard.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * GameCard.astro
+ * ---------------------------------------------------------------------------
+ * Card for a Gaming Hall of Fame entry. Shows the game's banner/box art (or a
+ * placeholder slab when no art is set yet), the title, a platform pill, the
+ * release year, and the blurb. Matches the warm "interest" surface styling and
+ * the existing card idiom (`.card card-interactive`).
+ *
+ * Driven by the `games` collection schema in src/content.config.ts.
+ */
+import Icon from '@components/Icon.astro';
+import { platformToIcon } from '@lib/platforms';
+
+interface Props {
+  title: string;
+  platform: string;
+  blurb: string;
+  /** Public path to art, e.g. "/images/games/elden-ring.jpg". */
+  art?: string;
+  /** Alt text for the art; defaults to the title. */
+  artAlt?: string;
+  /** Optional release year shown next to the platform pill. */
+  year?: number;
+  /** Optional mdi icon override; defaults to a platform-derived icon. */
+  icon?: string;
+}
+
+const { title, platform, blurb, art, artAlt, year, icon } = Astro.props;
+
+const platIcon = icon ?? platformToIcon(platform);
+const alt = artAlt ?? title;
+---
+
+<article class="card card-interactive flex h-full flex-col gap-0 overflow-hidden p-0">
+  <div class="relative aspect-[4/3] w-full overflow-hidden">
+    {
+      art ? (
+        <img
+          src={art}
+          alt={alt}
+          loading="lazy"
+          decoding="async"
+          class="h-full w-full object-cover"
+        />
+      ) : (
+        <div
+          class="flex h-full w-full items-center justify-center"
+          style="background: color-mix(in srgb, var(--color-secondary) 16%, transparent);"
+          aria-hidden="true"
+        >
+          <Icon
+            name="gamepad-variant"
+            class="h-12 w-12 opacity-50"
+            style="color: var(--color-text-muted);"
+          />
+        </div>
+      )
+    }
+  </div>
+
+  <div class="flex flex-col gap-3 p-5">
+    <div class="flex flex-wrap items-center gap-2">
+      <span class="pill text-sm">
+        <Icon name={platIcon} class="h-3.5 w-3.5" />
+        {platform}
+      </span>
+      {year && (
+        <span
+          class="font-mono text-[0.65rem] uppercase tracking-[0.18em]"
+          style="color: var(--color-text-muted);"
+        >
+          {year}
+        </span>
+      )}
+    </div>
+
+    <h3 class="font-sans text-lg" style="color: var(--color-text);">{title}</h3>
+
+    <p class="grow text-sm leading-relaxed" style="color: var(--color-text-muted);">
+      {blurb}
+    </p>
+  </div>
+</article>