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-Native Code Editor">
  <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 class="scanline"></div>
      </div>
      <div class="container">
        <div class="hero-content">
          <div class="hero-label">// NEXT-GEN EDITOR</div>
          <h1 class="hero-title">
            <span class="title-line-1">RUN AI LOCALLY.</span>
            <span class="title-line-2">OR USE CLOUD MODELS.</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">LOCAL-FIRST</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">FULL PROJECT CONTEXT</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">CLOUD WHEN NEEDED</span>
          </div>
          <p class="hero-description">
            Your code stays on your machine. No API key required.
            Switch to cloud when you need speed.
          </p>
          <p class="hero-description" style="margin-top: var(--space-sm);">
            Built for long sessions without losing context.
          </p>
          <p class="hero-description" style="margin-top: var(--space-sm);">
            Use Ollama locally or connect to any OpenAI-compatible endpoint.
          </p>
          <div class="hero-actions">
            <a href="#download" class="action-primary">
              <span class="action-text">[ START WITH LOCAL AI → ]</span>
            </a>
            <a href="/blog/measuring-token-savings" class="action-secondary">[ SEE BENCHMARK → ]</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">[001] WHY_ZBLADE</div>
          <h2 class="section-title">Built for Control<br/>Not Bloat</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>Zaguán Blade was built because modern AI editors feel bloated, opaque and cloud-dependent.</strong>
            </p>
            <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>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">[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>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">[003] 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">Solid text editor</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">Full AI power unlocked</div>
            </div>
          </div>
          <div class="pricing-features">
            <span>Multi-model access</span>
            <span>Priority support</span>
            <span>Early features</span>
            <span>Regular updates</span>
          </div>
          <a href="https://zaguanai.com/pricing" class="pricing-action" target="_blank" rel="noopener">
            <span>VIEW_PRICING()</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">[004] DOWNLOAD_ZBLADE</div>
          <h2 class="download-title">Choose Your<br/>Platform</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 may occur. AI features require an active <a href="https://zaguanai.com/pricing">Zaguán AI subscription</a>.</span>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>