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

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

@@ -14,11 +14,13 @@ import {
   BodyText,
 } from "../../../src/components/Typography";
 import { BackgroundGrid, Container } from "../../../src/components/Layout";
-import { MotionButton } from "../../../src/components/Button";
+import Link from "next/link";
+import { Button } from "../../../src/components/Button";
 import { IframeSection } from "../../../src/components/IframeSection";
 import {
   Activity,
   ArrowRight,
+  ArrowLeft,
   ShieldCheck,
   Cpu,
   Server,
@@ -26,6 +28,7 @@ import {
 } from "lucide-react";
 
 import { Marker } from "../../../src/components/Marker";
+import { GlitchText } from "../../../src/components/GlitchText";
 
 export default function KLZCablesCaseStudy() {
   const { scrollYProgress } = useScroll();
@@ -50,6 +53,15 @@ export default function KLZCablesCaseStudy() {
         />
 
         <Container variant="narrow" className="relative z-10">
+          <Reveal>
+            <Link
+              href="/case-studies"
+              className="inline-flex items-center gap-2 text-slate-400 hover:text-slate-900 mb-12 transition-colors font-bold text-[10px] uppercase tracking-[0.4em] group"
+            >
+              <ArrowLeft className="w-3 h-3 group-hover:-translate-x-1 transition-transform" />{" "}
+              Zurück
+            </Link>
+          </Reveal>
           <div className="space-y-12">
             <Reveal direction="down" blur>
               <div className="inline-flex items-center gap-6">
@@ -71,13 +83,14 @@ export default function KLZCablesCaseStudy() {
             </Reveal>
 
             <div className="space-y-12">
-              <Reveal delay={0.1} direction="up" scale={0.98} blur>
-                <H1 className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900">
-                  KLZ Cables
-                  <br />
-                  <span className="text-slate-100">Case Study.</span>
-                </H1>
-              </Reveal>
+              <GlitchText
+                as="h1"
+                className="text-6xl md:text-8xl tracking-tighter leading-[0.9] font-bold text-slate-900"
+              >
+                KLZ Cables
+              </GlitchText>
+              <br />
+              <span className="text-slate-100">Case Study.</span>
 
               <Reveal delay={0.2} direction="right" blur>
                 <div className="max-w-3xl border-l-[3px] border-slate-900 pl-8 md:pl-12">
@@ -126,14 +139,19 @@ export default function KLZCablesCaseStudy() {
         borderBottom
         containerVariant="normal"
       >
+        {/* Binary overlay background */}
+        <div className="absolute top-0 right-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block">
+          {Array.from({ length: 5 }).map((_, i) => (
+            <div key={i}>01001101 01001001 01001110 01010100</div>
+          ))}
+        </div>
+
         <div className="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
           <div className="md:col-span-12 mb-12">
-            <Reveal direction="left" blur>
-              <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
-                Architektur- <br />
-                Refactor.
-              </H2>
-            </Reveal>
+            <H2 className="text-5xl md:text-8xl tracking-tighter mb-12">
+              <GlitchText>Architektur-</GlitchText> <br />
+              Refactor.
+            </H2>
           </div>
           <div className="md:col-span-7 space-y-12">
             <Reveal delay={0.1} direction="up" blur>
@@ -217,9 +235,16 @@ export default function KLZCablesCaseStudy() {
                   Infrastructure Validation
                 </Label>
                 <H3 className="text-5xl md:text-8xl tracking-tighter">
-                  Global Hub.
+                  <GlitchText>Global Hub.</GlitchText>
                 </H3>
               </div>
+
+              {/* Binary overlay left */}
+              <div className="absolute left-0 bottom-0 p-8 opacity-[0.03] select-none pointer-events-none font-mono text-[10px] hidden md:block group-hover:opacity-10 transition-opacity duration-1000">
+                {Array.from({ length: 4 }).map((_, i) => (
+                  <div key={i}>HANDSHAKE_0x00{i}A // SYNC_ACTIVE</div>
+                ))}
+              </div>
             </div>
           </Reveal>
           <Reveal delay={0.2} width="100%" direction="up" scale={0.98} blur>
@@ -298,12 +323,10 @@ export default function KLZCablesCaseStudy() {
       >
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 items-center">
           <div className="lg:col-span-12 mb-12 text-center lg:text-left relative z-10">
-            <Reveal direction="down" blur>
-              <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
-                Fokus auf <br />
-                <Marker delay={0.2}>Spezifikationen.</Marker>
-              </H3>
-            </Reveal>
+            <H3 className="text-4xl md:text-6xl max-w-4xl tracking-tighter">
+              Fokus auf <br />
+              <Marker delay={0.2}>Spezifikationen.</Marker>
+            </H3>
           </div>
 
           <div className="lg:col-span-8 relative group">
@@ -443,43 +466,80 @@ export default function KLZCablesCaseStudy() {
         className="!pb-32"
       >
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-16 lg:gap-24 items-center">
+          <div className="lg:col-span-5 space-y-12">
+            <Reveal direction="left" blur>
+              <div className="space-y-6">
+                <Label className="text-slate-400">Interaction Layer</Label>
+                <H3 className="text-5xl md:text-7xl tracking-tighter text-slate-900">
+                  Direkter Draht.
+                </H3>
+                <BodyText className="text-xl text-slate-500 font-serif italic leading-relaxed">
+                  Das Kontakt-System wurde auf maximale Reduktion getrimmt. Ein
+                  deterministischer Kanal zwischen technischem Bedarf und
+                  individueller Beratung – ohne Umwege, ohne Rauschen.
+                </BodyText>
+              </div>
+            </Reveal>
+
+            <Reveal delay={0.2} direction="left" blur>
+              <div className="grid grid-cols-2 gap-8 border-t border-slate-100 pt-10">
+                <div className="space-y-2">
+                  <MonoLabel className="text-slate-400 text-[9px]">
+                    RESPONSE_TIME
+                  </MonoLabel>
+                  <div className="text-xl font-bold text-slate-900 font-mono">
+                    &lt; 120ms
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <MonoLabel className="text-slate-400 text-[9px]">
+                    PROTOCOL
+                  </MonoLabel>
+                  <div className="text-xl font-bold text-slate-900 font-mono">
+                    mTLS
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <MonoLabel className="text-slate-400 text-[9px]">
+                    AVAILABILITY
+                  </MonoLabel>
+                  <div className="text-xl font-bold text-[rgba(129,199,132,1)] font-mono">
+                    99.9%
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <MonoLabel className="text-slate-400 text-[9px]">
+                    ENCRYPTION
+                  </MonoLabel>
+                  <div className="text-xl font-bold text-slate-900 font-mono">
+                    AES-256
+                  </div>
+                </div>
+              </div>
+            </Reveal>
+          </div>
+
           <div className="lg:col-span-7">
-            <Reveal direction="left" scale={0.98} blur>
+            <Reveal direction="right" scale={0.98} blur>
               <motion.div
-                whileHover={{ scale: 1.01 }}
-                transition={{ type: "spring", stiffness: 200, damping: 20 }}
-                className="relative h-[800px] w-full"
+                whileHover={{ scale: 1.002 }}
+                transition={{ type: "spring", stiffness: 100, damping: 30 }}
+                className="relative rounded-[2.5rem] overflow-hidden shadow-2xl shadow-slate-200/50 ring-1 ring-slate-100"
               >
                 <IframeSection
                   src="/showcase/klz-cables.com/contact.html"
-                  height="100%"
+                  height="750px"
                   desktopWidth={1200}
+                  mobileWidth={390}
                   allowScroll
                   browserFrame
-                  className="h-full w-full no-scrollbar"
+                  className="w-full no-scrollbar"
                 />
               </motion.div>
             </Reveal>
           </div>
-          <div className="lg:col-span-5 space-y-10">
-            <Reveal direction="right" blur>
-              <div className="space-y-6">
-                <Label className="text-slate-400">Conversion Layer</Label>
-                <H3 className="text-4xl md:text-6xl tracking-tighter">
-                  Direkter Draht.
-                </H3>
-                <BodyText className="text-xl text-slate-500 font-serif italic">
-                  Das Kontakt-System wurde auf maximale Reduktion getrimmt.
-                  Keine unnötigen Hürden, sondern ein direkter
-                  Kommunikations-Kanal zwischen technischem Bedarf und
-                  individueller Beratung.
-                </BodyText>
-              </div>
-            </Reveal>
-          </div>
         </div>
       </Section>
-
       {/* --- FINAL CTA: ARCHITECTURE & VALUE --- */}
       <section className="py-40 md:py-64 bg-white relative overflow-hidden border-t border-slate-100">
         <BackgroundGrid />
@@ -540,15 +600,15 @@ export default function KLZCablesCaseStudy() {
                 </div>
               </Reveal>
               <Reveal delay={0.5} direction="up" blur className="pt-6">
-                <MotionButton
+                <Button
                   href="/contact"
                   variant="outline"
                   showArrow={false}
                   className="w-full py-8 text-lg group border-2 border-slate-900 rounded-full bg-white hover:bg-slate-900 hover:text-white transition-all duration-700"
                 >
-                  Architektur-Audit anfragen
+                  Jetzt anfragen
                   <ArrowRight className="inline-block ml-4 w-6 h-6 group-hover:translate-x-4 transition-transform duration-700" />
-                </MotionButton>
+                </Button>
               </Reveal>
             </div>
           </div>

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

@@ -1,104 +1,175 @@
 "use client";
 
-import React from "react";
 import { PageHeader } from "../../src/components/PageHeader";
 import { Section } from "../../src/components/Section";
 import { Reveal } from "../../src/components/Reveal";
-import { H3, LeadText, Label } from "../../src/components/Typography";
-import { BackgroundGrid, Card } from "../../src/components/Layout";
-import { MotionButton } from "../../src/components/Button";
-import Image from "next/image";
+import { H3, LeadText, BodyText, Label } from "../../src/components/Typography";
+import { Card } from "../../src/components/Layout";
+import { Button } from "../../src/components/Button";
+import { GradientMesh, AbstractCircuit } from "../../src/components/Effects";
+import { ArrowRight } from "lucide-react";
+import { motion } from "framer-motion";
 
 export default function CaseStudiesPage() {
   return (
-    <div className="flex flex-col bg-white overflow-hidden relative min-h-screen">
-      <BackgroundGrid />
+    <div className="flex flex-col bg-white overflow-hidden relative">
+      <AbstractCircuit />
 
       <PageHeader
         title={
           <>
-            Case Studies: <br />
-            <span className="text-slate-200">Qualität in jedem Detail.</span>
+            Case <span className="text-slate-400">Studies.</span>
           </>
         }
-        description="Ein Blick hinter die Kulissen ausgewählter Projekte. Von der ersten Idee bis zum fertigen Hochleistungssystem."
+        description="Ergebnisse statt Versprechen. Was ich gebaut habe und was es bewirkt."
         backLink={{ href: "/", label: "Zurück" }}
         backgroundSymbol="C"
       />
 
-      <Section number="01" title="Projekte" borderTop>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-12">
-          <Reveal>
-            <Card variant="white" className="group overflow-hidden">
-              <div className="aspect-video relative overflow-hidden rounded-xl mb-8 bg-slate-100 border border-slate-100">
-                {/* We'll use a placeholder or a screenshot if available. 
-                    Since we have the cloned site, we could technically iframe a preview here too, 
-                    but a static image or a styled div is more standard for a card. */}
-                <div className="absolute inset-0 flex items-center justify-center bg-[#0117bf] transition-transform duration-700 group-hover:scale-105 p-12">
-                  <Image
-                    src="/showcase/klz-cables.com/assets/klz-cables.com/wp-content/uploads/2024/11/white_logo_transparent_background.svg"
-                    alt="KLZ Cables Logo"
-                    width={200}
-                    height={200}
-                    className="w-full h-auto max-w-[240px]"
-                  />
+      {/* 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-[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-8 md:p-12 relative z-10 flex flex-col justify-between">
+                <div className="space-y-8">
+                  <div className="flex items-center 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-8 invert opacity-80 group-hover:opacity-100 transition-opacity duration-500"
+                    />
+                    <div className="h-px w-12 bg-slate-100" />
+                    <Label className="text-slate-400">Case Study 2025</Label>
+                  </div>
+
+                  <div className="space-y-4">
+                    <H3 className="text-4xl md:text-6xl tracking-tighter">
+                      KLZ <span className="text-slate-300">Cables</span>
+                    </H3>
+                    <LeadText className="text-slate-500 text-lg 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-2">
+                    {["Next.js", "Varnish", "Asset Pipeline", "B2B DB"].map(
+                      (tag, i) => (
+                        <span
+                          key={i}
+                          className="px-2.5 py-1 border border-slate-100 bg-white/50 rounded-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-12">
+                  <div className="inline-flex items-center gap-3 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>
 
-              <div className="space-y-4">
-                <Label>Infrastructure & Energy</Label>
-                <H3 className="group-hover:text-slate-900 transition-colors">
-                  KLZ Cables – Digitaler Netzbau
-                </H3>
-                <LeadText className="text-base line-clamp-3">
-                  Wie wir eine komplexe WordPress-Struktur in ein performantes,
-                  sauberes und langlebiges Web-System verwandelt haben. Fokus
-                  auf Performance, SEO und Benutzerführung.
-                </LeadText>
+              {/* Right Column: Visual/Technical Decor */}
+              <div className="w-full md:w-1/3 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-[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: 10 })
+                        .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 className="pt-4">
-                  <MotionButton href="/case-studies/klz-cables">
-                    Case Study lesen
-                  </MotionButton>
+                {/* Abstract "Cable" lines */}
+                <div className="absolute inset-0 flex items-center justify-center 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-8 right-8 text-[10px] font-mono text-slate-300 rotate-90 origin-right uppercase tracking-[0.3em]">
+                  Industrial Grade
                 </div>
               </div>
             </Card>
-          </Reveal>
-
-          <Reveal delay={0.2}>
-            <div className="h-full flex flex-col justify-center border-2 border-dashed border-slate-100 rounded-3xl p-12 text-center space-y-4">
-              <Label>Demnächst</Label>
-              <H3 className="text-slate-200">
-                Weitere Projekte sind in Arbeit.
-              </H3>
-              <LeadText className="text-base italic">
-                Ich dokumentiere gerade weitere spannende Projekte aus den
-                Bereichen SaaS, E-Commerce und Systemarchitektur.
-              </LeadText>
-            </div>
-          </Reveal>
-        </div>
+          </a>
+        </Reveal>
       </Section>
 
-      <Section number="02" title="Philosophie" borderTop variant="gray">
-        <div className="max-w-3xl space-y-8">
-          <Reveal>
-            <H3 className="text-4xl leading-tight">
-              Warum ich Case Studies zeige? <br />
-              <span className="text-slate-200">
-                Weil Code mehr als Text ist.
-              </span>
-            </H3>
-          </Reveal>
-          <Reveal delay={0.2}>
-            <LeadText className="text-xl">
-              In diesen Case Studies geht es nicht nur um bunte Bilder. Es geht
-              um die technischen Entscheidungen, die ein Projekt erfolgreich
-              machen. Schnelle Ladezeiten, SEO-Exzellenz und wartbarer Code sind
-              keine Zufälle, sondern das Ergebnis von präziser Planung.
-            </LeadText>
-          </Reveal>
-        </div>
+      {/* Coming Soon */}
+      <Section number="02" title="Kommt bald" borderTop>
+        <Reveal>
+          <Card
+            variant="glass"
+            padding="large"
+            techBorder
+            className="text-center relative overflow-hidden group"
+          >
+            <div className="relative z-10 space-y-6 py-8">
+              <div className="flex items-center justify-center gap-3">
+                <div className="w-2 h-2 rounded-full bg-slate-300 animate-pulse" />
+                <Label className="text-slate-400">In Arbeit</Label>
+              </div>
+              <H3 className="text-3xl text-slate-400">
+                Weitere Case Studies in Kürze.
+              </H3>
+              <BodyText className="text-slate-400 max-w-md mx-auto">
+                Ich dokumentiere laufende Projekte – schauen Sie bald wieder
+                vorbei oder kontaktieren Sie mich direkt.
+              </BodyText>
+              <div className="pt-4">
+                <Button href="/contact" variant="outline">
+                  Kontakt aufnehmen
+                </Button>
+              </div>
+            </div>
+          </Card>
+        </Reveal>
       </Section>
     </div>
   );