feat(blog): complete blog experience overhaul

- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders

apps/web/src/components/Mermaid.tsx

@@ -8,8 +8,6 @@ interface MermaidProps {
   id?: string;
 }
 
-import { CodeWindow } from "./Effects/CodeWindow";
-
 export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
   const [id, setId] = useState<string | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -60,24 +58,22 @@ export const Mermaid: React.FC<MermaidProps> = ({ graph, id: providedId }) => {
   if (!id) return null;
 
   return (
-    <div className="mermaid-wrapper my-8 not-prose">
-      <CodeWindow title="Diagram" className="max-w-4xl" minHeight="300px">
-        <div className="flex justify-center bg-white p-4">
-          <div
-            ref={containerRef}
-            className={`mermaid transition-opacity duration-500 w-full max-w-4xl ${isRendered ? "opacity-100" : "opacity-0"}`}
-            id={id}
-          >
-            {error ? (
-              <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
-                {error}
-              </div>
-            ) : (
-              graph
-            )}
-          </div>
+    <div className="mermaid-wrapper my-12 not-prose w-full overflow-hidden">
+      <div className="flex justify-center w-full">
+        <div
+          ref={containerRef}
+          className={`mermaid transition-opacity duration-500 w-full flex justify-center ${isRendered ? "opacity-100" : "opacity-0"}`}
+          id={id}
+        >
+          {error ? (
+            <div className="text-red-500 p-4 border border-red-200 rounded bg-red-50 text-sm">
+              {error}
+            </div>
+          ) : (
+            graph
+          )}
         </div>
-      </CodeWindow>
+      </div>
     </div>
   );
 };