feat: redesign page heroes, implement organic markers, and streamline contact flow

- Refined hero sections for About, Blog, Websites, and Case Studies for a bespoke industrial entry point.
- Redesigned Marker component using layered SVG paths for an organic, hand-drawn highlighter effect.
- Restored technical precision in ArchitectureVisualizer with refined line thickness.
- Streamlined contact page by removing generic headers and prioritizing the configurator/gateway.
- Updated technical references to reflect self-hosted Gitea infrastructure.
- Cleaned up unused imports and addressed linting warnings across modified pages.

apps/web/app/about/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import Image from "next/image";
-import { PageHeader } from "../../src/components/PageHeader";
 import { Section } from "../../src/components/Section";
 import { Reveal } from "../../src/components/Reveal";
 import {
@@ -15,6 +14,7 @@ import {
 } from "../../src/components/Landing";
 import { Check } from "lucide-react";
 import {
+  H1,
   H3,
   H4,
   LeadText,
@@ -36,17 +36,16 @@ import { Marker } from "../../src/components/Marker";
 export default function AboutPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      <AbstractCircuit />
+      {/* Background decoration removed per user request */}
 
       {/* Hero Section */}
       <section className="relative pt-12 md:pt-32 pb-8 md:pb-24 overflow-hidden border-b border-slate-50">
         <Container variant="narrow" className="relative z-10">
           <div className="flex flex-col items-center text-center space-y-6 md:space-y-12">
-            <Reveal>
+            <Reveal width="fit-content">
               <div className="relative">
                 {/* Structural rings around avatar */}
-                <div className="absolute inset-0 -m-6 md:-m-8 border border-slate-100 rounded-full animate-[spin_30s_linear_infinite] opacity-50" />
-                <div className="absolute inset-0 -m-3 md:-m-4 border border-slate-200 rounded-full animate-[spin_20s_linear_infinite_reverse] opacity-30" />
+                {/* Structural rings removed per user request */}
 
                 <div className="relative w-32 h-32 md:w-40 md:h-40 rounded-full overflow-hidden border border-slate-200 shadow-xl bg-white p-1 group">
                   <div className="w-full h-full rounded-full overflow-hidden relative aspect-square">
@@ -75,15 +74,17 @@ export default function AboutPage() {
                   <div className="h-px w-6 md:w-8 bg-slate-900"></div>
                 </div>
               </Reveal>
-              <PageHeader
-                title={
-                  <>
-                    Über <span className="text-slate-400">mich.</span>
-                  </>
-                }
-                description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
-                className="pt-0 md:pt-0"
-              />
+              <Reveal delay={0.2}>
+                <H1 className="text-4xl md:text-8xl leading-none tracking-tighter">
+                  Über <span className="text-slate-400">mich.</span>
+                </H1>
+              </Reveal>
+              <Reveal delay={0.3}>
+                <p className="text-slate-400 font-medium max-w-xl mx-auto text-sm md:text-xl">
+                  15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen
+                  halten.
+                </p>
+              </Reveal>
             </div>
           </div>
         </Container>
@@ -237,8 +238,8 @@ export default function AboutPage() {
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-            <div className="space-y-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-start">
+            <div className="space-y-8 min-w-0">
               <Reveal delay={0.1}>
                 <LeadText className="text-lg md:text-xl text-slate-400">
                   Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
@@ -270,7 +271,7 @@ export default function AboutPage() {
             </div>
 
             {/* Decorative terminal */}
-            <Reveal delay={0.3}>
+            <Reveal delay={0.3} className="min-w-0">
               <CodeSnippet variant="terminal" className="opacity-70" />
             </Reveal>
           </div>

apps/web/app/blog/[slug]/page.tsx

@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { blogPosts } from "../../../src/data/blogPosts";
 import { PageHeader } from "../../../src/components/PageHeader";
 import { Section } from "../../../src/components/Section";
+import { Reveal } from "../../../src/components/Reveal";
 import { BlogPostClient } from "../../../src/components/BlogPostClient";
 import { PostComponents } from "../../../src/components/blog/posts";
 import { Card } from "../../../src/components/Layout";
@@ -50,54 +51,58 @@ export default async function BlogPostPage({
       <main id="post-content">
         <Section containerVariant="wide" className="pt-0 md:pt-0">
           <div className="max-w-5xl mx-auto px-0 sm:px-4 md:px-0">
-            <Card
-              variant="glass"
-              techBorder
-              className="relative overflow-hidden rounded-none sm:rounded-3xl"
-            >
-              {/* Decorative background grid inside the card */}
-              <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+            <Reveal delay={0.4} width="100%">
+              <Card
+                variant="glass"
+                techBorder
+                className="relative overflow-hidden rounded-none sm:rounded-3xl"
+              >
+                {/* Decorative background grid inside the card */}
+                <div className="absolute inset-0 opacity-[0.03] bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
 
-              <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
-                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
-                  <div className="flex items-center gap-3">
-                    <span className="w-2 h-2 rounded-full bg-slate-300" />
-                    <time dateTime={post.date}>{formattedDate}</time>
-                  </div>
-                  <div className="flex items-center gap-4 sm:gap-6">
-                    <div className="flex items-center gap-2">
-                      <span className="text-slate-200 hidden sm:inline">|</span>
-                      <span>{readingTime} min Lesezeit</span>
+                <div className="relative z-10 px-5 py-10 md:px-16 md:py-20">
+                  <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 text-[9px] md:text-[10px] font-bold text-slate-400 mb-10 md:mb-12 uppercase tracking-[0.2em] border-b border-slate-100 pb-6">
+                    <div className="flex items-center gap-3">
+                      <span className="w-2 h-2 rounded-full bg-slate-300" />
+                      <time dateTime={post.date}>{formattedDate}</time>
                     </div>
-                    <span>
-                      {slug.substring(0, 4).toUpperCase()}-
-                      {Math.floor(Math.random() * 999)}
-                    </span>
-                  </div>
-                </div>
-
-                {post.tags && post.tags.length > 0 && (
-                  <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
-                    {post.tags.map((tag, index) => (
-                      <span
-                        key={tag}
-                        className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
-                      >
-                        #{tag}
+                    <div className="flex items-center gap-4 sm:gap-6">
+                      <div className="flex items-center gap-2">
+                        <span className="text-slate-200 hidden sm:inline">
+                          |
+                        </span>
+                        <span>{readingTime} min Lesezeit</span>
+                      </div>
+                      <span>
+                        {slug.substring(0, 4).toUpperCase()}-
+                        {Math.floor(Math.random() * 999)}
                       </span>
-                    ))}
+                    </div>
                   </div>
-                )}
 
-                {PostContent ? (
-                  <PostContent />
-                ) : (
-                  <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
-                    Inhalt wird bald veröffentlicht...
-                  </div>
-                )}
-              </div>
-            </Card>
+                  {post.tags && post.tags.length > 0 && (
+                    <div className="flex flex-wrap gap-2 mb-10 md:mb-12">
+                      {post.tags.map((tag, index) => (
+                        <span
+                          key={tag}
+                          className="px-2.5 py-1 bg-slate-50 border border-slate-100 rounded text-[9px] md:text-[10px] font-mono text-slate-500 uppercase tracking-widest"
+                        >
+                          #{tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+
+                  {PostContent ? (
+                    <PostContent />
+                  ) : (
+                    <div className="p-8 bg-slate-50 border border-slate-200 rounded-lg italic text-slate-500">
+                      Inhalt wird bald veröffentlicht...
+                    </div>
+                  )}
+                </div>
+              </Card>
+            </Reveal>
           </div>
         </Section>
       </main>

apps/web/app/blog/page.tsx

@@ -5,7 +5,6 @@ import { useState, useEffect } from "react";
 import { MediumCard } from "../../src/components/MediumCard";
 import { BlogCommandBar } from "../../src/components/blog/BlogCommandBar";
 import { blogPosts } from "../../src/data/blogPosts";
-import { PageHeader } from "../../src/components/PageHeader";
 import { SectionHeader } from "../../src/components/SectionHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
@@ -124,7 +123,7 @@ export default function BlogPage() {
             ) : (
               <div className="grid grid-cols-1 gap-6 max-w-3xl mx-auto w-full">
                 {postsToShow.map((post, i) => (
-                  <Reveal key={post.slug} delay={0.05 * (i % 6)} width="100%">
+                  <Reveal key={post.slug} delay={0.05 * i} width="100%">
                     <MediumCard post={post} />
                   </Reveal>
                 ))}
@@ -134,7 +133,7 @@ export default function BlogPage() {
             {/* Pagination */}
             {hasMore && (
               <div className="flex justify-center pt-8">
-                <Reveal delay={0.1}>
+                <Reveal delay={0.1} width="fit-content">
                   <button
                     onClick={loadMore}
                     className="group relative px-8 py-4 bg-white border border-slate-200 text-slate-600 rounded-full overflow-hidden transition-all hover:border-slate-400 hover:text-slate-900 hover:shadow-lg"

apps/web/app/case-studies/klz-cables/page.tsx

@@ -205,11 +205,11 @@ export default function KLZCablesCaseStudy() {
                         icon: <Cpu className="w-5 h-5 text-slate-400" />,
                       },
                     ].map((item, i) => (
-                      <motion.div
+                      <Reveal
                         key={i}
-                        initial={{ x: -20, opacity: 0 }}
-                        whileInView={{ x: 0, opacity: 1 }}
-                        transition={{ delay: 0.5 + i * 0.1, duration: 0.5 }}
+                        direction="right"
+                        delay={0.5 + i * 0.1}
+                        width="100%"
                         className="flex gap-4 md:gap-6 border-b border-slate-200/50 pb-6 last:border-0 last:pb-0"
                       >
                         <div className="shrink-0 mt-1">{item.icon}</div>
@@ -221,7 +221,7 @@ export default function KLZCablesCaseStudy() {
                             {item.desc}
                           </BodyText>
                         </div>
-                      </motion.div>
+                      </Reveal>
                     ))}
                   </div>
                 </div>

apps/web/app/case-studies/page.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { PageHeader } from "../../src/components/PageHeader";
+import Image from "next/image";
 import { Section } from "../../src/components/Section";
 import { Reveal } from "../../src/components/Reveal";
-import { H3, LeadText, BodyText, Label } from "../../src/components/Typography";
+import { H3, LeadText, Label, BodyText } from "../../src/components/Typography";
 import { Card } from "../../src/components/Layout";
 import { Button } from "../../src/components/Button";
-import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";
+import { AbstractCircuit } from "../../src/components/Effects";
 import { ArrowRight } from "lucide-react";
 import { motion } from "framer-motion";
 
@@ -15,131 +15,132 @@ export default function CaseStudiesPage() {
     <div className="flex flex-col bg-white overflow-hidden relative">
       <AbstractCircuit />
 
-      <PageHeader
-        title={
-          <>
-            Case <span className="text-slate-400">Studies.</span>
-          </>
-        }
-        description="Ergebnisse statt Versprechen. Was ich gebaut habe und was es bewirkt."
-        backgroundSymbol="C"
-      />
+      {/* Featured Case Study Hero */}
+      <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
+        <div className="space-y-12 md:space-y-24">
+          <Reveal>
+            <div className="space-y-6 max-w-4xl">
+              <H3 className="text-4xl md:text-8xl tracking-tighter leading-none">
+                Case <span className="text-slate-400">Studies.</span>
+              </H3>
+              <LeadText className="text-lg md:text-2xl text-slate-400 max-w-2xl">
+                Ergebnisse statt Versprechen. Dokumentierte Architektur-Lösungen
+                für komplexe Anforderungen.
+              </LeadText>
+            </div>
+          </Reveal>
 
-      {/* Featured Case Study */}
-      <Section
-        number="01"
-        title="Showcase"
-        borderTop
-        effects={<GradientMesh variant="metallic" className="opacity-70" />}
-      >
-        <Reveal>
-          <a href="/case-studies/klz-cables" className="block group">
-            <Card
-              variant="glass"
-              padding="none"
-              techBorder
-              className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
-            >
-              {/* Brand Gradient Background */}
-              <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />
+          <Reveal>
+            <a href="/case-studies/klz-cables" className="block group">
+              <Card
+                variant="glass"
+                padding="none"
+                techBorder
+                className="overflow-hidden relative group min-h-[400px] md:min-h-[500px] flex flex-col md:flex-row"
+              >
+                {/* Brand Gradient Background */}
+                <div className="absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(14,165,233,0.08)_0%,transparent_50%),radial-gradient(circle_at_70%_70%,rgba(99,102,241,0.05)_0%,transparent_50%)]" />
 
-              {/* Left Column: Content */}
-              <div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
-                <div className="space-y-4 md:space-y-8">
-                  <div className="flex items-center gap-3 md:gap-4">
-                    <img
-                      src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
-                      alt="KLZ Logo"
-                      className="h-6 md:h-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
-                    />
-                    <div className="h-px w-8 md:w-12 bg-slate-100" />
-                    <Label className="text-slate-400 text-[9px] md:text-[10px]">
-                      Case Study 2025
-                    </Label>
-                  </div>
-
-                  <div className="space-y-3 md:space-y-4">
-                    <H3 className="text-3xl md:text-6xl tracking-tighter">
-                      KLZ <span className="text-slate-300">Cables</span>
-                    </H3>
-                    <LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
-                      Engineering eines industriellen B2B-Systems mit
-                      <span className="text-slate-900 font-medium">
-                        {" "}
-                        automatisierter Asset-Pipeline
-                      </span>{" "}
-                      und hochperformantem Headless-Stack.
-                    </LeadText>
-                  </div>
-
-                  <div className="flex flex-wrap gap-2 pt-1 md:pt-2">
-                    {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
-                      (tag, i) => (
-                        <span
-                          key={i}
-                          className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
-                        >
-                          {tag}
-                        </span>
-                      ),
-                    )}
-                  </div>
-                </div>
-
-                <div className="pt-8 md:pt-12">
-                  <div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
-                    <span>EXPLORE PROJECT</span>
-                    <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
-                  </div>
-                </div>
-              </div>
-
-              {/* Right Column: Visual/Technical Decor */}
-              <div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
-                <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
-                  {Array.from({ length: 40 }).map((_, i) => (
-                    <div key={i} className="whitespace-nowrap">
-                      {Array.from({ length: 15 })
-                        .map((_, j) => (
-                          <span
-                            key={j}
-                            className={
-                              Math.random() > 0.5
-                                ? "text-slate-900"
-                                : "text-slate-400"
-                            }
-                          >
-                            {Math.floor(Math.random() * 2)}
-                          </span>
-                        ))
-                        .join(" ")}
-                    </div>
-                  ))}
-                </div>
-
-                {/* Abstract "Cable" lines */}
-                <div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
-                  <div className="w-full h-full relative">
-                    {[1, 2, 3].map((v) => (
-                      <motion.div
-                        key={v}
-                        initial={{ scaleY: 0 }}
-                        whileInView={{ scaleY: 1 }}
-                        transition={{ duration: 2, delay: 0.5 + v * 0.2 }}
-                        className="absolute inset-y-0 border-r border-slate-200 origin-top"
-                        style={{ right: `${v * 25}%` }}
+                {/* Left Column: Content */}
+                <div className="flex-1 p-4 md:p-12 relative z-10 flex flex-col justify-between">
+                  <div className="space-y-4 md:space-y-8">
+                    <div className="flex items-center gap-3 md:gap-4">
+                      <Image
+                        src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
+                        alt="KLZ Logo"
+                        width={32}
+                        height={32}
+                        className="h-6 md:h-8 w-auto invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
                       />
+                      <div className="h-px w-8 md:w-12 bg-slate-100" />
+                      <Label className="text-slate-400 text-[9px] md:text-[10px]">
+                        Case Study 2025
+                      </Label>
+                    </div>
+
+                    <div className="space-y-3 md:space-y-4">
+                      <H3 className="text-3xl md:text-6xl tracking-tighter">
+                        KLZ <span className="text-slate-300">Cables</span>
+                      </H3>
+                      <LeadText className="text-slate-500 text-base md:text-xl max-w-xl leading-relaxed">
+                        Engineering eines industriellen B2B-Systems mit
+                        <span className="text-slate-900 font-medium">
+                          {" "}
+                          automatisierter Asset-Pipeline
+                        </span>{" "}
+                        und hochperformantem Headless-Stack.
+                      </LeadText>
+                    </div>
+
+                    <div className="flex flex-wrap gap-2 pt-1 md:pt-2">
+                      {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
+                        (tag, i) => (
+                          <span
+                            key={i}
+                            className="px-2 py-0.5 md:px-2.5 md:py-1 border border-slate-100 bg-white/50 rounded-md text-[8px] md:text-[9px] font-mono text-slate-400 uppercase tracking-widest group-hover:border-slate-300 transition-colors duration-500"
+                          >
+                            {tag}
+                          </span>
+                        ),
+                      )}
+                    </div>
+                  </div>
+
+                  <div className="pt-8 md:pt-12">
+                    <div className="inline-flex items-center gap-2 md:gap-3 text-[10px] md:text-sm font-bold text-slate-400 group-hover:text-slate-900 transition-all duration-500">
+                      <span>EXPLORE PROJECT</span>
+                      <ArrowRight className="w-4 h-4 group-hover:translate-x-2 transition-transform duration-500" />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Right Column: Visual/Technical Decor */}
+                <div className="w-full md:w-1/3 min-h-[150px] md:min-h-0 bg-slate-50 relative overflow-hidden border-t md:border-t-0 md:border-l border-slate-100">
+                  <div className="absolute inset-0 opacity-[0.03] select-none pointer-events-none font-mono text-[6px] md:text-[8px] p-4 flex flex-col gap-1 overflow-hidden">
+                    {Array.from({ length: 40 }).map((_, i) => (
+                      <div key={i} className="whitespace-nowrap">
+                        {Array.from({ length: 15 })
+                          .map((_, j) => (
+                            <span
+                              key={j}
+                              className={
+                                Math.random() > 0.5
+                                  ? "text-slate-900"
+                                  : "text-slate-400"
+                              }
+                            >
+                              {Math.floor(Math.random() * 2)}
+                            </span>
+                          ))
+                          .join(" ")}
+                      </div>
                     ))}
                   </div>
-                </div>
 
-                <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
-                  Industrial Grade
+                  {/* Abstract "Cable" lines */}
+                  <div className="absolute inset-0 flex items-center justify-center p-8 md:p-12">
+                    <div className="w-full h-full relative">
+                      {[1, 2, 3].map((v) => (
+                        <motion.div
+                          key={v}
+                          initial={{ scaleY: 0 }}
+                          whileInView={{ scaleY: 1 }}
+                          transition={{ duration: 2, delay: 0.5 + v * 0.2 }}
+                          className="absolute inset-y-0 border-r border-slate-200 origin-top"
+                          style={{ right: `${v * 25}%` }}
+                        />
+                      ))}
+                    </div>
+                  </div>
+
+                  <div className="absolute bottom-4 right-4 md:bottom-8 md:right-8 text-[8px] md:text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
+                    Industrial Grade
+                  </div>
                 </div>
-              </div>
-            </Card>
-          </a>
-        </Reveal>
+              </Card>
+            </a>
+          </Reveal>
+        </div>
       </Section>
 
       {/* Coming Soon */}

apps/web/app/contact/page.tsx

@@ -1,101 +1,19 @@
-import { PageHeader } from "../../src/components/PageHeader";
-import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
-import { H3, LeadText, Label } from "../../src/components/Typography";
-import { Card } from "../../src/components/Layout";
 import { ContactForm } from "../../src/components/ContactForm";
-import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";
+import { AbstractCircuit } from "../../src/components/Effects";
 
 export default function ContactPage() {
   return (
     <div className="flex flex-col bg-white min-h-screen overflow-hidden relative">
       <AbstractCircuit />
 
-      <PageHeader
-        title={
-          <>
-            Kontakt<span className="text-slate-200">.</span>
-          </>
-        }
-        description="Beschreiben Sie kurz Ihr Vorhaben. Ich melde mich zeitnah bei Ihnen."
-        backgroundSymbol="@"
-      />
-
       <Section
-        borderTop
-        effects={
-          <>
-            <GradientMesh variant="metallic" className="opacity-70" />
-          </>
-        }
+        containerVariant="wide"
+        effects={<></>}
+        className="pt-24 pb-12 md:pt-32 md:pb-20"
       >
-        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 md:gap-12 lg:gap-24">
-          {/* Form */}
-          <div className="lg:col-span-7">
-            <Reveal>
-              <Card
-                variant="glass"
-                padding="normal"
-                className="relative overflow-hidden p-5 md:p-12"
-              >
-                <ContactForm />
-              </Card>
-            </Reveal>
-          </div>
-
-          {/* Sidebar */}
-          <div className="lg:col-span-5 space-y-4 md:space-y-8">
-            <Reveal delay={0.2}>
-              <Card
-                variant="glass"
-                padding="normal"
-                techBorder
-                className="group"
-              >
-                <div className="space-y-3 md:space-y-4">
-                  <div className="flex items-center gap-3">
-                    <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <Label className="text-slate-900 text-xs md:text-sm">
-                      Verfügbarkeit
-                    </Label>
-                  </div>
-                  <LeadText className="text-lg md:text-xl text-slate-400">
-                    Aktuell nehme ich Projekte für{" "}
-                    <span className="text-slate-900 font-bold">Q2 2026</span>{" "}
-                    an.
-                  </LeadText>
-                </div>
-              </Card>
-            </Reveal>
-
-            <Reveal delay={0.3}>
-              <Card variant="glass" padding="normal" className="group">
-                <div className="space-y-3 md:space-y-4">
-                  <Label className="text-slate-900 text-xs md:text-sm">
-                    Direkt per E-Mail
-                  </Label>
-                  <a
-                    href="mailto:marc@mintel.me"
-                    className="block text-lg md:text-2xl font-bold text-slate-900 hover:text-slate-400 transition-colors duration-500 border-b border-slate-100 hover:border-slate-400 pb-1"
-                  >
-                    marc@mintel.me
-                  </a>
-                </div>
-              </Card>
-            </Reveal>
-
-            <Reveal delay={0.4}>
-              <div className="p-5 md:p-6 space-y-2 md:space-y-3 rounded-2xl border border-slate-50 bg-slate-50/30">
-                <Label className="text-slate-400 text-xs md:text-sm">
-                  Antwortzeit
-                </Label>
-                <H3 className="text-lg md:text-2xl text-slate-300">
-                  <span className="text-slate-900">&lt; 24h</span> an Werktagen.
-                </H3>
-              </div>
-            </Reveal>
-          </div>
-        </div>
+        {/* Full-width Form */}
+        <ContactForm />
       </Section>
     </div>
   );

apps/web/app/tags/[tag]/page.tsx

@@ -1,41 +1,60 @@
-import * as React from 'react';
-import Link from 'next/link';
-import { blogPosts } from '../../../src/data/blogPosts';
-import { MediumCard } from '../../../src/components/MediumCard';
+import * as React from "react";
+import Link from "next/link";
+import { blogPosts } from "../../../src/data/blogPosts";
+import { MediumCard } from "../../../src/components/MediumCard";
+import { Reveal } from "../../../src/components/Reveal";
 
 export async function generateStaticParams() {
-  const allTags = Array.from(new Set(blogPosts.flatMap(post => post.tags || [])));
-  return allTags.map(tag => ({
+  const allTags = Array.from(
+    new Set(blogPosts.flatMap((post) => post.tags || [])),
+  );
+  return allTags.map((tag) => ({
     tag,
   }));
 }
 
-export default async function TagPage({ params }: { params: Promise<{ tag: string }> }) {
+export default async function TagPage({
+  params,
+}: {
+  params: Promise<{ tag: string }>;
+}) {
   const { tag } = await params;
-  const posts = blogPosts.filter(post => post.tags?.includes(tag));
+  const posts = blogPosts.filter((post) => post.tags?.includes(tag));
 
   return (
     <div className="max-w-3xl mx-auto px-4 py-8">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold text-slate-900 mb-2">
-          Posts tagged <span className="highlighter-yellow px-2 rounded">{tag}</span>
-        </h1>
-        <p className="text-slate-600">
-          {posts.length} post{posts.length === 1 ? '' : 's'}
-        </p>
+        <Reveal>
+          <h1 className="text-3xl font-bold text-slate-900 mb-2">
+            Posts tagged{" "}
+            <span className="highlighter-yellow px-2 rounded">{tag}</span>
+          </h1>
+        </Reveal>
+        <Reveal delay={0.1}>
+          <p className="text-slate-600">
+            {posts.length} post{posts.length === 1 ? "" : "s"}
+          </p>
+        </Reveal>
       </header>
 
       <div className="space-y-4">
-        {posts.map(post => (
-          <MediumCard key={post.slug} post={post} />
+        {posts.map((post, i) => (
+          <Reveal key={post.slug} delay={0.1 + i * 0.05} width="100%">
+            <MediumCard post={post} />
+          </Reveal>
         ))}
       </div>
 
-      <div className="mt-8 pt-6 border-t border-slate-200">
-        <Link href="/blog" className="text-slate-600 hover:text-slate-900 inline-flex items-center">
-          ← Back to blog
-        </Link>
-      </div>
+      <Reveal delay={0.3}>
+        <div className="mt-8 pt-6 border-t border-slate-200">
+          <Link
+            href="/blog"
+            className="text-slate-600 hover:text-slate-900 inline-flex items-center"
+          >
+            ← Back to blog
+          </Link>
+        </div>
+      </Reveal>
     </div>
   );
 }

apps/web/app/technologies/[slug]/content.tsx

@@ -1,99 +1,141 @@
-'use client';
+"use client";
 
-import React from 'react';
-import Link from 'next/link';
-import { Container } from '../../../src/components/Layout';
-import { Label } from '../../../src/components/Typography';
-import { Check, ArrowLeft, Zap, ExternalLink } from 'lucide-react';
-import { technologies } from './data';
+import React from "react";
+import Link from "next/link";
+import { Container } from "../../../src/components/Layout";
+import { Label } from "../../../src/components/Typography";
+import { Check, ArrowLeft, Zap, ExternalLink } from "lucide-react";
+import { technologies } from "./data";
+import { Reveal } from "../../../src/components/Reveal";
 
 export default function TechnologyContent({ slug }: { slug: string }) {
-    const tech = technologies[slug];
-
-    if (!tech) {
-        return (
-            <div className="min-h-screen flex items-center justify-center">
-                <div className="text-center">
-                    <h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
-                    <Link href="/" className="text-blue-600 hover:underline">Return Home</Link>
-                </div>
-            </div>
-        );
-    }
-
-    const Icon = tech.icon;
+  const tech = technologies[slug];
 
+  if (!tech) {
     return (
-        <div className="bg-white min-h-screen text-slate-900 pb-24">
-            <div className="bg-slate-50 border-b border-slate-200">
-                <Container className="py-24">
-                    <Link href="/case-studies/klz-cables" className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors">
-                        <ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
-                    </Link>
-
-                    <div className="flex flex-col md:flex-row items-start gap-8">
-                        <div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
-                            <Icon className="w-12 h-12" />
-                        </div>
-                        <div className="flex-1">
-                            <Label className="text-slate-400 mb-2">TECHNOLOGY DEEP DIVE</Label>
-                            <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">{tech.title}</h1>
-                            <p className="text-xl text-slate-500 font-medium">{tech.subtitle}</p>
-                        </div>
-                    </div>
-                </Container>
-            </div>
-
-            <Container className="py-16">
-                <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
-                    <div className="lg:col-span-8 space-y-12">
-                        <section>
-                            <h2 className="text-2xl font-bold mb-4">What is it?</h2>
-                            <p className="text-xl leading-relaxed text-slate-700">{tech.description}</p>
-                        </section>
-
-                        <section>
-                            <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
-                                <Zap className="w-6 h-6 text-amber-500" /> Why I use it
-                            </h2>
-                            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                {tech.benefits.map((benefit, i) => (
-                                    <div key={i} className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100">
-                                        <Check className="w-5 h-5 text-green-600 shrink-0" />
-                                        <span className="font-medium text-slate-700">{benefit}</span>
-                                    </div>
-                                ))}
-                            </div>
-                        </section>
-
-                        <section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
-                            <Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
-                            <h3 className="text-2xl font-bold text-slate-900 mb-4">What does this mean for you?</h3>
-                            <p className="text-lg text-slate-700 leading-relaxed">
-                                {tech.customerValue}
-                            </p>
-                        </section>
-                    </div>
-
-                    <div className="lg:col-span-4 space-y-8">
-                        <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
-                            <h3 className="font-bold text-slate-900 mb-4">Related Technologies</h3>
-                            <div className="space-y-2">
-                                {tech.related.map((item) => (
-                                    <Link
-                                        key={item.slug}
-                                        href={`/technologies/${item.slug}`}
-                                        className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
-                                    >
-                                        <span className="font-medium text-slate-700 group-hover:text-slate-900">{item.name}</span>
-                                        <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
-                                    </Link>
-                                ))}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </Container>
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-4">Technology Not Found</h1>
+          <Link href="/" className="text-blue-600 hover:underline">
+            Return Home
+          </Link>
         </div>
+      </div>
     );
+  }
+
+  const Icon = tech.icon;
+
+  return (
+    <div className="bg-white min-h-screen text-slate-900 pb-24">
+      <div className="bg-slate-50 border-b border-slate-200">
+        <Container className="py-24">
+          <Reveal>
+            <Link
+              href="/case-studies/klz-cables"
+              className="inline-flex items-center text-sm font-bold text-slate-500 hover:text-slate-900 mb-8 transition-colors"
+            >
+              <ArrowLeft className="w-4 h-4 mr-2" /> Back to Case Study
+            </Link>
+          </Reveal>
+
+          <div className="flex flex-col md:flex-row items-start gap-8">
+            <Reveal>
+              <div className={`p-6 rounded-2xl shadow-lg ${tech.color}`}>
+                <Icon className="w-12 h-12" />
+              </div>
+            </Reveal>
+            <div className="flex-1">
+              <Reveal delay={0.1}>
+                <Label className="text-slate-400 mb-2">
+                  TECHNOLOGY DEEP DIVE
+                </Label>
+              </Reveal>
+              <Reveal delay={0.2}>
+                <h1 className="text-4xl md:text-5xl font-bold tracking-tight mb-4">
+                  {tech.title}
+                </h1>
+              </Reveal>
+              <Reveal delay={0.3}>
+                <p className="text-xl text-slate-500 font-medium">
+                  {tech.subtitle}
+                </p>
+              </Reveal>
+            </div>
+          </div>
+        </Container>
+      </div>
+
+      <Container className="py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
+          <div className="lg:col-span-8 space-y-12">
+            <section>
+              <Reveal>
+                <h2 className="text-2xl font-bold mb-4">What is it?</h2>
+                <p className="text-xl leading-relaxed text-slate-700">
+                  {tech.description}
+                </p>
+              </Reveal>
+            </section>
+
+            <section>
+              <Reveal>
+                <h2 className="text-2xl font-bold mb-6 flex items-center gap-3">
+                  <Zap className="w-6 h-6 text-amber-500" /> Why I use it
+                </h2>
+              </Reveal>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                {tech.benefits.map((benefit, i) => (
+                  <Reveal key={i} delay={0.1 + i * 0.05}>
+                    <div className="flex gap-3 p-4 bg-slate-50 rounded-xl border border-slate-100 h-full">
+                      <Check className="w-5 h-5 text-green-600 shrink-0" />
+                      <span className="font-medium text-slate-700">
+                        {benefit}
+                      </span>
+                    </div>
+                  </Reveal>
+                ))}
+              </div>
+            </section>
+
+            <Reveal delay={0.4}>
+              <section className="bg-blue-50 border border-blue-100 rounded-2xl p-8">
+                <Label className="text-blue-600 mb-2">CUSTOMER IMPACT</Label>
+                <h3 className="text-2xl font-bold text-slate-900 mb-4">
+                  What does this mean for you?
+                </h3>
+                <p className="text-lg text-slate-700 leading-relaxed">
+                  {tech.customerValue}
+                </p>
+              </section>
+            </Reveal>
+          </div>
+
+          <div className="lg:col-span-4 space-y-8">
+            <Reveal delay={0.5}>
+              <div className="bg-slate-50 border border-slate-200 rounded-2xl p-6 sticky top-24">
+                <h3 className="font-bold text-slate-900 mb-4">
+                  Related Technologies
+                </h3>
+                <div className="space-y-2">
+                  {tech.related.map((item) => (
+                    <Link
+                      key={item.slug}
+                      href={`/technologies/${item.slug}`}
+                      className="flex items-center justify-between p-3 bg-white border border-slate-200 rounded-lg hover:border-slate-400 hover:shadow-sm transition-all group"
+                    >
+                      <span className="font-medium text-slate-700 group-hover:text-slate-900">
+                        {item.name}
+                      </span>
+                      <ExternalLink className="w-4 h-4 text-slate-400 group-hover:text-slate-600" />
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </Reveal>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
 }

apps/web/app/websites/page.tsx

@@ -1,22 +1,19 @@
 "use client";
 
-import { PageHeader } from "../../src/components/PageHeader";
 import { Reveal } from "../../src/components/Reveal";
 import { Section } from "../../src/components/Section";
 import {
-  SystemArchitecture,
   SpeedPerformance,
   SolidFoundation,
   LayerSeparation,
-  DirectService,
   TaskDone,
 } from "../../src/components/Landing";
 import {
   H3,
-  H4,
   LeadText,
   BodyText,
   Label,
+  MonoLabel,
 } from "../../src/components/Typography";
 import { Card } from "../../src/components/Layout";
 import { Button } from "../../src/components/Button";
@@ -25,6 +22,9 @@ import {
   GradientMesh,
   CodeSnippet,
   AbstractCircuit,
+  CMSVisualizer,
+  ArchitectureVisualizer,
+  ResultVisualizer,
 } from "../../src/components/Effects";
 import { Marker } from "../../src/components/Marker";
 
@@ -33,86 +33,77 @@ export default function WebsitesPage() {
     <div className="flex flex-col bg-white overflow-hidden relative">
       <AbstractCircuit />
 
-      <PageHeader
-        title={
-          <>
-            Websites, die <br />
-            <span className="text-slate-400">
-              <Marker color="rgba(255,235,59,0.5)">
-                einfach funktionieren.
-              </Marker>
-            </span>
-          </>
-        }
-        description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
-        backgroundSymbol="W"
-        className="px-5 md:px-0"
-      />
+      <Section className="pt-24 pb-12 md:pt-40 md:pb-24">
+        <div className="space-y-12 md:space-y-24">
+          <div className="space-y-6 md:space-y-10 max-w-5xl">
+            <Reveal>
+              <div className="space-y-4">
+                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
+                  SYSTEM ENGINEERING
+                </MonoLabel>
+                <H3 className="text-4xl md:text-8xl leading-[1.0] tracking-tighter">
+                  Websites, die <br />
+                  <span className="text-slate-400">
+                    <Marker color="rgba(255,235,59,0.5)">
+                      einfach funktionieren.
+                    </Marker>
+                  </span>
+                </H3>
+              </div>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-500 md:text-slate-400 leading-relaxed">
+                Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur
+                für{" "}
+                <span className="text-slate-900 font-bold underline decoration-slate-200 underline-offset-8">
+                  maximale Performance
+                </span>
+                .
+              </LeadText>
+            </Reveal>
+          </div>
 
-      {/* 01: Architektur – WIE ich baue */}
-      <Section
-        number="01"
-        title="Architektur"
-        borderTop
-        illustration={<SystemArchitecture className="w-24 h-24" />}
-      >
-        <div className="space-y-8 md:space-y-12">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Systeme, nicht Broschüren. <br />
-              <span className="text-slate-400">
-                Jede Website ist Ingenieursarbeit.
-              </span>
-            </H3>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <LeadText className="text-lg md:text-2xl max-w-2xl text-slate-400">
-              Ich entwickle Websites von Grund auf – mit modernen Frameworks,
-              eigener Infrastruktur und einem Deployment-Prozess, der{" "}
-              <span className="text-slate-900">
-                <Marker delay={0.2} color="rgba(148,163,184,0.1)">
-                  automatisiert und reproduzierbar
-                </Marker>
-              </span>{" "}
-              ist.
-            </LeadText>
-          </Reveal>
+          <div className="space-y-12">
+            <Reveal delay={0.3} direction="up">
+              <ArchitectureVisualizer />
+            </Reveal>
 
-          {/* Tech Stack Visual */}
-          <Reveal delay={0.4}>
-            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 md:gap-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
               {[
-                { label: "Next.js", sub: "Framework" },
-                { label: "TypeScript", sub: "Sprache" },
-                { label: "Docker", sub: "Infrastruktur" },
-                { label: "Directus", sub: "CMS" },
+                {
+                  label: "Next.js",
+                  sub: "Architecture",
+                  desc: "React-Framework für maximale SEO & Speed.",
+                },
+                {
+                  label: "Docker",
+                  sub: "Infrastructure",
+                  desc: "Reproduzierbare Umgebungen überall.",
+                },
+                {
+                  label: "Directus",
+                  sub: "Management",
+                  desc: "Headless CMS für flexible Datenabfrage.",
+                },
+                {
+                  label: "Gitea",
+                  sub: "Pipeline",
+                  desc: "Self-hosted Git & CI/CD Pipelines.",
+                },
               ].map((item, i) => (
-                <Card
-                  key={i}
-                  variant="glass"
-                  padding="small"
-                  techBorder
-                  className="group text-center"
-                >
-                  <div className="space-y-1 md:space-y-2">
-                    <Label className="text-slate-900 text-xs md:text-sm">
+                <Reveal key={i} delay={0.4 + i * 0.1}>
+                  <div className="space-y-2 p-6 rounded-2xl border border-slate-50 bg-white shadow-sm hover:border-slate-200 transition-all group">
+                    <Label className="text-slate-900 group-hover:text-blue-600 transition-colors uppercase tracking-widest text-[10px]">
                       {item.label}
                     </Label>
-                    <span className="block text-[8px] md:text-[9px] font-mono text-slate-300 uppercase tracking-widest">
-                      {item.sub}
-                    </span>
+                    <BodyText className="text-xs text-slate-400">
+                      {item.desc}
+                    </BodyText>
                   </div>
-                </Card>
+                </Reveal>
               ))}
             </div>
-          </Reveal>
-
-          {/* Decorative Code Snippet */}
-          <Reveal delay={0.6}>
-            <div className="max-w-md opacity-70">
-              <CodeSnippet variant="code" />
-            </div>
-          </Reveal>
+          </div>
         </div>
       </Section>
 
@@ -139,7 +130,7 @@ export default function WebsitesPage() {
           <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-center">
             <div className="md:col-span-12 lg:col-span-7 space-y-6 md:space-y-8">
               <Reveal delay={0.2}>
-                <LeadText className="text-lg md:text-xl text-slate-400">
+                <LeadText className="text-lg md:text-xl text-slate-500 md:text-slate-400">
                   Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
                   Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
                   <span className="text-slate-900">Reproduzierbar.</span>
@@ -199,7 +190,7 @@ export default function WebsitesPage() {
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
+            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-500 md:text-slate-400">
               Ihre Website besteht aus{" "}
               <span className="text-slate-900">Ihrem Code</span>. Kein
               WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
@@ -249,58 +240,90 @@ export default function WebsitesPage() {
         illustration={<LayerSeparation className="w-24 h-24" />}
         effects={<GradientMesh variant="subtle" className="opacity-60" />}
       >
-        <div className="space-y-8 md:space-y-12">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl leading-tight max-w-3xl">
-              Inhalte pflegen <br />
-              <span className="text-slate-400">ohne Angst.</span>
-            </H3>
-          </Reveal>
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-8 md:gap-12 items-start">
-            <div className="md:col-span-12 lg:col-span-7">
-              <Reveal delay={0.2}>
-                <LeadText className="text-lg md:text-2xl text-slate-400">
-                  Technik und Inhalt sind{" "}
-                  <span className="text-slate-900">
-                    <Marker color="rgba(255,235,59,0.5)">
-                      strikt getrennt
-                    </Marker>
+        <div className="space-y-12 md:space-y-20">
+          <div className="space-y-6 md:space-y-10 max-w-5xl">
+            <Reveal>
+              <div className="space-y-4">
+                <MonoLabel className="text-blue-500 tracking-[0.2em] text-[10px] md:text-xs">
+                  ARCHITECTURAL SEPARATION
+                </MonoLabel>
+                <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
+                  Inhalte pflegen <br />
+                  <span className="text-slate-400 italic font-serif">
+                    ohne Angst.
                   </span>
-                  . Sie bearbeiten Texte und Bilder in einem intuitiven System –
-                  das Design bleibt geschützt.
+                </H3>
+              </div>
+            </Reveal>
+
+            <Reveal delay={0.2}>
+              <div className="space-y-6">
+                <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 leading-relaxed max-w-3xl">
+                  Vergessen Sie zerschossene Layouts nach einem Textupdate.
+                  Meine Websites trennen{" "}
+                  <span className="text-slate-900 font-bold underline decoration-blue-500/30 underline-offset-8">
+                    Daten von Design
+                  </span>
+                  .
                 </LeadText>
+              </div>
+            </Reveal>
+          </div>
+
+          <div className="grid grid-cols-1 lg:grid-cols-12 gap-12 items-start">
+            <div className="lg:col-span-8 relative">
+              <Reveal delay={0.4} direction="up">
+                <CMSVisualizer className="w-full mx-auto" />
               </Reveal>
             </div>
-            <div className="md:col-span-12 lg:col-span-5">
-              <Reveal delay={0.4}>
-                <Card
-                  variant="glass"
-                  padding="normal"
-                  techBorder
-                  className="space-y-6"
-                >
-                  <div className="space-y-3">
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-green-500"></div>
-                      <Label className="text-slate-900">Sie dürfen</Label>
-                    </div>
-                    <BodyText className="font-medium text-sm md:text-base">
-                      Texte, Bilder und Inhalte frei bearbeiten.
-                    </BodyText>
+
+            <div className="lg:col-span-4 space-y-8">
+              <Reveal delay={0.5}>
+                <div className="space-y-4">
+                  <BodyText className="text-slate-500 leading-relaxed">
+                    Durch eine krisenfeste Headless-Architektur (Directus)
+                    bewegen Sie sich in einem geschützten Sandkasten – während
+                    das Frontend-System die visuelle Integrität Ihrer Marke
+                    garantiert.
+                  </BodyText>
+
+                  <div className="flex flex-wrap gap-3">
+                    {["Layout-Schutz", "Live-Vorschau", "Role-RBAC"].map(
+                      (tag, i) => (
+                        <div
+                          key={i}
+                          className="px-3 py-1 bg-white border border-slate-100 rounded-full text-[10px] font-mono text-slate-400"
+                        >
+                          {tag}
+                        </div>
+                      ),
+                    )}
                   </div>
-                  <div className="space-y-3 opacity-40">
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-slate-300"></div>
-                      <Label>Geschützt</Label>
-                    </div>
-                    <BodyText className="line-through text-xs md:text-base">
-                      Design, Layout, Code-Struktur.
-                    </BodyText>
+                </div>
+              </Reveal>
+
+              <Reveal delay={0.6}>
+                <div className="p-6 bg-slate-900 rounded-2xl shadow-xl text-[10px] font-mono text-white/50 space-y-3">
+                  <div className="flex justify-between items-center text-white/90">
+                    <span>PROTOCOL</span>
+                    <span className="text-green-500 font-bold">ENFORCED</span>
                   </div>
-                </Card>
+                  <p className="leading-tight">
+                    Website architecture validates all CMS payloads against the
+                    design schema before rendering.
+                  </p>
+                  <div className="pt-2 border-t border-white/10 flex items-center justify-between">
+                    <span>INTEGRITY</span>
+                    <span className="text-white">100%</span>
+                  </div>
+                </div>
               </Reveal>
             </div>
           </div>
+
+          <Reveal delay={0.7}>
+            <div className="p-px w-full bg-gradient-to-r from-transparent via-slate-100 to-transparent" />
+          </Reveal>
         </div>
       </Section>
 
@@ -311,52 +334,40 @@ export default function WebsitesPage() {
         borderTop
         illustration={<TaskDone className="w-24 h-24" />}
       >
-        <div className="space-y-8 md:space-y-16">
-          <Reveal>
-            <H3 className="text-2xl md:text-5xl tracking-tighter">
-              Was Sie konkret <br />
-              <span className="text-slate-400">bekommen.</span>
-            </H3>
-          </Reveal>
-
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-12">
-            {[
-              {
-                title: "Ihr Code",
-                desc: "Vollständiger Quellcode, versioniert auf GitHub. Kein Vendor Lock-in.",
-              },
-              {
-                title: "Ihre Infrastruktur",
-                desc: "Docker-Container, CI/CD-Pipeline, automatisches Deployment.",
-              },
-              {
-                title: "Ihr CMS",
-                desc: "Eigenes Content-Management-System. Volle Kontrolle über Ihre Inhalte.",
-              },
-            ].map((item, i) => (
-              <Reveal key={i} delay={i * 0.1}>
-                <div className="space-y-3 md:space-y-4 group">
-                  <div className="w-8 h-px bg-slate-200 group-hover:w-full transition-all duration-1000" />
-                  <H4 className="text-lg md:text-2xl font-bold">
-                    {item.title}
-                  </H4>
-                  <LeadText className="text-sm md:text-lg text-slate-400">
-                    {item.desc}
-                  </LeadText>
-                </div>
-              </Reveal>
-            ))}
+        <div className="space-y-12 md:space-y-24">
+          <div className="max-w-4xl space-y-6">
+            <Reveal>
+              <H3 className="text-4xl md:text-7xl leading-[1.1] tracking-tighter">
+                Was Sie konkret <br />
+                <span className="text-slate-400">bekommen.</span>
+              </H3>
+            </Reveal>
+            <Reveal delay={0.2}>
+              <LeadText className="text-lg md:text-2xl text-slate-500 md:text-slate-400 max-w-2xl">
+                Keine halben Sachen. Ich liefere Ihnen ein schlüsselfertiges
+                System mit voller Kontrolle und Transparenz.
+              </LeadText>
+            </Reveal>
           </div>
 
-          <Reveal delay={0.4}>
-            <div className="pt-10 md:pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-6 md:gap-8">
-              <div className="space-y-2">
-                <Label>Bereit?</Label>
-                <LeadText className="text-xl md:text-2xl">
+          <Reveal delay={0.3} direction="up">
+            <ResultVisualizer />
+          </Reveal>
+
+          <Reveal delay={0.5}>
+            <div className="pt-10 md:pt-16 border-t border-slate-100 flex flex-col md:flex-row justify-between items-start md:items-center gap-12">
+              <div className="space-y-3">
+                <MonoLabel className="text-blue-500">
+                  BEREIT FÜR DEN NÄCHSTEN SCHRITT?
+                </MonoLabel>
+                <div className="text-xl md:text-3xl font-bold tracking-tight text-slate-900">
                   Lassen Sie uns über Ihr Projekt sprechen.
-                </LeadText>
+                </div>
               </div>
-              <Button href="/contact" className="w-full md:w-auto">
+              <Button
+                href="/contact"
+                className="w-full md:w-auto h-16 px-10 text-lg rounded-2xl shadow-2xl shadow-blue-500/10"
+              >
                 Projekt anfragen
               </Button>
             </div>