From b43e4c8ac43c2ca5682cdf9dcc4c422ba1c90756 Mon Sep 17 00:00:00 2001
From: Nik L <lokhmachevnikita@gmail.com>
Date: Thu, 9 Apr 2026 15:23:51 -0400
Subject: [PATCH] feat: SaaS closed beta waitlist section

Gauges B2B interest in a commercial tier built on top of Greywall's
open-source core. The plugin SDK angle leans into what people have
actually been asking for: extending Greyproxy with custom heuristics,
Model Council, and token-saving MITM plugins. Web3forms handles signup.

Core stays free and open source; the new tier rides on top.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 app/page.tsx            |   2 +
 components/hero.tsx     |   9 ++
 components/nav.tsx      |   7 ++
 components/waitlist.tsx | 195 ++++++++++++++++++++++++++++++++++++++++
 4 files changed, 213 insertions(+)
 create mode 100644 components/waitlist.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 8bc9b90..7bde659 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -10,6 +10,7 @@ import { Layers } from '@/components/layers'
 import { Observability } from '@/components/observability'
 import { Control } from '@/components/control'
 import { Comparison } from '@/components/comparison'
+import { Waitlist } from '@/components/waitlist'
 import { About } from '@/components/about'
 import { FAQ } from '@/components/faq'
 import { Footer } from '@/components/footer'
@@ -27,6 +28,7 @@ export default function Home() {
         <Control />
         <Comparison />
         <GettingStarted />
+        <Waitlist />
         <About />
         <FAQ />
         <Footer />
diff --git a/components/hero.tsx b/components/hero.tsx
index 835575a..cf2bd72 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -37,6 +37,15 @@ 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>
       </div>
     </section>
   )
diff --git a/components/nav.tsx b/components/nav.tsx
index b67c009..3428520 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -61,6 +61,13 @@ export function Nav() {
             </svg>
             <span className="hidden sm:inline">GitHub</span>
           </a>
+          <a
+            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>
+          </a>
         </div>
       </div>
     </nav>
diff --git a/components/waitlist.tsx b/components/waitlist.tsx
new file mode 100644
index 0000000..80d7706
--- /dev/null
+++ b/components/waitlist.tsx
@@ -0,0 +1,195 @@
+'use client'
+
+import { useState, FormEvent } from 'react'
+import { Puzzle, Gavel, Coins, Building2, Check } from 'lucide-react'
+
+const plugins = [
+  {
+    icon: Puzzle,
+    title: 'Custom policy plugins',
+    desc: 'Heuristics as code. Allow or deny on whatever context you care about.',
+  },
+  {
+    icon: Gavel,
+    title: 'Model Council',
+    desc: 'A panel of models votes on ambiguous requests. Guardrails without the friction.',
+  },
+  {
+    icon: Coins,
+    title: 'Token-saving MITM',
+    desc: 'Cache, redact, and rewrite LLM traffic. Smaller bills.',
+  },
+  {
+    icon: Building2,
+    title: 'Enterprise controls',
+    desc: 'SSO, audit trails, team rulesets, managed deployments.',
+  },
+]
+
+type Status = 'idle' | 'submitting' | 'success' | 'error'
+
+export function Waitlist() {
+  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')
+    setError('')
+
+    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 enterprise / plugin SDK waitlist',
+          from_name: 'Greywall waitlist',
+          email,
+          message: useCase || '(no use case provided)',
+          botcheck: '',
+        }),
+      })
+      const data = await res.json()
+      if (data.success) {
+        setStatus('success')
+        setEmail('')
+        setUseCase('')
+      } else {
+        setStatus('error')
+        setError(data.message || 'Something went wrong. Try again?')
+      }
+    } catch {
+      setStatus('error')
+      setError('Network error. Try again?')
+    }
+  }
+
+  return (
+    <section id="waitlist" className="py-24 px-4 sm:px-6 border-t border-border/30">
+      <div className="mx-auto max-w-5xl">
+        <div className="max-w-2xl mb-10">
+          <div className="flex items-center gap-2 mb-4">
+            <Puzzle className="h-4 w-4 text-primary" />
+            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
+              Plugin SDK &middot; Beta
+            </span>
+          </div>
+          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
+            Extend Greyproxy.
+          </h2>
+          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
+            We&apos;re building a plugin SDK on top of Greyproxy, and we&apos;ll help you
+            build the plugins you need on top of it.
+          </p>
+        </div>
+
+        {/* Plugin cards */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 mb-6">
+          {plugins.map((p) => (
+            <div
+              key={p.title}
+              className="p-4 sm:p-6 rounded-lg border border-border/40 bg-card/30"
+            >
+              <div className="flex items-center gap-3 mb-3">
+                <p.icon className="h-5 w-5 text-primary" />
+                <h3 className="font-sans font-semibold text-sm">{p.title}</h3>
+              </div>
+              <p className="text-sm text-muted-foreground font-serif leading-relaxed">
+                {p.desc}
+              </p>
+            </div>
+          ))}
+        </div>
+
+        {/* Freedom guarantee */}
+        <div className="mb-12 p-5 rounded-lg border border-primary/15 bg-primary/[0.03]">
+          <p className="text-sm text-muted-foreground font-serif leading-relaxed">
+            <span className="text-primary font-medium">Core stays free and open source.</span>{' '}
+            Sandbox, Greyproxy, and the dashboard stay Apache 2.0 forever. Plugin SDK and
+            enterprise ride on top.
+          </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 */}
+              <input
+                type="checkbox"
+                name="botcheck"
+                className="hidden"
+                style={{ display: 'none' }}
+                tabIndex={-1}
+                autoComplete="off"
+              />
+              <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"
+              >
+                {status === 'submitting' ? 'Submitting…' : 'Join the waitlist'}
+              </button>
+              {status === 'error' && (
+                <p className="text-xs text-red-400/80 font-sans text-center">{error}</p>
+              )}
+            </form>
+          )}
+        </div>
+      </div>
+    </section>
+  )
+}