feat: new closed beta flow

components/hero.tsx

@@ -1,4 +1,44 @@
+'use client'
+
+import { useState, FormEvent } from 'react'
+import { Check } from 'lucide-react'
+
 export function Hero() {
+  const [mode, setMode] = useState<'button' | 'input' | 'submitting' | 'success'>('button')
+  const [email, setEmail] = useState('')
+
+  async function onSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (mode === 'submitting') return
+    setMode('submitting')
+    try {
+      const res = await fetch('https://api.web3forms.com/submit', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Accept: 'application/json',
+        },
+        body: JSON.stringify({
+          access_key: '85d3252e-5890-450c-aa93-12dc89c7c9b5',
+          subject: 'Greywall closed beta signup (hero)',
+          from_name: 'Greywall waitlist',
+          email,
+          message: '(hero CTA signup)',
+          botcheck: '',
+        }),
+      })
+      const data = await res.json()
+      if (data.success) {
+        setMode('success')
+        setEmail('')
+      } else {
+        setMode('input')
+      }
+    } catch {
+      setMode('input')
+    }
+  }
+
   return (
     <section className="relative pt-24 sm:pt-32 pb-12 sm:pb-16 px-4 sm:px-6 overflow-hidden">
       {/* Subtle background gradient */}
@@ -37,14 +77,45 @@ export function Hero() {
             <img src="https://img.shields.io/badge/Product%20Hunt-Greywall-D95E2A?style=flat&logo=producthunt&logoColor=white&labelColor=161614" alt="Product Hunt" className="h-5" />
           </a>
         </div>
-        <div className="mt-8 flex justify-center">
-          <a
-            href="#waitlist"
-            className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors"
-          >
-            Join the SaaS beta
-            <span aria-hidden="true">&rarr;</span>
-          </a>
+        <div className="mt-8 flex flex-col items-center gap-2">
+          {mode === 'button' && (
+            <button
+              onClick={() => setMode('input')}
+              className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors cursor-pointer"
+            >
+              Join closed beta
+              <span aria-hidden="true">&rarr;</span>
+            </button>
+          )}
+          {(mode === 'input' || mode === 'submitting') && (
+            <form onSubmit={onSubmit} className="flex items-center gap-2">
+              <input
+                type="email"
+                required
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@company.com"
+                autoFocus
+                className="rounded-md border border-border/40 bg-background/40 px-4 py-2.5 text-sm font-sans text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary/40 transition-colors w-56 sm:w-64"
+              />
+              <button
+                type="submit"
+                disabled={mode === 'submitting'}
+                className="px-4 py-2.5 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {mode === 'submitting' ? '...' : 'Join'}
+              </button>
+            </form>
+          )}
+          {mode === 'success' && (
+            <div className="inline-flex items-center gap-2 px-5 py-2.5 rounded-md border border-primary/20 bg-primary/[0.05] font-sans text-sm text-primary font-medium">
+              <Check className="h-4 w-4" />
+              You&apos;re on the list.
+            </div>
+          )}
+          <p className="text-xs text-muted-foreground/60 font-serif">
+            No spam. Just one email when it&apos;s ready.
+          </p>
         </div>
       </div>
     </section>