62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
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"
|
|
>
|
|
<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>
|
|
);
|
|
}
|