From 409e95f9f8b20b5258283800d1a64250b8d97aaf Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 11 Jan 2026 09:59:18 +0000
Subject: [PATCH] style: differentiate landing page from Vibe Kanban

- Switch from Space Mono to JetBrains Mono font
- Change warm beige background to cooler neutral (#fafafa)
- Replace dashed border highlight with gradient underline marker
- Add terminal prompt prefix (>) to logo
- Dark terminal-style install box with $ prefix
- Add colored top borders to mode cards (green/blue)
- Use GitHub dark theme for code blocks
- Add rounded corners and subtle hover effects
- Introduce blue accent color system via CSS variables
---
 web/index.html | 271 +++++++++++++++++++++++++++++++------------------
 1 file changed, 173 insertions(+), 98 deletions(-)

diff --git a/web/index.html b/web/index.html
index 7dc62fe..621b3cb 100644
--- a/web/index.html
+++ b/web/index.html
@@ -7,7 +7,7 @@
     <meta name="description" content="Pre-commit hooks that know when an AI is committing. Run fast checks for humans, thorough checks for agents.">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
     <style>
         * {
             margin: 0;
@@ -15,10 +15,21 @@
             box-sizing: border-box;
         }
 
+        :root {
+            --bg: #fafafa;
+            --bg-alt: #f0f2f5;
+            --text: #1a1a2e;
+            --text-muted: #5a5a6e;
+            --accent: #3b5bdb;
+            --accent-light: #e7ecff;
+            --border: #e1e4e8;
+            --card-bg: #ffffff;
+        }
+
         body {
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-            background: #f5f3ef;
-            color: #1a1a1a;
+            background: var(--bg);
+            color: var(--text);
             line-height: 1.5;
         }
 
@@ -32,24 +43,33 @@
         }
 
         .logo {
-            font-family: 'Space Mono', monospace;
+            font-family: 'JetBrains Mono', monospace;
             font-weight: 700;
             font-size: 18px;
-            text-transform: uppercase;
             letter-spacing: -0.5px;
+            color: var(--text);
+        }
+
+        .logo::before {
+            content: '>';
+            color: var(--accent);
+            margin-right: 6px;
         }
 
         nav a {
-            color: #1a1a1a;
+            color: var(--text);
             text-decoration: none;
             font-size: 15px;
             display: flex;
             align-items: center;
             gap: 6px;
+            padding: 8px 16px;
+            border-radius: 6px;
+            transition: background 0.2s;
         }
 
         nav a:hover {
-            text-decoration: underline;
+            background: var(--bg-alt);
         }
 
         nav a svg {
@@ -69,47 +89,57 @@
         }
 
         h1 {
-            font-family: 'Space Mono', monospace;
-            font-size: clamp(42px, 8vw, 72px);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: clamp(38px, 7vw, 64px);
             font-weight: 700;
-            line-height: 1.05;
-            letter-spacing: -2px;
-            max-width: 900px;
+            line-height: 1.1;
+            letter-spacing: -1.5px;
+            max-width: 800px;
         }
 
         .highlight {
-            display: inline-block;
-            border: 2px dashed #1a1a1a;
-            padding: 0 8px;
+            display: inline;
+            background: linear-gradient(120deg, var(--accent-light) 0%, var(--accent-light) 100%);
+            background-repeat: no-repeat;
+            background-size: 100% 40%;
+            background-position: 0 85%;
+            padding: 0 4px;
         }
 
         .hero-desc {
-            font-size: 20px;
-            color: #444;
-            max-width: 640px;
-            margin: 32px 0 40px;
-            line-height: 1.6;
+            font-size: 19px;
+            color: var(--text-muted);
+            max-width: 620px;
+            margin: 28px 0 36px;
+            line-height: 1.65;
         }
 
         .install-box {
-            display: inline-block;
-            background: #fff;
-            border: 1px solid #ddd;
+            display: inline-flex;
+            align-items: center;
+            background: var(--text);
+            color: #e5e5e5;
             padding: 14px 24px;
-            font-family: 'Space Mono', monospace;
-            font-size: 15px;
+            border-radius: 8px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            gap: 12px;
+        }
+
+        .install-box::before {
+            content: '$';
+            color: #888;
         }
 
         /* Modes */
         .modes {
             padding: 80px 0;
-            border-top: 1px solid #ddd;
         }
 
         .modes-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
