highland_games_website/app/games/page.tsx

import Link from "next/link";
import Image from "next/image";
import type { Metadata } from "next";
import { games } from "@/lib/games";

export const metadata: Metadata = {
  title: "Games",
  description: "Games crafted by Highland Games Studio.",
};

const statusLabel: Record<string, string> = {
  "in-development": "IN DEVELOPMENT",
  released: "RELEASED",
  "coming-soon": "COMING SOON",
};

export default function GamesPage() {
  return (
    <div className="pt-32 pb-24 px-6 lg:px-10">
      <div className="max-w-6xl mx-auto">
        <p className="font-display text-sm tracking-[0.3em] text-accent mb-4">
          — OUR WORLDS
        </p>
        <h1 className="font-display text-5xl sm:text-6xl lg:text-7xl tracking-wider leading-[0.95] mb-16">
          GAMES
        </h1>

        <div className="grid gap-8">
          {games.map((game) => (
            <Link
              key={game.slug}
              href={`/games/${game.slug}`}
              className="group relative aspect-[16/9] sm:aspect-[21/9] bg-surface border border-border overflow-hidden block hover:border-accent transition-colors"
            >
              {game.cover ? (
                <Image
                  src={game.cover}
                  alt={game.title}
                  fill
                  sizes="(max-width: 1024px) 100vw, 1024px"
                  className="object-cover group-hover:scale-105 transition-transform duration-700"
                />
              ) : (
                <div className="absolute inset-0 flex items-center justify-center">
                  <Image
                    src="/image/Studio/Logo Flat.png"
                    alt=""
                    width={140}
                    height={94}
                    className="opacity-15 group-hover:opacity-25 group-hover:scale-105 transition-all duration-700"
                  />
                </div>
              )}
              <div className="absolute bottom-0 left-0 right-0 p-8 bg-gradient-to-t from-background via-background/80 to-transparent">
                <p className="font-display text-xs tracking-[0.3em] text-accent mb-2">
                  {statusLabel[game.status]}
                </p>
                <h2 className="font-display text-3xl sm:text-4xl tracking-wider mb-3">
                  {game.title.toUpperCase()}
                </h2>
                <p className="text-foreground-muted max-w-2xl">
                  {game.tagline}
                </p>
              </div>
            </Link>
          ))}
        </div>
      </div>
    </div>
  );
}