feat(blog): improve optimization safeguards, CTA fidelity, and meme variety

apps/web/src/components/LeadMagnet.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import React from "react";
+import { Button } from "./Button";
+import { Reveal } from "./Reveal";
+import { ShieldCheck, Zap } from "lucide-react";
+
+interface LeadMagnetProps {
+    title: string;
+    description: string;
+    buttonText: string;
+    href: string;
+    variant?: "performance" | "security" | "standard";
+}
+
+/**
+ * LeadMagnet: A high-fidelity conversion card for blog posts.
+ * Replaces simple buttons with a structured, trust-building CTA block.
+ */
+export const LeadMagnet: React.FC<LeadMagnetProps> = ({
+    title,
+    description,
+    buttonText,
+    href,
+    variant = "standard",
+}) => {
+    return (
+        <Reveal direction="up">
+            <div className="my-16 not-prose">
+                <div className="relative p-8 md:p-12 rounded-[2rem] overflow-hidden border border-slate-200 bg-white shadow-2xl shadow-slate-200/50 group transition-all duration-500 hover:shadow-slate-300/50">
+                    {/* Decorative background visual */}
+                    <div className="absolute top-0 right-0 w-64 h-64 bg-slate-50 rounded-full blur-3xl -mr-32 -mt-32 opacity-50 group-hover:opacity-100 transition-opacity duration-1000" />
+
+                    <div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-8">
+                        <div className="max-w-xl space-y-4">
+                            <div className="flex items-center gap-2 text-slate-400 uppercase tracking-widest text-[10px] font-bold">
+                                {variant === "performance" ? <Zap className="w-3 h-3 text-emerald-500" /> : <ShieldCheck className="w-3 h-3 text-blue-500" />}
+                                <span>B2B Performance Insight</span>
+                            </div>
+
+                            <h3 className="text-3xl md:text-4xl font-black text-slate-900 tracking-tight leading-[0.9]">
+                                {title}
+                            </h3>
+
+                            <p className="text-sm md:text-base text-slate-500 leading-relaxed font-medium max-w-md">
+                                {description}
+                            </p>
+                        </div>
+
+                        <div className="flex flex-col items-center gap-4 min-w-[240px]">
+                            <Button href={href} size="large" className="w-full">
+                                {buttonText}
+                            </Button>
+                            <div className="flex items-center gap-1.5 text-slate-400 text-[10px] font-mono">
+                                <ShieldCheck className="w-3 h-3" />
+                                <span>100% DSGVO-konform & Unverbindlich</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Reveal>
+    );
+};

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

@@ -24,6 +24,7 @@ import { BoldNumber } from '../components/BoldNumber';
 import { WebVitalsScore } from '../components/WebVitalsScore';
 import { WaterfallChart } from '../components/WaterfallChart';
 import { Button } from '../components/Button';
+import { LeadMagnet } from '../components/LeadMagnet';
 import { TrackedLink } from '../components/analytics/TrackedLink';
 import { FAQSection } from '../components/FAQSection';
 
@@ -91,6 +92,7 @@ export const mdxComponents = {
     YouTubeEmbed,
     LinkedInEmbed,
     Button,
+    LeadMagnet,
     TrackedLink,
     FAQSection
 };

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

@@ -260,9 +260,14 @@ 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. 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.',
+        description: 'DEPRECATED: Use <LeadMagnet /> instead for main CTAs. Only use for small secondary links.',
         usageExample: '<Button href="/contact" variant="outline">Webprojekt anfragen</Button>'
     },
+    {
+        name: 'LeadMagnet',
+        description: 'Premium B2B conversion card. Use 1-2 per article as main high-impact CTAs. Props: title (strong headline), description (value prop), buttonText (action), href (link), variant (performance|security|standard).',
+        usageExample: '<LeadMagnet title="Performance-Check anfragen" description="Wir analysieren Ihre Core Web Vitals und decken Umsatzpotenziale auf." buttonText="Jetzt analysieren lassen" href="/contact" variant="performance" />'
+    },
     {
         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.',