102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
export function WaitlistSection() {
|
|
const [email, setEmail] = useState('')
|
|
const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
|
|
const [message, setMessage] = useState('')
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setStatus('loading')
|
|
|
|
try {
|
|
const response = await fetch('/api/waitlist', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ email }),
|
|
})
|
|
|
|
const data = await response.json()
|
|
|
|
if (response.ok) {
|
|
setStatus('success')
|
|
setMessage('Welcome to the underground. We\'ll reach out when nodes are ready.')
|
|
setEmail('')
|
|
} else {
|
|
setStatus('error')
|
|
setMessage(data.error || 'Something went wrong. Try again.')
|
|
}
|
|
} catch (error) {
|
|
setStatus('error')
|
|
setMessage('Connection failed. The network is watching.')
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="py-24 px-4 border-t border-border">
|
|
<div className="max-w-2xl mx-auto">
|
|
<div className="text-center mb-12">
|
|
<div className="text-xs font-mono text-primary tracking-widest uppercase mb-4">
|
|
Join the Underground
|
|
</div>
|
|
<h2 className="text-3xl md:text-5xl font-bold mb-6 font-mono text-balance">
|
|
Secure Your Node
|
|
</h2>
|
|
<p className="text-muted-foreground leading-relaxed text-pretty">
|
|
Exclusive access to the first run of sovereign edge nodes. Add your signal to the
|
|
network. We'll reach out when devices are ready for pre-order.
|
|
</p>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="bg-card border border-border p-8">
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label htmlFor="email" className="text-sm font-mono text-muted-foreground mb-2 block">
|
|
Your encrypted signal
|
|
</label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
placeholder="your@email.xyz"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
required
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="bg-background border-border font-mono"
|
|
/>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={status === 'loading' || status === 'success'}
|
|
className="w-full bg-primary text-primary-foreground hover:bg-primary/90 font-mono tracking-wider"
|
|
>
|
|
{status === 'loading' ? 'CONNECTING...' : status === 'success' ? 'CONNECTED' : 'JOIN THE NETWORK'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{message && (
|
|
<div
|
|
className={`text-center text-sm font-mono ${
|
|
status === 'success' ? 'text-accent' : 'text-destructive'
|
|
}`}
|
|
>
|
|
{message}
|
|
</div>
|
|
)}
|
|
</form>
|
|
|
|
<div className="mt-12 text-center text-xs text-muted-foreground font-mono">
|
|
<p className="text-pretty">Your data is sovereign. Zero-knowledge. Encrypted. Always yours.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|