feat: build landing page with hero, latest games, and donation CTA

Add GameCard shared component, HeroSection with framer-motion animations,
LatestGames grid section, and DonationCTA banner. Wire up the home page
to fetch games from Strapi and render all landing page sections.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/app/[locale]/page.tsx

@@ -1,7 +1,28 @@
-export default function HomePage() {
+import { getGames } from "@/lib/api";
+import { HeroSection } from "@/components/home/HeroSection";
+import { LatestGames } from "@/components/home/LatestGames";
+import { DonationCTA } from "@/components/home/DonationCTA";
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  let games: any[] = [];
+  try {
+    const res = await getGames(locale);
+    games = res.data;
+  } catch {
+    // Strapi not running yet — render page without games
+  }
+
   return (
-    <main>
-      <h1>Project Afterlife</h1>
-    </main>
+    <>
+      <HeroSection />
+      <LatestGames games={games} locale={locale} />
+      <DonationCTA />
+    </>
   );
 }

apps/web/src/components/home/DonationCTA.tsx

@@ -0,0 +1,23 @@
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useLocale } from "next-intl";
+
+export function DonationCTA() {
+  const t = useTranslations("donate");
+  const locale = useLocale();
+
+  return (
+    <section className="bg-gradient-to-r from-blue-950/50 to-purple-950/50 py-20">
+      <div className="max-w-3xl mx-auto px-4 text-center">
+        <h2 className="text-3xl font-bold mb-4">{t("title")}</h2>
+        <p className="text-gray-400 mb-8">{t("description")}</p>
+        <Link
+          href={`/${locale}/donate`}
+          className="inline-block px-8 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-200 transition-colors"
+        >
+          {t("patreon")}
+        </Link>
+      </div>
+    </section>
+  );
+}

apps/web/src/components/home/HeroSection.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { motion } from "framer-motion";
+import Link from "next/link";
+import { useLocale } from "next-intl";
+
+export function HeroSection() {
+  const t = useTranslations("home");
+  const locale = useLocale();
+
+  return (
+    <section className="relative min-h-[80vh] flex items-center justify-center overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-b from-blue-950/20 via-gray-950 to-gray-950" />
+      <div className="relative z-10 text-center px-4 max-w-4xl mx-auto">
+        <motion.h1
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8 }}
+          className="text-5xl md:text-7xl font-bold tracking-tight mb-6"
+        >
+          {t("hero_title")}
+        </motion.h1>
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.2 }}
+          className="text-xl md:text-2xl text-gray-400 mb-10"
+        >
+          {t("hero_subtitle")}
+        </motion.p>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, delay: 0.4 }}
+          className="flex gap-4 justify-center"
+        >
+          <Link
+            href={`/${locale}/catalog`}
+            className="px-8 py-3 bg-white text-black font-semibold rounded-lg hover:bg-gray-200 transition-colors"
+          >
+            {t("view_all")}
+          </Link>
+          <Link
+            href={`/${locale}/donate`}
+            className="px-8 py-3 border border-white/20 text-white font-semibold rounded-lg hover:bg-white/10 transition-colors"
+          >
+            {t("donate_cta")}
+          </Link>
+        </motion.div>
+      </div>
+    </section>
+  );
+}

apps/web/src/components/home/LatestGames.tsx

@@ -0,0 +1,34 @@
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import type { Game } from "@afterlife/shared";
+import { GameCard } from "../shared/GameCard";
+
+interface LatestGamesProps {
+  games: Game[];
+  locale: string;
+}
+
+export function LatestGames({ games, locale }: LatestGamesProps) {
+  const t = useTranslations("home");
+
+  if (games.length === 0) return null;
+
+  return (
+    <section className="max-w-7xl mx-auto px-4 py-20">
+      <div className="flex items-center justify-between mb-10">
+        <h2 className="text-3xl font-bold">{t("latest_games")}</h2>
+        <Link
+          href={`/${locale}/catalog`}
+          className="text-sm text-gray-400 hover:text-white transition-colors"
+        >
+          {t("view_all")} →
+        </Link>
+      </div>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {games.slice(0, 6).map((game) => (
+          <GameCard key={game.id} game={game} locale={locale} />
+        ))}
+      </div>
+    </section>
+  );
+}

apps/web/src/components/shared/GameCard.tsx

@@ -0,0 +1,46 @@
+import Link from "next/link";
+import Image from "next/image";
+import type { Game } from "@afterlife/shared";
+
+interface GameCardProps {
+  game: Game;
+  locale: string;
+}
+
+export function GameCard({ game, locale }: GameCardProps) {
+  const statusColors = {
+    online: "bg-green-500",
+    maintenance: "bg-yellow-500",
+    coming_soon: "bg-blue-500",
+  };
+
+  return (
+    <Link href={`/${locale}/games/${game.slug}`} className="group block">
+      <div className="relative overflow-hidden rounded-lg bg-gray-900 border border-white/5 hover:border-white/20 transition-all">
+        {game.coverImage && (
+          <div className="relative aspect-[16/9] overflow-hidden">
+            <Image
+              src={game.coverImage.url}
+              alt={game.coverImage.alternativeText || game.title}
+              fill
+              className="object-cover group-hover:scale-105 transition-transform duration-500"
+            />
+            <div className="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent" />
+          </div>
+        )}
+        <div className="p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <span className={`w-2 h-2 rounded-full ${statusColors[game.serverStatus]}`} />
+            <span className="text-xs text-gray-400 uppercase tracking-wider">{game.genre}</span>
+          </div>
+          <h3 className="text-lg font-semibold text-white group-hover:text-blue-400 transition-colors">
+            {game.title}
+          </h3>
+          <p className="text-sm text-gray-500 mt-1">
+            {game.releaseYear} – {game.shutdownYear}
+          </p>
+        </div>
+      </div>
+    </Link>
+  );
+}