feat: complete MDX migration for blog, fix diagram fidelity and refactor styling architecture

apps/web/src/components/StatsDisplay.tsx

@@ -0,0 +1,27 @@
+
+import React from 'react';
+
+interface StatsDisplayProps {
+    value: string | number;
+    label: string;
+    subtext?: string;
+    className?: string;
+}
+
+export const StatsDisplay: React.FC<StatsDisplayProps> = ({ value, label, subtext, className = '' }) => {
+    return (
+        <div className={`not-prose flex flex-col items-center justify-center p-8 my-10 bg-gradient-to-br from-slate-50 to-slate-100 border border-slate-200 rounded-2xl shadow-sm text-center ${className}`}>
+            <span className="text-7xl font-black text-slate-900 tracking-tighter tabular-nums leading-none">
+                {value}
+            </span>
+            <span className="text-xl font-bold text-slate-700 mt-3 uppercase tracking-wide">
+                {label}
+            </span>
+            {subtext && (
+                <span className="text-sm font-medium text-slate-500 mt-2 max-w-xs leading-relaxed">
+                    {subtext}
+                </span>
+            )}
+        </div>
+    );
+};