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

apps/web/src/content-engine/definitions.ts

@@ -0,0 +1,55 @@
+
+import { ComponentDefinition } from '@mintel/content-engine';
+
+export const componentDefinitions: ComponentDefinition[] = [
+    {
+        name: 'LeadParagraph',
+        description: 'Large, introductory text for the beginning of the article.',
+        usageExample: '<LeadParagraph>First meaningful sentence.</LeadParagraph>'
+    },
+    {
+        name: 'H2',
+        description: 'Section heading.',
+        usageExample: '<H2>Section Title</H2>'
+    },
+    {
+        name: 'H3',
+        description: 'Subsection heading.',
+        usageExample: '<H3>Subtitle</H3>'
+    },
+    {
+        name: 'Paragraph',
+        description: 'Standard body text paragraph.',
+        usageExample: '<Paragraph>Some text...</Paragraph>'
+    },
+    {
+        name: 'ArticleBlockquote',
+        description: 'A prominent quote block for key insights.',
+        usageExample: '<ArticleBlockquote>Important quote</ArticleBlockquote>'
+    },
+    {
+        name: 'Marker',
+        description: 'Yellow highlighter effect for very important phrases.',
+        usageExample: '<Marker>Highlighted Text</Marker>'
+    },
+    {
+        name: 'ComparisonRow',
+        description: 'A component comparing a negative vs positive scenario.',
+        usageExample: '<ComparisonRow description="Cost Comparison" negativeLabel="Lock-In" negativeText="High costs" positiveLabel="Open" positiveText="Control" />'
+    },
+    {
+        name: 'StatsDisplay',
+        description: 'A bold visual component to highlight a key statistic or number.',
+        usageExample: '<StatsDisplay value="42%" label="Cost Reduction" subtext="Average savings by switching to open standards." />'
+    },
+    {
+        name: 'Mermaid',
+        description: 'Renders a Mermaid diagram.',
+        usageExample: '<Mermaid graph="graph TD..." id="my-diagram" />'
+    },
+    {
+        name: 'DiagramState',
+        description: 'A state transition diagram.',
+        usageExample: '<DiagramState states={["A", "B"]} ... />'
+    }
+];