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>
+    );
+};