docs(website): redesign landing page to focus on philosophy and performance

- Update hero messaging to highlight local-first and lightweight nature
- Replace Features section with a new Philosophy section
- Add idle RAM comparison table against VSCode and Windsurf
- Add a "Not for everyone" section clarifying the target audience

src/pages/index.astro

@@ -30,14 +30,14 @@ const version = pkg.version ?? "";
             <span class="meta-item">NO CLOUD REQUIRED</span>
           </div>
           <p class="hero-description">
-            Zaguán Blade runs a local AI daemon that understands your entire project without sending your code to the cloud. Get the leverage of an AI coding assistant with the speed of a native editor, built specifically for engineers who need more than just autocomplete.
+            A lightweight AI code editor with a real diff workflow — not a chat window glued to VSCode. Full-project AI edits. Local-first. No 4GB RAM tax.
           </p>
           <div class="hero-actions">
             <a href="#download" class="action-primary">
-              <span class="action-text">GET_ZBLADE()</span>
+              <span class="action-text">RUN AI LOCALLY. START HERE.</span>
               <span class="action-arrow">→</span>
             </a>
-            <a href="#features" class="action-secondary">EXPLORE_FEATURES</a>
+            <a href="#philosophy" class="action-secondary">WHY WE BUILT IT</a>
           </div>
         </div>
       </div>
@@ -52,73 +52,109 @@ const version = pkg.version ?? "";
       </div>
     </section>
 
-    <!-- Features Section -->
+    <!-- Philosophy Section -->
-    <section id="features" class="features">
+    <section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
       <div class="features-header">
         <div class="container">
           <div class="section-label">[001] WHY_ZBLADE</div>
-          <h2 class="section-title">Built Different<br/>Performs Different</h2>
+          <h2 class="section-title">Built for Control<br/>Not Bloat</h2>
         </div>
       </div>
       <div class="features-layout">
         <div class="feature-primary">
-          <div class="feature-num">01</div>
+          <div class="feature-content" style="max-width: 800px; margin: 0 auto; text-align: left;">
-          <div class="feature-content">
+            <p style="font-size: 1.25rem; line-height: 1.6; margin-bottom: var(--space-md);">
-            <h3>NOT JUST ANOTHER COPILOT</h3>
+              <strong>Zaguán Blade was built because modern AI editors feel bloated, opaque and cloud-dependent.</strong>
-            <p>Most AI editors just predict your next line. Zaguán Blade actively manages a workspace, executes shell commands, runs your tests, and writes multi-file patches. It's an autonomous agent embedded directly in your editor.</p>
+            </p>
-            <div class="feature-tag">AGENTIC WORKFLOW</div>
+            <p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: var(--space-md);">
+              Blade separates the UI from the AI daemon, keeps resource usage low, and respects Git as the source of truth. It’s built for engineers who care about control and hate silent failures.
+            </p>
+            <p style="font-size: 1.1rem; line-height: 1.6; color: var(--color-text-muted);">
+              Used daily to develop Zaguán Blade and zcoderd. Tested on real production projects.
+            </p>
           </div>
         </div>
 
