feat: add multilingual about page with imprint and privacy info

app/[locale]/about/page.tsx

@@ -0,0 +1,163 @@
+import { getTranslations } from "next-intl/server";
+import { Link } from "@/lib/navigation";
+
+interface AboutPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function AboutPage({ params }: AboutPageProps) {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "About" });
+
+  const sheetUrl =
+    "https://docs.google.com/spreadsheets/d/1LuMkDsnidlvMtzzSqwrz-GACnqMaqzs-VBa-ZK0nZeI/edit?usp=sharing";
+
+  return (
+    <main
+      style={{
+        maxWidth: "960px",
+        margin: "0 auto",
+        padding: "2rem 1rem",
+        lineHeight: 1.6,
+      }}
+    >
+      <h1 style={{ fontSize: "2rem", marginBottom: "1rem" }}>{t("title")}</h1>
+      <p style={{ marginBottom: "2rem", color: "#4b5563" }}>{t("intro")}</p>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("projectTitle")}
+        </h2>
+        <p style={{ marginBottom: "0.5rem" }}>{t("projectPrivateNote")}</p>
+        <p style={{ marginBottom: "0.5rem" }}>{t("projectIdea")}</p>
+      </section>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("imprintTitle")}
+        </h2>
+        <p style={{ marginBottom: "0.25rem" }}>
+          <strong>{t("imprintOperator")}</strong>
+        </p>
+        <p style={{ marginBottom: "0.25rem" }}>Max Mustermann</p>
+        <p style={{ marginBottom: "0.25rem" }}>Musterstraße 1</p>
+        <p style={{ marginBottom: "0.25rem" }}>12345 Musterstadt</p>
+        <p style={{ marginBottom: "0.5rem" }}>{t("imprintCountry")}</p>
+        <p style={{ marginBottom: "0.25rem" }}>
+          {t("imprintEmailLabel")}{" "}
+          <a href="mailto:kontakt@example.com">kontakt@example.com</a>
+        </p>
+        <p
+          style={{ marginTop: "0.5rem", fontSize: "0.9rem", color: "#6b7280" }}
+        >
+          {t("imprintDisclaimer")}
+        </p>
+      </section>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("costsTitle")}
+        </h2>
+        <p style={{ marginBottom: "0.5rem" }}>{t("costsIntro")}</p>
+        <ul
+          style={{
+            marginLeft: "1.25rem",
+            marginBottom: "0.75rem",
+            listStyleType: "disc",
+          }}
+        >
+          <li>{t("costsDomain")}</li>
+          <li>{t("costsServer")}</li>
+          <li>{t("costsEmail")}</li>
+          <li>{t("costsLicenses")}</li>
+        </ul>
+        <p style={{ marginBottom: "0.5rem" }}>
+          {t.rich("costsSheetLinkText", {
+            link: (chunks) => (
+              <a
+                href={sheetUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                style={{ textDecoration: "underline" }}
+              >
+                {chunks}
+              </a>
+            ),
+          })}
+        </p>
+        <p
+          style={{
+            marginBottom: "0.75rem",
+            fontSize: "0.9rem",
+            color: "#6b7280",
+          }}
+        >
+          {t("costsSheetPrivacyNote")}
+        </p>
+        <div
+          style={{
+            border: "1px solid #e5e7eb",
+            borderRadius: "0.5rem",
+            overflow: "hidden",
+            minHeight: "300px",
+          }}
+        >
+          <iframe
+            src={sheetUrl}
+            title="Hördle Kostenübersicht"
+            style={{ width: "100%", height: "400px", border: "0" }}
+            loading="lazy"
+          />
+        </div>
+      </section>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("privacyTitle")}
+        </h2>
+        <p style={{ marginBottom: "0.5rem" }}>{t("privacyIntro")}</p>
+        <h3
+          style={{
+            fontSize: "1.25rem",
+            marginTop: "1rem",
+            marginBottom: "0.5rem",
+          }}
+        >
+          {t("privacyPlausibleTitle")}
+        </h3>
+        <p style={{ marginBottom: "0.5rem" }}>
+          {t("privacyPlausibleSelfHosted")}
+        </p>
+        <ul
+          style={{
+            marginLeft: "1.25rem",
+            marginBottom: "0.75rem",
+            listStyleType: "disc",
+          }}
+        >
+          <li>{t("privacyPlausibleNoCookies")}</li>
+          <li>{t("privacyPlausibleNoTrackingAcrossSites")}</li>
+          <li>{t("privacyPlausibleAggregated")}</li>
+        </ul>
+        <p style={{ marginBottom: "0.5rem" }}>{t("privacyServerLogs")}</p>
+        <p style={{ marginBottom: "0.5rem" }}>{t("privacyContact")}</p>
+        <p
+          style={{ marginTop: "0.5rem", fontSize: "0.9rem", color: "#6b7280" }}
+        >
+          {t("privacyNoLegalAdvice")}
+        </p>
+      </section>
+
+      <section style={{ marginBottom: "2rem" }}>
+        <h2 style={{ fontSize: "1.5rem", marginBottom: "0.5rem" }}>
+          {t("backTitle")}
+        </h2>
+        <p>
+          <Link href="/" style={{ textDecoration: "underline" }}>
+            {t("backToGame")}
+          </Link>
+        </p>
+      </section>
+    </main>
+  );
+}