monadical/greywall-landing-page
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: landing page mvp

Browse Source
This commit is contained in:
Nik L
2026-03-09 13:39:15 -04:00
commit 4a1d666ee2
28 changed files with 3441 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
components/observability.tsx Normal file
View File

@@ -0,0 +1,127 @@
'use client'
import { Eye, Activity, ShieldQuestion, Zap } from 'lucide-react'
import { usePlatform } from './platform-toggle'
export function Observability() {
const [platform] = usePlatform()
return (
<section className="py-24 px-6 border-t border-border/30">
<div className="mx-auto max-w-5xl">
<div className="max-w-2xl mb-16">
<div className="flex items-center gap-2 mb-4">
<Eye className="h-4 w-4 text-primary" />
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
Clarity
</span>
</div>
<h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
Watch it reach. Then decide.
</h2>
<p className="text-muted-foreground font-serif text-lg leading-relaxed">
You can&apos;t predict what your agent will access. Greywall makes every filesystem
operation and network connection visible in real time — so you make informed decisions
instead of guessing policies upfront.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Monitor mode */}
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
<Activity className="h-4 w-4" />
</div>
<h3 className="font-sans font-semibold text-sm">
{platform === 'linux' ? 'eBPF violation tracing' : 'Log stream monitoring'}
</h3>
</div>
<div className="code-block p-4">
<div className="text-xs text-muted-foreground mb-3 font-sans uppercase tracking-wider">
{platform === 'linux' ? 'Real-time syscall tracing' : 'Session-tagged violation stream'}
</div>
<div className="space-y-1.5 font-mono text-xs">
<div>
<span className="text-muted-foreground">$ </span>
<span className="text-greyhaven-offwhite">greywall -m -- claude</span>
</div>
<div className="mt-2 text-muted-foreground">
[14:23:01] <span className="text-red-400/80">DENY</span>{' '}
<span className="text-greyhaven-offwhite">read</span>{' '}
~/.ssh/id_ed25519
</div>
<div className="text-muted-foreground">
[14:23:01] <span className="text-red-400/80">DENY</span>{' '}
<span className="text-greyhaven-offwhite">read</span>{' '}
~/.aws/credentials
</div>
<div className="text-muted-foreground">
[14:23:02] <span className="text-red-400/80">DENY</span>{' '}
<span className="text-greyhaven-offwhite">write</span>{' '}
~/.bashrc
</div>
<div className="text-muted-foreground">
[14:23:03] <span className="text-green-400/70">ALLOW</span>{' '}
<span className="text-greyhaven-offwhite">read</span>{' '}
./src/index.ts
</div>
<div className="text-muted-foreground">
[14:23:03] <span className="text-green-400/70">ALLOW</span>{' '}
<span className="text-greyhaven-offwhite">write</span>{' '}
./src/utils.ts
</div>
</div>
</div>
</div>
{/* GreyProxy screenshot */}
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="flex items-center justify-center w-8 h-8 rounded-md bg-primary/10 text-primary">
<Eye className="h-4 w-4" />
</div>
<h3 className="font-sans font-semibold text-sm">GreyProxy dashboard</h3>
</div>
<div className="rounded-lg border border-border/40 overflow-hidden">
<img
src="/greyproxy.png"
alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"
className="w-full h-auto"
/>
</div>
</div>
</div>
{/* Value props */}
<div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="p-5 rounded-lg border border-border/40 bg-card/30">
<ShieldQuestion className="h-4 w-4 text-primary mb-3" />
<h4 className="font-sans font-medium text-sm mb-1">Answer hard questions</h4>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
What did the agent see? What did it access? What was denied? Greywall makes these
questions answerable for any session, at any time, after the fact.
</p>
</div>
<div className="p-5 rounded-lg border border-border/40 bg-card/30">
<Zap className="h-4 w-4 text-primary mb-3" />
<h4 className="font-sans font-medium text-sm mb-1">Move faster, safely</h4>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
Once you can see what agents do and control it without breaking flow, you stop
hesitating. Longer autonomous runs, more sub-agents, faster iteration on sensitive
workloads.
</p>
</div>
<div className="p-5 rounded-lg border border-border/40 bg-card/30">
<Activity className="h-4 w-4 text-primary mb-3" />
<h4 className="font-sans font-medium text-sm mb-1">Operate, don&apos;t hope</h4>
<p className="text-xs text-muted-foreground font-serif leading-relaxed">
Observability is the difference between operating AI and hoping AI operates.
Security becomes an enabler of velocity, not a constraint on it.
</p>
</div>
</div>
</div>
</section>
)
}