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

apps/web/src/components/Layout.tsx

@@ -1,63 +1,105 @@
-import * as React from 'react';
-import { cn } from '../utils/cn';
+"use client";
+
+import * as React from "react";
+import { cn } from "../utils/cn";
 
 export const BackgroundGrid: React.FC = () => (
-  <div className="fixed inset-0 pointer-events-none -z-20 opacity-[0.01]" style={{
-    backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
-    backgroundSize: '60px 60px'
-  }} />
+  <div className="fixed inset-0 pointer-events-none -z-20" aria-hidden="true">
+    <div
+      className="absolute inset-0 opacity-[0.015]"
+      style={{
+        backgroundImage: `
+          linear-gradient(#94a3b8 1px, transparent 1px),
+          linear-gradient(90deg, #94a3b8 1px, transparent 1px)
+        `,
+        backgroundSize: "80px 80px",
+      }}
+    />
+  </div>
 );
 
 interface CardProps {
   children: React.ReactNode;
   className?: string;
-  variant?: 'white' | 'dark' | 'gray';
+  variant?: "white" | "dark" | "gray" | "glass";
   hover?: boolean;
-  padding?: 'none' | 'small' | 'normal' | 'large';
+  padding?: "none" | "small" | "normal" | "large";
+  techBorder?: boolean;
 }
 
-export const Card: React.FC<CardProps> = ({ 
-  children, 
-  className = "", 
-  variant = 'white',
+export const Card: React.FC<CardProps> = ({
+  children,
+  className = "",
+  variant = "white",
   hover = true,
-  padding = 'normal'
+  padding = "normal",
+  techBorder = false,
 }) => {
   const variants = {
-    white: 'bg-white border-slate-100 text-slate-900 shadow-sm',
-    dark: 'bg-slate-900 border-white/5 text-white shadow-xl',
-    gray: 'bg-slate-50/50 border-slate-100 text-slate-900'
+    white: "bg-white border-slate-100 text-slate-900 shadow-sm",
+    dark: "bg-slate-900 border-white/5 text-white shadow-xl",
+    gray: "bg-slate-50/50 border-slate-100 text-slate-900",
+    glass: "glass text-slate-900",
   };
 
   const paddings = {
-    none: 'p-0',
-    small: 'p-6 md:p-8',
-    normal: 'p-8 md:p-10',
-    large: 'p-10 md:p-12'
+    none: "p-0",
+    small: "p-6 md:p-8",
+    normal: "p-8 md:p-10",
+    large: "p-10 md:p-12",
   };
 
+  const [hexId, setHexId] = React.useState("0x0000");
+
+  React.useEffect(() => {
+    setHexId(
+      `0x${Math.floor(Math.random() * 0xffff)
+        .toString(16)
+        .padStart(4, "0")
+        .toUpperCase()}`,
+    );
+  }, []);
+
   return (
-    <div className={cn(
-      "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out",
-      variants[variant],
-      paddings[padding],
-      hover ? 'hover:border-slate-200 hover:shadow-md' : '',
-      className
-    )}>
+    <div
+      className={cn(
+        "rounded-2xl border h-full flex flex-col justify-between transition-all duration-500 ease-out relative overflow-hidden group/card",
+        variants[variant],
+        paddings[padding],
+        hover ? "hover:border-slate-200 hover:shadow-md" : "",
+        techBorder ? "tech-border" : "",
+        className,
+      )}
+    >
+      {/* Binary corner accent on hover */}
+      {hover && (
+        <span
+          className="absolute top-3 right-3 text-[7px] font-mono tracking-widest opacity-0 group-hover/card:opacity-100 transition-opacity duration-500 select-none pointer-events-none"
+          style={{
+            color:
+              variant === "dark"
+                ? "rgba(255,255,255,0.1)"
+                : "rgba(148,163,184,0.2)",
+          }}
+          aria-hidden="true"
+        >
+          {hexId}
+        </span>
+      )}
       {children}
     </div>
   );
 };
 
-export const Container: React.FC<{ children: React.ReactNode; className?: string; variant?: 'narrow' | 'normal' | 'wide' }> = ({ 
-  children, 
-  className = "", 
-  variant = 'normal' 
-}) => {
+export const Container: React.FC<{
+  children: React.ReactNode;
+  className?: string;
+  variant?: "narrow" | "normal" | "wide";
+}> = ({ children, className = "", variant = "normal" }) => {
   const variants = {
-    narrow: 'max-w-4xl',
-    normal: 'max-w-6xl',
-    wide: 'max-w-7xl'
+    narrow: "max-w-4xl",
+    normal: "max-w-6xl",
+    wide: "max-w-7xl",
   };
 
   return (