-            gap: 24px;
+            gap: 20px;
         }
 
         @media (max-width: 700px) {
@@ -119,58 +149,78 @@
         }
 
         .mode-card {
-            background: #fff;
-            border: 1px solid #ddd;
-            padding: 40px;
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 36px;
+            transition: box-shadow 0.2s;
+        }
+
+        .mode-card:hover {
+            box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+        }
+
+        .mode-card.human {
+            border-top: 3px solid #22c55e;
+        }
+
+        .mode-card.agent {
+            border-top: 3px solid var(--accent);
         }
 
         .mode-label {
-            font-family: 'Space Mono', monospace;
-            font-size: 13px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 12px;
             text-transform: uppercase;
-            letter-spacing: 1px;
-            color: #666;
+            letter-spacing: 1.5px;
+            color: var(--text-muted);
             margin-bottom: 12px;
         }
 
         .mode-time {
-            font-family: 'Space Mono', monospace;
-            font-size: 48px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 44px;
             font-weight: 700;
-            margin-bottom: 16px;
+            margin-bottom: 12px;
+            color: var(--text);
         }
 
         .mode-desc {
-            color: #555;
-            font-size: 16px;
+            color: var(--text-muted);
+            font-size: 15px;
             line-height: 1.6;
         }
 
         /* How */
         .how {
             padding: 80px 0;
-            border-top: 1px solid #ddd;
         }
 
         .section-title {
-            font-family: 'Space Mono', monospace;
-            font-size: 32px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 28px;
             font-weight: 700;
-            margin-bottom: 40px;
+            margin-bottom: 32px;
+            color: var(--text);
         }
 
         .flow-box {
-            background: #1a1a1a;
-            color: #e5e5e5;
-            padding: 40px;
-            font-family: 'Space Mono', monospace;
-            font-size: 14px;
-            line-height: 1.8;
+            background: #0d1117;
+            color: #c9d1d9;
+            padding: 32px 36px;
+            border-radius: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
+            line-height: 1.9;
             overflow-x: auto;
         }
 
         .flow-box .dim {
-            color: #666;
+            color: #6e7681;
+        }
+
+        .flow-box .cmd {
+            color: #58a6ff;
         }
 
         .agents-row {
@@ -181,23 +231,24 @@
         }
 
         .agent-tag {
-            background: #fff;
-            border: 1px solid #ddd;
+            background: var(--bg-alt);
+            border: 1px solid var(--border);
+            border-radius: 6px;
             padding: 8px 14px;
-            font-family: 'Space Mono', monospace;
+            font-family: 'JetBrains Mono', monospace;
             font-size: 13px;
+            color: var(--text-muted);
         }
 
         /* Features */
         .features {
             padding: 80px 0;
-            border-top: 1px solid #ddd;
         }
 
         .features-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
-            gap: 32px;
+            gap: 24px;
         }
 
         @media (max-width: 800px) {
@@ -212,110 +263,134 @@
             }
         }
 
