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

apps/web/src/components/HeroSection.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { motion, useScroll, useTransform } from "framer-motion";
+import { Button } from "./Button";
+import { AbstractCircuit } from "./Effects";
+import { GlitchText } from "./GlitchText";
+
+/**
+ * HeroSection: "Binary Architecture / The Blueprint"
+ *
+ * - **Concept**: The website as a technical blueprint being rendered in real-time.
+ * - **Typography**: Massive scale, mixing black Sans and technical Mono.
+ * - **Details**: Coordinate markers, blueprint lines, and binary data integration.
+ */
+
+export const HeroSection: React.FC = () => {
+  const { scrollY } = useScroll();
+  const y = useTransform(scrollY, [0, 800], [0, 300]);
+  const opacity = useTransform(scrollY, [0, 600], [1, 0]);
+
+  return (
+    <section className="relative min-h-[100vh] flex items-center justify-center overflow-hidden bg-white">
+      {/* 1. The Binary Architecture (Background) */}
+      <div className="absolute inset-0 z-0">
+        <AbstractCircuit />
+      </div>
+
+      {/* 2. Content Layer */}
+      <div className="relative z-10 container mx-auto px-6 h-full flex flex-col justify-center items-center">
+        <motion.div
+          style={{ y, opacity }}
+          className="text-center relative max-w-[90vw]"
+        >
+          {/* Architectural Coordinate Labels */}
+          <div className="absolute -left-20 top-0 hidden xl:flex flex-col gap-8 opacity-20 pointer-events-none">
+            {[...Array(4)].map((_, i) => (
+              <div key={i} className="flex items-center gap-4">
+                <span className="text-[10px] font-mono">0x00{i}A</span>
+                <div className="w-12 h-[1px] bg-slate-400" />
+              </div>
+            ))}
+          </div>
+
+          {/* Badge */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 1, delay: 0.2 }}
+            className="mb-10 inline-flex items-center gap-4 px-6 py-2 border border-slate-100 bg-white/40 backdrop-blur-sm rounded-full"
+          >
+            <div className="flex gap-1">
+              <div className="w-1 h-1 rounded-full bg-blue-500 animate-pulse" />
+              <div className="w-1 h-1 rounded-full bg-blue-300 animate-pulse delay-100" />
+            </div>
+            <span className="text-[10px] font-mono font-bold tracking-[0.4em] text-slate-500 uppercase">
+              Digital_Architect // v.2026
+            </span>
+          </motion.div>
+
+          {/* Headline */}
+          <h1 className="text-7xl md:text-[11rem] font-black tracking-tighter leading-[0.8] text-slate-900 mb-12 uppercase">
+            <div className="block">
+              <GlitchText delay={0.5} duration={1.2}>
+                Websites
+              </GlitchText>
+            </div>
+            <div
+              className="block font-mono text-transparent bg-clip-text bg-gradient-to-r from-slate-400 via-slate-300 to-slate-400 font-light italic"
+              style={{ letterSpacing: "-0.02em" }}
+            >
+              <GlitchText delay={0.9} duration={1}>
+                ohne overhead.
+              </GlitchText>
+            </div>
+          </h1>
+
+          {/* Subtext */}
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 1, delay: 0.8 }}
+            className="flex flex-col items-center gap-12"
+          >
+            <p className="text-xl md:text-3xl text-slate-400 font-medium max-w-2xl leading-relaxed">
+              Ein Entwickler. Ein Ansprechpartner. <br />
+              <span className="text-slate-900 font-bold tracking-tight">
+                Systematische Architekturen für das Web.
+              </span>
+            </p>
+
+            <div className="flex flex-wrap items-center justify-center gap-6">
+              <Button href="/contact" size="large">
+                Projekt anfragen
+              </Button>
+              <Button href="/websites" variant="outline" size="large">
+                Prozess ansehen
+              </Button>
+            </div>
+          </motion.div>
+        </motion.div>
+      </div>
+
+      {/* 3. Blueprint Frame (Decorative Borders) */}
+      <div className="absolute inset-0 pointer-events-none border-[1px] border-slate-100 m-8 opacity-40" />
+      <div className="absolute top-8 left-8 p-4 hidden md:block opacity-20 transform -rotate-90 origin-top-left transition-opacity hover:opacity-100 group">
+        <span className="text-[10px] font-mono tracking-widest text-slate-400">
+          POS_TRANSMISSION_001
+        </span>
+      </div>
+      <div className="absolute bottom-8 right-8 p-4 hidden md:block opacity-20 transition-opacity hover:opacity-100">
+        <span className="text-[10px] font-mono tracking-widest text-slate-400">
+          EST_2026 // M-ARCH
+        </span>
+      </div>
+
+      {/* 4. Scroll Indicator */}
+      <motion.div
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-3 opacity-40"
+        style={{ opacity }}
+      >
+        <div className="w-[1px] h-12 bg-slate-200" />
+        <span className="text-[9px] font-mono uppercase tracking-[0.3em] text-slate-400">
+          Scroll
+        </span>
+      </motion.div>
+    </section>
+  );
+};