`apps/web/app/games/page.tsx`

48 lines
import { GAMES } from "@/lib/games";

export const metadata = {
  title: "Games",
  description:
    "Play original 90210 mini-games — trivia, backgammon, slots, blackjack, roulette, and the Rodeo Drive Runner. Free, no download.",
};

export default function Games() {
  return (
    <section>
      <h1>90210 Games</h1>
      <p style={{ color: "var(--muted)", fontSize: 13 }}>
        Original Beverly-Hills-themed mini-games — free to play, right in your
        browser, nothing to download.
      </p>

      <div
        style={{
          display: "grid",
          gap: 14,
          gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
          marginTop: 18,
        }}
      >
        {GAMES.map((g) => (
          <a
            key={g.id}
            className="card"
            href={`/games/${g.file}`}
            style={{ display: "flex", flexDirection: "column", gap: 8, color: "inherit", minHeight: 168 }}
          >
            <div style={{ fontSize: 40, lineHeight: 1 }}>{g.icon}</div>
            <strong style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>{g.title}</strong>
            <span style={{ color: "var(--muted)", fontSize: 13, flex: 1 }}>{g.desc}</span>
            <span className="pill" style={{ alignSelf: "flex-start" }}>Play ▸</span>
          </a>
        ))}
      </div>

      <p style={{ marginTop: 20, fontSize: 12, color: "var(--muted)" }}>
        These games are original works — a playful companion to the guide, not
        affiliated with the series.
      </p>
    </section>
  );
}