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

apps/web/src/components/Footer.tsx

@@ -1,32 +1,61 @@
-import Image from 'next/image';
-import * as React from 'react';
+import Image from "next/image";
+import * as React from "react";
 
-import LogoBlack from '../assets/logo/Logo Black Transparent.svg';
+import LogoBlack from "../assets/logo/Logo Black Transparent.svg";
 
 export const Footer: React.FC = () => {
   const currentYear = new Date().getFullYear();
 
   return (
-    <footer className="py-16 mt-24 border-t border-slate-100 bg-white relative z-10">
+    <footer className="relative py-16 mt-24 border-t border-slate-100 bg-white z-10">
+      {/* Tech border at top */}
+      <div className="absolute top-0 left-0 right-0 h-px overflow-hidden">
+        <div
+          className="h-full w-full"
+          style={{
+            background:
+              "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.15) 25%, rgba(191, 206, 228, 0.1) 50%, rgba(148, 163, 184, 0.15) 75%, transparent 100%)",
+          }}
+        />
+      </div>
+
       <div className="narrow-container">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-end">
           <div className="space-y-8">
             <div className="flex items-center gap-3">
-              <Image
-                src={LogoBlack}
-                alt="Marc Mintel"
-                height={72}
-              />
+              <Image src={LogoBlack} alt="Marc Mintel" height={72} />
             </div>
           </div>
-          
+
           <div className="flex flex-col md:items-end gap-4 text-sm font-mono text-slate-300 uppercase tracking-widest">
             <span>© {currentYear}</span>
             <div className="flex gap-8">
-              <a href="/about" className="hover:text-slate-900 transition-colors no-underline">Über mich</a>
-              <a href="/contact" className="hover:text-slate-900 transition-colors no-underline">Kontakt</a>
-              <a href="https://github.com/marcmintel" className="hover:text-slate-900 transition-colors no-underline">GitHub</a>
+              <a
+                href="/about"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Über mich
+              </a>
+              <a
+                href="/contact"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                Kontakt
+              </a>
+              <a
+                href="https://github.com/marcmintel"
+                className="hover:text-slate-900 transition-colors duration-300 no-underline"
+              >
+                GitHub
+              </a>
             </div>
+            {/* Subtle binary decoration */}
+            <span
+              className="text-[8px] text-slate-200 tracking-[0.5em] select-none font-mono"
+              aria-hidden="true"
+            >
+              01001101 01001001 01001110
+            </span>
           </div>
         </div>
       </div>