108 lines
4.5 KiB
TypeScript
108 lines
4.5 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { motion, AnimatePresence } from 'motion/react';
|
|
import { X, Download, ShieldCheck, ArrowRight, Mail } from 'lucide-react';
|
|
|
|
export default function LeadMagnet() {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [dismissed, setDismissed] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check if user already dismissed or converted
|
|
const hasSeen = localStorage.getItem('seo_lead_magnet_dismissed');
|
|
if (hasSeen) return;
|
|
|
|
const handleMouseLeave = (e: MouseEvent) => {
|
|
if (e.clientY <= 0 && !dismissed) {
|
|
setIsOpen(true);
|
|
}
|
|
};
|
|
|
|
const handleScroll = () => {
|
|
const scrollPercent = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
|
|
if (scrollPercent > 50 && !dismissed) {
|
|
setIsOpen(true);
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mouseleave', handleMouseLeave);
|
|
window.addEventListener('scroll', handleScroll);
|
|
|
|
return () => {
|
|
document.removeEventListener('mouseleave', handleMouseLeave);
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, [dismissed]);
|
|
|
|
const handleClose = () => {
|
|
setIsOpen(false);
|
|
setDismissed(true);
|
|
localStorage.setItem('seo_lead_magnet_dismissed', 'true');
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<div className="fixed inset-0 z-[200] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm">
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.95, y: 20 }}
|
|
className="bg-[#08080a] border border-white/10 shadow-2xl max-w-2xl w-full overflow-hidden flex flex-col relative"
|
|
>
|
|
<button
|
|
onClick={handleClose}
|
|
className="absolute top-4 right-4 h-8 w-8 bg-white/5 hover:bg-brand hover:text-black text-slate-500 flex items-center justify-center z-20 transition-all"
|
|
aria-label="Fechar"
|
|
>
|
|
<X size={16} />
|
|
</button>
|
|
|
|
<div className="p-8 md:p-12">
|
|
<div className="flex items-center gap-3 mb-6">
|
|
<div className="h-10 w-10 bg-brand/10 flex items-center justify-center text-brand skew-x-[-6deg]">
|
|
<ShieldCheck size={20} className="skew-x-[6deg]" />
|
|
</div>
|
|
<span className="text-[9px] font-mono font-black text-brand uppercase tracking-[0.4em]">Resource_Found</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl sm:text-4xl font-display font-black text-white italic tracking-tight leading-none mb-6">
|
|
Dominate the<br /><span className="text-brand">Neural_Index 2026.</span>
|
|
</h2>
|
|
|
|
<p className="text-slate-500 font-mono text-[11px] leading-relaxed uppercase tracking-widest mb-10 max-w-lg">
|
|
Download our exclusive blueprint for technical systems and semantic authority protocols.
|
|
</p>
|
|
|
|
<form className="space-y-4" onSubmit={(e) => { e.preventDefault(); handleClose(); }}>
|
|
<div className="relative">
|
|
<Mail className="absolute left-0 top-1/2 -translate-y-1/2 text-brand" size={16} />
|
|
<input
|
|
type="email"
|
|
placeholder="ENTER_ENDPOINT_ID..."
|
|
required
|
|
className="w-full h-12 pl-8 border-b border-white/10 bg-transparent text-white placeholder:text-slate-800 focus:outline-none focus:border-brand transition-all font-mono text-xs uppercase tracking-widest"
|
|
/>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
className="btn-primary w-full"
|
|
>
|
|
Sync_Now <Download size={16} />
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-8 pt-8 border-t border-white/5 flex flex-wrap gap-x-8 gap-y-4">
|
|
<div className="flex items-center gap-2 text-[8px] font-black text-slate-700 uppercase tracking-widest">
|
|
<ArrowRight size={10} className="text-brand" /> Interactive Protocol
|
|
</div>
|
|
<div className="flex items-center gap-2 text-[8px] font-black text-slate-700 uppercase tracking-widest">
|
|
<ArrowRight size={10} className="text-brand" /> Audit Framework
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|