feat: unify code-like components with shared CodeWindow, fix blog re-render loop, and stabilize layouts

apps/web/app/about/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Image from "next/image";
 import { PageHeader } from "../../src/components/PageHeader";
 import { Section } from "../../src/components/Section";
@@ -6,7 +8,6 @@ import {
   ExperienceIllustration,
   ResponsibilityIllustration,
   ResultIllustration,
-  ConceptSystem,
   ContactIllustration,
   HeroLines,
   ParticleNetwork,
@@ -21,26 +22,23 @@ import {
   Label,
   MonoLabel,
 } from "../../src/components/Typography";
-import { BackgroundGrid, Card, Container } from "../../src/components/Layout";
+import { Card, Container } from "../../src/components/Layout";
 import { Button } from "../../src/components/Button";
 import { IconList, IconListItem } from "../../src/components/IconList";
+import {
+  GradientMesh,
+  CodeSnippet,
+  AbstractCircuit,
+} from "../../src/components/Effects";
+import { Marker } from "../../src/components/Marker";
 
 export default function AboutPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      {/* Background Elements */}
-      <ParticleNetwork className="opacity-20" />
-      <BackgroundGrid />
+      <AbstractCircuit />
 
       {/* Hero Section */}
       <section className="relative pt-32 pb-24 overflow-hidden border-b border-slate-50">
-        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full opacity-10 pointer-events-none">
-          <HeroLines className="w-full h-full" />
-        </div>
-        <div className="absolute right-0 top-0 w-96 h-96 opacity-5 pointer-events-none">
-          <GridLines />
-        </div>
-
         <Container variant="narrow" className="relative z-10">
           <div className="flex flex-col items-center text-center space-y-12">
             <Reveal>
@@ -75,10 +73,11 @@ export default function AboutPage() {
               <PageHeader
                 title={
                   <>
-                    Über <span className="text-slate-200">mich.</span>
+                    Über <span className="text-slate-400">mich.</span>
                   </>
                 }
-                description="Warum ich tue, was ich tue – und wie Sie davon profitieren."
+                description="15 Jahre Erfahrung. Ein Ziel: Websites, die ihre Versprechen halten."
+                backLink={{ href: "/", label: "Zurück" }}
                 className="pt-0 md:pt-0"
               />
             </div>
@@ -89,7 +88,7 @@ export default function AboutPage() {
         <div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-px h-16 bg-gradient-to-b from-transparent to-slate-200" />
       </section>
 
-      {/* Section 01: Experience */}
+      {/* Section 01: Story */}
       <Section
         number="01"
         title="Erfahrung"
@@ -99,10 +98,8 @@ export default function AboutPage() {
         <div className="space-y-12">
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              15 Jahre Web-Entwicklung. <br />
-              <span className="text-slate-200">
-                Vom Designer zum Architekten.
-              </span>
+              Vom Designer <br />
+              <span className="text-slate-400">zum Architekten.</span>
             </H3>
           </Reveal>
 
@@ -110,17 +107,20 @@ export default function AboutPage() {
             <Reveal delay={0.1}>
               <div className="space-y-8">
                 <LeadText className="text-xl md:text-2xl text-slate-400">
-                  Ich habe Agenturen, Konzerne und Startups von innen gesehen.
-                  Dabei habe ich gelernt, what really counts:{" "}
+                  Agenturen, Konzerne, Startups – ich habe die Branche von allen
+                  Seiten kennengelernt. Was hängen geblieben ist:{" "}
                   <span className="text-slate-900">
-                    Ergebnisse, nicht Prozesse.
+                    <Marker delay={0.2} color="rgba(148,163,184,0.15)">
+                      Ergebnisse zählen.
+                    </Marker>{" "}
+                    Nicht der Weg dorthin.
                   </span>
                 </LeadText>
                 <IconList className="space-y-4">
                   {[
-                    "Komplexe Systeme vereinfacht",
-                    "Performance-Probleme gelöst",
-                    "Nachhaltige Software-Architekturen gebaut",
+                    "Frontend, Backend, Infrastruktur – Fullstack",
+                    "Komplexe Systeme auf das Wesentliche reduziert",
+                    "Performance-Probleme systematisch gelöst",
                   ].map((item, i) => (
                     <IconListItem key={i} bullet>
                       <BodyText className="text-lg">{item}</BodyText>
@@ -137,8 +137,7 @@ export default function AboutPage() {
                 className="group"
               >
                 <H4 className="text-2xl mb-6">
-                  Mein Fokus heute: Direkte Zusammenarbeit ohne
-                  Reibungsverluste.
+                  Heute: Direkte Zusammenarbeit ohne Reibungsverluste.
                 </H4>
                 <div className="flex flex-wrap gap-3">
                   {["Effizient", "Pragmatisch", "Verlässlich"].map((tag, i) => (
@@ -156,64 +155,77 @@ export default function AboutPage() {
         </div>
       </Section>
 
-      {/* Section 02: Responsibility */}
+      {/* Section 02: Arbeitsweise – HOW I work */}
       <Section
         number="02"
-        title="Verantwortung"
+        title="Arbeitsweise"
         variant="gray"
         borderTop
         illustration={<ResponsibilityIllustration className="w-24 h-24" />}
+        effects={<GradientMesh variant="subtle" className="opacity-60" />}
       >
         <div className="space-y-12">
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              Ich stehe für meine <br />
-              <span className="text-slate-200">Arbeit gerade.</span>
+              So läuft ein Projekt <br />
+              <span className="text-slate-400">bei mir ab.</span>
             </H3>
           </Reveal>
 
-          <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
-            <div className="md:col-span-8 space-y-8">
-              <Reveal delay={0.1}>
-                <LeadText className="text-xl md:text-2xl text-slate-400">
-                  In der klassischen Agenturwelt verschwindet Verantwortung oft
-                  hinter Hierarchien. Bei mir gibt es nur{" "}
-                  <span className="text-slate-900">einen Ansprechpartner:</span>{" "}
-                  Mich.
-                </LeadText>
-              </Reveal>
-              <Reveal delay={0.2}>
-                <Card
-                  variant="white"
-                  padding="normal"
-                  className="flex flex-row items-start gap-6 group"
-                >
-                  <div className="w-12 h-12 bg-slate-900 text-white rounded-xl flex items-center justify-center shrink-0 font-bold text-xl group-hover:rotate-12 transition-transform duration-500">
-                    !
+          {/* Timeline Steps */}
+          <div className="space-y-1 relative">
+            {/* Connecting line */}
+            <div className="absolute left-[15px] top-8 bottom-8 w-px bg-slate-200 hidden md:block" />
+
+            {[
+              {
+                step: "01",
+                title: "Briefing",
+                desc: "Sie beschreiben Ihr Vorhaben. Ich höre zu und stelle die richtigen Fragen.",
+              },
+              {
+                step: "02",
+                title: "Angebot",
+                desc: "Ein Fixpreis-Angebot mit klarem Leistungsumfang. Keine Überraschungen.",
+              },
+              {
+                step: "03",
+                title: "Umsetzung",
+                desc: "Schnelle Iterationen. Sie sehen regelmäßig den Fortschritt und geben Feedback.",
+              },
+              {
+                step: "04",
+                title: "Launch",
+                desc: "Go-Live mit automatisiertem Deployment. Dokumentiert und übergabereif.",
+              },
+            ].map((item, i) => (
+              <Reveal key={i} delay={0.1 + i * 0.1}>
+                <div className="flex gap-6 py-6 group">
+                  <div className="relative z-10 shrink-0">
+                    <div className="w-8 h-8 rounded-full bg-white border border-slate-200 flex items-center justify-center group-hover:border-slate-400 group-hover:shadow-md transition-all duration-500">
+                      <span className="text-[9px] font-mono font-bold text-slate-400 group-hover:text-slate-900 transition-colors">
+                        {item.step}
+                      </span>
+                    </div>
                   </div>
-                  <BodyText className="text-slate-900 font-medium text-lg md:text-xl leading-relaxed">
-                    Ich übernehme die volle Verantwortung für die technische
-                    Umsetzung und Qualität Ihres Projekts. Ohne Ausreden.
-                  </BodyText>
-                </Card>
+                  <div className="space-y-2 pt-1">
+                    <H4 className="text-xl">{item.title}</H4>
+                    <BodyText className="text-slate-500">{item.desc}</BodyText>
+                  </div>
+                </div>
               </Reveal>
-            </div>
+            ))}
           </div>
         </div>
       </Section>
 
-      {/* Section 03: Systems */}
-      <Section
-        number="03"
-        title="Philosophie"
-        borderTop
-        illustration={<ConceptSystem className="w-24 h-24" />}
-      >
+      {/* Section 03: Philosophie – what drives me */}
+      <Section number="03" title="Philosophie" borderTop>
         <div className="space-y-16">
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              Nachhaltigkeit durch <br />
-              <span className="text-slate-200">sauberen Code.</span>
+              Ich stehe für <br />
+              <span className="text-slate-400">meine Arbeit gerade.</span>
             </H3>
           </Reveal>
 
@@ -221,24 +233,24 @@ export default function AboutPage() {
             <div className="space-y-8">
               <Reveal delay={0.1}>
                 <LeadText className="text-xl text-slate-400">
-                  Ich baue keine Wegwerf-Produkte. Meine Systeme sind so
-                  konzipiert, dass sie mit Ihrem Unternehmen{" "}
-                  <span className="text-slate-900">wachsen können.</span>
+                  Keine Hierarchien, keine Ausreden. Wenn etwas nicht passt,
+                  liegt die Verantwortung bei mir – und ich{" "}
+                  <span className="text-slate-900">
+                    <Marker color="rgba(255,235,59,0.5)">löse es.</Marker>
+                  </span>
                 </LeadText>
               </Reveal>
               <div className="grid grid-cols-2 gap-4">
                 {[
-                  "Skalierbar",
-                  "Wartbar",
-                  "Performant",
-                  "Sicher",
-                  "Unabhängig",
-                  "Zukunftssicher",
+                  "Vollständige Transparenz",
+                  "Ein Ansprechpartner",
+                  "Messbare Qualität",
+                  "Langfristige Partnerschaft",
                 ].map((item, i) => (
                   <Reveal key={i} delay={0.2 + i * 0.05}>
                     <div className="flex items-center gap-3 group">
-                      <div className="w-5 h-5 rounded-full bg-slate-50 flex items-center justify-center group-hover:bg-slate-900 transition-colors duration-500">
-                        <Check className="w-2.5 h-2.5 text-slate-400 group-hover:text-white" />
+                      <div className="w-6 h-6 rounded-full bg-white border border-slate-200 flex items-center justify-center shrink-0 group-hover:bg-slate-900 group-hover:border-slate-900 group-hover:shadow-lg group-hover:shadow-blue-500/10 transition-all duration-300">
+                        <Check className="w-3 h-3 text-slate-400 group-hover:text-white transition-colors duration-300" />
                       </div>
                       <Label className="text-slate-900">{item}</Label>
                     </div>
@@ -246,126 +258,47 @@ export default function AboutPage() {
                 ))}
               </div>
             </div>
+
+            {/* Decorative terminal */}
             <Reveal delay={0.3}>
-              <Card
-                variant="dark"
-                padding="normal"
-                className="relative rounded-2xl overflow-hidden group"
-              >
-                <div className="absolute top-0 right-0 w-48 h-48 bg-white/5 -translate-y-24 translate-x-24 rounded-full blur-3xl group-hover:bg-white/10 transition-colors duration-1000" />
-                <H4 className="text-white text-2xl mb-6 relative z-10">
-                  Kein Vendor Lock-in.
-                </H4>
-                <LeadText className="text-slate-400 text-lg relative z-10 leading-relaxed">
-                  Sie behalten die volle Kontrolle über Ihren Code und Ihre
-                  Daten. Keine Abhängigkeit von proprietären Systemen.
-                </LeadText>
-              </Card>
+              <CodeSnippet variant="terminal" className="opacity-70" />
             </Reveal>
           </div>
         </div>
       </Section>
 
-      {/* Section 04: Result */}
+      {/* Section 04: CTA */}
       <Section
         number="04"
-        title="Ergebnis"
-        borderTop
-        illustration={<ResultIllustration className="w-24 h-24" />}
-      >
-        <div className="space-y-16">
-          <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              Was Sie von mir <br />
-              <span className="text-slate-200">erwarten können.</span>
-            </H3>
-          </Reveal>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
-            <div className="space-y-8">
-              <div className="space-y-6">
-                <Label>Kein:</Label>
-                <div className="flex flex-wrap gap-3">
-                  {[
-                    "Agentur-Zirkus",
-                    "Meeting-Marathon",
-                    "Ticket-Wahnsinn",
-                    "CMS-Frust",
-                  ].map((item, i) => (
-                    <span
-                      key={i}
-                      className="px-4 py-2 border border-slate-100 rounded-full bg-slate-50/50"
-                    >
-                      <BodyText className="text-slate-400 line-through text-base mb-0">
-                        {item}
-                      </BodyText>
-                    </span>
-                  ))}
-                </div>
-              </div>
-            </div>
-            <div className="space-y-8">
-              <div className="space-y-6">
-                <Label className="text-slate-900">Sondern (fix):</Label>
-                <IconList className="space-y-8">
-                  {[
-                    {
-                      label: "Direkte Kommunikation",
-                      desc: "Kurze Wege, schnelle Entscheidungen.",
-                    },
-                    {
-                      label: "Echte Expertise",
-                      desc: "Fundiertes Wissen aus 15 Jahren Praxis.",
-                    },
-                    {
-                      label: "Messbare Qualität",
-                      desc: "Code, der hält, was er verspricht.",
-                    },
-                  ].map((item, i) => (
-                    <IconListItem key={i} check>
-                      <div className="space-y-1">
-                        <H4 className="text-xl leading-none">{item.label}</H4>
-                        <BodyText className="text-base text-slate-400">
-                          {item.desc}
-                        </BodyText>
-                      </div>
-                    </IconListItem>
-                  ))}
-                </IconList>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Section>
-
-      {/* Section 05: Today */}
-      <Section
-        number="05"
         title="Kontakt"
         variant="gray"
         borderTop
         illustration={<ContactIllustration className="w-24 h-24" />}
+        effects={<GradientMesh variant="metallic" className="opacity-60" />}
       >
         <div className="space-y-12">
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Bereit für eine <br />
-              <span className="text-slate-200">Zusammenarbeit?</span>
+              <span className="text-slate-400">Zusammenarbeit?</span>
             </H3>
           </Reveal>
 
           <Card
-            variant="white"
+            variant="glass"
             hover={false}
             padding="large"
+            techBorder
             className="rounded-3xl shadow-xl relative overflow-hidden group"
           >
-            <div className="absolute top-0 right-0 w-96 h-96 bg-slate-50 -translate-y-1/2 translate-x-1/2 rounded-full blur-[80px] group-hover:bg-slate-100 transition-colors duration-1000" />
-
             <div className="relative z-10 space-y-8">
               <LeadText className="text-2xl md:text-4xl leading-tight max-w-2xl text-slate-400">
                 Lassen Sie uns gemeinsam etwas bauen, das{" "}
-                <span className="text-slate-900">wirklich funktioniert.</span>
+                <span className="text-slate-900">
+                  <Marker delay={0.3} color="rgba(148,163,184,0.15)">
+                    wirklich funktioniert.
+                  </Marker>
+                </span>
               </LeadText>
 
               <div className="pt-4">