feat: greywall

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 />

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>
   )

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">