75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
import React from 'react';
|
|
import { X, Mail } from 'lucide-react';
|
|
|
|
interface WaitlistModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
const WaitlistModal: React.FC<WaitlistModalProps> = ({ isOpen, onClose }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal Content */}
|
|
<div className="relative bg-surface-dark border border-gray-800 rounded-3xl p-8 max-w-md w-full shadow-2xl animate-fade-in-up">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors"
|
|
>
|
|
<X size={24} />
|
|
</button>
|
|
|
|
<div className="text-center mb-8">
|
|
<div className="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<Mail className="text-primary" size={24} />
|
|
</div>
|
|
<h3 className="text-2xl font-display font-bold text-white mb-2">
|
|
Join the Waitlist
|
|
</h3>
|
|
<p className="text-gray-400">
|
|
Be the first to experience focus-driven learning. We'll notify you when we launch!
|
|
</p>
|
|
</div>
|
|
|
|
<form
|
|
action="https://getlaunchlist.com/s/pAqdup"
|
|
method="POST"
|
|
className="space-y-4"
|
|
>
|
|
<div className="relative">
|
|
<Mail className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" size={20} />
|
|
<input
|
|
type="email"
|
|
name="email"
|
|
placeholder="Enter your email"
|
|
required
|
|
autoFocus
|
|
className="w-full bg-background-dark border border-gray-700 rounded-xl py-4 pl-12 pr-4 text-white placeholder:text-gray-600 focus:outline-none focus:border-primary transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-primary text-gray-900 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow"
|
|
>
|
|
Join Waitlist
|
|
</button>
|
|
</form>
|
|
|
|
<p className="mt-6 text-center text-xs text-gray-600">
|
|
No credit card required. Unsubscribe at any time.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default WaitlistModal;
|