Add i18n to home sections, improve consent management and middleware asset handling

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

app/components/Hero.tsx

@@ -4,12 +4,13 @@ import { motion } from "framer-motion";
 import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
 import Image from "next/image";
 import { useEffect, useState } from "react";
-import { useLocale } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 
 const Hero = () => {
   const locale = useLocale();
+  const t = useTranslations("home.hero");
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
 
   useEffect(() => {
@@ -29,9 +30,9 @@ const Hero = () => {
   }, [locale]);
 
   const features = [
-    { icon: Code, text: "Next.js & Flutter" },
-    { icon: Zap, text: "Docker Swarm & CI/CD" },
-    { icon: Rocket, text: "Self-Hosted Infrastructure" },
+    { icon: Code, text: t("features.f1") },
+    { icon: Zap, text: t("features.f2") },
+    { icon: Rocket, text: t("features.f3") },
   ];
 
   return (
@@ -178,21 +179,7 @@ const Hero = () => {
           {cmsDoc ? (
             <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
           ) : (
-            <p>
-              Student and passionate{" "}
-              <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
-                self-hoster
-              </span>{" "}
-              building full-stack web apps and mobile solutions. I run my own{" "}
-              <span className="text-stone-900 font-semibold decoration-liquid-lavender decoration-2 underline underline-offset-4">
-                infrastructure
-              </span>{" "}
-              and love exploring{" "}
-              <span className="text-stone-900 font-semibold decoration-liquid-rose decoration-2 underline underline-offset-4">
-                DevOps
-              </span>
-              .
-            </p>
+            <p>{t("description")}</p>
           )}
         </motion.div>
 
@@ -238,7 +225,7 @@ const Hero = () => {
             transition={{ duration: 0.3, ease: "easeOut" }}
             className="px-8 py-4 bg-stone-900 text-cream rounded-full shadow-lg hover:shadow-xl hover:bg-stone-950 transition-all duration-500 flex items-center gap-2"
           >
-            <span className="text-cream">View My Work</span>
+            <span className="text-cream">{t("ctaWork")}</span>
             <ArrowDown size={18} />
           </motion.a>
 
@@ -249,7 +236,7 @@ const Hero = () => {
             transition={{ duration: 0.3, ease: "easeOut" }}
             className="px-8 py-4 bg-white text-stone-900 border border-stone-200 rounded-full font-medium shadow-sm hover:shadow-md transition-all duration-500"
           >
-            <span>Contact Me</span>
+            <span>{t("ctaContact")}</span>
           </motion.a>
         </motion.div>
       </div>