feat(ui): enhance component share UX and add new interactive simulations

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

@@ -37,6 +37,10 @@ import { TableOfContents } from '../components/TableOfContents';
 
 import { RevenueLossCalculator } from "../components/RevenueLossCalculator";
 import { PerformanceChart } from "../components/PerformanceChart";
+import { PerformanceROICalculator } from "../components/simulations/PerformanceROICalculator";
+import { LoadTimeSimulator } from "../components/simulations/LoadTimeSimulator";
+import { ArchitectureBuilder } from "../components/simulations/ArchitectureBuilder";
+import { DigitalAssetVisualizer } from "../components/simulations/DigitalAssetVisualizer";
 
 import { TwitterEmbed } from '../components/TwitterEmbed';
 import { YouTubeEmbed } from '../components/YouTubeEmbed';
@@ -79,6 +83,10 @@ export const mdxComponents = {
     TableOfContents,
     RevenueLossCalculator,
     PerformanceChart,
+    PerformanceROICalculator,
+    LoadTimeSimulator,
+    ArchitectureBuilder,
+    DigitalAssetVisualizer,
     TwitterEmbed,
     YouTubeEmbed,
     LinkedInEmbed,

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

@@ -260,12 +260,32 @@ timeline
     },
     {
         name: 'Button',
-        description: 'Premium pill-shaped button for high-impact CTAs. Variants: primary (solid dark), outline (bordered), ghost (text only). use size="large" for main sections.',
+        description: 'Premium pill-shaped button for high-impact CTAs. Variants: primary (solid dark), outline (bordered), ghost (text only). use size="large" for main sections. IMPORTANT: Write natural, punchy, conversational German CTAs (e.g. "Webprojekt anfragen", "Zur Beratung", "Mehr erfahren"). NEVER generate robotic or awkward phrases like "Ethisches Tracking anfragen" or "Ladezeit optimieren lassen". Keep it human and professional.',
         usageExample: '<Button href="/contact" variant="outline">Webprojekt anfragen</Button>'
     },
+    {
+        name: 'PerformanceROICalculator',
+        description: 'Interactive simulation calculator showing the monetary ROI of improving load times (based on Deloitte B2B metrics). Use exactly once in performance-related articles to provide a highly engaging simulation. Requires no props.',
+        usageExample: '<PerformanceROICalculator />'
+    },
+    {
+        name: 'LoadTimeSimulator',
+        description: 'Interactive visual race simulating the loading experience of a slow legacy CMS vs a fast headless stack. Great for articles discussing load times, technical debt, or user frustration. Requires no props.',
+        usageExample: '<LoadTimeSimulator />'
+    },
     {
         name: 'FAQSection',
         description: 'Semantic wrapper for FAQ questions at the end of the article. Put standard Markdown H3/Paragraphs inside.',
         usageExample: '<FAQSection>\n  <H3>Frage 1</H3>\n  <Paragraph>Antwort 1</Paragraph>\n</FAQSection>'
+    },
+    {
+        name: 'ArchitectureBuilder',
+        description: 'Interactive comparison between a standard SaaS rental approach and a custom Built-First (Mintel) architecture. Useful for articles discussing digital ownership, software rent vs. build, or technological assets. Requires no props.',
+        usageExample: '<ArchitectureBuilder />'
+    },
+    {
+        name: 'DigitalAssetVisualizer',
+        description: 'Interactive visualization illustrating the financial difference between software as a liability (SaaS/rent) and software as a digital asset (Custom IP). Great for articles concerning CTO strategies, business value of code, and digital independence. Requires no props.',
+        usageExample: '<DigitalAssetVisualizer />'
     }
 ];