+        <div class="feature-row" style="margin-top: var(--space-xl);">
+          <div class="feature-item feature-highlight" style="display: flex; flex-direction: column; justify-content: center;">
+            <h3>THE LIGHTWEIGHT DIFFERENCE</h3>
+            <p>Engineers trust metrics. Here is what idle resource usage looks like:</p>
+            <table style="width: 100%; margin-top: var(--space-md); border-collapse: collapse; text-align: left;">
+              <thead>
+                <tr style="border-bottom: 1px solid var(--color-border);">
+                  <th style="padding: var(--space-sm) 0; color: var(--color-text-muted);">Tool</th>
+                  <th style="padding: var(--space-sm) 0; color: var(--color-text-muted);">Idle RAM</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr style="border-bottom: 1px solid var(--color-border); font-weight: bold; color: var(--color-primary);">
+                  <td style="padding: var(--space-sm) 0;">Zaguán Blade</td>
+                  <td style="padding: var(--space-sm) 0;">~320 MB</td>
+                </tr>
+                <tr style="border-bottom: 1px solid var(--color-border);">
+                  <td style="padding: var(--space-sm) 0;">VSCode + AI</td>
+                  <td style="padding: var(--space-sm) 0;">~1.9 GB</td>
+                </tr>
+                <tr>
+                  <td style="padding: var(--space-sm) 0;">Windsurf</td>
+                  <td style="padding: var(--space-sm) 0;">~2.8 GB</td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          
+          <div class="feature-item">
+            <h3>NOT FOR EVERYONE</h3>
+            <ul style="list-style: none; padding: 0; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);">
+              <li style="padding-left: 1.5rem; position: relative;">
+                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
+                If you want a VSCode clone, this isn’t it.
+              </li>
+              <li style="padding-left: 1.5rem; position: relative;">
+                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
+                If you need heavy UI plugins, this isn’t it.
+              </li>
+              <li style="padding-left: 1.5rem; position: relative; font-weight: bold; color: var(--color-text);">
+                <span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
+                If you want lightweight, controlled AI workflows — this is for you.
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Workflow Section -->
+    <section id="workflow" class="features">
+      <div class="features-header">
+        <div class="container">
+          <div class="section-label">[002] WORKFLOW</div>
+          <h2 class="section-title">Engineers Think<br/>in Workflows</h2>
+        </div>
+      </div>
+      <div class="features-layout">
         <div class="feature-row">
+          <div class="feature-item">
+            <div class="feature-num">01</div>
+            <h3>WHAT IT'S ACTUALLY GOOD AT</h3>
+            <ul style="list-style: none; padding: 0; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm);">
+              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Refactoring</strong> across multiple files.</li>
+              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Updating</strong> changelogs and build configs.</li>
+              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Reviewing</strong> AI patches safely with diff control.</li>
+              <li style="padding-left: 1.5rem; position: relative;"><span style="position: absolute; left: 0; color: var(--color-primary);">+</span> <strong>Running</strong> locally with your own models.</li>
+            </ul>
+          </div>
           <div class="feature-item feature-highlight">
             <div class="feature-num">02</div>
-            <h3>WHOLE PROJECT UNDERSTANDING</h3>
+            <h3>TYPICAL FLOW IN BLADE</h3>
-            <p>Instead of just looking at open files, Blade reads your workspace structure, searches for patterns, and compresses history into artifacts. It knows your codebase like a teammate.</p>
+            <ol style="padding-left: 1.5rem; margin-top: var(--space-md); display: flex; flex-direction: column; gap: var(--space-sm); font-family: var(--font-mono);">
-          </div>
+              <li>Ask for change.</li>
-          <div class="feature-item">
+              <li>AI calls project tools.</li>
-            <div class="feature-num">03</div>
+              <li>Diff appears.</li>
-            <h3>TAURI V2 + VITE</h3>
+              <li>You review.</li>
-            <p>Native performance with Vite's lightning-fast build system. Custom CodeMirror 6 editor with "Vertical Diff Blocks" for AI code generation.</p>
+              <li>Accept or revert via Git.</li>
-          </div>
+            </ol>
-        </div>
+            <p style="margin-top: var(--space-md);">No magic behind the scenes. Just predictable operations and complete transparency.</p>
-        
-        <div class="feature-row">
-          <div class="feature-item">
-            <div class="feature-num">04</div>
-            <h3>LOCAL AI DAEMON</h3>
-            <p>The editor GUI stays lightning fast while a dedicated Go backend handles all AI logic, system prompts, and tool execution out of the main thread.</p>
-          </div>
-          <div class="feature-item feature-highlight">
-            <div class="feature-num">05</div>
-            <h3>SMART ARTIFACTS</h3>
-            <p>Long conversations are automatically distilled into retrievable artifacts. The AI knows when and how to access this context - maintaining coherence without the overhead.</p>
-          </div>
-        </div>
-
-        <div class="feature-row">
-          <div class="feature-item feature-highlight">
-            <div class="feature-num">06</div>
-            <h3>GIT GRAPH</h3>
-            <p>Visualize the last 50 commits in an interactive Git graph with a details popup for commit information. Powered by <code>gix</code> for fast, native Git operations.</p>
-          </div>
-          <div class="feature-item">
-            <div class="feature-num">07</div>
-            <h3>OLLAMA CLOUD</h3>
-            <p>Run your AI locally or in the cloud. Full support for Ollama Cloud alongside the existing Ollama local model integration.</p>
-          </div>
-        </div>
-
-        <div class="feature-row">
-          <div class="feature-item">
-            <div class="feature-num">08</div>
-            <h3>RESILIENT RECOVERY</h3>
-            <p>After a UI reload or crash, streaming resumes automatically and the chat scrolls to the latest message — no lost context, no stuck states.</p>
-          </div>
-          <div class="feature-item feature-highlight">
-            <div class="feature-num">09</div>
-            <h3>UI POLISH</h3>
-            <p>Snappier autoscroll, instant settings saves, modernized title bar, faster model selector, and a redesigned app icon across the board.</p>
           </div>
         </div>
         
