feat: landing page mvp

components/agents.tsx

@@ -0,0 +1,58 @@
+import { CheckCircle2 } from 'lucide-react'
+
+const agents = [
+  { name: 'Claude Code', org: 'anthropics' },
+  { name: 'Codex', org: 'openai' },
+  { name: 'Cursor', org: 'getcursor' },
+  { name: 'Aider', org: 'Aider-AI' },
+  { name: 'Goose', org: 'block' },
+  { name: 'Amp', org: 'sourcegraph' },
+  { name: 'Gemini CLI', org: 'google-gemini' },
+  { name: 'Cline', org: 'cline' },
+  { name: 'OpenCode', org: 'nicepkg' },
+  { name: 'Copilot', org: 'github' },
+]
+
+export function Agents() {
+  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-12">
+          <div className="flex items-center gap-2 mb-4">
+            <CheckCircle2 className="h-4 w-4 text-primary" />
+            <span className="text-xs font-sans uppercase tracking-wider text-primary font-medium">
+              Compatibility
+            </span>
+          </div>
+          <h2 className="font-serif text-3xl sm:text-4xl font-semibold tracking-tight mb-4">
+            Works with every agent.
+          </h2>
+          <p className="text-muted-foreground font-serif text-lg leading-relaxed">
+            All agents work perfectly inside their sandbox — but can&apos;t impact anything outside
+            it. No agent-specific configuration needed.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+          {agents.map((agent) => (
+            <div
+              key={agent.name}
+              className="group flex items-center gap-3 p-4 rounded-lg border border-border/40 bg-card/30 hover:border-primary/20 transition-all"
+            >
+              <img
+                src={`https://github.com/${agent.org}.png?size=64`}
+                alt={agent.name}
+                width={28}
+                height={28}
+                className="rounded-md shrink-0 bg-muted"
+              />
+              <span className="text-sm font-sans font-medium text-foreground truncate">
+                {agent.name}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}