Your commit message

frontend/components/landing/WaitlistForm.tsx

@@ -47,16 +47,34 @@ export function WaitlistForm() {
 
     setIsSubmitting(true)
 
-    // Simulate API call
-    await new Promise(resolve => setTimeout(resolve, 1500))
+    try {
+      const apiUrl = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001'
+      const response = await fetch(`${apiUrl}/api/waitlist`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          email,
+          source: 'landing_page',
+          referrer: typeof window !== 'undefined' ? document.referrer : undefined,
+        }),
+      })
 
-    // Generate a random queue position
-    const position = Math.floor(Math.random() * 500) + 400
+      const data = await response.json()
 
-    setQueuePosition(position)
-    setIsSubmitting(false)
-    setIsSuccess(true)
-    triggerConfetti()
+      if (data.success) {
+        setQueuePosition(data.position || Math.floor(Math.random() * 500) + 430)
+        setIsSubmitting(false)
+        setIsSuccess(true)
+        triggerConfetti()
+      } else {
+        setIsSubmitting(false)
+        setError(data.message || 'Something went wrong. Please try again.')
+      }
+    } catch (err) {
+      console.error('Waitlist signup error:', err)
+      setIsSubmitting(false)
+      setError('Connection error. Please try again.')
+    }
   }
 
   if (isSuccess) {
@@ -193,11 +211,10 @@ export function WaitlistForm() {
             }}
             placeholder="Enter your email"
             disabled={isSubmitting}
-            className={`w-full h-14 rounded-full px-6 text-base border-2 transition-all outline-none ${
-              error
+            className={`w-full h-14 rounded-full px-6 text-base border-2 transition-all outline-none ${error
                 ? 'border-red-500 bg-red-50 focus:border-red-500 focus:ring-4 focus:ring-red-500/20'
                 : 'border-border bg-background focus:border-[hsl(var(--primary))] focus:ring-4 focus:ring-[hsl(var(--primary))]/20'
-            } disabled:opacity-50 disabled:cursor-not-allowed`}
+              } disabled:opacity-50 disabled:cursor-not-allowed`}
           />
           <AnimatePresence>
             {error && (