(Feat) Init WebSite

2026-06-22 23:03:02 +02:00
commit ea71039071
51 changed files with 11995 additions and 0 deletions
@@ -0,0 +1,61 @@
+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>
+  );
+}