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

apps/web/src/components/Section.tsx

@@ -1,7 +1,8 @@
-import * as React from 'react';
-import { Reveal } from './Reveal';
-import { Label } from './Typography';
-import { cn } from '../utils/cn';
+import * as React from "react";
+import { Reveal } from "./Reveal";
+import { Label } from "./Typography";
+import { cn } from "../utils/cn";
+import { GlitchText } from "./GlitchText";
 
 interface SectionProps {
   number?: string;
@@ -9,11 +10,12 @@ interface SectionProps {
   children: React.ReactNode;
   className?: string;
   delay?: number;
-  variant?: 'white' | 'gray';
+  variant?: "white" | "gray" | "glass";
   borderTop?: boolean;
   borderBottom?: boolean;
-  containerVariant?: 'narrow' | 'normal' | 'wide';
+  containerVariant?: "narrow" | "normal" | "wide";
   illustration?: React.ReactNode;
+  effects?: React.ReactNode;
 }
 
 export const Section: React.FC<SectionProps> = ({
@@ -22,25 +24,62 @@ export const Section: React.FC<SectionProps> = ({
   children,
   className = "",
   delay = 0,
-  variant = 'white',
+  variant = "white",
   borderTop = false,
   borderBottom = false,
-  containerVariant = 'narrow',
+  containerVariant = "narrow",
   illustration,
+  effects,
 }) => {
-  const bgClass = variant === 'gray' ? 'bg-slate-50/50' : 'bg-white';
-  const borderTopClass = borderTop ? 'border-t border-slate-100' : '';
-  const borderBottomClass = borderBottom ? 'border-b border-slate-100' : '';
-  const containerClass = containerVariant === 'wide' ? 'wide-container' : containerVariant === 'normal' ? 'container' : 'narrow-container';
+  const bgClass = {
+    white: "bg-white",
+    gray: "bg-slate-50/50",
+    glass: "glass-subtle",
+  }[variant];
+
+  const borderTopClass = borderTop ? "border-t border-slate-100" : "";
+  const borderBottomClass = borderBottom ? "border-b border-slate-100" : "";
+  const containerClass =
+    containerVariant === "wide"
+      ? "wide-container"
+      : containerVariant === "normal"
+        ? "container"
+        : "narrow-container";
 
   return (
-    <section className={cn(
-      "relative py-24 md:py-40 group overflow-hidden",
-      bgClass,
-      borderTopClass,
-      borderBottomClass,
-      className
-    )}>
+    <section
+      className={cn(
+        "relative py-24 md:py-40 group overflow-hidden",
+        bgClass,
+        borderTopClass,
+        borderBottomClass,
+        className,
+      )}
+    >
+      {/* Tech divider with binary accent */}
+      {borderTop && (
+        <div className="absolute top-0 left-0 right-0 overflow-hidden">
+          <div
+            className="h-px w-full"
+            style={{
+              background:
+                "linear-gradient(90deg, transparent 0%, rgba(148, 163, 184, 0.2) 20%, rgba(191, 206, 228, 0.15) 50%, rgba(148, 163, 184, 0.2) 80%, transparent 100%)",
+            }}
+          />
+          <div className="flex justify-center mt-2">
+            <span
+              className="text-[7px] font-mono tracking-[0.5em] text-slate-200 select-none"
+              aria-hidden="true"
+            >
+              01001101 01001001 01001110
+            </span>
+          </div>
+        </div>
+      )}
+
+      {/* Optional effects layer */}
+      {effects}
+
       <div className={cn("relative z-10", containerClass)}>
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 md:gap-24">
           {/* Sidebar: Number & Title */}
@@ -48,14 +87,25 @@ export const Section: React.FC<SectionProps> = ({
             <div className="md:sticky md:top-40 space-y-8">
               {number && (
                 <Reveal delay={delay}>
-                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter">
+                  <span className="block text-7xl md:text-8xl font-bold text-slate-100 leading-none select-none tracking-tighter relative">
                     {number}
+                    {/* Subtle binary overlay on number */}
+                    <span
+                      className="absolute top-1 left-0 text-[8px] font-mono text-slate-200/30 tracking-wider leading-none select-none pointer-events-none"
+                      aria-hidden="true"
+                    >
+                      {parseInt(number || "0")
+                        .toString(2)
+                        .padStart(8, "0")}
+                    </span>
                   </span>
                 </Reveal>
               )}
               {title && (
                 <Reveal delay={delay + 0.1}>
                   <div className="flex items-center gap-4">
+                    {/* Animated dot indicator */}
+                    <div className="w-1.5 h-1.5 rounded-full bg-slate-300 animate-circuit-pulse shrink-0" />
                     <Label className="text-slate-900 text-[10px] tracking-[0.4em]">
                       {title}
                     </Label>
@@ -73,9 +123,7 @@ export const Section: React.FC<SectionProps> = ({
           </div>
 
           {/* Main Content */}
-          <div className="md:col-span-9">
-            {children}
-          </div>
+          <div className="md:col-span-9">{children}</div>
         </div>
       </div>
     </section>