feat: new design

components/getting-started.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useState } from 'react'
-import { Download, Copy, Check } from 'lucide-react'
+import { Copy, Check } from 'lucide-react'
 
 const methods = [
   {
@@ -44,7 +44,7 @@ function CodeBlock({ cmd, label }: { cmd: string; label: string }) {
           title="Copy to clipboard"
         >
           {copied ? (
-            <Check className="h-4 w-4 text-primary" />
+            <Check className="h-4 w-4 text-muted-foreground" />
           ) : (
             <Copy className="h-4 w-4" />
           )}
@@ -58,17 +58,11 @@ export function GettingStarted() {
   return (
     <section id="getting-started" className="py-24 px-4 sm:px-6 border-t border-border/30">
       <div className="mx-auto max-w-5xl text-center">
-        <div className="flex items-center justify-center gap-2 mb-4">
-          <Download className="h-4 w-4 text-primary" />
-          <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
-            Getting started
-          </span>
-        </div>
-        <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
-          Install in one command.
+        <h2 className="title-serif text-[36px] md:text-[48px] leading-none mb-4">
+          Start with the CLI.
         </h2>
-        <p className="text-muted-foreground font-serif text-lg leading-relaxed mb-10">
-          Wrap any agent and it runs sandboxed.
+        <p className="text-serif font-normal text-[15px] md:text-[16px] leading-[1.55] text-muted-foreground mb-10">
+          Install Greywall, then prefix the agent command you already use.
         </p>
 
         <div className="mx-auto max-w-2xl text-left space-y-6">