From 7955dfbabbb4451fd0ce33600a0b09b07fca1c2a Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 16 Feb 2026 01:30:04 +0100
Subject: [PATCH] style: unified bento design across all sub-pages

Applied the editorial look to legal notice and privacy policy pages. Created consistent grid-based layouts for easier reading and a premium feel.
---
 app/components/About.tsx        | 126 ++++++++++++++++++--------------
 app/components/ActivityFeed.tsx |  84 +++++++++++----------
 app/legal-notice/page.tsx       | 122 +++++++++++++++++++++----------
 app/privacy-policy/page.tsx     | 118 ++++++++++++++++++++++--------
 4 files changed, 289 insertions(+), 161 deletions(-)

diff --git a/app/components/About.tsx b/app/components/About.tsx
index cda6d92..b3c5825 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight } from "lucide-react";
+import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowUpRight, Book } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 import CurrentlyReading from "./CurrentlyReading";
-import ReadBooks from "./ReadBooks";
 import { motion } from "framer-motion";
-import { TechStackCategory, Hobby } from "@/lib/directus";
+import { TechStackCategory, Hobby, BookReview } from "@/lib/directus";
 import Link from "next/link";
 import ActivityFeed from "./ActivityFeed";
 import BentoChat from "./BentoChat";
@@ -23,17 +22,18 @@ const About = () => {
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
   const [techStack, setTechStack] = useState<TechStackCategory[]>([]);
   const [hobbies, setHobbies] = useState<Hobby[]>([]);
-  const [isActivityActive, setIsActivityActive] = useState(false);
+  const [reviewsCount, setReviewsCount] = useState(0);
   const [cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const [cmsRes, techRes, hobbiesRes, msgRes] = await Promise.all([
+        const [cmsRes, techRes, hobbiesRes, msgRes, booksRes] = await Promise.all([
           fetch(`/api/content/page?key=home-about&locale=${locale}`),
           fetch(`/api/tech-stack?locale=${locale}`),
           fetch(`/api/hobbies?locale=${locale}`),
-          fetch(`/api/messages?locale=${locale}`)
+          fetch(`/api/messages?locale=${locale}`),
+          fetch(`/api/book-reviews?locale=${locale}`)
         ]);
         
         const cmsData = await cmsRes.json();
@@ -47,6 +47,9 @@ const About = () => {
 
         const msgData = await msgRes.json();
         if (msgData?.messages) setCmsMessages(msgData.messages);
+
+        const booksData = await booksRes.json();
+        if (booksData?.bookReviews) setReviewsCount(booksData.bookReviews.length);
       } catch (error) {}
     };
     fetchData();
@@ -58,7 +61,7 @@ const About = () => {
         
         <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
           
-          {/* 1. Large Bio Text */}
+          {/* 1. Bio Box */}
           <motion.div 
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -73,7 +76,7 @@ const About = () => {
                 {cmsDoc ? <RichTextClient doc={cmsDoc} /> : <p>{t("p1")} {t("p2")}</p>}
               </div>
               <div className="pt-8">
-                <div className="inline-block bg-liquid-mint/5 px-8 py-4 rounded-3xl border border-liquid-mint/20">
+                <div className="inline-block bg-stone-50 dark:bg-stone-800 px-8 py-4 rounded-3xl border border-stone-100 dark:border-stone-700">
                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-mint mb-2">{t("funFactTitle")}</p>
                    <p className="text-base font-bold opacity-90">{t("funFactBody")}</p>
                 </div>
@@ -81,7 +84,7 @@ const About = () => {
             </div>
           </motion.div>
 
-          {/* 2. Activity / Status Box */}
+          {/* 2. Status Box (Currently) */}
           <motion.div 
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
@@ -89,41 +92,26 @@ const About = () => {
             transition={{ delay: 0.1 }}
             className="md:col-span-4 bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white overflow-hidden relative flex flex-col"
           >
-            <div className="relative z-10 flex-1">
+            <div className="relative z-10 h-full">
               <h3 className="text-xl font-black mb-10 flex items-center gap-2 uppercase tracking-widest text-liquid-mint">
-                <Activity size={20} /> Currently
+                <Activity size={20} /> Status
               </h3>
-              
-              <div className="space-y-6">
-                <ActivityFeed onActivityChange={(active) => setIsActivityActive(active)} />
-                
-                {!isActivityActive && (
-                  <motion.div 
-                    initial={{ opacity: 0 }}
-                    animate={{ opacity: 1 }}
-                    className="pt-6 border-t border-white/10"
-                  >
-                    <p className="text-stone-400 italic font-light text-lg">
-                      &ldquo;{cmsMessages["about.quote.idle"] || "Gerade am Planen des nächsten großen Projekts."}&rdquo;
-                    </p>
-                  </motion.div>
-                )}
-              </div>
+              <ActivityFeed idleQuote={cmsMessages["about.quote.idle"]} />
             </div>
-            <div className="absolute -bottom-10 -right-10 w-40 h-40 bg-liquid-mint/10 blur-[80px] rounded-full" />
+            <div className="absolute top-0 right-0 w-40 h-40 bg-liquid-mint/10 blur-[100px] rounded-full" />
           </motion.div>
 
-          {/* 3. AI Chat Box (Integrated) */}
+          {/* 3. AI Chat Box */}
           <motion.div 
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.2 }}
-            className="md:col-span-12 lg:col-span-4 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
+            className="md:col-span-12 lg:col-span-4 bg-stone-50 dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
           >
             <div className="flex items-center gap-2 mb-8">
               <MessageSquare className="text-liquid-purple" size={24} />
-              <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter text-liquid-purple">AI Twin</h3>
+              <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter text-liquid-purple">AI Assistant</h3>
             </div>
             <div className="flex-1">
               <BentoChat />
@@ -138,13 +126,13 @@ const About = () => {
             transition={{ delay: 0.3 }}
             className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
           >
-            <div className="grid grid-cols-1 md:grid-cols-4 gap-12">
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-12">
               {techStack.map((cat) => (
                 <div key={cat.id} className="space-y-6">
                   <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">{cat.name}</h4>
                   <div className="flex flex-wrap gap-2">
                     {cat.items?.map((item: any) => (
-                      <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800/50 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
+                      <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700 hover:border-liquid-mint transition-colors">
                         {item.name}
                       </span>
                     ))}
@@ -154,43 +142,69 @@ const About = () => {
             </div>
           </motion.div>
 
-          {/* 5. Library & Hobbies */}
+          {/* 5. Library (Visual Teaser) */}
           <motion.div 
             initial={{ opacity: 0, y: 30 }}
             whileInView={{ opacity: 1, y: 0 }}
             viewport={{ once: true }}
             transition={{ delay: 0.4 }}
-            className="md:col-span-12 grid grid-cols-1 md:grid-cols-2 gap-8"
+            className="md:col-span-12 lg:col-span-6 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm overflow-hidden relative flex flex-col justify-between group"
           >
-            <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between group overflow-hidden relative">
-              <div className="relative z-10">
-                <div className="flex justify-between items-center mb-10">
-                  <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter">
-                    <BookOpen className="text-liquid-purple" size={24} /> Library
+            <div className="relative z-10">
+              <div className="flex justify-between items-start mb-12">
+                <div className="space-y-2">
+                  <h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter">
+                    <BookOpen className="text-liquid-purple" size={32} /> Library
                   </h3>
-                  <Link href={`/${locale}/books`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all">
-                    View All <ArrowRight size={14} className="group-hover:translate-x-1 transition-transform" />
-                  </Link>
+                  <p className="text-stone-500 font-bold text-sm">ARCHIVE OF KNOWLEDGE</p>
                 </div>
+                <Link href={`/${locale}/books`} className="w-14 h-14 rounded-2xl bg-stone-900 dark:bg-stone-100 flex items-center justify-center text-white dark:text-stone-900 hover:scale-110 transition-transform shadow-xl">
+                  <ArrowUpRight size={24} />
+                </Link>
+              </div>
+              
+              <div className="space-y-6">
                 <CurrentlyReading />
+                <div className="flex items-center gap-4 bg-liquid-purple/5 p-6 rounded-[2rem] border border-liquid-purple/10">
+                  <div className="w-12 h-12 rounded-full bg-white dark:bg-stone-800 flex items-center justify-center shadow-sm">
+                    <Book className="text-liquid-purple" size={20} />
+                  </div>
+                  <div>
+                    <p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
+                    <p className="text-sm text-stone-500">Read and summarized in my personal collection.</p>
+                  </div>
+                </div>
               </div>
             </div>
+            <div className="absolute -bottom-20 -right-20 w-64 h-64 bg-liquid-purple/5 blur-[100px] rounded-full group-hover:bg-liquid-purple/10 transition-colors" />
+          </motion.div>
 
-            <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between">
-              <div className="flex flex-wrap gap-4 mb-10">
-                {hobbies.map((hobby) => {
-                  const Icon = iconMap[hobby.icon] || Lightbulb;
-                  return (
-                    <div key={hobby.id} className="w-12 h-12 rounded-2xl bg-stone-50 dark:bg-stone-800 flex items-center justify-center shadow-sm border border-stone-100 dark:border-stone-700">
+          {/* 6. Hobbies (Clean Editorial Look) */}
+          <motion.div 
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5 }}
+            className="md:col-span-12 lg:col-span-6 bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+          >
+            <h3 className="text-3xl font-black text-stone-900 dark:text-stone-50 mb-10 flex items-center gap-3 uppercase tracking-tighter">
+              <Gamepad2 className="text-liquid-mint" size={32} /> Beyond Dev
+            </h3>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
+              {hobbies.map((hobby) => {
+                const Icon = iconMap[hobby.icon] || Lightbulb;
+                return (
+                  <div key={hobby.id} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
+                    <div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
                       <Icon size={20} className="text-liquid-mint" />
                     </div>
-                  )
-                })}
-              </div>
-              <div className="space-y-2">
-                <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50">{t("hobbiesTitle")}</h3>
-                <p className="text-stone-500 font-light text-lg">Curiosity beyond software engineering.</p>
-              </div>
+                    <div>
+                      <p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
+                      <p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
+                    </div>
+                  </div>
+                )
+              })}
             </div>
           </motion.div>
 
diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index 2c59803..ac31fbb 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -2,15 +2,8 @@
 
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  Code2,
-  Disc3,
-  Gamepad2,
-  Zap,
-  Clock,
-  Activity,
-} from "lucide-react";
+import { motion } from "framer-motion";
+import { Code2, Disc3, Gamepad2, Zap, BookOpen, Quote } from "lucide-react";
 
 interface StatusData {
   status: { text: string; color: string; };
@@ -20,15 +13,13 @@ interface StatusData {
   customActivities?: Record<string, any>;
 }
 
-function getSafeGamingText(details: string | number | undefined, state: string | number | undefined, fallback: string): string {
-  if (typeof details === 'string' && details.trim().length > 0) return details;
-  if (typeof state === 'string' && state.trim().length > 0) return state;
-  if (typeof details === 'number' && !isNaN(details)) return String(details);
-  if (typeof state === 'number' && !isNaN(state)) return String(state);
-  return fallback;
-}
-
-export default function ActivityFeed({ onActivityChange }: { onActivityChange?: (active: boolean) => void }) {
+export default function ActivityFeed({ 
+  onActivityChange, 
+  idleQuote 
+}: { 
+  onActivityChange?: (active: boolean) => void;
+  idleQuote?: string;
+}) {
   const [data, setData] = useState<StatusData | null>(null);
   const [hasActivity, setHasActivity] = useState(false);
 
@@ -60,50 +51,65 @@ export default function ActivityFeed({ onActivityChange }: { onActivityChange?:
     return () => clearInterval(interval);
   }, [onActivityChange]);
 
-  if (!data || !hasActivity) return null;
+  if (!hasActivity) {
+    return (
+      <motion.div 
+        initial={{ opacity: 0 }} 
+        animate={{ opacity: 1 }} 
+        className="h-full flex flex-col justify-center space-y-6"
+      >
+        <div className="w-10 h-10 rounded-full bg-liquid-mint/10 flex items-center justify-center">
+          <Quote size={18} className="text-liquid-mint" />
+        </div>
+        <p className="text-xl md:text-2xl font-light leading-tight text-stone-300 italic">
+          &ldquo;{idleQuote || "Gerade am Planen des nächsten großen Projekts."}&rdquo;
+        </p>
+        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-500">
+          <span className="w-1.5 h-1.5 rounded-full bg-stone-700" /> Currently Idle
+        </div>
+      </motion.div>
+    );
+  }
 
   return (
     <div className="space-y-4">
-      {/* CODING */}
-      {data.coding?.isActive && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-green-500/10 border border-green-500/20 rounded-2xl p-4">
+      {data?.coding?.isActive && (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-green-500/10 border border-green-500/20 rounded-2xl p-5">
           <div className="flex items-center gap-3 mb-2">
             <Zap size={14} className="text-green-400 animate-pulse" />
             <span className="text-[10px] font-black uppercase tracking-widest text-green-400">Coding Now</span>
           </div>
-          <p className="font-bold text-white text-sm truncate">{data.coding.project}</p>
+          <p className="font-bold text-white text-lg truncate">{data.coding.project}</p>
           <p className="text-xs text-white/50 truncate">{data.coding.file}</p>
         </motion.div>
       )}
 
-      {/* GAMING */}
-      {data.gaming?.isPlaying && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-indigo-500/10 border border-indigo-500/20 rounded-2xl p-4">
+      {data?.gaming?.isPlaying && (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-indigo-500/10 border border-indigo-500/20 rounded-2xl p-5">
           <div className="flex items-center gap-3 mb-3">
             <Gamepad2 size={14} className="text-indigo-400" />
             <span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">Gaming</span>
           </div>
-          <div className="flex gap-3">
-            {data.gaming.image && <div className="w-10 h-10 rounded-lg overflow-hidden shrink-0"><img src={data.gaming.image} className="w-full h-full object-cover" /></div>}
-            <div className="min-w-0">
-              <p className="font-bold text-white text-sm truncate">{data.gaming.name}</p>
-              <p className="text-xs text-white/50 truncate">{getSafeGamingText(data.gaming.details, data.gaming.state, "In Game")}</p>
+          <div className="flex gap-4">
+            {data.gaming.image && <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg"><img src={data.gaming.image} className="w-full h-full object-cover" /></div>}
+            <div className="min-w-0 flex flex-col justify-center">
+              <p className="font-bold text-white text-base truncate">{data.gaming.name}</p>
+              <p className="text-xs text-white/50 truncate">In Game</p>
             </div>
           </div>
         </motion.div>
       )}
 
-      {/* MUSIC */}
-      {data.music?.isPlaying && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-white/5 border border-white/10 rounded-2xl p-4">
+      {data?.music?.isPlaying && (
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-white/5 border border-white/10 rounded-2xl p-5">
           <div className="flex items-center gap-2 mb-3">
             <Disc3 size={14} className="text-green-400 animate-spin-slow" />
-            <span className="text-[10px] font-black uppercase tracking-widest text-white/40">Spotify</span>
+            <span className="text-[10px] font-black uppercase tracking-widest text-white/40">Listening</span>
           </div>
-          <div className="flex gap-3">
-            <div className="w-10 h-10 rounded-lg overflow-hidden shrink-0 shadow-lg"><img src={data.music.albumArt} className="w-full h-full object-cover" /></div>
-            <div className="min-w-0">
-              <p className="font-bold text-white text-sm truncate">{data.music.track}</p>
+          <div className="flex gap-4">
+            <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-2xl"><img src={data.music.albumArt} className="w-full h-full object-cover" /></div>
+            <div className="min-w-0 flex flex-col justify-center">
+              <p className="font-bold text-white text-base truncate">{data.music.track}</p>
               <p className="text-xs text-white/50 truncate">{data.music.artist}</p>
             </div>
           </div>
diff --git a/app/legal-notice/page.tsx b/app/legal-notice/page.tsx
index 124e687..9278a9f 100644
--- a/app/legal-notice/page.tsx
+++ b/app/legal-notice/page.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { motion } from 'framer-motion';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Mail, MapPin, Scale, ShieldCheck, Clock } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
@@ -15,7 +15,6 @@ export default function LegalNotice() {
   const locale = useLocale();
   const t = useTranslations("common");
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
-  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
 
   useEffect(() => {
     (async () => {
@@ -26,7 +25,6 @@ export default function LegalNotice() {
         const data = await res.json();
         if (data?.content?.content && data?.content?.locale === locale) {
           setCmsDoc(data.content.content as JSONContent);
-          setCmsTitle((data.content.title as string | null) ?? null);
         }
       } catch {}
     })();
@@ -36,11 +34,12 @@ export default function LegalNotice() {
     <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
       <Header />
       <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
+        
+        {/* Editorial Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="mb-12"
+          className="mb-20"
         >
           <Link
             href={`/${locale}`}
@@ -50,45 +49,94 @@ export default function LegalNotice() {
             <span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
           </Link>
           
-          <h1 className="text-6xl md:text-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
+          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
             Legal<span className="text-liquid-mint">.</span>
           </h1>
         </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-        >
-          {cmsDoc ? (
-            <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
-              <RichTextClient doc={cmsDoc} />
-            </div>
-          ) : (
-            <div className="space-y-12">
-              <div className="text-stone-600 dark:text-stone-400 leading-relaxed">
-                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Angaben gemäß § 5 TMG</h2>
-                <div className="space-y-4 text-xl font-light">
-                  <p>Dennis Konkol</p>
-                  <p>Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-                  <p>E-Mail: <Link href="mailto:info@dk0.dev" className="text-stone-900 dark:text-stone-100 font-bold border-b-2 border-liquid-mint">info@dk0.dev</Link></p>
+        {/* Bento Content Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          
+          {/* Main Legal Content (Large Box) */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+          >
+            {cmsDoc ? (
+              <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
+                <RichTextClient doc={cmsDoc} />
+              </div>
+            ) : (
+              <div className="space-y-16">
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
+                    <Scale className="text-liquid-mint" size={28} /> Angaben gemäß § 5 TMG
+                  </h2>
+                  <div className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 space-y-4">
+                    <p className="font-bold text-stone-900 dark:text-stone-100">Dennis Konkol</p>
+                    <p>Auf dem Ziegenbrink 2B</p>
+                    <p>49082 Osnabrück, Deutschland</p>
+                  </div>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
+                    <ShieldCheck className="text-liquid-sky" size={28} /> Haftungsausschluss
+                  </h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Die Inhalte dieser Seiten wurden mit größter Sorgfalt erstellt. Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte kann ich jedoch keine Gewähr übernehmen.
+                  </p>
+                </section>
+              </div>
+            )}
+          </motion.div>
+
+          {/* Sidebar Widgets */}
+          <div className="lg:col-span-4 space-y-8">
+            
+            {/* Quick Contact Box */}
+            <div className="bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white">
+              <h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-mint">Direct Contact</h3>
+              <div className="space-y-6">
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-2xl bg-white/10 flex items-center justify-center border border-white/10">
+                    <Mail className="text-liquid-mint" size={20} />
+                  </div>
+                  <div>
+                    <p className="text-[10px] font-black uppercase tracking-widest text-stone-500">Email</p>
+                    <Link href="mailto:info@dk0.dev" className="font-bold hover:text-liquid-mint transition-colors">info@dk0.dev</Link>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="w-12 h-12 rounded-2xl bg-white/10 flex items-center justify-center border border-white/10">
+                    <MapPin className="text-liquid-sky" size={20} />
+                  </div>
+                  <div>
+                    <p className="text-[10px] font-black uppercase tracking-widest text-stone-500">Location</p>
+                    <p className="font-bold">Osnabrück, GER</p>
+                  </div>
                 </div>
               </div>
-
-              <div className="text-stone-600 dark:text-stone-400">
-                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Haftung für Inhalte</h2>
-                <p className="text-xl font-light leading-relaxed">
-                  Als Diensteanbieter bin ich gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG bin ich als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen.
-                </p>
-              </div>
-
-              <div className="pt-8 border-t border-stone-100 dark:border-stone-800">
-                <p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
-              </div>
             </div>
-          )}
-        </motion.div>
+
+            {/* Meta Info Box */}
+            <div className="bg-liquid-purple/5 dark:bg-stone-900 rounded-[3rem] p-10 border border-liquid-purple/20 dark:border-stone-800/60">
+              <div className="flex items-center gap-4 mb-6">
+                <Clock className="text-liquid-purple" size={20} />
+                <div>
+                  <p className="text-[10px] font-black uppercase tracking-widest text-stone-400">Last Review</p>
+                  <p className="font-bold text-stone-900 dark:text-stone-100 text-sm">February 15, 2025</p>
+                </div>
+              </div>
+              <p className="text-xs text-stone-500 leading-relaxed">
+                This legal notice applies to all contents on dk0.dev and related social media profiles.
+              </p>
+            </div>
+
+          </div>
+        </div>
       </main>
       <Footer />
     </div>
diff --git a/app/privacy-policy/page.tsx b/app/privacy-policy/page.tsx
index 1ffebb8..8579224 100644
--- a/app/privacy-policy/page.tsx
+++ b/app/privacy-policy/page.tsx
@@ -2,7 +2,7 @@
 
 import React from "react";
 import { motion } from 'framer-motion';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Shield, Lock, Eye, Database, Globe } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
@@ -34,11 +34,12 @@ export default function PrivacyPolicy() {
     <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
       <Header />
       <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
+        
+        {/* Editorial Header */}
         <motion.div
           initial={{ opacity: 0, y: 30 }}
           animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="mb-12"
+          className="mb-20"
         >
           <Link
             href={`/${locale}`}
@@ -48,40 +49,99 @@ export default function PrivacyPolicy() {
             <span className="font-bold uppercase tracking-widest text-xs">{t("backToHome")}</span>
           </Link>
           
-          <h1 className="text-6xl md:text-[8rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
+          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
             Privacy<span className="text-liquid-purple">.</span>
           </h1>
         </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-        >
-          {cmsDoc ? (
-            <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
-              <RichTextClient doc={cmsDoc} />
-            </div>
-          ) : (
-            <div className="space-y-12">
-              <div className="text-stone-600 dark:text-stone-400 leading-relaxed">
-                <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-6 uppercase tracking-tight">Datenschutz</h2>
-                <p className="text-xl font-light leading-relaxed mb-6">
-                  Der Schutz Ihrer persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Ihre Daten daher ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
-                </p>
-                <h3 className="text-2xl font-bold text-stone-800 dark:text-stone-200 mb-4">Kontakt mit mir</h3>
-                <p className="text-xl font-light">
-                  Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit mir aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage und für den Fall von Anschlussfragen bei mir gespeichert. Diese Daten gebe ich nicht ohne Ihre Einwilligung weiter.
-                </p>
+        {/* Bento Content Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          
+          {/* Main Privacy Text (Large) */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1 }}
+            className="lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+          >
+            {cmsDoc ? (
+              <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
+                <RichTextClient doc={cmsDoc} />
               </div>
+            ) : (
+              <div className="space-y-16">
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
+                    <Shield className="text-liquid-mint" size={28} /> Allgemeiner Überblick
+                  </h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Der Schutz Ihrer persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Ihre Daten daher ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
+                  </p>
+                </section>
 
-              <div className="pt-8 border-t border-stone-100 dark:border-stone-800">
-                <p className="text-stone-400 text-sm font-mono uppercase tracking-widest">Last updated: 12.02.2025</p>
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
+                    <Database className="text-liquid-sky" size={28} /> Datenerfassung
+                  </h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit mir aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage bei mir gespeichert.
+                  </p>
+                </section>
+              </div>
+            )}
+          </motion.div>
+
+          {/* Quick Info Cards */}
+          <div className="lg:col-span-4 space-y-8">
+            
+            {/* Core Values Box */}
+            <div className="bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white">
+              <h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-purple">Principles</h3>
+              <div className="space-y-6">
+                <div className="flex items-start gap-4">
+                  <Lock className="text-liquid-mint mt-1" size={18} />
+                  <div>
+                    <p className="font-bold">Encryption</p>
+                    <p className="text-xs text-stone-500">SSL/TLS secured data transfer.</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <Eye className="text-liquid-sky mt-1" size={18} />
+                  <div>
+                    <p className="font-bold">Transparency</p>
+                    <p className="text-xs text-stone-500">No hidden tracking algorithms.</p>
+                  </div>
+                </div>
+                <div className="flex items-start gap-4">
+                  <Globe className="text-liquid-purple mt-1" size={18} />
+                  <div>
+                    <p className="font-bold">Compliance</p>
+                    <p className="text-xs text-stone-500">GDPR / DSGVO optimized.</p>
+                  </div>
+                </div>
               </div>
             </div>
-          )}
-        </motion.div>
+
+            {/* Cookie Status Indicator */}
+            <div className="bg-liquid-mint/5 dark:bg-stone-900 rounded-[3rem] p-10 border border-liquid-mint/20 dark:border-stone-800/60">
+              <div className="flex items-center gap-3 mb-4">
+                <div className="w-2 h-2 bg-green-500 rounded-full" />
+                <p className="text-xs font-black uppercase tracking-widest text-stone-400">Security Check</p>
+              </div>
+              <p className="text-stone-900 dark:text-stone-50 font-bold mb-4">Your connection is private and secure.</p>
+              <button 
+                onClick={() => {
+                  localStorage.removeItem('cookie-consent');
+                  window.location.reload();
+                }}
+                className="text-[10px] font-black uppercase tracking-widest border-b border-stone-300 dark:border-stone-700 pb-1 hover:text-liquid-mint transition-colors"
+              >
+                Reset Privacy Settings
+              </button>
+            </div>
+
+          </div>
+        </div>
       </main>
       <Footer />
     </div>