Merge pull request #2 from Codestz/feat/blog-ai-convergence

feat: add AI Convergence blog post and StatBlock component

Author: Codestz

mdx-components.tsx

@@ -9,6 +9,7 @@ import {
   ToolCall,
   Callout,
   ProcessFlow,
+  StatBlock,
 } from '@/components/mdx';
 import { Mermaid } from '@/components/mdx/Mermaid';
 
@@ -30,6 +31,7 @@ export const mdxComponents: MDXComponents = {
   ToolCall,
   Callout,
   ProcessFlow,
+  StatBlock,
   // Headings
   h1: ({ children }) => (
     <h1 className="mb-4 sm:mb-6 mt-6 sm:mt-8 font-heading text-3xl sm:text-4xl font-bold uppercase text-foreground">

public/images/blog/ai-convergence.png

@@ -0,0 +1,51 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+import type { StatBlockProps } from './StatBlock.types';
+
+/**
+ * StatBlock Component - Horizontal Stat Row
+ * Neo-Brutalist stat display for surfacing key metrics
+ * Uses thick borders, secondary accents, and monospace typography
+ */
+export function StatBlock({ stats, title, className }: StatBlockProps) {
+  return (
+    <div
+      className={cn(
+        'my-8 overflow-hidden rounded-none border-[4px] border-foreground bg-bg-elevated shadow-[8px_8px_0px_0px] shadow-black',
+        className
+      )}
+    >
+      {/* Header */}
+      {title && (
+        <div className="border-b-[4px] border-foreground bg-secondary px-4 py-2">
+          <span className="font-mono text-[10px] font-bold text-secondary-text uppercase tracking-widest">
+            {title}
+          </span>
+        </div>
+      )}
+
+      {/* Stats Grid */}
+      <div
+        className={cn(
+          'grid divide-y-[3px] sm:divide-y-0 sm:divide-x-[3px] divide-foreground',
+          stats.length <= 2 && 'sm:grid-cols-2',
+          stats.length === 3 && 'sm:grid-cols-3',
+          stats.length >= 4 && 'grid-cols-2 sm:grid-cols-4'
+        )}
+      >
+        {stats.map((stat, index) => (
+          <div key={index} className="flex flex-col items-center justify-center px-4 py-4 sm:py-6">
+            {stat.icon && <span className="mb-1 text-lg">{stat.icon}</span>}
+            <span className="font-mono text-2xl sm:text-3xl font-black text-foreground leading-none">
+              {stat.value}
+            </span>
+            <span className="mt-1.5 font-mono text-[10px] sm:text-xs font-bold uppercase tracking-widest text-muted">
+              {stat.label}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/components/mdx/StatBlock/StatBlock.tsx

@@ -0,0 +1,11 @@
+export interface Stat {
+  value: string;
+  label: string;
+  icon?: string;
+}
+
+export interface StatBlockProps {
+  stats: Stat[];
+  title?: string;
+  className?: string;
+}

src/components/mdx/StatBlock/StatBlock.types.ts

@@ -0,0 +1,2 @@
+export { StatBlock } from './StatBlock';
+export type { StatBlockProps, Stat } from './StatBlock.types';

src/components/mdx/StatBlock/index.ts

@@ -18,3 +18,5 @@ export { Callout } from './Callout';
 export type { CalloutProps } from './Callout';
 export { ProcessFlow } from './ProcessFlow';
 export type { ProcessFlowProps, ProcessStep } from './ProcessFlow';
+export { StatBlock } from './StatBlock';
+export type { StatBlockProps, Stat } from './StatBlock';

src/components/mdx/index.ts

@@ -5,7 +5,7 @@ publishedAt: '2026-03-09'
 category: 'ai'
 tags:
   ['sparc', 'ai-development', 'methodology', 'agentic-engineering', 'tdd', 'software-architecture']
-featured: true
+featured: false
 type: 'experiment'
 author: 'Esteban Estrada'
 ---

src/content/blog/sparc-methodology-ai-development.mdx

@@ -12,7 +12,7 @@ tags:
     'specifications',
     'methodology',
   ]
-featured: true
+featured: false
 type: 'experiment'
 author: 'Esteban Estrada'
 ---