feat: new design
This commit is contained in:
Nik L
@@ -1,121 +1,58 @@
|
||||
'use client'
|
||||
import { BetaSignup } from './beta-signup'
|
||||
|
||||
import { useState, FormEvent } from 'react'
|
||||
import { Check } from 'lucide-react'
|
||||
const badges = [
|
||||
{ href: 'https://github.com/GreyhavenHQ/greywall', label: 'GitHub', value: '138 stars' },
|
||||
{ href: 'https://github.com/GreyhavenHQ/greywall/blob/main/LICENSE', label: 'License', value: 'Apache-2.0' },
|
||||
{ href: 'https://github.com/GreyhavenHQ/greywall/releases', label: 'Release', value: 'v0.3.1' },
|
||||
{ href: 'https://github.com/GreyhavenHQ/greywall', label: 'Go', value: 'v1.25' },
|
||||
{ href: 'https://www.producthunt.com/products/greywall?launch=greywall', label: 'Product Hunt', value: 'Greywall' },
|
||||
]
|
||||
|
||||
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 */}
|
||||
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(217,94,42,0.05)_0%,transparent_50%)]" />
|
||||
{/* Grid pattern */}
|
||||
<div
|
||||
className="absolute inset-0 opacity-[0.03]"
|
||||
style={{
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(249,249,247,1) 1px, transparent 1px), linear-gradient(90deg, rgba(249,249,247,1) 1px, transparent 1px)',
|
||||
backgroundSize: '64px 64px',
|
||||
}}
|
||||
/>
|
||||
<section className="relative w-full px-4 pt-8 pb-6 sm:px-6 sm:pt-10 sm:pb-8">
|
||||
<div className="relative z-10 mx-auto max-w-5xl text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-full text-center">
|
||||
<h1 className="title-serif mx-auto w-full max-w-[980px] text-[40px] leading-[1.0] tracking-normal font-semibold md:text-[72px]">
|
||||
Keep the agent inside clear, local boundaries.
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="relative mx-auto max-w-4xl text-center">
|
||||
<h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
|
||||
<em className="italic text-primary">Greywall</em> your agent & let it cook.
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto font-serif mb-6">
|
||||
Container-free sandboxing with real-time observability & dynamic controls, for Linux & MacOS.
|
||||
</p>
|
||||
<div className="inline-flex items-center gap-2 flex-wrap justify-center">
|
||||
<a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/stars/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614&logo=github&logoColor=white" alt="GitHub stars" className="h-5" />
|
||||
</a>
|
||||
<a href="https://github.com/GreyhavenHQ/greywall/blob/main/LICENSE" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/license/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="License" className="h-5" />
|
||||
</a>
|
||||
<a href="https://github.com/GreyhavenHQ/greywall/releases" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/v/release/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="Latest release" className="h-5" />
|
||||
</a>
|
||||
<a href="https://github.com/GreyhavenHQ/greywall" target="_blank" rel="noopener noreferrer">
|
||||
<img src="https://img.shields.io/github/go-mod/go-version/GreyhavenHQ/greywall?style=flat&color=D95E2A&labelColor=161614" alt="Go version" className="h-5" />
|
||||
</a>
|
||||
<a href="https://www.producthunt.com/products/greywall?launch=greywall" target="_blank" rel="noopener noreferrer">
|
||||
<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 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">→</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"
|
||||
<div className="text-center">
|
||||
<p className="text-serif mx-auto max-w-[380px] text-[18px] leading-[1.2] font-semibold tracking-[-2.2%] text-greyhaven-grey7 md:max-w-[720px] md:text-[28px]">
|
||||
Default-deny filesystem, network, and command controls around AI agents on Linux and macOS, with records of what they tried to do.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-1 flex flex-wrap items-center justify-center gap-2">
|
||||
{badges.map((badge) => (
|
||||
<a
|
||||
key={badge.label}
|
||||
href={badge.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center overflow-hidden rounded-md border border-border/60 bg-card/90 text-[13px] leading-none transition-colors hover:border-primary/30 md:text-[14px]"
|
||||
>
|
||||
{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're on the list.
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground/60 font-serif">
|
||||
No spam. Just one email when it's ready.
|
||||
</p>
|
||||
<span className="bg-greyhaven-grey8 px-3 py-1.5 font-sans text-greyhaven-offwhite md:px-3.5 md:py-2">
|
||||
{badge.label}
|
||||
</span>
|
||||
<span className="bg-primary px-3 py-1.5 font-sans text-primary-foreground md:px-3.5 md:py-2">
|
||||
{badge.value}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<BetaSignup
|
||||
subject="Greywall closed beta signup (hero)"
|
||||
message="(hero CTA signup)"
|
||||
inputClassName="w-56 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 transition-colors focus:border-primary/40 focus:outline-none sm:w-64"
|
||||
submitClassName="px-4 py-2.5 font-sans text-sm font-medium md:text-sm"
|
||||
helperTextClassName="text-xs text-muted-foreground/60 font-serif"
|
||||
wrapperClassName="mt-2 flex flex-col items-center gap-1.5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user