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

feat: new design

Browse Source
This commit is contained in:
Nik L
2026-04-13 13:09:46 -04:00
parent 14fcaea830
commit b2879e1a5e
34 changed files with 573 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
components/problem.tsx
View File

@@ -1,4 +1,3 @@
import { ShieldCheck, ShieldOff } from 'lucide-react'
export function Problem() {
return (
@@ -8,18 +7,12 @@ export function Problem() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
{/* Without Greywall */}
<div className="flex flex-col">
<div className="flex items-center gap-2 mb-3">
<ShieldOff className="h-4 w-4 text-red-400/70" />
<span className="text-xs font-sans uppercase tracking-wider text-red-400/70 font-medium">
Without Greywall
</span>
</div>
<span className="text-sm font-sans uppercase tracking-[0.16em] text-red-500 font-semibold mb-3 block">
Without Greywall
</span>
<div className="code-block p-5 sm:p-6 flex-1">
<div className="flex items-center gap-2 mb-5">
<div className="w-3 h-3 rounded-full bg-red-500/70" />
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
<div className="w-3 h-3 rounded-full bg-green-500/70" />
<span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
<div className="mb-5">
<span className="text-xs font-mono text-muted-foreground">~/project</span>
</div>
<div className="space-y-3 font-mono text-[11px] sm:text-xs">
<div>
@@ -55,24 +48,18 @@ export function Problem() {
</div>
</div>
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
The agent read your production Stripe key from .env and hit the live API to &quot;test&quot; its work. Helpful intent, real damage.
The agent read a production key from <code className="font-mono text-[11px]">.env</code> and called the live API to test its changes. The action was plausible. The boundary was missing.
</p>
</div>
{/* With Greywall */}
<div className="flex flex-col">
<div className="flex items-center gap-2 mb-3">
<ShieldCheck className="h-4 w-4 text-primary" />
<span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
With Greywall
</span>
</div>
<span className="text-sm font-sans uppercase tracking-[0.16em] text-primary font-semibold mb-3 block">
With Greywall
</span>
<div className="code-block p-5 sm:p-6 border-primary/20 flex-1">
<div className="flex items-center gap-2 mb-5">
<div className="w-3 h-3 rounded-full bg-red-500/70" />
<div className="w-3 h-3 rounded-full bg-yellow-500/70" />
<div className="w-3 h-3 rounded-full bg-green-500/70" />
<span className="ml-2 text-xs font-mono text-muted-foreground">~/project</span>
<div className="mb-5">
<span className="text-xs font-mono text-muted-foreground">~/project</span>
</div>
<div className="space-y-3 font-mono text-[11px] sm:text-xs">
<div>
@@ -111,7 +98,7 @@ export function Problem() {
</div>
</div>
<p className="text-xs text-muted-foreground font-serif mt-3 leading-relaxed">
Kernel-enforced. The agent adapts and does the job without accessing secrets or production systems.
The boundary holds at the OS layer, so the agent has to continue without secrets or production access.
</p>
</div>
</div>
@@ -119,13 +106,11 @@ export function Problem() {
{/* Resolution: Verification creates trust */}
<div className="text-center max-w-3xl mx-auto">
<blockquote className="font-serif text-xl sm:text-2xl md:text-3xl font-semibold tracking-tight leading-snug mb-6">
<blockquote className="title-serif text-[22px] md:text-[28px] leading-[1.1] mb-6">
<span className="text-primary">&ldquo;</span>The act of verification creates trust.<span className="text-primary">&rdquo;</span>
</blockquote>
<p className="text-muted-foreground font-serif text-base sm:text-lg leading-relaxed max-w-2xl mx-auto mb-10">
Greywall gives you complete <span className="text-foreground font-medium">observability</span> into
every interaction between a model and your system, as well as an
ergonomic mechanism for <span className="text-foreground font-medium">control</span>.
<p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground max-w-2xl mx-auto mb-10">
Greywall shows the attempted reads, writes, and connections as they happen, then lets you decide what stays allowed.
</p>
<div className="mx-auto max-w-3xl rounded-lg border border-border/40 overflow-hidden">
<div className="relative w-full" style={{ paddingBottom: '56.25%' }}>