Refactor for i18n, CMS integration, and project slugs; enhance admin & analytics

Co-authored-by: dennis <dennis@konkol.net>

app/privacy-policy/page.tsx

@@ -6,8 +6,34 @@ import { ArrowLeft } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "../components/RichTextClient";
 
 export default function PrivacyPolicy() {
+  const locale = useLocale();
+  const t = useTranslations("common");
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("privacy-policy")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+          setCmsTitle((data.content.title as string | null) ?? null);
+        }
+      } catch {
+        // ignore; fallback to static content
+      }
+    })();
+  }, [locale]);
+
   return (
     <div className="min-h-screen animated-bg">
       <Header />
@@ -19,15 +45,15 @@ export default function PrivacyPolicy() {
           className="mb-8"
         >
           <motion.a
-            href="/"
+            href={`/${locale}`}
             className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
           >
             <ArrowLeft size={20} />
-            <span>Back to Home</span>
+            <span>{t("backToHome")}</span>
           </motion.a>
           
           <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            Datenschutzerklärung
+            {cmsTitle || "Datenschutzerklärung"}
           </h1>
         </motion.div>
 
@@ -37,59 +63,77 @@ export default function PrivacyPolicy() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="glass-card p-8 rounded-2xl space-y-6 text-white"
         >
-          <div className="text-gray-300 leading-relaxed">
-            <p>
-              Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie 
-              über die Verarbeitung personenbezogener Daten im Rahmen meines Internet-Angebots.
-            </p>
-          </div>
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
+          ) : (
+            <>
+              <div className="text-gray-300 leading-relaxed">
+                <p>
+                  Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie
+                  über die Verarbeitung personenbezogener Daten im Rahmen meines Internet-Angebots.
+                </p>
+              </div>
 
-          <div className="text-gray-300 leading-relaxed">
-            <h2 className="text-2xl font-semibold mb-4">
-              Verantwortlicher für die Datenverarbeitung
-            </h2>
-            <div className="space-y-2 text-gray-300">
-              <p><strong>Name:</strong> Dennis Konkol</p>
-              <p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-              <p><strong>E-Mail:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">info@dk0.dev</Link></p>
-              <p><strong>Website:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">dk0.dev</Link></p>
-            </div>
-            <p className="mt-4">
-              Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.
-            </p>
-          </div>
-        <h2 className="text-2xl font-semibold mt-6">
-          Erfassung allgemeiner Informationen beim Besuch meiner Website
-        </h2>
-        <div className="mt-2">
-          Beim Zugriff auf meiner Website werden automatisch Informationen
-          allgemeiner Natur erfasst. Diese beinhalten unter anderem:
-          <ul className="list-disc list-inside mt-2">
-            <li>IP-Adresse (in anonymisierter Form)</li>
-            <li>Uhrzeit</li>
-            <li>Browsertyp</li>
-            <li>Verwendetes Betriebssystem</li>
-            <li>Referrer-URL (die zuvor besuchte Seite)</li>
-          </ul>
-          <br />
-          Diese Informationen werden anonymisiert erfasst und dienen
-          ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre
-          Person sind nicht möglich. Diese Daten werden verarbeitet, um:
-          <ul className="list-disc list-inside mt-2">
-            <li>die Inhalte meiner Website korrekt auszuliefern,</li>
-            <li>die Inhalte meiner Website zu optimieren,</li>
-            <li>die Systemsicherheit und -stabilität zu analysiern.</li>
-          </ul>
-        </div>
-        <h2 className="text-2xl font-semibold mt-6">Cookies</h2>
-        <p className="mt-2">
-          Meine Website verwendet keine Cookies. Daher ist kein
-          Cookie-Consent-Banner erforderlich.
-        </p>
-        <h2 className="text-2xl font-semibold mt-6">
-          Analyse- und Tracking-Tools
-        </h2>
-        <p className="mt-2">
+              <div className="text-gray-300 leading-relaxed">
+                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Datenverarbeitung</h2>
+                <div className="space-y-2 text-gray-300">
+                  <p>
+                    <strong>Name:</strong> Dennis Konkol
+                  </p>
+                  <p>
+                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
+                  </p>
+                  <p>
+                    <strong>E-Mail:</strong>{" "}
+                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">
+                      info@dk0.dev
+                    </Link>
+                  </p>
+                  <p>
+                    <strong>Website:</strong>{" "}
+                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">
+                      dk0.dev
+                    </Link>
+                  </p>
+                </div>
+                <p className="mt-4">
+                  Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
+                  Verantwortlichen.
+                </p>
+              </div>
+
+              <h2 className="text-2xl font-semibold mt-6">
+                Erfassung allgemeiner Informationen beim Besuch meiner Website
+              </h2>
+              <div className="mt-2">
+                Beim Zugriff auf meiner Website werden automatisch Informationen allgemeiner Natur erfasst. Diese
+                beinhalten unter anderem:
+                <ul className="list-disc list-inside mt-2">
+                  <li>IP-Adresse (in anonymisierter Form)</li>
+                  <li>Uhrzeit</li>
+                  <li>Browsertyp</li>
+                  <li>Verwendetes Betriebssystem</li>
+                  <li>Referrer-URL (die zuvor besuchte Seite)</li>
+                </ul>
+                <br />
+                Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
+                Rückschlüsse auf Ihre Person sind nicht möglich. Diese Daten werden verarbeitet, um:
+                <ul className="list-disc list-inside mt-2">
+                  <li>die Inhalte meiner Website korrekt auszuliefern,</li>
+                  <li>die Inhalte meiner Website zu optimieren,</li>
+                  <li>die Systemsicherheit und -stabilität zu analysiern.</li>
+                </ul>
+              </div>
+
+              <h2 className="text-2xl font-semibold mt-6">Cookies</h2>
+              <p className="mt-2">
+                Diese Website verwendet ein technisch notwendiges Cookie, um deine Datenschutz-Einstellungen (z.B.
+                Analytics/Chatbot) zu speichern. Ohne dieses Cookie wäre ein Consent-Banner bei jedem Besuch erneut
+                nötig.
+              </p>
+
+              <h2 className="text-2xl font-semibold mt-6">Analyse- und Tracking-Tools</h2>
+              <p className="mt-2">
           Die nachfolgend beschriebene Analyse- und Tracking-Methode (im
           Folgenden „Maßnahme“ genannt) basiert auf Art. 6 Abs. 1 S. 1 lit. f
           DSGVO. Durch diese Maßnahme möchten ich eine benutzerfreundliche
@@ -118,6 +162,11 @@ export default function PrivacyPolicy() {
           </Link>
           .
         </p>
+        <p className="mt-4">
+          Zusätzlich kann diese Website optionale, selbst gehostete
+          Nutzungsstatistiken erfassen (z.B. Seitenaufrufe, Performance-Metriken),
+          die erst nach deiner Einwilligung im Consent-Banner aktiviert werden.
+        </p>
         <h2 className="text-2xl font-semibold mt-6">Kontaktformular</h2>
         <p className="mt-2">
           Wenn Sie das Kontaktformular nutzen, werden Ihre Angaben zur
@@ -126,6 +175,17 @@ export default function PrivacyPolicy() {
           <br />
           Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
         </p>
+        <h2 className="text-2xl font-semibold mt-6">Chatbot</h2>
+        <p className="mt-2">
+          Wenn du den optionalen Chatbot nutzt, werden die von dir eingegebenen
+          Nachrichten verarbeitet, um eine Antwort zu generieren. Die Verarbeitung
+          kann dabei über eine selbst gehostete Automations-/Chat-Infrastruktur
+          (z.B. n8n) erfolgen. Bitte gib im Chat keine sensiblen Daten ein.
+          <br />
+          <br />
+          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung) – der
+          Chatbot wird erst nach Aktivierung im Consent-Banner geladen.
+        </p>
         <h2 className="text-2xl font-semibold mt-6">Social Media Links</h2>
         <p className="mt-2">
           Unsere Website enthält Links zu GitHub und LinkedIn. Durch das
@@ -233,6 +293,8 @@ export default function PrivacyPolicy() {
           <div className="pt-4 border-t border-gray-700">
             <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
           </div>
+            </>
+          )}
         </motion.div>
       </main>
       <Footer />