+        .feature {
+            padding: 24px;
+            background: var(--card-bg);
+            border: 1px solid var(--border);
+            border-radius: 10px;
+        }
+
         .feature h3 {
-            font-family: 'Space Mono', monospace;
-            font-size: 16px;
-            font-weight: 700;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 15px;
+            font-weight: 600;
             margin-bottom: 8px;
+            color: var(--text);
         }
 
         .feature p {
-            color: #555;
-            font-size: 15px;
+            color: var(--text-muted);
+            font-size: 14px;
             line-height: 1.6;
         }
 
         /* Setup */
         .setup {
             padding: 80px 0;
-            border-top: 1px solid #ddd;
         }
 
         .code-block {
-            background: #1a1a1a;
-            color: #e5e5e5;
-            padding: 32px 40px;
-            font-family: 'Space Mono', monospace;
-            font-size: 14px;
+            background: #0d1117;
+            color: #c9d1d9;
+            padding: 28px 32px;
+            border-radius: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 13px;
             line-height: 2;
             overflow-x: auto;
         }
 
         .code-block .comment {
-            color: #666;
+            color: #8b949e;
+        }
+
+        .code-block .cmd {
+            color: #58a6ff;
         }
 
         /* Presets */
         .presets {
             padding: 80px 0;
-            border-top: 1px solid #ddd;
+        }
+
+        .presets-desc {
+            color: var(--text-muted);
+            font-size: 16px;
+            margin-bottom: 20px;
         }
 
         .preset-row {
             display: flex;
             flex-wrap: wrap;
-            gap: 12px;
-            margin-top: 24px;
+            gap: 10px;
         }
 
         .preset-tag {
-            background: #1a1a1a;
+            background: var(--accent);
             color: #fff;
-            padding: 12px 24px;
-            font-family: 'Space Mono', monospace;
-            font-size: 15px;
-            font-weight: 700;
+            padding: 10px 20px;
+            border-radius: 6px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            font-weight: 600;
         }
 
         /* CTA */
         .cta {
             padding: 100px 0;
-            border-top: 1px solid #ddd;
+            text-align: center;
         }
 
         .cta h2 {
-            font-family: 'Space Mono', monospace;
-            font-size: clamp(32px, 5vw, 48px);
+            font-family: 'JetBrains Mono', monospace;
+            font-size: clamp(28px, 5vw, 40px);
             font-weight: 700;
-            margin-bottom: 32px;
+            margin-bottom: 28px;
+            color: var(--text);
         }
 
         .btn {
             display: inline-flex;
             align-items: center;
             gap: 10px;
-            background: #1a1a1a;
+            background: var(--text);
             color: #fff;
-            padding: 16px 32px;
+            padding: 14px 28px;
             text-decoration: none;
-            font-family: 'Space Mono', monospace;
-            font-size: 15px;
-            font-weight: 700;
-            transition: background 0.2s;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 14px;
+            font-weight: 600;
+            border-radius: 8px;
+            transition: transform 0.2s, box-shadow 0.2s;
         }
 
         .btn:hover {
-            background: #333;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
         }
 
         .btn svg {
-            width: 20px;
-            height: 20px;
+            width: 18px;
+            height: 18px;
         }
 
         /* Footer */
         footer {
             padding: 32px 0;
-            border-top: 1px solid #ddd;
+            border-top: 1px solid var(--border);
         }
 
         footer p {
             font-size: 14px;
-            color: #666;
+            color: var(--text-muted);
         }
 
         footer a {
-            color: #666;
+            color: var(--accent);
+            text-decoration: none;
+        }
+
+        footer a:hover {
             text-decoration: underline;
         }
     </style>
@@ -338,12 +413,12 @@ <h1>Pre-commit hooks for <span class="highlight">AI agents</span></h1>
 
         <section class="modes">
             <div class="modes-grid">
-                <div class="mode-card">
+                <div class="mode-card human">
                     <div class="mode-label">Human commits</div>
                     <div class="mode-time">~3s</div>
                     <div class="mode-desc">Fast checks on staged files. Lint, format, type-check. You get feedback instantly and keep your flow.</div>
                 </div>
-                <div class="mode-card">
+                <div class="mode-card agent">
                     <div class="mode-label">Agent commits</div>
                     <div class="mode-time">~5m</div>
                     <div class="mode-desc">Full test suite, security scans, build verification. The agent waits. You get merge-ready code that passes CI.</div>
@@ -354,7 +429,7 @@ <h1>Pre-commit hooks for <span class="highlight">AI agents</span></h1>
         <section class="how">
             <h2 class="section-title">How it works</h2>
             <div class="flow-box">
-git commit<br>
+<span class="cmd">git commit</span><br>
 <span class="dim">    |</span><br>
 <span class="dim">    v</span><br>
 .git/hooks/pre-commit <span class="dim"># installed by apc</span><br>
@@ -410,13 +485,13 @@ <h3>TOML config</h3>
             <h2 class="section-title">Setup</h2>
             <div class="code-block">
 <span class="comment"># install</span><br>
-cargo install agent-precommit<br>
+<span class="cmd">cargo install agent-precommit</span><br>
 <br>
 <span class="comment"># init config (detects your stack)</span><br>
-apc init --preset=rust<br>
+<span class="cmd">apc init --preset=rust</span><br>
 <br>
 <span class="comment"># install git hook</span><br>
-apc install<br>
+<span class="cmd">apc install</span><br>
 <br>
 <span class="comment"># add to your agent instructions (CLAUDE.md, .cursor/rules):</span><br>
 <span class="comment"># "Use AGENT_MODE=1 git commit when committing"</span>
@@ -425,7 +500,7 @@ <h2 class="section-title">Setup</h2>
 
         <section class="presets">
             <h2 class="section-title">Presets</h2>
-            <p style="color: #555; font-size: 16px;">Sensible defaults for common stacks.</p>
+            <p class="presets-desc">Sensible defaults for common stacks.</p>
             <div class="preset-row">
                 <span class="preset-tag">python</span>
                 <span class="preset-tag">node</span>