docs: lead with dbfork speed proof

Author: Meru143

docs/index.html

@@ -59,8 +59,24 @@ <h1>Clone a development database in seconds, not minutes.</h1>
             </div>
           </div>
 
-          <div class="hero-visual">
-            <img src="./assets/dbfork-demo.gif" alt="dbfork demo showing local database branching" />
+          <div class="hero-proof">
+            <div class="compare-card strong">
+              <h3>dbfork</h3>
+              <p class="metric">1 to 3 seconds</p>
+              <p>Server-side template clone, built for repeated use during active development.</p>
+            </div>
+            <div class="compare-card">
+              <h3>pg_dump | pg_restore</h3>
+              <p class="metric">2 to 5 minutes</p>
+              <p>Good for backup-style workflows, too slow for every migration and feature branch.</p>
+            </div>
+            <pre class="hero-terminal"><code>$ dbfork create feature_migration
+created feature_migration from postgres_dev
+
+$ dbfork diff feature_migration
+tables changed: 3
+columns added: 5
+indexes changed: 1</code></pre>
           </div>
         </section>
 
@@ -119,17 +135,21 @@ <h2>Use the local database like code, not like a fragile shared pet.</h2>
             </p>
           </div>
 
-          <div class="compare">
-            <div class="compare-card strong">
-              <h3>dbfork</h3>
-              <p class="metric">1 to 3 seconds</p>
-              <p>Server-side template clone, built for repeated use during active development.</p>
-            </div>
-            <div class="compare-card">
-              <h3>pg_dump | pg_restore</h3>
-              <p class="metric">2 to 5 minutes</p>
-              <p>Good for backup-style workflows, too slow for every migration and feature branch.</p>
-            </div>
+          <div class="workflow-grid">
+            <article class="feature">
+              <h3>Branch fast enough to use it daily</h3>
+              <p>
+                The performance win matters because developers only keep a branch workflow
+                when it feels as disposable as a git branch.
+              </p>
+            </article>
+            <article class="feature">
+              <h3>Inspect before merge</h3>
+              <p>
+                Compare the branch against the source database, review drift, and only
+                keep the experiment when the schema change is real.
+              </p>
+            </article>
           </div>
         </section>
 

docs/styles.css

@@ -62,7 +62,7 @@ pre { font-family: "IBM Plex Mono", ui-monospace, monospace; }
 }
 
 .hero-copy,
-.hero-visual,
+.hero-proof,
 .feature,
 .compare-card,
 .install-grid pre {
@@ -145,15 +145,11 @@ h1 {
   color: var(--muted);
 }
 
-.hero-visual {
-  overflow: hidden;
-}
-
-.hero-visual img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
+.hero-proof {
+  display: grid;
+  gap: 18px;
+  align-content: start;
+  padding: 24px;
 }
 
 .section { padding: 28px 0; }
@@ -168,7 +164,8 @@ h2 {
 
 .grid,
 .compare,
-.install-grid {
+.install-grid,
+.workflow-grid {
   display: grid;
   gap: 18px;
   margin-top: 24px;
@@ -182,10 +179,6 @@ h2 {
 .feature h3,
 .compare-card h3 { margin-bottom: 12px; }
 
-.compare {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .compare-card.strong {
   background:
     linear-gradient(135deg, rgba(255, 176, 102, 0.14), rgba(143, 123, 255, 0.12)),
@@ -201,6 +194,19 @@ h2 {
   letter-spacing: -0.05em;
 }
 
+.hero-terminal {
+  margin: 0;
+  padding: 20px;
+  border-radius: 22px;
+  background: linear-gradient(180deg, rgba(13, 15, 24, 0.9), rgba(13, 15, 24, 0.98));
+  color: #f7f3ee;
+  overflow-x: auto;
+}
+
+.workflow-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
 .install-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
@@ -216,7 +222,7 @@ h2 {
 @media (max-width: 980px) {
   .hero,
   .grid,
-  .compare,
+  .workflow-grid,
   .install-grid {
     grid-template-columns: 1fr;
   }
@@ -231,7 +237,7 @@ h2 {
   .shell { width: min(100% - 24px, 1180px); }
 
   .hero-copy,
-  .hero-visual,
+  .hero-proof,
   .feature,
   .compare-card,
   .install-grid pre {