feat: add SEO metadata and Open Graph helpers

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

.github/workflows/deploy.yml

@@ -0,0 +1,26 @@
+name: Deploy
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Deploy to VPS
+        uses: appleboy/ssh-action@v1
+        with:
+          host: ${{ secrets.VPS_HOST }}
+          username: ${{ secrets.VPS_USER }}
+          key: ${{ secrets.VPS_SSH_KEY }}
+          script: |
+            cd /opt/project-afterlife
+            git pull origin main
+            cd docker
+            docker compose build
+            docker compose up -d
+            docker compose exec web npm run build
+            docker compose restart web

apps/cms/Dockerfile

@@ -0,0 +1,13 @@
+FROM node:20-alpine AS base
+
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm ci
+COPY . .
+RUN npm run build
+
+FROM node:20-alpine AS production
+WORKDIR /app
+COPY --from=base /app ./
+EXPOSE 1337
+CMD ["npm", "run", "start"]

apps/web/.env.example

@@ -0,0 +1,3 @@
+STRAPI_URL=http://localhost:1337
+STRAPI_API_TOKEN=your-api-token-here
+NEXT_PUBLIC_STRAPI_URL=http://localhost:1337

apps/web/Dockerfile

@@ -0,0 +1,26 @@
+FROM node:20-alpine AS base
+
+WORKDIR /app
+COPY package.json package-lock.json* turbo.json ./
+COPY apps/web/package.json ./apps/web/
+COPY packages/shared/package.json ./packages/shared/
+
+RUN npm ci
+
+COPY packages/shared/ ./packages/shared/
+COPY apps/web/ ./apps/web/
+
+WORKDIR /app/apps/web
+RUN npm run build
+
+FROM node:20-alpine AS production
+WORKDIR /app/apps/web
+COPY --from=base /app/apps/web/.next ./.next
+COPY --from=base /app/apps/web/public ./public
+COPY --from=base /app/apps/web/package.json ./
+COPY --from=base /app/apps/web/node_modules ./node_modules
+COPY --from=base /app/node_modules /app/node_modules
+COPY --from=base /app/packages /app/packages
+
+EXPOSE 3000
+CMD ["npm", "start"]

apps/web/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@afterlife/shared": "*",
+    "framer-motion": "^12.34.3",
+    "howler": "^2.2.4",
     "next": "^15",
     "next-intl": "^4.8.3",
     "react": "^19",
@@ -17,6 +19,7 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
+    "@types/howler": "^2.2.12",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",

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

