fix: logo should render and get started button works

2026-01-11 20:14:36 +00:00
parent 0a3096dbaf
commit 6edfe7cb52
4 changed files with 148 additions and 53 deletions
--- a/components/WaitlistModal.tsx
+++ b/components/WaitlistModal.tsx
@@ -0,0 +1,74 @@
+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;