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

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

app/components/Contact.tsx

@@ -4,15 +4,36 @@ import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Mail, MapPin, Send } from "lucide-react";
 import { useToast } from "@/components/Toast";
+import { useLocale } from "next-intl";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "./RichTextClient";
 
 const Contact = () => {
   const [mounted, setMounted] = useState(false);
   const { showEmailSent, showEmailError } = useToast();
+  const locale = useLocale();
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("home-contact")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+        }
+      } catch {
+        // ignore; fallback to static
+      }
+    })();
+  }, [locale]);
+
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -164,10 +185,14 @@ const Contact = () => {
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
             Contact Me
           </h2>
-          <p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
-            Interested in working together or have questions about my projects?
-            Feel free to reach out!
-          </p>
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-2xl mx-auto mt-4 text-stone-700" />
+          ) : (
+            <p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
+              Interested in working together or have questions about my projects?
+              Feel free to reach out!
+            </p>
+          )}
         </motion.div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">