zblade.dev/src/pages/index.astro

---
import BaseLayout from '../layouts/BaseLayout.astro';
import pkg from '../../package.json';

const version = pkg.version ?? "";
---

<BaseLayout title="Zaguán Blade — AI Editor with No Cloud Dependency">
  <main>
    <!-- Hero Section -->
    <section class="hero">
      <div class="hero-bg-elements">
        <div class="hero-block hero-block-1"></div>
        <div class="hero-block hero-block-2"></div>
      </div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-label">Local-First AI Code Editor</div>
          <h1 class="hero-title">
            <span class="title-line-1">Your code stays yours.</span>
            <span class="title-line-2">Cloud when you want it.</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">Local-First</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">No API Key Required</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">Any Model Provider</span>
          </div>
          <p class="hero-description">
            Most AI editors ship your context to a server you don't control.
            Blade keeps it local by default. No API key required.
          </p>
          <p class="hero-description" style="margin-top: var(--space-sm);">
            Run Ollama locally or connect to any OpenAI-compatible endpoint.
            Switch to cloud when you need speed. Your choice, not the editor's.
          </p>
          <div class="hero-actions">
            <a href="#download" class="action-primary">
              <span class="action-text">Get Started with Local AI</span>
            </a>
            <a href="/blog/measuring-token-savings" class="action-secondary">View Benchmarks</a>
          </div>
        </div>
      </div>
      
      <!-- Screenshot Reveal -->
      <div class="container" style="margin-top: var(--space-2xl); position: relative; z-index: 2; display: flex; justify-content: center;">
        <div style="width: min(100%, 960px); aspect-ratio: 16 / 9; border: 1px solid var(--color-border); border-radius: var(--border-radius); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(0,221,119,0.1); background: var(--color-bg-elevated); padding: 2px;">
          <video src="/zblade.mp4" autoplay muted playsinline loop preload="auto" style="width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--border-radius);">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </section>

    <!-- Philosophy Section -->
    <section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
      <div class="features-header">
        <div class="container">
          <div class="section-label">Why Blade</div>
          <h2 class="section-title">Why Another Editor<br/>Exists</h2>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-primary">
          <div class="feature-content" style="max-width: 800px; margin: 0 auto; text-align: left;">
            <p style="font-size: 1.25rem; line-height: 1.6; margin-bottom: var(--space-md);">
              <strong>Existing AI editors make you trade control for convenience. Blade doesn't ask for that trade.</strong>
            </p>
            <p style="font-size: 1.1rem; line-height: 1.6; margin-bottom: var(--space-md);">
              The UI is separate from the AI daemon. Resource usage stays low. Git is the source of truth, not a history you can't export. No telemetry. No cloud dependency unless you choose it.
            </p>
            <p style="font-size: 1.1rem; line-height: 1.6; color: var(--color-text-muted);">
              Used daily to develop Blade and zcoderd. Tested on real production projects — not just demos.
            </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">Workflow</div>
          <h2 class="section-title">What It's Actually<br/>Good At</h2>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-row">
          <div class="feature-item">
            <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">
            <h3>Typical Flow in Blade</h3>
            <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);">
              <li>Ask for change.</li>
              <li>AI calls project tools.</li>
              <li>Diff appears.</li>
              <li>You review.</li>
              <li>Accept or revert via Git.</li>
            </ol>
            <p style="margin-top: var(--space-md);">No magic behind the scenes. Just predictable operations and complete transparency.</p>
          </div>
        </div>
        
        <div class="feature-banner" style="display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md);">
          <div class="banner-content">
            <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. Expect rapid updates, occasional breaking changes, and a fast feedback loop as we build toward v1.0.0.
          </p>
        </div>
      </div>
    </section>

    <!-- How It Works Section -->
    <section class="architecture-section">
      <div class="container">
        <div class="section-label">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>Zaguán Blade (UI)</h3>
            <p>Tauri v2 + Vite + React<br/>User interface only.<br/>Lightning fast.</p>
            <div class="node-connector"></div>
          </div>
          
          <div class="arch-node arch-node-center">
            <div class="node-header">
              <div class="node-num">2</div>
              <div class="node-status">Active</div>
            </div>
            <h3>zcoderd (AI daemon)</h3>
            <p>Go server<br/>State management<br/>Tool execution & AI</p>
            <div class="node-connector"></div>
          </div>
          
          <div class="arch-node">
            <div class="node-header">
              <div class="node-num">3</div>
              <div class="node-status">Active</div>
            </div>
            <h3>Model Provider</h3>
            <p>Local or remote.<br/>Ollama, Anthropic, OpenAI, etc.<br/>You choose.</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Pricing Section -->
    <section class="pricing">
      <div class="pricing-container">
        <div class="pricing-block">
          <div class="section-label">Subscription Model</div>
          <h2 class="pricing-title">Zaguán AI<br/>Required</h2>
          <div class="pricing-grid">
            <div class="pricing-item">
              <div class="pricing-label">Without Subscription</div>
              <div class="pricing-value">Manual edits, no AI features</div>
            </div>
            <div class="pricing-divider"></div>
            <div class="pricing-item pricing-item-highlight">
              <div class="pricing-label">With Subscription</div>
              <div class="pricing-value">AI tool calls, code review, multi-model access</div>
            </div>
          </div>
          <div class="pricing-features">
            <span>Multi-model routing</span>
            <span>Priority support (email)</span>
            <span>Early access to new tools</span>
            <span>Funding development</span>
          </div>
          <a href="https://zaguanai.com/pricing" class="pricing-action" target="_blank" rel="noopener">
            <span>View Pricing & Plans</span>
            <span class="action-arrow">→</span>
          </a>
        </div>
      </div>
    </section>

    <!-- Download Section -->
    <section id="download" class="download">
      <div class="download-layout">
        <div class="download-header">
          <div class="section-label">Download Blade</div>
          <h2 class="download-title">Get Blade<br/>for Your OS</h2>
        </div>
        <div class="download-grid">
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-windows" target="_blank" rel="noopener">
            <div class="platform-icon">🪟</div>
            <div class="platform-info">
              <div class="platform-name">Windows</div>
              <div class="platform-meta">v{version} / x64, arm64</div>
              <div class="platform-formats">MSI, EXE</div>
            </div>
            <div class="platform-action">Download →</div>
          </a>
          
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-mac" target="_blank" rel="noopener">
            <div class="platform-icon">🍎</div>
            <div class="platform-info">
              <div class="platform-name">macOS</div>
              <div class="platform-meta">v{version} / arm64 (Apple Silicon)</div>
              <div class="platform-formats">DMG, TAR.GZ</div>
            </div>
            <div class="platform-action">Download →</div>
          </a>
          
          <a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-linux" target="_blank" rel="noopener">
            <div class="platform-icon">🐧</div>
            <div class="platform-info">
              <div class="platform-name">Linux</div>
              <div class="platform-meta">v{version} / amd64</div>
              <div class="platform-formats">DEB, RPM, AppImage</div>
            </div>
            <div class="platform-action">Download →</div>
          </a>
        </div>
        <div class="download-disclaimer">
          <span class="disclaimer-icon">⚠</span>
          <span>Pre-v1.0 software — breaking changes will happen. AI features require an active <a href="https://zaguanai.com/pricing">Zaguán AI subscription</a>.</span>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>