Popup free generatoren

src/components/marketing/PostDownloadPopup.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { X, Zap, BarChart2, RefreshCw, Palette } from 'lucide-react';
+import { Button } from '@/components/ui/Button';
+
+interface PostDownloadPopupProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+const BENEFITS = [
+    { icon: RefreshCw, text: 'Edit the link anytime — QR stays the same' },
+    { icon: BarChart2, text: 'See who scans, when & where' },
+    { icon: Palette, text: 'Custom colors, logo & frames' },
+    { icon: Zap, text: 'Free plan included — upgrade anytime for more' },
+];
+
+const LS_KEY = 'qrm_download_popup_seen';
+
+export function shouldShowDownloadPopup(): boolean {
+    try { return !localStorage.getItem(LS_KEY); } catch { return false; }
+}
+
+export function markDownloadPopupSeen(): void {
+    try { localStorage.setItem(LS_KEY, '1'); } catch { /* ignore */ }
+}
+
+export default function PostDownloadPopup({ open, onClose }: PostDownloadPopupProps) {
+    const overlayRef = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        if (!open) return;
+        markDownloadPopupSeen();
+        const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+        document.addEventListener('keydown', onKey);
+        return () => document.removeEventListener('keydown', onKey);
+    }, [open, onClose]);
+
+    if (!open) return null;
+
+    return (
+        <div
+            ref={overlayRef}
+            className="fixed inset-0 z-50 flex items-center justify-center p-4"
+            style={{ backgroundColor: 'rgba(15, 23, 42, 0.6)', backdropFilter: 'blur(4px)' }}
+            onClick={(e) => { if (e.target === overlayRef.current) onClose(); }}
+        >
+            <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="relative bg-gradient-to-br from-[#4F46E5] to-[#7C3AED] p-6 text-white text-center">
+                    <button
+                        onClick={onClose}
+                        className="absolute top-4 right-4 text-white/70 hover:text-white transition-colors"
+                        aria-label="Close"
+                    >
+                        <X className="w-5 h-5" />
+                    </button>
+                    <div className="w-12 h-12 bg-white/20 rounded-2xl flex items-center justify-center mx-auto mb-3">
+                        <Zap className="w-6 h-6 text-white" />
+                    </div>
+                    <h2 className="text-xl font-bold">Your QR code is downloading!</h2>
+                    <p className="text-white/80 text-sm mt-1">
+                        Want to make it smarter — for free?
+                    </p>
+                </div>
+
+                {/* Benefits */}
+                <div className="p-6 space-y-3">
+                    {BENEFITS.map(({ icon: Icon, text }) => (
+                        <div key={text} className="flex items-center gap-3">
+                            <div className="w-8 h-8 rounded-xl bg-indigo-50 flex items-center justify-center shrink-0">
+                                <Icon className="w-4 h-4 text-[#4F46E5]" />
+                            </div>
+                            <span className="text-sm text-slate-700">{text}</span>
+                        </div>
+                    ))}
+                </div>
+
+                {/* CTAs */}
+                <div className="px-6 pb-6 space-y-3">
+                    <Link href="/signup" onClick={onClose} className="block">
+                        <Button className="w-full bg-[#4F46E5] hover:bg-[#4338CA] text-white h-12 text-base font-semibold shadow-lg">
+                            Create Free Account
+                        </Button>
+                    </Link>
+                    <button
+                        onClick={onClose}
+                        className="w-full text-sm text-slate-400 hover:text-slate-600 transition-colors py-1"
+                    >
+                        No thanks, keep it static
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}