From 7571ea3bab0c535381d8e2b908a161bb6d5c6f56 Mon Sep 17 00:00:00 2001
From: consultoria-as <consultoria-as@consultoria-as.com>
Date: Sun, 22 Feb 2026 04:09:15 +0000
Subject: [PATCH] feat: add About and Donate pages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/app/[locale]/about/page.tsx  | 42 +++++++++++++++++++
 apps/web/src/app/[locale]/donate/page.tsx | 51 +++++++++++++++++++++++
 2 files changed, 93 insertions(+)
 create mode 100644 apps/web/src/app/[locale]/about/page.tsx
 create mode 100644 apps/web/src/app/[locale]/donate/page.tsx

diff --git a/apps/web/src/app/[locale]/about/page.tsx b/apps/web/src/app/[locale]/about/page.tsx
new file mode 100644
index 0000000..53be660
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/web/src/app/[locale]/donate/page.tsx b/apps/web/src/app/[locale]/donate/page.tsx
new file mode 100644
index 0000000..6644dec
--- /dev/null
+++ b/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>
+  );
+}