redesign landing page

app/home/templates/home/index.html

@@ -2,151 +2,97 @@
 {% block title %}DevKit — Developer Toolkit{% endblock %}
 
 {% block content %}
-<div class="flex flex-col h-screen overflow-hidden">
-
-  <!-- Nav: same h-14 pattern as all tools -->
-  <nav class="flex items-center justify-between w-full px-6 py-2 bg-slate-50 h-14 z-50 border-b border-slate-200 shrink-0">
-    <div class="flex items-center gap-3">
-      <span class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center">
-        <span class="material-symbols-outlined text-on-primary text-lg" style="font-variation-settings:'FILL' 1;">terminal</span>
-      </span>
-      <span class="text-lg font-semibold text-on-surface">DevKit</span>
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet">
+<style>
+*{box-sizing:border-box;margin:0;padding:0}
+.dk{background:#0e0e10;color:#f0f0f2;min-height:100vh;font-family:'DM Sans',sans-serif;display:flex;flex-direction:column}
+.dk a{color:inherit;text-decoration:none}
+.dk-nav{position:sticky;top:0;z-index:50;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 2rem;background:rgba(14,14,16,.9);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.06)}
+.dk-logo{display:flex;align-items:center;gap:10px}
+.dk-logo-icon{width:26px;height:26px;border-radius:6px;background:#00d97e;display:flex;align-items:center;justify-content:center;font-family:'Space Mono',monospace;font-weight:700;font-size:11px;color:#0e0e10}
+.dk-logo-name{font-family:'Space Mono',monospace;font-weight:700;font-size:14px;letter-spacing:-.02em}
+.dk-badge{font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:100px;color:#00d97e;border:1px solid rgba(0,217,126,.3)}
+.dk-hero{flex:0 0 auto;padding:6rem 2rem 5rem;max-width:860px;margin:0 auto;width:100%;text-align:center}
+.dk-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#00d97e;margin-bottom:1.75rem}
+.dk-eyebrow span{width:28px;height:1px;background:rgba(0,217,126,.45)}
+.dk-h1{font-family:'Space Mono',monospace;font-size:clamp(2.2rem,5vw,3.8rem);font-weight:700;line-height:1.08;letter-spacing:-.04em;color:#fff;margin-bottom:1.25rem}
+.dk-h1 em{color:#00d97e;font-style:normal}
+.cursor{display:inline-block;width:3px;height:.85em;background:#00d97e;vertical-align:middle;margin-left:2px;animation:blink 1s step-end infinite}
+@keyframes blink{50%{opacity:0}}
+.dk-sub{font-size:1rem;line-height:1.75;color:#6b7280;max-width:480px;margin:0 auto 2.5rem}
+.dk-meta{display:flex;align-items:center;justify-content:center;gap:1.5rem;font-family:'Space Mono',monospace;font-size:11px;color:#4b5563}
+.dk-meta span{display:flex;align-items:center;gap:6px}
+.dk-meta span::before{content:'';width:4px;height:4px;border-radius:50%;background:#00d97e}
+.dk-section{flex:1;background:#0a0a0c;border-top:1px solid rgba(255,255,255,.05);padding:3.5rem 2rem 5rem}
+.dk-section-label{text-align:center;font-family:'Space Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#374151;margin-bottom:2rem}
+.dk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px;max-width:1060px;margin:0 auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.04);border-radius:12px;overflow:hidden}
+.dk-card{background:#111113;padding:1.6rem;display:flex;flex-direction:column;gap:14px;transition:background .12s}
+.dk-card:hover{background:rgba(0,217,126,.04)}
+.dk-card:hover .dk-arr{color:#00d97e;transform:translate(2px,-2px)}
+.dk-card-top{display:flex;align-items:flex-start;justify-content:space-between}
+.dk-icon{width:34px;height:34px;border-radius:7px;background:rgba(0,217,126,.1);border:1px solid rgba(0,217,126,.18);display:flex;align-items:center;justify-content:center;color:#00d97e}
+.dk-arr{color:#374151;font-size:18px;transition:all .12s}
+.dk-card-name{font-size:.9rem;font-weight:600;color:#e5e7eb;letter-spacing:-.01em}
+.dk-card-desc{font-size:.8rem;line-height:1.65;color:#6b7280}
+.dk-footer{border-top:1px solid rgba(255,255,255,.05);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;background:#0e0e10;flex-shrink:0}
+.dk-status{display:flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:11px;color:#374151}
+.dot{width:6px;height:6px;border-radius:50%;background:#00d97e;box-shadow:0 0 6px #00d97e}
+@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
+.dk-hero>*{animation:fadeUp .45s ease both}
+.dk-eyebrow{animation-delay:.04s}.dk-h1{animation-delay:.1s}.dk-sub{animation-delay:.18s}.dk-meta{animation-delay:.26s}
+</style>
+<div class="dk">
+  <nav class="dk-nav">
+    <div class="dk-logo">
+      <div class="dk-logo-icon">&gt;_</div>
+      <span class="dk-logo-name">DevKit</span>
     </div>
-    <span class="text-xs font-semibold text-on-surface-variant bg-surface-container px-3 py-1.5 rounded-full">6 tools</span>
+    <span class="dk-badge">6 tools</span>
   </nav>
-
-  <div class="flex flex-1 overflow-hidden">
-
-    <!-- Sidebar: same w-64 bg-slate-100 pattern as test-forge / agent-builder -->
-    <aside class="flex flex-col h-full w-64 p-4 gap-4 bg-slate-100 border-r border-slate-200 shrink-0 overflow-y-auto">
-      <div>
-        <p class="text-xs font-bold text-on-surface-variant uppercase tracking-widest mb-3">Categories</p>
-        <div class="space-y-1">
-          <div class="flex items-center gap-3 px-3 py-2 rounded-lg bg-white shadow-sm text-primary cursor-default">
-            <span class="material-symbols-outlined text-base">storage</span>
-            <span class="text-sm font-medium">Database</span>
-          </div>
-          <div class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-slate-200/60 transition-colors cursor-default">
-            <span class="material-symbols-outlined text-base">science</span>
-            <span class="text-sm font-medium">Code Quality</span>
-          </div>
-          <div class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-slate-200/60 transition-colors cursor-default">
-            <span class="material-symbols-outlined text-base">article</span>
-            <span class="text-sm font-medium">Documentation</span>
-          </div>
-          <div class="flex items-center gap-3 px-3 py-2 rounded-lg text-on-surface-variant hover:bg-slate-200/60 transition-colors cursor-default">
-            <span class="material-symbols-outlined text-base">history</span>
-            <span class="text-sm font-medium">Version History</span>
-          </div>
-        </div>
-      </div>
-    </aside>
-
-    <!-- Main workspace -->
-    <main class="flex-1 flex flex-col overflow-hidden bg-surface">
-
-      <!-- Action bar: matches the h-14 workspace bars inside tools -->
-      <div class="h-14 flex items-center justify-between px-6 bg-surface-container-low border-b border-slate-200 shrink-0">
-        <span class="text-xs font-bold text-on-surface-variant uppercase tracking-widest">Workspace</span>
-        <span class="text-xs text-outline">No signup required · Free</span>
-      </div>
-
-      <div class="flex-1 overflow-y-auto p-8">
-
-        <!-- Hero -->
-        <div class="mb-8">
-          <span class="text-[11px] font-semibold text-primary uppercase tracking-widest block mb-1">DevKit</span>
-          <h1 class="text-2xl font-bold text-on-surface tracking-tight">Developer Toolkit</h1>
-          <p class="text-sm text-on-surface-variant mt-2 max-w-xl leading-relaxed">Six tools for the day-to-day developer workflow — database auditing, SQL generation, test suites, documentation, and version history.</p>
-        </div>
-
-        <!-- Tool cards -->
-        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
-          <a href="/schema-detective/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">table_view</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">Schema Detective</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Audit database schemas for vulnerabilities, missing indexes, and design flaws.</p>
-            </div>
-          </a>
-          <a href="/test-forge/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">science</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">Test Forge</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Generate complete, runnable test suites across 8 frameworks from any source code.</p>
-            </div>
-          </a>
-          <a href="/sql-whisperer/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">data_object</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">SQL Whisperer</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Convert plain-English questions to SQL for PostgreSQL, MySQL, SQLite, and more.</p>
-            </div>
-          </a>
-          <a href="/doc-forge/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">article</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">Doc Forge</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Generate README, architecture overviews, and API docs from any GitHub repo.</p>
-            </div>
-          </a>
-          <a href="/changelog-ai/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">update</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">Changelog AI</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Turn commit history into changelogs for developers, users, or executives.</p>
-            </div>
-          </a>
-          <a href="/git-narrator/" class="group block bg-surface-container-lowest rounded-xl overflow-hidden border border-outline-variant/10 shadow-sm hover:shadow-md hover:-translate-y-0.5 transition-all">
-            <div class="h-11 flex items-center gap-3 px-4 bg-surface-container-low border-b border-slate-200/70 shrink-0">
-              <span class="w-6 h-6 rounded-md bg-primary flex items-center justify-center shrink-0">
-                <span class="material-symbols-outlined text-on-primary" style="font-size:14px;line-height:1;font-variation-settings:'FILL' 1;">history</span>
-              </span>
-              <span class="text-sm font-semibold text-on-surface">Git Narrator</span>
-              <span class="ml-auto flex items-center gap-0.5 text-xs font-medium text-outline group-hover:text-primary transition-colors">Open<span class="material-symbols-outlined text-sm leading-none ml-0.5">arrow_forward</span></span>
-            </div>
-            <div class="p-4">
-              <p class="text-sm text-on-surface-variant leading-relaxed">Transform raw git logs into readable project narratives and milestone timelines.</p>
-            </div>
-          </a>
-        </div>
-
-      </div>
-    </main>
+  <div class="dk-hero">
+    <div class="dk-eyebrow"><span></span>Developer Toolkit<span></span></div>
+    <h1 class="dk-h1">Build better.<br><em>Ship faster.</em><span class="cursor"></span></h1>
+    <p class="dk-sub">Six precision tools for the daily developer workflow — schema auditing, SQL generation, test suites, and documentation.</p>
+    <div class="dk-meta"><span>No signup required</span><span>Free forever</span><span>6 tools</span></div>
   </div>
-
-  <!-- Footer: same h-8 status bar as tools -->
-  <footer class="h-8 bg-surface-container-highest flex items-center justify-between px-6 text-[11px] font-medium text-on-surface-variant border-t border-slate-200 shrink-0">
-    <div class="flex items-center gap-4">
-      <div class="flex items-center gap-1.5"><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div><span>DevKit</span></div>
+  <div class="dk-section">
+    <div class="dk-section-label">// pick a tool</div>
+    <div class="dk-grid">
+      <a class="dk-card" href="/schema-detective/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">table_view</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">Schema Detective</div>
+        <div class="dk-card-desc">Audit database schemas for vulnerabilities, missing indexes, and design flaws.</div>
+      </a>
+      <a class="dk-card" href="/test-forge/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">science</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">Test Forge</div>
+        <div class="dk-card-desc">Generate complete, runnable test suites across 8 frameworks from any source code.</div>
+      </a>
+      <a class="dk-card" href="/sql-whisperer/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">data_object</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">SQL Whisperer</div>
+        <div class="dk-card-desc">Convert plain-English questions to SQL for PostgreSQL, MySQL, SQLite, and more.</div>
+      </a>
+      <a class="dk-card" href="/doc-forge/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">article</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">Doc Forge</div>
+        <div class="dk-card-desc">Generate README, architecture overviews, and API docs from any GitHub repo.</div>
+      </a>
+      <a class="dk-card" href="/changelog-ai/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">update</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">Changelog AI</div>
+        <div class="dk-card-desc">Turn commit history into changelogs for developers, users, or executives.</div>
+      </a>
+      <a class="dk-card" href="/git-narrator/">
+        <div class="dk-card-top"><div class="dk-icon"><span class="material-symbols-outlined" style="font-size:16px;font-variation-settings:'FILL' 1">history</span></div><span class="dk-arr material-symbols-outlined">arrow_outward</span></div>
+        <div class="dk-card-name">Git Narrator</div>
+        <div class="dk-card-desc">Transform raw git logs into readable project narratives and milestone timelines.</div>
+      </a>
     </div>
-    <span>6 Tools · Free</span>
+  </div>
+  <footer class="dk-footer">
+    <div class="dk-status"><div class="dot"></div>All systems operational</div>
+    <span style="font-family:'Space Mono',monospace;font-size:11px;color:#374151">Free &middot; No login</span>
   </footer>
-
 </div>
 {% endblock %}