47 lines
1.9 KiB
TypeScript
47 lines
1.9 KiB
TypeScript
import { Eye } from 'lucide-react'
|
|
|
|
export function Observability() {
|
|
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">
|
|
See every network connection.
|
|
</h2>
|
|
<p className="text-muted-foreground font-serif text-lg leading-relaxed">
|
|
You can't predict which domains your agent will reach for. GreyProxy captures
|
|
every outbound connection and lets you allow or deny them in real time, without
|
|
restarting the session.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-3xl">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<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 bg-card/30">
|
|
<img
|
|
src="/greyproxy.png"
|
|
alt="GreyProxy dashboard showing pending network requests with Allow and Deny controls"
|
|
className="w-full h-auto"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-muted-foreground font-serif leading-relaxed mt-4">
|
|
Every outbound request is visible. Allow trusted domains, block unknown ones,
|
|
and adjust policies live as your agent works.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|