feat: new design

components/observability.tsx

@@ -2,7 +2,6 @@
 
 import { useState, useEffect, useRef } from 'react'
 import Image from 'next/image'
-import { Eye } from 'lucide-react'
 
 const slides = [
   {
@@ -75,19 +74,14 @@ export function Observability() {
     <section id="features" className="py-24 px-4 sm: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">
+          <span className="text-serif text-[12px] font-bold uppercase tracking-[0.22em] text-primary mb-4 block">
+            Clarity
+          </span>
+          <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
             See every network connection.
           </h2>
-          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
-            You can&apos;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 className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground">
+            GreyProxy records each outbound request as it happens. You can allow known domains, deny unknown ones, and keep the session running while you decide.
           </p>
         </div>
 
@@ -158,8 +152,7 @@ export function Observability() {
           </div>
 
           <p className="text-xs text-muted-foreground font-serif leading-relaxed mt-5 text-center">
-            Every outbound request is visible. Allow trusted domains, block unknown ones,
-            and adjust policies live as your agent works.
+            Each outbound request stays visible. Policy changes apply while the agent keeps running.
           </p>
         </div>
       </div>