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/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>