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>