From 61d94b0f75f7c2ef44d0153fc0d823e5725ecab4 Mon Sep 17 00:00:00 2001
From: Nik L <lokhmachevnikita@gmail.com>
Date: Mon, 9 Mar 2026 17:33:35 -0400
Subject: [PATCH] feat: greywall

---
 app/page.tsx           |  2 ++
 components/hero.tsx    | 12 ++++++------
 components/problem.tsx | 10 +---------
 3 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 6c978b4..51abd9e 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@
 
 import { PlatformProvider } from '@/components/platform-toggle'
 import { Nav } from '@/components/nav'
+import { Hero } from '@/components/hero'
 import { Agents } from '@/components/agents'
 import { Problem } from '@/components/problem'
 import { GettingStarted } from '@/components/getting-started'
@@ -16,6 +17,7 @@ export default function Home() {
     <PlatformProvider>
       <main className="min-h-screen">
         <Nav />
+        <Hero />
         <Problem />
         <Observability />
         <Agents />
diff --git a/components/hero.tsx b/components/hero.tsx
index 001cfca..6cf3983 100644
--- a/components/hero.tsx
+++ b/components/hero.tsx
@@ -1,6 +1,6 @@
 export function Hero() {
   return (
-    <section className="relative pt-24 sm:pt-32 pb-16 sm:pb-24 px-4 sm:px-6 overflow-hidden">
+    <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 */}
@@ -13,13 +13,13 @@ export function Hero() {
         }}
       />
 
-      <div className="relative mx-auto max-w-3xl text-center">
+      <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">
-          Constrain your agents.
-          <br />
-          <span className="text-foreground">Know what they </span><em className="italic text-primary">touch</em><span className="text-foreground">.</span>
+          <em className="italic text-primary">Greywall</em> your <span className="text-red-400/90">agent</span> &amp; let it cook.
         </h1>
-
+        <p className="text-lg text-muted-foreground leading-relaxed max-w-2xl mx-auto font-serif">
+          Agents inherit your full permissions and decide what to access at runtime. Here&apos;s what that looks like...
+        </p>
       </div>
     </section>
   )
diff --git a/components/problem.tsx b/components/problem.tsx
index b6999f5..4a6ef80 100644
--- a/components/problem.tsx
+++ b/components/problem.tsx
@@ -2,17 +2,9 @@ import { ShieldCheck, ShieldOff } from 'lucide-react'
 
 export function Problem() {
   return (
-    <section className="pt-16 sm:pt-20 pb-12 sm:pb-16 px-4 sm:px-6">
+    <section className="pb-12 sm:pb-16 px-4 sm:px-6">
       <div className="mx-auto max-w-5xl">
-        {/* Section 1: Stochastic risk */}
         <div className="mb-12 sm:mb-16">
-          <h2 className="font-serif text-2xl sm:text-3xl md:text-4xl font-semibold tracking-tight mb-3 max-w-3xl">
-            You don&apos;t want your agent to run as <em className="italic text-red-400/90">you</em>.
-          </h2>
-          <p className="text-muted-foreground font-serif text-sm sm:text-base leading-relaxed max-w-full mt-4 mb-10">
-            Agents inherit your full permissions and decide what to access at runtime. Here&apos;s what that looks like...
-          </p>
-
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
             {/* Without Greywall */}
             <div className="flex flex-col">