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

apps/web/app/websites/page.tsx

@@ -10,98 +10,129 @@ import {
   LayerSeparation,
   DirectService,
   TaskDone,
-  ConceptAutomation,
-  ConceptCode,
-  ConceptCommunication,
-  ConceptPrototyping,
-  ConceptSystem,
-  ConceptTarget,
 } from "../../src/components/Landing";
-import { Check } from "lucide-react";
 import {
-  H2,
   H3,
   H4,
   LeadText,
   BodyText,
   Label,
 } from "../../src/components/Typography";
-import { BackgroundGrid, Card } from "../../src/components/Layout";
-import { MotionButton } from "../../src/components/Button";
+import { Card } 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 WebsitesPage() {
   return (
     <div className="flex flex-col bg-white overflow-hidden relative">
-      <BackgroundGrid />
+      <AbstractCircuit />
 
       <PageHeader
         title={
           <>
             Websites, die <br />
-            <span className="text-slate-200">einfach funktionieren.</span>
+            <span className="text-slate-400">
+              <Marker color="rgba(255,235,59,0.5)">
+                einfach funktionieren.
+              </Marker>
+            </span>
           </>
         }
-        description="Keine Baukästen, keine Plugins, kein Overhead. Nur sauberer Code und maximale Performance."
+        description="Kein Baukasten. Kein Plugin-Chaos. Maßgeschneiderte Architektur für maximale Performance."
         backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="W"
       />
 
-      {/* Intro / Problem */}
+      {/* 01: Architektur – WIE ich baue */}
       <Section
         number="01"
-        title="Der Ansatz"
+        title="Architektur"
         borderTop
         illustration={<SystemArchitecture className="w-24 h-24" />}
       >
         <div className="space-y-12">
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              Ich baue Websites wie Systeme – <br />
-              <span className="text-slate-200">nicht wie Broschüren.</span>
+              Systeme, nicht Broschüren. <br />
+              <span className="text-slate-400">
+                Jede Website ist Ingenieursarbeit.
+              </span>
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
             <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
-              Eine Website ist kein Flyer. Sie ist ein{" "}
-              <span className="text-slate-900">Werkzeug</span>, das jeden Tag
-              arbeitet. Deshalb baue ich sie stabil, schnell und wartungsfrei.
+              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>
+
+          {/* Tech Stack Visual */}
           <Reveal delay={0.4}>
-            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-8">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
               {[
-                { label: "Stabil", icon: ConceptSystem },
-                { label: "Schnell", icon: ConceptAutomation },
-                { label: "Wartungsfrei", icon: ConceptCode },
-                { label: "Sicher", icon: ConceptTarget },
+                { label: "Next.js", sub: "Framework" },
+                { label: "TypeScript", sub: "Sprache" },
+                { label: "Docker", sub: "Infrastruktur" },
+                { label: "Directus", sub: "CMS" },
               ].map((item, i) => (
-                <div key={i} className="flex flex-col gap-3 group">
-                  <div className="w-12 h-12 rounded-xl bg-slate-50 flex items-center justify-center border border-slate-100 group-hover:scale-110 transition-transform duration-500">
-                    <item.icon className="w-6 h-6" />
+                <Card
+                  key={i}
+                  variant="glass"
+                  padding="small"
+                  techBorder
+                  className="group text-center"
+                >
+                  <div className="space-y-2">
+                    <Label className="text-slate-900 text-sm">
+                      {item.label}
+                    </Label>
+                    <span className="block text-[9px] font-mono text-slate-300 uppercase tracking-widest">
+                      {item.sub}
+                    </span>
                   </div>
-                  <Label className="text-slate-900">{item.label}</Label>
-                </div>
+                </Card>
               ))}
             </div>
           </Reveal>
+
+          {/* Decorative Code Snippet */}
+          <Reveal delay={0.6}>
+            <div className="max-w-md opacity-70">
+              <CodeSnippet variant="code" />
+            </div>
+          </Reveal>
         </div>
       </Section>
 
-      {/* Speed */}
+      {/* 02: Performance */}
       <Section
         number="02"
         title="Performance"
         borderTop
         variant="gray"
         illustration={<SpeedPerformance 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">
               Geschwindigkeit ist <br />
-              <span className="text-slate-200">
-                kein Extra. Sie ist Standard.
+              <span className="text-slate-400">
+                <Marker delay={0.3} color="rgba(148,163,184,0.15)">
+                  kein Extra. Sie ist Standard.
+                </Marker>
               </span>
             </H3>
           </Reveal>
@@ -109,19 +140,18 @@ export default function WebsitesPage() {
             <div className="md:col-span-7 space-y-8">
               <Reveal delay={0.2}>
                 <LeadText className="text-xl text-slate-400">
-                  Viele Websites sind langsam, weil sie zusammengeklickt sind.
-                  Meine sind schnell, weil sie{" "}
-                  <span className="text-slate-900">von Grund auf</span>{" "}
-                  entwickelt wurden.
+                  Jede Seite wird vorab gerendert und über ein CDN ausgeliefert.
+                  Das Ergebnis: Ladezeiten unter einer Sekunde. Messbar.{" "}
+                  <span className="text-slate-900">Reproduzierbar.</span>
                 </LeadText>
               </Reveal>
               <Reveal delay={0.4}>
                 <IconList className="space-y-4">
                   {[
-                    "Seiten laden ohne Verzögerung",
-                    "Optimiert für Suchmaschinen (SEO)",
-                    "Bessere Nutzererfahrung",
-                    "Höhere Conversion-Rates",
+                    "Server-Side Rendering für sofortige Inhalte",
+                    "Automatische Bild-Optimierung (WebP, AVIF)",
+                    "Lighthouse-Score 90+ als Mindeststandard",
+                    "Core Web Vitals im grünen Bereich",
                   ].map((item, i) => (
                     <IconListItem key={i} bullet>
                       <LeadText className="text-lg md:text-xl">{item}</LeadText>
@@ -133,14 +163,18 @@ export default function WebsitesPage() {
             <div className="md:col-span-5">
               <Reveal delay={0.6}>
                 <Card
-                  variant="white"
+                  variant="glass"
                   padding="normal"
+                  techBorder
                   className="text-center group"
                 >
                   <div className="text-7xl md:text-8xl font-bold text-slate-900 tracking-tighter group-hover:scale-110 transition-transform duration-700">
                     90+
                   </div>
-                  <Label className="mt-4">Pagespeed Score</Label>
+                  <Label className="mt-4">Lighthouse Score</Label>
+                  <span className="block text-[9px] font-mono text-slate-300 mt-2 tracking-wider">
+                    PERFORMANCE · ACCESSIBILITY · SEO
+                  </span>
                 </Card>
               </Reveal>
             </div>
@@ -148,10 +182,10 @@ export default function WebsitesPage() {
         </div>
       </Section>
 
-      {/* No Maintenance */}
+      {/* 03: Code-Qualität */}
       <Section
         number="03"
-        title="Technik"
+        title="Code"
         borderTop
         illustration={<SolidFoundation className="w-24 h-24" />}
       >
@@ -159,91 +193,107 @@ export default function WebsitesPage() {
           <Reveal>
             <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
               Keine Plugins. <br />
-              <span className="text-slate-200">Keine Abhängigkeiten.</span>
+              <span className="text-slate-400">Keine Abhängigkeiten.</span>
             </H3>
           </Reveal>
           <Reveal delay={0.2}>
             <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
-              Ich nutze keine Baukästen, die sich selbst zerstören. Ihre Website
-              besteht aus <span className="text-slate-900">sauberem Code</span>,
-              der Ihnen gehört.
+              Ihre Website besteht aus{" "}
+              <span className="text-slate-900">Ihrem Code</span>. Kein
+              WordPress, kein Wix, keine Blackbox. Alles versioniert, alles
+              nachvollziehbar.
             </LeadText>
           </Reveal>
-          <Reveal delay={0.4}>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-              <Card variant="white" padding="normal" className="group">
-                <div className="space-y-4">
-                  <Label className="text-slate-900 mb-2">Code Qualität</Label>
-                  <H4 className="text-2xl">Langlebigkeit</H4>
-                  <BodyText>
-                    Modernste Web-Technologien für maximale Performance und
-                    Wartbarkeit.
-                  </BodyText>
-                </div>
-              </Card>
-              <Card variant="white" padding="normal" className="group">
-                <div className="space-y-4">
-                  <Label className="text-slate-900 mb-2">Sicherheit</Label>
-                  <H4 className="text-2xl">Resilienz</H4>
-                  <BodyText>
-                    Minimale Angriffsfläche durch Verzicht auf unnötige
-                    Drittanbieter-Software.
-                  </BodyText>
-                </div>
-              </Card>
-            </div>
-          </Reveal>
+
+          {/* Git Branch Visualization */}
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+            <Reveal delay={0.4}>
+              <CodeSnippet variant="git" />
+            </Reveal>
+            <Reveal delay={0.5}>
+              <div className="space-y-6">
+                <Card variant="glass" padding="normal" className="group">
+                  <div className="space-y-2">
+                    <Label className="text-slate-900">Versionskontrolle</Label>
+                    <BodyText>
+                      Jede Änderung ist dokumentiert. Rollbacks in Sekunden.
+                      Kein „wer hat das kaputt gemacht?".
+                    </BodyText>
+                  </div>
+                </Card>
+                <Card variant="glass" padding="normal" className="group">
+                  <div className="space-y-2">
+                    <Label className="text-slate-900">
+                      Automatisches Deployment
+                    </Label>
+                    <BodyText>
+                      Code wird geprüft, getestet und automatisch live
+                      geschaltet. Ohne manuellen Eingriff.
+                    </BodyText>
+                  </div>
+                </Card>
+              </div>
+            </Reveal>
+          </div>
         </div>
       </Section>
 
-      {/* Content/Tech Separation */}
+      {/* 04: Content-System */}
       <Section
         number="04"
         title="Inhalte"
         borderTop
         variant="gray"
         illustration={<LayerSeparation 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">
               Inhalte pflegen <br />
-              <span className="text-slate-200">ohne Angst.</span>
+              <span className="text-slate-400">ohne Angst.</span>
             </H3>
           </Reveal>
           <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-start">
             <div className="md:col-span-7">
               <Reveal delay={0.2}>
                 <LeadText className="text-xl md:text-2xl text-slate-400">
-                  Sie können Texte und Bilder selbst anpassen, ohne das Design
-                  oder die Technik zu gefährden. Ein{" "}
-                  <span className="text-slate-900">intuitives System</span>{" "}
-                  sorgt dafür, dass alles an seinem Platz bleibt.
+                  Technik und Inhalt sind{" "}
+                  <span className="text-slate-900">
+                    <Marker color="rgba(255,235,59,0.5)">
+                      strikt getrennt
+                    </Marker>
+                  </span>
+                  . Sie bearbeiten Texte und Bilder in einem intuitiven System –
+                  das Design bleibt geschützt.
                 </LeadText>
               </Reveal>
             </div>
             <div className="md:col-span-5">
               <Reveal delay={0.4}>
-                <Card variant="white" padding="normal" className="space-y-8">
-                  <div className="space-y-4">
-                    <Label>Ihre Freiheit</Label>
-                    <div className="flex items-center gap-3 text-xl font-bold text-slate-900">
-                      <div className="w-8 h-8 rounded-full bg-slate-900 flex items-center justify-center">
-                        <Check className="w-3 h-3 text-white" />
-                      </div>
-                      Inhalte flexibel verwalten
+                <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">
+                      Texte, Bilder und Inhalte frei bearbeiten.
+                    </BodyText>
                   </div>
-                  <div className="space-y-4 opacity-30">
-                    <Label>Mein Schutz</Label>
-                    <div className="space-y-2">
-                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
-                        Design-Chaos
-                      </div>
-                      <div className="flex items-center gap-3 text-xl font-bold text-slate-900 line-through">
-                        Technische Fehler
-                      </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">
+                      Design, Layout, Code-Struktur.
+                    </BodyText>
                   </div>
                 </Card>
               </Reveal>
@@ -252,90 +302,34 @@ export default function WebsitesPage() {
         </div>
       </Section>
 
-      {/* Simple Changes */}
+      {/* 05: Was Sie bekommen */}
       <Section
         number="05"
-        title="Service"
-        borderTop
-        illustration={<DirectService className="w-24 h-24" />}
-      >
-        <div className="space-y-12">
-          <Reveal>
-            <H3 className="text-3xl md:text-5xl leading-tight max-w-3xl">
-              Änderungen sind <br />
-              <span className="text-slate-200">Teil des Konzepts.</span>
-            </H3>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <LeadText className="text-xl md:text-2xl max-w-2xl text-slate-400">
-              Ihr Business entwickelt sich weiter, Ihre Website auch. <br />
-              Keine komplizierten Prozesse, sondern{" "}
-              <span className="text-slate-900">direkte Umsetzung</span> Ihrer
-              Ideen.
-            </LeadText>
-          </Reveal>
-          <Reveal delay={0.4}>
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-8">
-              <Card
-                variant="white"
-                padding="normal"
-                className="group hover:border-slate-900"
-              >
-                <ConceptCommunication className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
-                <div className="space-y-2">
-                  <H4 className="text-2xl">Direkter Draht</H4>
-                  <BodyText>
-                    Sie sprechen direkt mit dem Entwickler. Keine Stille Post.
-                  </BodyText>
-                </div>
-              </Card>
-              <Card
-                variant="white"
-                padding="normal"
-                className="group hover:border-slate-900"
-              >
-                <ConceptPrototyping className="w-12 h-12 mb-8 group-hover:scale-110 transition-all duration-700" />
-                <div className="space-y-2">
-                  <H4 className="text-2xl">Agile Anpassung</H4>
-                  <BodyText>
-                    Schnelle Iterationen statt langer Wartezeiten.
-                  </BodyText>
-                </div>
-              </Card>
-            </div>
-          </Reveal>
-        </div>
-      </Section>
-
-      {/* Result */}
-      <Section
-        number="06"
         title="Ergebnis"
         borderTop
-        variant="gray"
         illustration={<TaskDone className="w-24 h-24" />}
       >
         <div className="space-y-16">
           <Reveal>
             <H3 className="text-4xl md:text-6xl tracking-tighter">
-              Eine Website, die <br />
-              <span className="text-slate-200">einfach läuft.</span>
+              Was Sie konkret <br />
+              <span className="text-slate-400">bekommen.</span>
             </H3>
           </Reveal>
 
           <div className="grid grid-cols-1 md:grid-cols-3 gap-12">
             {[
               {
-                title: "Kein Overhead",
-                desc: "Fokus auf das, was Ihre Kunden wirklich brauchen.",
+                title: "Ihr Code",
+                desc: "Vollständiger Quellcode, versioniert auf GitHub. Kein Vendor Lock-in.",
               },
               {
-                title: "Volle Kontrolle",
-                desc: "Der Code gehört Ihnen, ohne Vendor Lock-in.",
+                title: "Ihre Infrastruktur",
+                desc: "Docker-Container, CI/CD-Pipeline, automatisches Deployment.",
               },
               {
-                title: "Echte Performance",
-                desc: "Messbare Geschwindigkeit für bessere Ergebnisse.",
+                title: "Ihr CMS",
+                desc: "Eigenes Content-Management-System. Volle Kontrolle über Ihre Inhalte.",
               },
             ].map((item, i) => (
               <Reveal key={i} delay={i * 0.1}>
@@ -353,12 +347,12 @@ export default function WebsitesPage() {
           <Reveal delay={0.4}>
             <div className="pt-16 border-t border-slate-200 flex flex-col md:flex-row justify-between items-start md:items-center gap-8">
               <div className="space-y-2">
-                <Label>Bereit für mehr?</Label>
+                <Label>Bereit?</Label>
                 <LeadText className="text-2xl">
-                  Lassen Sie uns über Ihr nächstes Projekt sprechen.
+                  Lassen Sie uns über Ihr Projekt sprechen.
                 </LeadText>
               </div>
-              <MotionButton href="/contact">Projekt anfragen</MotionButton>
+              <Button href="/contact">Projekt anfragen</Button>
             </div>
           </Reveal>
         </div>