104 lines
4.1 KiB
TypeScript
104 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Copy, Check, Terminal } from 'lucide-react'
|
|
|
|
export function Hero() {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const installCmd = 'curl -fsSL https://raw.githubusercontent.com/GreyhavenHQ/greywall/main/install.sh | sh'
|
|
|
|
function copyInstall() {
|
|
navigator.clipboard.writeText(installCmd)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
}
|
|
|
|
return (
|
|
<section className="relative pt-32 pb-24 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',
|
|
}}
|
|
/>
|
|
|
|
<div className="relative mx-auto max-w-3xl text-center">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 mb-8 rounded-full border border-border/60 bg-card/50 text-xs text-muted-foreground font-sans">
|
|
<span className="inline-block w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
|
|
Container-free sandboxing for AI agents
|
|
</div>
|
|
|
|
<h1 className="font-serif text-4xl sm:text-5xl md:text-6xl font-semibold tracking-tight leading-[1.1] mb-6">
|
|
Constrain your agents.
|
|
<br />
|
|
<span className="text-primary">Know what they touch.</span>
|
|
</h1>
|
|
|
|
<p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto mb-10 font-serif">
|
|
OS-native, default-deny sandboxing with real-time visibility into every
|
|
file access and network call. No containers. One command.
|
|
</p>
|
|
|
|
{/* Install command */}
|
|
<div className="mx-auto max-w-5xl">
|
|
<div className="code-block glow-orange px-5 py-3.5 flex items-center justify-between gap-4">
|
|
<code className="font-mono text-greyhaven-offwhite text-[13px] whitespace-nowrap">
|
|
<span className="text-muted-foreground">$ </span>
|
|
{installCmd}
|
|
</code>
|
|
<button
|
|
onClick={copyInstall}
|
|
className="shrink-0 p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent/30 transition-all"
|
|
title="Copy to clipboard"
|
|
>
|
|
{copied ? (
|
|
<Check className="h-4 w-4 text-primary" />
|
|
) : (
|
|
<Copy className="h-4 w-4" />
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick proof */}
|
|
<div className="mt-12 mx-auto max-w-2xl">
|
|
<div className="code-block p-5 text-left">
|
|
<div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
|
|
Kernel-enforced isolation
|
|
</div>
|
|
<div className="space-y-2 font-mono text-sm">
|
|
<div>
|
|
<span className="text-muted-foreground">$ </span>
|
|
<span className="text-greyhaven-offwhite">greywall -- cat ~/.ssh/id_ed25519</span>
|
|
</div>
|
|
<div className="text-red-400/90">
|
|
cat: /home/user/.ssh/id_ed25519: Operation not permitted
|
|
</div>
|
|
<div className="mt-3">
|
|
<span className="text-muted-foreground">$ </span>
|
|
<span className="text-greyhaven-offwhite">greywall -- curl https://exfil.attacker.com</span>
|
|
</div>
|
|
<div className="text-red-400/90">
|
|
curl: (7) Failed to connect: Connection refused
|
|
</div>
|
|
<div className="mt-3">
|
|
<span className="text-muted-foreground">$ </span>
|
|
<span className="text-greyhaven-offwhite">greywall -- ls ./my-project/</span>
|
|
</div>
|
|
<div className="text-green-400/80">
|
|
src/ package.json README.md tsconfig.json
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|