@@ -127,7 +163,7 @@ const version = pkg.version ?? "";
             <div class="banner-text">ACTIVE DEVELOPMENT: PRE-V1.0</div>
           </div>
           <p style="color: var(--color-bg); font-weight: 500; max-width: 800px; margin: 0 auto; line-height: 1.6;">
-            Zaguán Blade is under heavy development. Download today to get a fully functional local AI editor, native Git integration, and our advanced context engine. Expect rapid updates and occasional breaking changes as we build toward v1.0.0.
+            Zaguán Blade is under heavy development. Expect rapid updates, occasional breaking changes, and a fast feedback loop as we build toward v1.0.0.
           </p>
         </div>
       </div>
@@ -136,15 +172,15 @@ const version = pkg.version ?? "";
     <!-- How It Works Section -->
     <section class="architecture-section">
       <div class="container">
-        <div class="section-label">[002] ARCHITECTURE</div>
+        <div class="section-label">[003] ARCHITECTURE</div>
         <div class="arch-grid">
           <div class="arch-node">
             <div class="node-header">
               <div class="node-num">1</div>
               <div class="node-status">ACTIVE</div>
             </div>
-            <h3>THE BODY</h3>
+            <h3>Zaguán Blade (UI)</h3>
-            <p>Zaguán Blade<br/>Tauri v2 + Vite + React<br/>User interface only</p>
+            <p>Tauri v2 + Vite + React<br/>User interface only.<br/>Lightning fast.</p>
             <div class="node-connector"></div>
           </div>
           
@@ -153,8 +189,8 @@ const version = pkg.version ?? "";
               <div class="node-num">2</div>
               <div class="node-status">ACTIVE</div>
             </div>
-            <h3>THE BRAIN</h3>
+            <h3>zcoderd (AI daemon)</h3>
-            <p>Zaguán Coder Daemon (Go server)<br/>State management<br/>Tool execution & AI</p>
+            <p>Go server<br/>State management<br/>Tool execution & AI</p>
             <div class="node-connector"></div>
           </div>
           
@@ -163,8 +199,8 @@ const version = pkg.version ?? "";
               <div class="node-num">3</div>
               <div class="node-status">ACTIVE</div>
             </div>
-            <h3>BLADE PROTOCOL</h3>
+            <h3>Model Provider</h3>
-            <p>Communication layer<br/>Real-time sync<br/>AI editor control</p>
+            <p>Local or remote.<br/>Ollama, Anthropic, OpenAI, etc.<br/>You choose.</p>
           </div>
         </div>
       </div>