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

style(ui): remove uppercase text and refine typography

Browse Source 
Remove text-transform: uppercase from headings, buttons, labels, and navigation. Reduce letter-spacing throughout for a cleaner look. Replace text-stroke outline effects with solid colors. Remove decorative hero background blocks and scanline animation. Simplify hover effects on logo and buttons.
This commit is contained in:
Stig-Ørjan Smelror
2026-05-19 21:56:11 +02:00
parent 4f1aa99570
commit 674f4e1cd4
3 changed files with 80 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index.astro
+29 -31
View File
@@ -15,17 +15,17 @@ const version = pkg.version ?? "";
</div>
<div class="container">
<div class="hero-content">
<div class="hero-label">LOCAL-FIRST AI CODE EDITOR</div>
<div class="hero-label">Local-First AI Code Editor</div>
<h1 class="hero-title">
<span class="title-line-1">YOUR CODE STAYS YOURS.</span>
<span class="title-line-2">CLOUD WHEN YOU WANT IT.</span>
<span class="title-line-1">Your code stays yours.</span>
<span class="title-line-2">Cloud when you want it.</span>
</h1>
<div class="hero-meta">
<span class="meta-item">LOCAL-FIRST</span>
<span class="meta-item">Local-First</span>
<span class="meta-divider">/</span>
<span class="meta-item">NO API KEY REQUIRED</span>
<span class="meta-item">No API Key Required</span>
<span class="meta-divider">/</span>
<span class="meta-item">ANY MODEL PROVIDER</span>
<span class="meta-item">Any Model Provider</span>
</div>
<p class="hero-description">
Most AI editors ship your context to a server you don't control.
@@ -37,9 +37,9 @@ const version = pkg.version ?? "";
</p>
<div class="hero-actions">
<a href="#download" class="action-primary">
<span class="action-text">[ START WITH LOCAL AI → ]</span>
<span class="action-text">Get Started with Local AI</span>
</a>
<a href="/blog/measuring-token-savings" class="action-secondary">[ SEE BENCHMARK → ]</a>
<a href="/blog/measuring-token-savings" class="action-secondary">View Benchmarks</a>
</div>
</div>
</div>
@@ -58,7 +58,7 @@ const version = pkg.version ?? "";
<section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
<div class="features-header">
<div class="container">
<div class="section-label">01 // Why Blade</div>
<div class="section-label">Why Blade</div>
<h2 class="section-title">Why Another Editor<br/>Exists</h2>
</div>
</div>
@@ -79,7 +79,7 @@ const version = pkg.version ?? "";
<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>
<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>
@@ -106,7 +106,7 @@ const version = pkg.version ?? "";
</div>
<div class="feature-item">
<h3>NOT FOR EVERYONE</h3>
<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>
@@ -130,15 +130,14 @@ const version = pkg.version ?? "";
<section id="workflow" class="features">
<div class="features-header">
<div class="container">
<div class="section-label">02 // Workflow</div>
<div class="section-label">Workflow</div>
<h2 class="section-title">What It's Actually<br/>Good At</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>
<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>
@@ -147,8 +146,7 @@ const version = pkg.version ?? "";
</ul>
</div>
<div class="feature-item feature-highlight">
<div class="feature-num">02</div>
<h3>TYPICAL FLOW IN BLADE</h3>
<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>
@@ -162,7 +160,7 @@ const version = pkg.version ?? "";
<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 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.
@@ -174,12 +172,12 @@ const version = pkg.version ?? "";
<!-- How It Works Section -->
<section class="architecture-section">
<div class="container">
<div class="section-label">03 // Architecture</div>
<div class="section-label">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 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>
@@ -189,7 +187,7 @@ const version = pkg.version ?? "";
<div class="arch-node arch-node-center">
<div class="node-header">
<div class="node-num">2</div>
<div class="node-status">ACTIVE</div>
<div class="node-status">Active</div>
</div>
<h3>zcoderd (AI daemon)</h3>
<p>Go server<br/>State management<br/>Tool execution & AI</p>
@@ -199,7 +197,7 @@ const version = pkg.version ?? "";
<div class="arch-node">
<div class="node-header">
<div class="node-num">3</div>
<div class="node-status">ACTIVE</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>
@@ -212,16 +210,16 @@ const version = pkg.version ?? "";
<section class="pricing">
<div class="pricing-container">
<div class="pricing-block">
<div class="section-label">04 // Subscription Model</div>
<h2 class="pricing-title">ZAGUÁN AI<br/>REQUIRED</h2>
<div class="section-label">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-label">Without Subscription</div>
<div class="pricing-value">Manual edits, no AI features</div>
</div>
<div class="pricing-divider"></div>
<div class="pricing-item pricing-item-highlight">
<div class="pricing-label">WITH SUBSCRIPTION</div>
<div class="pricing-label">With Subscription</div>
<div class="pricing-value">AI tool calls, code review, multi-model access</div>
</div>
</div>
@@ -243,18 +241,18 @@ const version = pkg.version ?? "";
<section id="download" class="download">
<div class="download-layout">
<div class="download-header">
<div class="section-label">05 // Download Blade</div>
<div class="section-label">Download Blade</div>
<h2 class="download-title">Get Blade<br/>for Your OS</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-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>
<div class="platform-action">Download →</div>
</a>
<a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-mac" target="_blank" rel="noopener">
@@ -264,17 +262,17 @@ const version = pkg.version ?? "";
<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>
<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-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>
<div class="platform-action">Download →</div>
</a>
</div>
<div class="download-disclaimer">