@@ -0,0 +1,42 @@
+import { useTranslations } from "next-intl";
+
+export default function AboutPage() {
+  const t = useTranslations("about");
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-12">
+      <h1 className="text-4xl font-bold mb-12">{t("title")}</h1>
+
+      <section className="mb-12">
+        <h2 className="text-2xl font-semibold mb-4">{t("mission")}</h2>
+        <div className="prose prose-invert prose-lg max-w-none">
+          <p>
+            Project Afterlife nace de la convicción de que los juegos online que marcaron a
+            generaciones de jugadores no deberían desaparecer cuando sus servidores se apagan.
+            Somos un equipo dedicado a preservar estos mundos virtuales, restaurando sus servidores
+            y documentando su historia para que nunca sean olvidados.
+          </p>
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-2xl font-semibold mb-4">{t("team")}</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-gray-900 rounded-lg p-6 border border-white/5">
+            <p className="text-gray-500 text-sm">Team members coming soon.</p>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">{t("contribute")}</h2>
+        <div className="prose prose-invert prose-lg max-w-none">
+          <p>
+            Si tienes experiencia con servidores de juegos, desarrollo web, narración, o
+            simplemente quieres ayudar, contacta con nosotros.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { Suspense } from "react";
+import { getGames } from "@/lib/api";
+import { CatalogFilters } from "@/components/catalog/CatalogFilters";
+import { CatalogGrid } from "@/components/catalog/CatalogGrid";
+
+export default async function CatalogPage({
+  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
+  }
+
+  return (
+    <div className="max-w-7xl mx-auto px-4 py-12">
+      <h1 className="text-4xl font-bold mb-8">
+        {locale === "es" ? "Catálogo de Juegos" : "Game Catalog"}
+      </h1>
+      <Suspense>
+        <CatalogFilters />
+      </Suspense>
+      <CatalogGrid games={games} locale={locale} />
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+import { useTranslations } from "next-intl";
+
+export default function DonatePage() {
+  const t = useTranslations("donate");
+
+  return (
+    <div className="max-w-4xl mx-auto px-4 py-12">
+      <h1 className="text-4xl font-bold mb-6">{t("title")}</h1>
+      <p className="text-lg text-gray-400 mb-12">{t("description")}</p>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-16">
+        <a
+          href="https://patreon.com/projectafterlife"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block bg-gray-900 rounded-lg p-8 border border-white/5 hover:border-orange-500/50 transition-colors text-center"
+        >
+          <h3 className="text-2xl font-bold mb-2 text-orange-400">Patreon</h3>
+          <p className="text-gray-400 text-sm mb-4">Donaciones recurrentes mensuales</p>
+          <span className="inline-block px-6 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-lg font-medium transition-colors">
+            {t("patreon")}
+          </span>
+        </a>
+
+        <a
+          href="https://ko-fi.com/projectafterlife"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="block bg-gray-900 rounded-lg p-8 border border-white/5 hover:border-sky-500/50 transition-colors text-center"
+        >
+          <h3 className="text-2xl font-bold mb-2 text-sky-400">Ko-fi</h3>
+          <p className="text-gray-400 text-sm mb-4">Donaciones puntuales</p>
+          <span className="inline-block px-6 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded-lg font-medium transition-colors">
+            {t("kofi")}
+          </span>
+        </a>
+      </div>
+
+      <section>
+        <h2 className="text-2xl font-semibold mb-4">{t("transparency")}</h2>
+        <div className="prose prose-invert max-w-none">
+          <p>
+            Cada donación se destina al mantenimiento de servidores, costes de hosting,
+            y equipamiento para la grabación de los audiolibros narrativos. Publicamos
+            un desglose mensual de gastos.
+          </p>
+        </div>
+      </section>
+    </div>
+  );
+}

apps/web/src/app/[locale]/games/[slug]/documentary/page.tsx

@@ -0,0 +1,24 @@
+import { notFound } from "next/navigation";
+import { getDocumentaryByGameSlug } from "@/lib/api";
+import { DocumentaryLayout } from "@/components/documentary/DocumentaryLayout";
+
+export default async function DocumentaryPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+
+  let documentary;
+  try {
+    documentary = await getDocumentaryByGameSlug(slug, locale);
+  } catch {
+    notFound();
+  }
+
+  if (!documentary || !documentary.chapters?.length) {
+    notFound();
+  }
+
+  return <DocumentaryLayout documentary={documentary} />;
+}

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

@@ -0,0 +1,35 @@
+import { notFound } from "next/navigation";
+import { getGameBySlug } from "@/lib/api";
+import { GameHeader } from "@/components/game/GameHeader";
+import { GameInfo } from "@/components/game/GameInfo";
+import { ScreenshotGallery } from "@/components/game/ScreenshotGallery";
+
+export default async function GamePage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+
+  let game;
+  try {
+    const res = await getGameBySlug(slug, locale);
+    game = Array.isArray(res.data) ? res.data[0] : res.data;
+  } catch {
+    notFound();
+  }
+
+  if (!game) notFound();
+
+  return (
+    <>
+      <GameHeader game={game} />
+      <div className="max-w-7xl mx-auto px-4 py-12">
+        <GameInfo game={game} locale={locale} />
+        {game.screenshots && (
+          <ScreenshotGallery screenshots={game.screenshots} />
+        )}
+      </div>
+    </>
+  );
+}

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

@@ -3,11 +3,17 @@ import { NextIntlClientProvider } from "next-intl";
 import { getMessages } from "next-intl/server";
 import { notFound } from "next/navigation";
 import { routing } from "@/i18n/routing";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
 import "./globals.css";
 
 export const metadata: Metadata = {
-  title: "Project Afterlife",
+  title: {
+    default: "Project Afterlife",
+    template: "%s | Project Afterlife",
+  },
   description: "Preserving online games that deserve a second life",
+  metadataBase: new URL(process.env.NEXT_PUBLIC_SITE_URL || "https://projectafterlife.dev"),
 };
 
 export default async function LocaleLayout({
@@ -25,9 +31,11 @@ export default async function LocaleLayout({
 
   return (
     <html lang={locale}>
-      <body>
+      <body className="bg-gray-950 text-white min-h-screen flex flex-col">
         <NextIntlClientProvider messages={messages}>
-          {children}
+          <Navbar />
+          <main className="flex-1 pt-16">{children}</main>
+          <Footer />
         </NextIntlClientProvider>
       </body>
     </html>

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/catalog/CatalogFilters.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+import { useRouter, useSearchParams, usePathname } from "next/navigation";
+import type { Genre, ServerStatus } from "@afterlife/shared";
+
+const GENRES: Genre[] = ["MMORPG", "FPS", "Casual", "Strategy", "Sports", "Other"];
+const STATUSES: ServerStatus[] = ["online", "maintenance", "coming_soon"];
+
+export function CatalogFilters() {
+  const t = useTranslations("catalog");
+  const tGame = useTranslations("game");
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentGenre = searchParams.get("genre") || "";
+  const currentStatus = searchParams.get("status") || "";
+
+  function setFilter(key: string, value: string) {
+    const params = new URLSearchParams(searchParams.toString());
+    if (value) {
+      params.set(key, value);
+    } else {
+      params.delete(key);
+    }
+    router.push(`${pathname}?${params.toString()}`);
+  }
+
+  return (
+    <div className="flex flex-wrap gap-4 mb-8">
+      <select
+        value={currentGenre}
+        onChange={(e) => setFilter("genre", e.target.value)}
+        className="bg-gray-900 border border-white/10 rounded-lg px-4 py-2 text-sm text-white"
+      >
+        <option value="">{t("filter_genre")}: {t("all")}</option>
+        {GENRES.map((g) => (
+          <option key={g} value={g}>{g}</option>
+        ))}
+      </select>
+      <select
+        value={currentStatus}
+        onChange={(e) => setFilter("status", e.target.value)}
+        className="bg-gray-900 border border-white/10 rounded-lg px-4 py-2 text-sm text-white"
+      >
+        <option value="">{t("filter_status")}: {t("all")}</option>
+        {STATUSES.map((s) => (
+          <option key={s} value={s}>
+            {tGame(`status_${s}`)}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

apps/web/src/components/catalog/CatalogGrid.tsx

@@ -0,0 +1,28 @@
+import { useTranslations } from "next-intl";
+import type { Game } from "@afterlife/shared";
+import { GameCard } from "../shared/GameCard";
+
+interface CatalogGridProps {
+  games: Game[];
+  locale: string;
+}
+
+export function CatalogGrid({ games, locale }: CatalogGridProps) {
+  const t = useTranslations("catalog");
+
+  if (games.length === 0) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-gray-500 text-lg">{t("no_results")}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {games.map((game) => (
+        <GameCard key={game.id} game={game} locale={locale} />
+      ))}
+    </div>
+  );
+}

apps/web/src/components/documentary/AudioPlayer.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+interface AudioPlayerProps {
+  trackTitle: string | null;
+  isPlaying: boolean;
+  progress: number;
+  duration: number;
+  playbackRate: number;
+  continuousMode: boolean;
+  onToggle: () => void;
+  onSeek: (seconds: number) => void;
+  onChangeRate: (rate: number) => void;
+  onToggleContinuous: () => void;
+}
+
+const RATES = [0.5, 0.75, 1, 1.25, 1.5, 2];
+
+function formatTime(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+export function AudioPlayer({
+  trackTitle,
+  isPlaying,
+  progress,
+  duration,
+  playbackRate,
+  continuousMode,
+  onToggle,
+  onSeek,
+  onChangeRate,
+  onToggleContinuous,
+}: AudioPlayerProps) {
+  const t = useTranslations("audio");
+
+  if (!trackTitle) return null;
+
+  const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-gray-900/95 backdrop-blur-sm border-t border-white/10">
+      <div className="max-w-7xl mx-auto px-4 py-3">
+        {/* Progress bar */}
+        <div
+          className="w-full h-1 bg-gray-700 rounded-full mb-3 cursor-pointer"
+          onClick={(e) => {
+            const rect = e.currentTarget.getBoundingClientRect();
+            const ratio = (e.clientX - rect.left) / rect.width;
+            onSeek(ratio * duration);
+          }}
+        >
+          <div
+            className="h-full bg-blue-500 rounded-full transition-all"
+            style={{ width: `${progressPercent}%` }}
+          />
+        </div>
+
+        <div className="flex items-center gap-4">
+          {/* Play/Pause */}
+          <button
+            onClick={onToggle}
+            className="w-10 h-10 flex items-center justify-center bg-white rounded-full text-black hover:bg-gray-200 transition-colors"
+            aria-label={isPlaying ? t("pause") : t("play")}
+          >
+            {isPlaying ? "\u23F8" : "\u25B6"}
+          </button>
+
+          {/* Track info */}
+          <div className="flex-1 min-w-0">
+            <p className="text-sm text-white truncate">{trackTitle}</p>
+            <p className="text-xs text-gray-500">
+              {formatTime(progress)} / {formatTime(duration)}
+            </p>
+          </div>
+
+          {/* Speed selector */}
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-gray-500">{t("speed")}:</span>
+            <select
+              value={playbackRate}
+              onChange={(e) => onChangeRate(Number(e.target.value))}
+              className="bg-gray-800 border border-white/10 rounded px-2 py-1 text-xs text-white"
+            >
+              {RATES.map((r) => (
+                <option key={r} value={r}>
+                  {r}x
+                </option>
+              ))}
+            </select>
+          </div>
+
+          {/* Continuous mode toggle */}
+          <button
+            onClick={onToggleContinuous}
+            className={`text-xs px-3 py-1 rounded border transition-colors ${
+              continuousMode
+                ? "border-blue-500 text-blue-400"
+                : "border-white/10 text-gray-500 hover:text-white"
+            }`}
+          >
+            {continuousMode ? t("continuous_mode") : t("chapter_mode")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/documentary/ChapterContent.tsx

@@ -0,0 +1,28 @@
+import Image from "next/image";
+import type { Chapter } from "@afterlife/shared";
+
+interface ChapterContentProps {
+  chapter: Chapter;
+}
+
+export function ChapterContent({ chapter }: ChapterContentProps) {
+  return (
+    <article className="max-w-3xl">
+      {chapter.coverImage && (
+        <div className="relative aspect-video rounded-lg overflow-hidden mb-8">
+          <Image
+            src={chapter.coverImage.url}
+            alt={chapter.coverImage.alternativeText || chapter.title}
+            fill
+            className="object-cover"
+          />
+        </div>
+      )}
+      <h2 className="text-3xl font-bold mb-6">{chapter.title}</h2>
+      <div
+        className="prose prose-invert prose-lg max-w-none"
+        dangerouslySetInnerHTML={{ __html: chapter.content }}
+      />
+    </article>
+  );
+}

apps/web/src/components/documentary/ChapterNav.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import type { Chapter } from "@afterlife/shared";
+import { useTranslations } from "next-intl";
+
+interface ChapterNavProps {
+  chapters: Chapter[];
+  activeChapterId: number;
+  onSelectChapter: (id: number, index: number) => void;
+}
+
+export function ChapterNav({ chapters, activeChapterId, onSelectChapter }: ChapterNavProps) {
+  const t = useTranslations("documentary");
+
+  return (
+    <nav className="w-64 flex-shrink-0 hidden lg:block">
+      <div className="sticky top-20">
+        <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider mb-4">
+          {t("chapters")}
+        </h3>
+        <ol className="space-y-1">
+          {chapters.map((chapter, index) => (
+            <li key={chapter.id}>
+              <button
+                onClick={() => onSelectChapter(chapter.id, index)}
+                className={`w-full text-left px-3 py-2 rounded-lg text-sm transition-colors ${
+                  chapter.id === activeChapterId
+                    ? "bg-blue-600/20 text-blue-400 font-medium"
+                    : "text-gray-400 hover:text-white hover:bg-white/5"
+                }`}
+              >
+                <span className="text-xs text-gray-600 mr-2">{index + 1}.</span>
+                {chapter.title}
+              </button>
+            </li>
+          ))}
+        </ol>
+      </div>
+    </nav>
+  );
+}

apps/web/src/components/documentary/DocumentaryLayout.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { Documentary, Chapter } from "@afterlife/shared";
+import { ChapterNav } from "./ChapterNav";
+import { ChapterContent } from "./ChapterContent";
+import { AudioPlayer } from "./AudioPlayer";
+import { ReadingProgress } from "./ReadingProgress";
+import { useAudioPlayer } from "@/hooks/useAudioPlayer";
+
+interface DocumentaryLayoutProps {
+  documentary: Documentary;
+}
+
+export function DocumentaryLayout({ documentary }: DocumentaryLayoutProps) {
+  const chapters = [...documentary.chapters].sort((a, b) => a.order - b.order);
+  const [activeChapter, setActiveChapter] = useState<Chapter>(chapters[0]);
+
+  const audio = useAudioPlayer();
+
+  useEffect(() => {
+    const audioTracks = chapters
+      .filter((ch) => ch.audioFile)
+      .map((ch) => ({
+        id: ch.id,
+        title: ch.title,
+        url: ch.audioFile!.url,
+        duration: ch.audioDuration ?? 0,
+      }));
+    audio.setTracks(audioTracks);
+    if (audioTracks.length > 0) {
+      audio.loadTrack(0);
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  function handleSelectChapter(chapterId: number, index: number) {
+    const chapter = chapters.find((c) => c.id === chapterId);
+    if (chapter) {
+      setActiveChapter(chapter);
+      const trackIndex = audio.tracks.findIndex((t) => t.id === chapterId);
+      if (trackIndex !== -1) {
+        audio.goToTrack(trackIndex);
+      }
+    }
+  }
+
+  return (
+    <>
+      <ReadingProgress />
+      <div className="max-w-7xl mx-auto px-4 py-12 flex gap-8">
+        <ChapterNav
+          chapters={chapters}
+          activeChapterId={activeChapter.id}
+          onSelectChapter={handleSelectChapter}
+        />
+        <div className="flex-1 pb-24">
+          <ChapterContent chapter={activeChapter} />
+        </div>
+      </div>
+      <AudioPlayer
+        trackTitle={audio.currentTrack?.title ?? null}
+        isPlaying={audio.isPlaying}
+        progress={audio.progress}
+        duration={audio.duration}
+        playbackRate={audio.playbackRate}
+        continuousMode={audio.continuousMode}
+        onToggle={audio.toggle}
+        onSeek={audio.seek}
+        onChangeRate={audio.changeRate}
+        onToggleContinuous={() => audio.setContinuousMode(!audio.continuousMode)}
+      />
+    </>
+  );
+}

apps/web/src/components/documentary/ReadingProgress.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function ReadingProgress() {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    function handleScroll() {
+      const scrollTop = window.scrollY;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      setProgress(docHeight > 0 ? (scrollTop / docHeight) * 100 : 0);
+    }
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <div className="fixed top-16 left-0 right-0 z-40 h-0.5 bg-gray-800">
+      <div
+        className="h-full bg-blue-500 transition-all duration-150"
+        style={{ width: `${progress}%` }}
+      />
+    </div>
+  );
+}

apps/web/src/components/game/GameHeader.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+import type { Game } from "@afterlife/shared";
+
+interface GameHeaderProps {
+  game: Game;
+}
+
+export function GameHeader({ game }: GameHeaderProps) {
+  return (
+    <div className="relative h-[50vh] overflow-hidden">
+      {game.coverImage && (
+        <Image
+          src={game.coverImage.url}
+          alt={game.title}
+          fill
+          className="object-cover"
+          priority
+        />
+      )}
+      <div className="absolute inset-0 bg-gradient-to-t from-gray-950 via-gray-950/60 to-transparent" />
+      <div className="absolute bottom-0 left-0 right-0 p-8 max-w-7xl mx-auto">
+        <h1 className="text-5xl font-bold mb-2">{game.title}</h1>
+        <p className="text-gray-400 text-lg">
+          {game.developer} · {game.releaseYear}–{game.shutdownYear}
+        </p>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/game/GameInfo.tsx

@@ -0,0 +1,79 @@
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import type { Game } from "@afterlife/shared";
+
+interface GameInfoProps {
+  game: Game;
+  locale: string;
+}
+
+export function GameInfo({ game, locale }: GameInfoProps) {
+  const t = useTranslations("game");
+
+  const statusColors = {
+    online: "text-green-400",
+    maintenance: "text-yellow-400",
+    coming_soon: "text-blue-400",
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <div className="md:col-span-2">
+        <div
+          className="prose prose-invert max-w-none"
+          dangerouslySetInnerHTML={{ __html: game.description }}
+        />
+      </div>
+      <div className="space-y-6">
+        <div className="bg-gray-900 rounded-lg p-6 border border-white/5">
+          <dl className="space-y-4 text-sm">
+            <div>
+              <dt className="text-gray-500">{t("developer")}</dt>
+              <dd className="text-white font-medium">{game.developer}</dd>
+            </div>
+            {game.publisher && (
+              <div>
+                <dt className="text-gray-500">{t("publisher")}</dt>
+                <dd className="text-white font-medium">{game.publisher}</dd>
+              </div>
+            )}
+            <div>
+              <dt className="text-gray-500">{t("released")}</dt>
+              <dd className="text-white font-medium">{game.releaseYear}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">{t("shutdown")}</dt>
+              <dd className="text-white font-medium">{game.shutdownYear}</dd>
+            </div>
+            <div>
+              <dt className="text-gray-500">{t("server_status")}</dt>
+              <dd className={`font-medium ${statusColors[game.serverStatus]}`}>
+                {t(`status_${game.serverStatus}`)}
+              </dd>
+            </div>
+          </dl>
+          <div className="mt-6 space-y-3">
+            {game.serverLink && game.serverStatus === "online" && (
+              <a
+                href={game.serverLink}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block w-full text-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors font-medium"
+              >
+                {t("play_now")}
+              </a>
+            )}
+            {game.documentary && (
+              <Link
+                href={`/${locale}/games/${game.slug}/documentary`}
+                className="block w-full text-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors font-medium"
+              >
+                {t("view_documentary")}
+              </Link>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/game/ScreenshotGallery.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import type { StrapiMedia } from "@afterlife/shared";
+
+interface ScreenshotGalleryProps {
+  screenshots: StrapiMedia[];
+}
+
+export function ScreenshotGallery({ screenshots }: ScreenshotGalleryProps) {
+  const [selected, setSelected] = useState(0);
+
+  if (screenshots.length === 0) return null;
+
+  return (
+    <div className="mt-12">
+      <div className="relative aspect-video rounded-lg overflow-hidden mb-4">
+        <Image
+          src={screenshots[selected].url}
+          alt={screenshots[selected].alternativeText || "Screenshot"}
+          fill
+          className="object-cover"
+        />
+      </div>
+      {screenshots.length > 1 && (
+        <div className="flex gap-2 overflow-x-auto pb-2">
+          {screenshots.map((ss, i) => (
+            <button
+              key={ss.id}
+              onClick={() => setSelected(i)}
+              className={`relative w-24 h-16 rounded overflow-hidden flex-shrink-0 border-2 transition-colors ${
+                i === selected ? "border-blue-500" : "border-transparent"
+              }`}
+            >
+              <Image
+                src={ss.url}
+                alt={ss.alternativeText || `Screenshot ${i + 1}`}
+                fill
+                className="object-cover"
+              />
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

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/layout/Footer.tsx

@@ -0,0 +1,13 @@
+import { useTranslations } from "next-intl";
+
+export function Footer() {
+  const t = useTranslations("footer");
+
+  return (
+    <footer className="bg-black border-t border-white/10 py-8">
+      <div className="max-w-7xl mx-auto px-4 text-center">
+        <p className="text-sm text-gray-500">{t("rights")}</p>
+      </div>
+    </footer>
+  );
+}

apps/web/src/components/layout/LanguageSwitcher.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { useLocale, useTranslations } from "next-intl";
+import { useRouter, usePathname } from "next/navigation";
+
+export function LanguageSwitcher() {
+  const locale = useLocale();
+  const router = useRouter();
+  const pathname = usePathname();
+  const t = useTranslations("footer");
+
+  function switchLocale(newLocale: string) {
+    const segments = pathname.split("/");
+    segments[1] = newLocale;
+    router.push(segments.join("/"));
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <span className="text-sm text-gray-400">{t("language")}:</span>
+      <button
+        onClick={() => switchLocale("es")}
+        className={`text-sm ${locale === "es" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
+      >
+        ES
+      </button>
+      <span className="text-gray-600">|</span>
+      <button
+        onClick={() => switchLocale("en")}
+        className={`text-sm ${locale === "en" ? "text-white font-bold" : "text-gray-400 hover:text-white"}`}
+      >
+        EN
+      </button>
+    </div>
+  );
+}

apps/web/src/components/layout/Navbar.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { LanguageSwitcher } from "./LanguageSwitcher";
+
+export function Navbar() {
+  const t = useTranslations("nav");
+  const locale = useLocale();
+
+  const links = [
+    { href: `/${locale}`, label: t("home") },
+    { href: `/${locale}/catalog`, label: t("catalog") },
+    { href: `/${locale}/about`, label: t("about") },
+    { href: `/${locale}/donate`, label: t("donate") },
+  ];
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-black/90 backdrop-blur-sm border-b border-white/10">
+      <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
+        <Link href={`/${locale}`} className="text-xl font-bold text-white tracking-tight">
+          Project Afterlife
+        </Link>
+        <div className="flex items-center gap-6">
+          {links.map((link) => (
+            <Link
+              key={link.href}
+              href={link.href}
+              className="text-sm text-gray-300 hover:text-white transition-colors"
+            >
+              {link.label}
+            </Link>
+          ))}
+          <LanguageSwitcher />
+        </div>
+      </div>
+    </nav>
+  );
+}

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>
+  );
+}

apps/web/src/hooks/useAudioPlayer.ts

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Howl } from "howler";
+
+interface AudioTrack {
+  id: number;
+  title: string;
+  url: string;
+  duration: number;
+}
+
+export function useAudioPlayer() {
+  const [tracks, setTracks] = useState<AudioTrack[]>([]);
+  const [currentTrackIndex, setCurrentTrackIndex] = useState(0);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [duration, setDuration] = useState(0);
+  const [playbackRate, setPlaybackRate] = useState(1);
+  const [continuousMode, setContinuousMode] = useState(false);
+  const howlRef = useRef<Howl | null>(null);
+  const animFrameRef = useRef<number>(0);
+
+  const currentTrack = tracks[currentTrackIndex] ?? null;
+
+  const destroyHowl = useCallback(() => {
+    if (howlRef.current) {
+      howlRef.current.unload();
+      howlRef.current = null;
+    }
+    cancelAnimationFrame(animFrameRef.current);
+  }, []);
+
+  const loadTrack = useCallback(
+    (index: number) => {
+      if (!tracks[index]) return;
+      destroyHowl();
+
+      const howl = new Howl({
+        src: [tracks[index].url],
+        html5: true,
+        rate: playbackRate,
+        onplay: () => {
+          setIsPlaying(true);
+          const updateProgress = () => {
+            if (howl.playing()) {
+              setProgress(howl.seek() as number);
+              animFrameRef.current = requestAnimationFrame(updateProgress);
+            }
+          };
+          animFrameRef.current = requestAnimationFrame(updateProgress);
+        },
+        onpause: () => setIsPlaying(false),
+        onstop: () => setIsPlaying(false),
+        onend: () => {
+          setIsPlaying(false);
+          if (continuousMode && index < tracks.length - 1) {
+            setCurrentTrackIndex(index + 1);
+          }
+        },
+        onload: () => {
+          setDuration(howl.duration());
+        },
+      });
+
+      howlRef.current = howl;
+      setCurrentTrackIndex(index);
+      setProgress(0);
+    },
+    [tracks, playbackRate, continuousMode, destroyHowl]
+  );
+
+  const play = useCallback(() => howlRef.current?.play(), []);
+  const pause = useCallback(() => howlRef.current?.pause(), []);
+  const toggle = useCallback(() => {
+    if (isPlaying) pause();
+    else play();
+  }, [isPlaying, play, pause]);
+
+  const seek = useCallback((seconds: number) => {
+    howlRef.current?.seek(seconds);
+    setProgress(seconds);
+  }, []);
+
+  const changeRate = useCallback(
+    (rate: number) => {
+      setPlaybackRate(rate);
+      howlRef.current?.rate(rate);
+    },
+    []
+  );
+
+  const goToTrack = useCallback(
+    (index: number) => {
+      loadTrack(index);
+      setTimeout(() => howlRef.current?.play(), 100);
+    },
+    [loadTrack]
+  );
+
+  useEffect(() => {
+    return () => destroyHowl();
+  }, [destroyHowl]);
+
+  return {
+    tracks,
+    setTracks,
+    currentTrack,
+    currentTrackIndex,
+    isPlaying,
+    progress,
+    duration,
+    playbackRate,
+    continuousMode,
+    setContinuousMode,
+    loadTrack,
+    play,
+    pause,
+    toggle,
+    seek,
+    changeRate,
+    goToTrack,
+  };
+}

apps/web/src/lib/api.ts

@@ -0,0 +1,56 @@
+import type {
+  Game,
+  Documentary,
+  Chapter,
+  StrapiListResponse,
+  StrapiResponse,
+} from "@afterlife/shared";
+import { strapiGet } from "./strapi";
+
+export async function getGames(locale: string): Promise<StrapiListResponse<Game>> {
+  return strapiGet({
+    path: "/games",
+    locale,
+    params: {
+      "populate[coverImage]": "*",
+      "populate[documentary]": "*",
+      "sort": "createdAt:desc",
+    },
+  });
+}
+
+export async function getGameBySlug(slug: string, locale: string): Promise<StrapiResponse<Game>> {
+  return strapiGet({
+    path: "/games",
+    locale,
+    params: {
+      "filters[slug][$eq]": slug,
+      "populate[coverImage]": "*",
+      "populate[screenshots]": "*",
+      "populate[documentary][populate][chapters][populate]": "*",
+    },
+  });
+}
+
+export async function getDocumentaryByGameSlug(
+  slug: string,
+  locale: string
+): Promise<Documentary | null> {
+  const gameRes = await getGameBySlug(slug, locale);
+  const game = Array.isArray(gameRes.data) ? gameRes.data[0] : gameRes.data;
+  return game?.documentary ?? null;
+}
+
+export async function getChapter(
+  chapterId: number,
+  locale: string
+): Promise<StrapiResponse<Chapter>> {
+  return strapiGet({
+    path: `/chapters/${chapterId}`,
+    locale,
+    params: {
+      "populate[audioFile]": "*",
+      "populate[coverImage]": "*",
+    },
+  });
+}

apps/web/src/lib/metadata.ts

@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+
+const BASE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://projectafterlife.dev";
+
+export function createMetadata({
+  title,
+  description,
+  image,
+  path = "",
+}: {
+  title: string;
+  description: string;
+  image?: string;
+  path?: string;
+}): Metadata {
+  const url = `${BASE_URL}${path}`;
+  return {
+    title: `${title} | Project Afterlife`,
+    description,
+    openGraph: {
+      title,
+      description,
+      url,
+      siteName: "Project Afterlife",
+      images: image ? [{ url: image, width: 1200, height: 630 }] : [],
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title,
+      description,
+      images: image ? [image] : [],
+    },
+  };
+}

apps/web/src/lib/strapi.ts

@@ -0,0 +1,35 @@
+const STRAPI_URL = process.env.STRAPI_URL || "http://localhost:1337";
+const STRAPI_TOKEN = process.env.STRAPI_API_TOKEN;
+
+interface FetchOptions {
+  path: string;
+  params?: Record<string, string>;
+  locale?: string;
+}
+
+export async function strapiGet<T>({ path, params, locale }: FetchOptions): Promise<T> {
+  const url = new URL(`/api${path}`, STRAPI_URL);
+
+  if (locale) url.searchParams.set("locale", locale);
+  if (params) {
+    for (const [key, value] of Object.entries(params)) {
+      url.searchParams.set(key, value);
+    }
+  }
+
+  const headers: HeadersInit = { "Content-Type": "application/json" };
+  if (STRAPI_TOKEN) {
+    headers.Authorization = `Bearer ${STRAPI_TOKEN}`;
+  }
+
+  const res = await fetch(url.toString(), {
+    headers,
+    next: { revalidate: 60 },
+  });
+
+  if (!res.ok) {
+    throw new Error(`Strapi error: ${res.status} ${res.statusText}`);
+  }
+
+  return res.json();
+}

docker/.env.example

@@ -0,0 +1,19 @@
+# Database
+DATABASE_NAME=afterlife
+DATABASE_USERNAME=afterlife
+DATABASE_PASSWORD=change_me_in_production
+
+# Strapi
+APP_KEYS=key1,key2,key3,key4
+API_TOKEN_SALT=change_me
+ADMIN_JWT_SECRET=change_me
+TRANSFER_TOKEN_SALT=change_me
+JWT_SECRET=change_me
+STRAPI_API_TOKEN=your_api_token_after_first_boot
+
+# MinIO
+MINIO_ROOT_USER=afterlife
+MINIO_ROOT_PASSWORD=change_me_in_production
+
+# Public URL (for frontend image/media URLs)
+PUBLIC_STRAPI_URL=http://yourdomain.com

docker/docker-compose.yml

@@ -0,0 +1,89 @@
+services:
+  postgres:
+    image: postgres:16-alpine
+    restart: unless-stopped
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    environment:
+      POSTGRES_DB: ${DATABASE_NAME:-afterlife}
+      POSTGRES_USER: ${DATABASE_USERNAME:-afterlife}
+      POSTGRES_PASSWORD: ${DATABASE_PASSWORD:-afterlife}
+    ports:
+      - "5432:5432"
+
+  minio:
+    image: minio/minio:latest
+    restart: unless-stopped
+    command: server /data --console-address ":9001"
+    volumes:
+      - minio_data:/data
+    environment:
+      MINIO_ROOT_USER: ${MINIO_ROOT_USER:-afterlife}
+      MINIO_ROOT_PASSWORD: ${MINIO_ROOT_PASSWORD:-afterlife123}
+    ports:
+      - "9000:9000"
+      - "9001:9001"
+
+  cms:
+    build:
+      context: ../apps/cms
+      dockerfile: Dockerfile
+    restart: unless-stopped
+    depends_on:
+      - postgres
+      - minio
+    environment:
+      HOST: 0.0.0.0
+      PORT: 1337
+      DATABASE_HOST: postgres
+      DATABASE_PORT: 5432
+      DATABASE_NAME: ${DATABASE_NAME:-afterlife}
+      DATABASE_USERNAME: ${DATABASE_USERNAME:-afterlife}
+      DATABASE_PASSWORD: ${DATABASE_PASSWORD:-afterlife}
+      APP_KEYS: ${APP_KEYS}
+      API_TOKEN_SALT: ${API_TOKEN_SALT}
+      ADMIN_JWT_SECRET: ${ADMIN_JWT_SECRET}
+      TRANSFER_TOKEN_SALT: ${TRANSFER_TOKEN_SALT}
+      JWT_SECRET: ${JWT_SECRET}
+    ports:
+      - "1337:1337"
+
+  web:
+    build:
+      context: ../
+      dockerfile: apps/web/Dockerfile
+    restart: unless-stopped
+    depends_on:
+      - cms
+    environment:
+      STRAPI_URL: http://cms:1337
+      STRAPI_API_TOKEN: ${STRAPI_API_TOKEN}
+      NEXT_PUBLIC_STRAPI_URL: ${PUBLIC_STRAPI_URL:-http://localhost:1337}
+    ports:
+      - "3000:3000"
+
+  nginx:
+    image: nginx:alpine
+    restart: unless-stopped
+    depends_on:
+      - web
+      - cms
+    ports:
+      - "80:80"
+      - "443:443"
+    volumes:
+      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
+      - certbot_certs:/etc/letsencrypt:ro
+      - certbot_www:/var/www/certbot:ro
+
+  certbot:
+    image: certbot/certbot
+    volumes:
+      - certbot_certs:/etc/letsencrypt
+      - certbot_www:/var/www/certbot
+
+volumes:
+  postgres_data:
+  minio_data:
+  certbot_certs:
+  certbot_www:

docker/nginx/nginx.conf

@@ -0,0 +1,58 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    upstream web {
+        server web:3000;
+    }
+
+    upstream cms {
+        server cms:1337;
+    }
+
+    server {
+        listen 80;
+        server_name _;
+
+        client_max_body_size 100M;
+
+        location / {
+            proxy_pass http://web;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection "upgrade";
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /api/ {
+            proxy_pass http://cms;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /admin {
+            proxy_pass http://cms;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location /uploads/ {
+            proxy_pass http://cms;
+            proxy_set_header Host $host;
+        }
+
+        location /.well-known/acme-challenge/ {
+            root /var/www/certbot;
+        }
+    }
+}

package-lock.json

@@ -37,6 +37,8 @@
       "version": "0.1.0",
       "dependencies": {
         "@afterlife/shared": "*",
+        "framer-motion": "^12.34.3",
+        "howler": "^2.2.4",
         "next": "^15",
         "next-intl": "^4.8.3",
         "react": "^19",
@@ -44,6 +46,7 @@
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
+        "@types/howler": "^2.2.12",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -7432,6 +7435,12 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/howler": {
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@types/howler/-/howler-2.2.12.tgz",
+      "integrity": "sha512-hy769UICzOSdK0Kn1FBk4gN+lswcj1EKRkmiDtMkUGvFfYJzgaDXmVXkSShS2m89ERAatGIPnTUlp2HhfkVo5g==",
+      "dev": true
+    },
     "node_modules/@types/html-minifier-terser": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz",
@@ -13504,6 +13513,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw=="
     },
+    "node_modules/howler": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.2.4.tgz",
+      "integrity": "sha512-iARIBPgcQrwtEr+tALF+rapJ8qSc+Set2GJQl7xT1MQzWaVkFebdJhR3alVlSiUf5U7nAANKuj3aWpwerocD5w=="
+    },
     "node_modules/html-entities": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.6.0.tgz",