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">ZAGUÁN</span>
            <span class="title-line-2">BLADE</span>
            <span class="title-accent">AI-NATIVE CODE EDITOR</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">RUNS LOCAL</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">WHOLE PROJECT CONTEXT</span>
            <span class="meta-divider">/</span>
            <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.
          </p>
          <div class="hero-actions">
            <a href="#download" class="action-primary">
              <span class="action-text">GET_ZBLADE()</span>
              <span class="action-arrow">→</span>
            </a>
            <a href="#features" class="action-secondary">EXPLORE_FEATURES</a>
          </div>
        </div>
      </div>
      
      <!-- Screenshot Reveal -->
      <div class="container" style="margin-top: var(--space-2xl); position: relative; z-index: 2;">
        <div style="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 loop muted playsinline preload="auto" style="width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center bottom; display: block; border-radius: var(--border-radius);">
            Your browser does not support the video tag.
          </video>
        </div>
      </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="features">
      <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>
        </div>
      </div>
      <div class="features-layout">
        <div class="feature-primary">
          <div class="feature-num">01</div>
          <div class="feature-content">
            <h3>NOT JUST ANOTHER COPILOT</h3>
            <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>
            <div class="feature-tag">AGENTIC WORKFLOW</div>
          </div>
        </div>
        
        <div class="feature-row">
          <div class="feature-item feature-highlight">
            <div class="feature-num">02</div>
            <h3>WHOLE PROJECT UNDERSTANDING</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>
          </div>
          <div class="feature-item">
            <div class="feature-num">03</div>
            <h3>TAURI V2 + VITE</h3>
            <p>Native performance with Vite's lightning-fast build system. Custom CodeMirror 6 editor with "Vertical Diff Blocks" for AI code generation.</p>
          </div>
        </div>
        
        <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>
        
        <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. 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.
          </p>
        </div>
      </div>
    </section>

    <!-- How It Works Section -->
    <section class="architecture-section">
      <div class="container">
        <div class="section-label">[002] 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>
            <p>Zaguán Blade<br/>Tauri v2 + Vite + React<br/>User interface only</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>THE BRAIN</h3>
            <p>Zaguán Coder Daemon (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>BLADE PROTOCOL</h3>
            <p>Communication layer<br/>Real-time sync<br/>AI editor control</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>