style(showcase): simplify screenshot section with cleaner layout

This commit is contained in:
2026-02-14 23:23:56 +01:00
parent 4a09c5cfc6
commit 4d540b2acf
2 changed files with 62 additions and 206 deletions
+10 -27
View File
@@ -46,35 +46,18 @@ const version = pkg.version ?? "";
<!-- Screenshot Showcase Section -->
<section class="screenshot-showcase">
<div class="container">
<div class="section-label">[000] INTERFACE_PREVIEW</div>
<div class="showcase-content">
<div class="showcase-text">
<h2 class="showcase-title">SEE IT<br/>IN ACTION</h2>
<p class="showcase-description">
Built with Tauri v2, powered by CodeMirror 6, controlled by AI. This is what a modern development environment looks like.
</p>
<div class="showcase-features">
<span>VERTICAL DIFF BLOCKS</span>
<span>REAL-TIME AI CHAT</span>
<span>NATIVE PERFORMANCE</span>
<div class="features-layout">
<div class="feature-primary showcase-card">
<div class="feature-num">00</div>
<div class="showcase-flex">
<div class="feature-content">
<h3>THE INTERFACE</h3>
<p>Native desktop app powered by Tauri v2. Clean, fast, and built for real development workflows. AI chat integrated seamlessly alongside your code.</p>
<div class="feature-tag">LIVE PREVIEW</div>
</div>
</div>
<div class="showcase-visual">
<div class="showcase-frame">
<div class="frame-header">
<div class="frame-dots">
<span></span>
<span></span>
<span></span>
</div>
<div class="frame-title">zblade v0.1.1</div>
</div>
<div class="frame-content">
<img src="/screenshot-1.png" alt="Zaguán Blade editor interface" class="showcase-image" />
</div>
<div class="showcase-image-box">
<img src="/screenshot-1.png" alt="Zaguán Blade editor interface" />
</div>
<div class="showcase-note">AI-assisted development with integrated chat</div>
</div>
</div>
</div>