feat: new closed beta flow

2026-04-10 10:27:34 -04:00
parent b43e4c8ac4
commit 14fcaea830
3 changed files with 124 additions and 83 deletions
--- a/components/hero.tsx
+++ b/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>
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -65,8 +65,8 @@ export function Nav() {
            href="#waitlist"
            className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-md bg-primary text-primary-foreground text-xs sm:text-sm font-sans font-medium hover:bg-primary/90 transition-colors whitespace-nowrap"
          >
-            <span className="hidden sm:inline">Join the SaaS beta</span>
-            <span className="sm:hidden">SaaS beta</span>
+            <span className="hidden sm:inline">Join closed beta</span>
+            <span className="sm:hidden">Beta</span>
          </a>
        </div>
      </div>
--- a/components/waitlist.tsx
+++ b/components/waitlist.tsx
@@ -26,18 +26,17 @@ const plugins = [
  },
 ]

-type Status = 'idle' | 'submitting' | 'success' | 'error'
+type Mode = 'button' | 'input' | 'submitting' | 'success' | 'error'

 export function Waitlist() {
+  const [mode, setMode] = useState<Mode>('button')
  const [email, setEmail] = useState('')
-  const [useCase, setUseCase] = useState('')
-  const [status, setStatus] = useState<Status>('idle')
  const [error, setError] = useState('')

  async function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault()
-    if (status === 'submitting') return
-    setStatus('submitting')
+    if (mode === 'submitting') return
+    setMode('submitting')
    setError('')

    try {
@@ -52,21 +51,20 @@ export function Waitlist() {
          subject: 'Greywall enterprise / plugin SDK waitlist',
          from_name: 'Greywall waitlist',
          email,
-          message: useCase || '(no use case provided)',
+          message: '(waitlist section signup)',
          botcheck: '',
        }),
      })
      const data = await res.json()
      if (data.success) {
-        setStatus('success')
+        setMode('success')
        setEmail('')
-        setUseCase('')
      } else {
-        setStatus('error')
+        setMode('error')
        setError(data.message || 'Something went wrong. Try again?')
      }
    } catch {
-      setStatus('error')
+      setMode('error')
      setError('Network error. Try again?')
    }
  }
@@ -117,77 +115,49 @@ export function Waitlist() {
          </p>
        </div>

-        {/* Waitlist form */}
-        <div className="mx-auto max-w-2xl rounded-lg border border-border/40 bg-card/30 p-6 sm:p-8">
-          {status === 'success' ? (
-            <div className="text-center py-6">
-              <div className="inline-flex items-center justify-center w-12 h-12 rounded-full bg-primary/10 mb-4">
-                <Check className="h-6 w-6 text-primary" />
-              </div>
-              <h3 className="font-serif text-xl font-semibold mb-2">You&apos;re on the list.</h3>
-              <p className="text-sm text-muted-foreground font-serif">
-                We&apos;ll reach out as the plugin SDK takes shape. Thanks for helping us build it.
-              </p>
-            </div>
-          ) : (
-            <form onSubmit={onSubmit} className="space-y-4">
-              <div>
-                <label
-                  htmlFor="wl-email"
-                  className="block text-xs font-sans font-medium text-muted-foreground mb-2 uppercase tracking-wider"
-                >
-                  Work email
-                </label>
-                <input
-                  id="wl-email"
-                  type="email"
-                  required
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="you@company.com"
-                  className="w-full rounded-md border border-border/40 bg-background/40 px-4 py-3 text-sm font-sans text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary/40 transition-colors"
-                />
-              </div>
-              <div>
-                <label
-                  htmlFor="wl-usecase"
-                  className="block text-xs font-sans font-medium text-muted-foreground mb-2 uppercase tracking-wider"
-                >
-                  What would you build?{' '}
-                  <span className="normal-case text-muted-foreground/60 font-normal">
-                    (optional, we can help)
-                  </span>
-                </label>
-                <textarea
-                  id="wl-usecase"
-                  value={useCase}
-                  onChange={(e) => setUseCase(e.target.value)}
-                  rows={3}
-                  placeholder="A plugin that... / a policy for... / our team needs..."
-                  className="w-full rounded-md border border-border/40 bg-background/40 px-4 py-3 text-sm font-sans text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:border-primary/40 transition-colors resize-y"
-                />
-              </div>
-              {/* Honeypot: bots fill hidden fields, humans don't */}
+        {/* Waitlist CTA */}
+        <div className="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="checkbox"
-                name="botcheck"
-                className="hidden"
-                style={{ display: 'none' }}
-                tabIndex={-1}
-                autoComplete="off"
+                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={status === 'submitting'}
-                className="w-full inline-flex items-center justify-center gap-2 px-6 py-3 rounded-md bg-primary text-primary-foreground font-sans text-sm font-medium hover:bg-primary/90 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                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"
              >
-                {status === 'submitting' ? 'Submitting…' : 'Join the waitlist'}
+                {mode === 'submitting' ? '...' : 'Join'}
              </button>
-              {status === 'error' && (
-                <p className="text-xs text-red-400/80 font-sans text-center">{error}</p>
-              )}
            </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>
+          )}
+          {mode === 'error' && (
+            <p className="text-xs text-red-400/80 font-sans text-center">{error}</p>
+          )}
+          <p className="text-xs text-muted-foreground/60 font-serif">
+            No spam. Just one email when it&apos;s ready.
+          </p>
        </div>
      </div>
    </section>