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_</span>
          </h1>
          <div class="hero-meta">
            <span class="meta-item">TAURI V2 + VITE</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">CODEMIRROR 6</span>
            <span class="meta-divider">/</span>
            <span class="meta-item">v{version}</span>
          </div>
          <p class="hero-description">
            What you see is just the interface. The real magic lives in the <strong>Zaguán Coder Daemon</strong> - a Go-powered backend where all AI reasoning happens. 
            Its standout feature is <strong>Unlimited Context</strong>: instead of hitting token limits, we intelligently compress your conversation history and tool results into retrievable artifacts. The AI always gets exactly what it needs to work efficiently, without the bloat.
          </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>
    </section>

    <!-- Screenshot Showcase Section -->
    <section class="screenshot-showcase">
      <div class="container">
        <div class="showcase-header">
          <div class="showcase-label">// IN ACTION</div>
          <h2 class="showcase-title">Zaguán Blade in Action</h2>
          <p class="showcase-subtitle">
            Real interface. Real performance. Real development workflow.
          </p>
        </div>
        <div class="showcase-grid">
          <div class="showcase-item">
            <div class="showcase-image-wrapper">
              <img src="/screenshot-1.png" alt="Zaguán Blade editor interface showing AI-assisted coding" class="showcase-image" />
              <div class="showcase-caption">The editor with AI chat integrated, displaying code generation with diff view</div>
            </div>
          </div>
        </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>ZAGUÁN CODER DAEMON</h3>
            <p>The actual brain of the operation. A Go server that handles all AI logic, system prompts, and context management. This is where the heavy lifting happens - your editor stays lightweight and responsive.</p>
            <div class="feature-tag">CORE ENGINE</div>
          </div>
        </div>
        
        <div class="feature-row">
          <div class="feature-item feature-highlight">
            <div class="feature-num">02</div>
            <h3>UNLIMITED CONTEXT</h3>
            <p>We've solved the token limit problem. Chat history and tool results are actively compressed into artifacts. The AI retrieves only what it needs - efficient, focused, and without arbitrary limits.</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>BODY / BRAIN SEPARATION</h3>
            <p>The GUI contains zero AI logic - it's purely interface. All intelligence lives in the Coder Daemon. This means a lighter client and a more powerful, updatable backend.</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>PDF SUPPORT</h3>
            <p>The editor now loads PDFs natively. View and reference PDF documentation directly alongside your code without switching applications.</p>
          </div>
          <div class="feature-item">
            <div class="feature-num">07</div>
            <h3>IMAGE SUPPORT</h3>
            <p>Attach screenshots, upload images, or paste from clipboard directly into chat. Give your AI visual context for better assistance.</p>
          </div>
        </div>

        <div class="feature-row">
          <div class="feature-item">
            <div class="feature-num">08</div>
            <h3>COMPLETE GIT INTEGRATION</h3>
            <p>Full Git implementation ready for use. Stage, commit, push, and manage your repository directly from the editor interface.</p>
          </div>
          <div class="feature-item feature-highlight">
            <div class="feature-num">09</div>
            <h3>ENHANCED UI</h3>
            <p>Sidebar tooltips, improved status bar, and refined tab management. Plus fixed terminal rendering and chat display issues.</p>
          </div>
        </div>
        
        <div class="feature-banner">
          <div class="banner-content">
            <div class="banner-text">ALPHA SOFTWARE / UNDER ACTIVE DEVELOPMENT / BUILT FOR DEVELOPERS</div>
          </div>
        </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">v0.1.1 / 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">v0.1.1 / 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">v0.1.1 / 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>Alpha software. AI features require active <a href="https://zaguanai.com/pricing">Zaguán AI subscription</a>.</span>
        </div>
      </div>
    </section>
  </main>
</BaseLayout>