ZaguanAI/zblade.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(showcase): redesign screenshot section with modern frame layout

Browse Source
This commit is contained in:
Stig-Ørjan Smelror
2026-02-14 23:18:16 +01:00
parent 2e6f6e5303
commit 4a09c5cfc6
2 changed files with 207 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+28 -13
View File
@@ -47,19 +47,34 @@ const version = pkg.version ?? "";
<!-- 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>
<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 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>
</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>
<div class="showcase-note">AI-assisted development with integrated chat</div>
</div>
</div>
</div>