You've already forked zblade.dev
style(ui): remove uppercase text and refine typography
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:
+27
-122
@@ -1,6 +1,6 @@
|
|||||||
/* ===== CSS Variables ===== */
|
/* ===== CSS Variables ===== */
|
||||||
:root {
|
:root {
|
||||||
/* Core Colors - High Contrast Terminal Aesthetic */
|
/* Core Colors */
|
||||||
--color-bg: #0f0f0f;
|
--color-bg: #0f0f0f;
|
||||||
--color-bg-secondary: #151515;
|
--color-bg-secondary: #151515;
|
||||||
--color-bg-elevated: #1a1a1a;
|
--color-bg-elevated: #1a1a1a;
|
||||||
@@ -113,8 +113,8 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover .logo-image {
|
.logo:hover .logo-image {
|
||||||
filter: drop-shadow(0 0 8px rgba(0, 221, 119, 0.4));
|
filter: drop-shadow(0 0 4px rgba(0, 221, 119, 0.3));
|
||||||
transform: scale(1.05);
|
transform: scale(1.03);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-line-1,
|
.logo-line-1,
|
||||||
@@ -131,9 +131,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo-line-2 {
|
.logo-line-2 {
|
||||||
color: transparent;
|
color: var(--color-text-secondary);
|
||||||
-webkit-text-stroke: 1.5px var(--color-text);
|
|
||||||
text-stroke: 1.5px var(--color-text);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover .logo-line-1 {
|
.logo:hover .logo-line-1 {
|
||||||
@@ -141,8 +139,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logo:hover .logo-line-2 {
|
.logo:hover .logo-line-2 {
|
||||||
-webkit-text-stroke: 1.5px var(--color-accent);
|
color: var(--color-accent);
|
||||||
text-stroke: 1.5px var(--color-accent);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@@ -154,8 +151,7 @@ a {
|
|||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -188,8 +184,7 @@ a {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 700 !important;
|
font-weight: 700 !important;
|
||||||
font-size: 0.85rem !important;
|
font-size: 0.85rem !important;
|
||||||
text-transform: uppercase !important;
|
letter-spacing: 0.02em !important;
|
||||||
letter-spacing: 0.08em !important;
|
|
||||||
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
|
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -216,58 +211,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.hero-bg-elements {
|
.hero-bg-elements {
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block {
|
|
||||||
position: absolute;
|
|
||||||
background: linear-gradient(135deg, var(--color-accent) 0%, transparent 100%);
|
|
||||||
opacity: 0.05;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-1 {
|
|
||||||
top: -20%;
|
|
||||||
right: -10%;
|
|
||||||
width: 60%;
|
|
||||||
height: 80%;
|
|
||||||
transform: rotate(15deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hero-block-2 {
|
|
||||||
bottom: -30%;
|
|
||||||
left: -15%;
|
|
||||||
width: 50%;
|
|
||||||
height: 70%;
|
|
||||||
transform: rotate(-25deg);
|
|
||||||
background: linear-gradient(135deg, var(--color-accent-alt) 0%, transparent 100%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.scanline {
|
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
background: repeating-linear-gradient(
|
|
||||||
0deg,
|
|
||||||
rgba(0, 221, 119, 0.02) 0px,
|
|
||||||
transparent 2px,
|
|
||||||
transparent 4px
|
|
||||||
);
|
|
||||||
pointer-events: none;
|
|
||||||
animation: scanline 10s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes scanline {
|
|
||||||
0% { transform: translateY(0); }
|
|
||||||
100% { transform: translateY(20px); }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-content {
|
.hero-content {
|
||||||
@@ -280,9 +224,8 @@ a {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
letter-spacing: 0.2em;
|
letter-spacing: 0.1em;
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-title {
|
.hero-title {
|
||||||
@@ -296,7 +239,6 @@ a {
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 0.9;
|
line-height: 0.9;
|
||||||
letter-spacing: -0.03em;
|
letter-spacing: -0.03em;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-line-1 {
|
.title-line-1 {
|
||||||
@@ -304,9 +246,7 @@ a {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.title-line-2 {
|
.title-line-2 {
|
||||||
color: transparent;
|
color: var(--color-text-secondary);
|
||||||
-webkit-text-stroke: 2px var(--color-text);
|
|
||||||
text-stroke: 2px var(--color-text);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-accent {
|
.title-accent {
|
||||||
@@ -331,8 +271,7 @@ a {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.05em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
padding: 0.4rem 0.8rem;
|
padding: 0.4rem 0.8rem;
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
background: var(--color-bg-secondary);
|
background: var(--color-bg-secondary);
|
||||||
@@ -367,8 +306,7 @@ a {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
border: 2px solid var(--color-accent);
|
border: 2px solid var(--color-accent);
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -414,8 +352,7 @@ a {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
border: 2px solid var(--color-border);
|
border: 2px solid var(--color-border);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
@@ -436,8 +373,7 @@ section {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
letter-spacing: 0.2em;
|
letter-spacing: 0.15em;
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -445,7 +381,6 @@ section {
|
|||||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -465,8 +400,7 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.showcase-card .feature-num {
|
.showcase-card .feature-num {
|
||||||
-webkit-text-stroke: 1px var(--color-accent-blue);
|
color: var(--color-accent-blue);
|
||||||
text-stroke: 1px var(--color-accent-blue);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.showcase-card .feature-tag {
|
.showcase-card .feature-tag {
|
||||||
@@ -524,8 +458,7 @@ section {
|
|||||||
padding: 0.75rem 1.5rem;
|
padding: 0.75rem 1.5rem;
|
||||||
border: 2px solid var(--color-accent-blue);
|
border: 2px solid var(--color-accent-blue);
|
||||||
background: rgba(0, 212, 255, 0.1);
|
background: rgba(0, 212, 255, 0.1);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.05em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -703,9 +636,7 @@ section {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: transparent;
|
color: var(--color-text-tertiary);
|
||||||
-webkit-text-stroke: 1px var(--color-accent);
|
|
||||||
text-stroke: 1px var(--color-accent);
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
}
|
}
|
||||||
@@ -714,7 +645,6 @@ section {
|
|||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.01em;
|
letter-spacing: -0.01em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -734,7 +664,7 @@ section {
|
|||||||
background: var(--color-accent);
|
background: var(--color-accent);
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.05em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-row {
|
.feature-row {
|
||||||
@@ -780,8 +710,7 @@ section {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
margin-bottom: var(--space-sm);
|
margin-bottom: var(--space-sm);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-item p {
|
.feature-item p {
|
||||||
@@ -795,8 +724,7 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.feature-highlight .feature-num {
|
.feature-highlight .feature-num {
|
||||||
-webkit-text-stroke: 1px var(--color-accent-alt);
|
color: var(--color-text-tertiary);
|
||||||
text-stroke: 1px var(--color-accent-alt);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feature-highlight::before {
|
.feature-highlight::before {
|
||||||
@@ -827,8 +755,7 @@ section {
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: var(--color-bg);
|
color: var(--color-bg);
|
||||||
text-align: center;
|
text-align: center;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.05em;
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Architecture Section ===== */
|
/* ===== Architecture Section ===== */
|
||||||
@@ -938,7 +865,6 @@ section {
|
|||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1020,7 +946,6 @@ section {
|
|||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-xl);
|
margin-bottom: var(--space-xl);
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1058,8 +983,7 @@ section {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
letter-spacing: 0.15em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: var(--space-sm);
|
margin-bottom: var(--space-sm);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1089,8 +1013,7 @@ section {
|
|||||||
background: var(--color-bg);
|
background: var(--color-bg);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid var(--color-border);
|
||||||
color: var(--color-text-secondary);
|
color: var(--color-text-secondary);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pricing-action {
|
.pricing-action {
|
||||||
@@ -1104,8 +1027,7 @@ section {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.02em;
|
||||||
letter-spacing: 0.05em;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -1167,7 +1089,6 @@ section {
|
|||||||
font-size: clamp(2.5rem, 6vw, 4rem);
|
font-size: clamp(2.5rem, 6vw, 4rem);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1231,7 +1152,6 @@ section {
|
|||||||
.platform-name {
|
.platform-name {
|
||||||
font-size: 1.75rem;
|
font-size: 1.75rem;
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.02em;
|
letter-spacing: 0.02em;
|
||||||
margin-bottom: var(--space-xs);
|
margin-bottom: var(--space-xs);
|
||||||
}
|
}
|
||||||
@@ -1248,8 +1168,7 @@ section {
|
|||||||
font-size: 0.7rem;
|
font-size: 0.7rem;
|
||||||
color: var(--color-text-tertiary);
|
color: var(--color-text-tertiary);
|
||||||
margin-top: var(--space-xs);
|
margin-top: var(--space-xs);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.05em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.platform-action {
|
.platform-action {
|
||||||
@@ -1257,8 +1176,7 @@ section {
|
|||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.05em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -1322,8 +1240,7 @@ section {
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
text-transform: uppercase;
|
letter-spacing: 0.05em;
|
||||||
letter-spacing: 0.1em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-section p {
|
.footer-section p {
|
||||||
@@ -1478,17 +1395,9 @@ section {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Animations & Effects ===== */
|
/* ===== Animations & Effects ===== */
|
||||||
@keyframes pulse-glow {
|
|
||||||
0%, 100% {
|
|
||||||
box-shadow: 0 0 15px rgba(0, 221, 119, 0.2);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
box-shadow: 0 0 25px rgba(0, 221, 119, 0.4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-primary:hover {
|
.feature-primary:hover {
|
||||||
animation: pulse-glow 2s infinite;
|
box-shadow: 0 0 20px rgba(0, 221, 119, 0.12);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Reduced motion support */
|
/* Reduced motion support */
|
||||||
@@ -1500,8 +1409,4 @@ section {
|
|||||||
animation-iteration-count: 1 !important;
|
animation-iteration-count: 1 !important;
|
||||||
transition-duration: 0.01ms !important;
|
transition-duration: 0.01ms !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.scanline {
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
+24
-27
@@ -10,7 +10,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<div class="hero-label">User Guide</div>
|
<div class="hero-label">User Guide</div>
|
||||||
<h1 class="hero-title">
|
<h1 class="hero-title">
|
||||||
<span class="title-line-1">DOCUMENTATION</span>
|
<span class="title-line-1">Documentation</span>
|
||||||
<span class="title-accent">Get Started</span>
|
<span class="title-accent">Get Started</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p class="hero-description">
|
<p class="hero-description">
|
||||||
@@ -24,11 +24,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- The Concept Section -->
|
<!-- The Concept Section -->
|
||||||
<section id="concept" class="docs-section">
|
<section id="concept" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">01 // The Concept</div>
|
<div class="section-label">The Concept</div>
|
||||||
<div class="concept-card">
|
<div class="concept-card">
|
||||||
<div class="concept-header">
|
<div class="concept-header">
|
||||||
<h2>AI-Native Editor</h2>
|
<h2>AI-Native Editor</h2>
|
||||||
<div class="concept-tag">CORE_PRINCIPLE</div>
|
<div class="concept-tag">Core Principle</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="concept-lead">
|
<p class="concept-lead">
|
||||||
Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
|
Zaguán Blade is not just a text editor with a chat sidebar. It is designed from the ground up to allow an AI agent to "live" inside your editor.
|
||||||
@@ -60,7 +60,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Getting Started Section -->
|
<!-- Getting Started Section -->
|
||||||
<section id="getting-started" class="docs-section section-alt">
|
<section id="getting-started" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">02 // Getting Started</div>
|
<div class="section-label">Getting Started</div>
|
||||||
<h2 class="section-title">Quick Start Guide</h2>
|
<h2 class="section-title">Quick Start Guide</h2>
|
||||||
|
|
||||||
<div class="steps-grid">
|
<div class="steps-grid">
|
||||||
@@ -98,7 +98,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Interface Section -->
|
<!-- Interface Section -->
|
||||||
<section id="interface" class="docs-section">
|
<section id="interface" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">03 // The Interface</div>
|
<div class="section-label">The Interface</div>
|
||||||
<h2 class="section-title">Interface Overview</h2>
|
<h2 class="section-title">Interface Overview</h2>
|
||||||
|
|
||||||
<div class="interface-grid">
|
<div class="interface-grid">
|
||||||
@@ -119,7 +119,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<div class="interface-header">
|
<div class="interface-header">
|
||||||
<span class="interface-icon">💻</span>
|
<span class="interface-icon">💻</span>
|
||||||
<h3>Center Stage</h3>
|
<h3>Center Stage</h3>
|
||||||
<span class="interface-tag">EDITOR</span>
|
<span class="interface-tag">Editor</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="interface-desc">High-performance CodeMirror 6 editor with syntax highlighting. <strong>Diff Blocks</strong> appear inline when the AI proposes changes.</p>
|
<p class="interface-desc">High-performance CodeMirror 6 editor with syntax highlighting. <strong>Diff Blocks</strong> appear inline when the AI proposes changes.</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -128,7 +128,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<div class="interface-header">
|
<div class="interface-header">
|
||||||
<span class="interface-icon">🤖</span>
|
<span class="interface-icon">🤖</span>
|
||||||
<h3>Right Panel</h3>
|
<h3>Right Panel</h3>
|
||||||
<span class="interface-tag">AI_ASSISTANT</span>
|
<span class="interface-tag">AI Assistant</span>
|
||||||
</div>
|
</div>
|
||||||
<ul class="interface-list">
|
<ul class="interface-list">
|
||||||
<li><strong>Chat</strong> - Main communication channel</li>
|
<li><strong>Chat</strong> - Main communication channel</li>
|
||||||
@@ -141,7 +141,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<div class="interface-header">
|
<div class="interface-header">
|
||||||
<span class="interface-icon">⌨️</span>
|
<span class="interface-icon">⌨️</span>
|
||||||
<h3>Bottom Panel</h3>
|
<h3>Bottom Panel</h3>
|
||||||
<span class="interface-tag">TERMINAL</span>
|
<span class="interface-tag">Terminal</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="interface-desc">Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.</p>
|
<p class="interface-desc">Integrated terminal for running commands. The AI can see and interact with this terminal when executing commands.</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -152,7 +152,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Keyboard Shortcuts Section -->
|
<!-- Keyboard Shortcuts Section -->
|
||||||
<section id="shortcuts" class="docs-section section-alt">
|
<section id="shortcuts" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">04 // Keyboard Shortcuts</div>
|
<div class="section-label">Keyboard Shortcuts</div>
|
||||||
<h2 class="section-title">Keyboard Shortcuts</h2>
|
<h2 class="section-title">Keyboard Shortcuts</h2>
|
||||||
|
|
||||||
<div class="shortcuts-layout">
|
<div class="shortcuts-layout">
|
||||||
@@ -206,7 +206,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- At Commands Section -->
|
<!-- At Commands Section -->
|
||||||
<section id="commands" class="docs-section">
|
<section id="commands" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">05 // @ Commands</div>
|
<div class="section-label">Commands</div>
|
||||||
<h2 class="section-title">Special Commands</h2>
|
<h2 class="section-title">Special Commands</h2>
|
||||||
<p class="section-desc">Type <code class="inline-code">@</code> in the chat input to access these special commands:</p>
|
<p class="section-desc">Type <code class="inline-code">@</code> in the chat input to access these special commands:</p>
|
||||||
|
|
||||||
@@ -226,7 +226,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Working with AI Section -->
|
<!-- Working with AI Section -->
|
||||||
<section id="ai" class="docs-section section-alt">
|
<section id="ai" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">06 // Working with AI</div>
|
<div class="section-label">Working with AI</div>
|
||||||
<h2 class="section-title">AI Collaboration</h2>
|
<h2 class="section-title">AI Collaboration</h2>
|
||||||
|
|
||||||
<div class="ai-content">
|
<div class="ai-content">
|
||||||
@@ -260,7 +260,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Chat Modes Section -->
|
<!-- Chat Modes Section -->
|
||||||
<section id="chat-modes" class="docs-section section-alt">
|
<section id="chat-modes" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">07 // Chat Modes</div>
|
<div class="section-label">Chat Modes</div>
|
||||||
<h2 class="section-title">Chat Modes</h2>
|
<h2 class="section-title">Chat Modes</h2>
|
||||||
<p class="section-desc">Zaguán Blade supports two chat modes accessible from the <strong>Command Center</strong>:</p>
|
<p class="section-desc">Zaguán Blade supports two chat modes accessible from the <strong>Command Center</strong>:</p>
|
||||||
|
|
||||||
@@ -284,7 +284,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Settings Section -->
|
<!-- Settings Section -->
|
||||||
<section id="settings" class="docs-section">
|
<section id="settings" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">08 // Settings</div>
|
<div class="section-label">Settings</div>
|
||||||
<h2 class="section-title">Configuration</h2>
|
<h2 class="section-title">Configuration</h2>
|
||||||
|
|
||||||
<div class="settings-grid">
|
<div class="settings-grid">
|
||||||
@@ -342,7 +342,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<div class="setting-header">
|
<div class="setting-header">
|
||||||
<span class="setting-icon">🧠</span>
|
<span class="setting-icon">🧠</span>
|
||||||
<h3>Context Tab</h3>
|
<h3>Context Tab</h3>
|
||||||
<span class="setting-tag">PER-PROJECT</span>
|
<span class="setting-tag">Per-project</span>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
<li><strong>Max Context Tokens</strong> - Control context sent to AI (2K-32K)</li>
|
<li><strong>Max Context Tokens</strong> - Control context sent to AI (2K-32K)</li>
|
||||||
@@ -370,7 +370,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Project Instructions Section -->
|
<!-- Project Instructions Section -->
|
||||||
<section id="project-instructions" class="docs-section section-alt">
|
<section id="project-instructions" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">09 // Project Instructions</div>
|
<div class="section-label">Project Instructions</div>
|
||||||
<h2 class="section-title">Teach the AI About Your Project</h2>
|
<h2 class="section-title">Teach the AI About Your Project</h2>
|
||||||
|
|
||||||
<div class="instructions-content">
|
<div class="instructions-content">
|
||||||
@@ -403,7 +403,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Editor Features Section -->
|
<!-- Editor Features Section -->
|
||||||
<section id="features" class="docs-section">
|
<section id="features" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">10 // Editor Features</div>
|
<div class="section-label">Editor Features</div>
|
||||||
<h2 class="section-title">Additional Features</h2>
|
<h2 class="section-title">Additional Features</h2>
|
||||||
|
|
||||||
<div class="features-list">
|
<div class="features-list">
|
||||||
@@ -440,7 +440,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Screenshot Capture Section -->
|
<!-- Screenshot Capture Section -->
|
||||||
<section id="screenshot" class="docs-section section-alt">
|
<section id="screenshot" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">11 // Screenshot Capture</div>
|
<div class="section-label">Screenshot Capture</div>
|
||||||
<h2 class="section-title">Screenshot Capture</h2>
|
<h2 class="section-title">Screenshot Capture</h2>
|
||||||
<p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
|
<p class="section-desc">Attach screenshots to your chat messages to give the AI visual context. Access capture options from the <strong>Feature Menu</strong> (grid icon) in the Command Center.</p>
|
||||||
|
|
||||||
@@ -478,7 +478,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Privacy Section -->
|
<!-- Privacy Section -->
|
||||||
<section id="privacy" class="docs-section">
|
<section id="privacy" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">12 // Privacy & Data</div>
|
<div class="section-label">Privacy & Data</div>
|
||||||
<h2 class="section-title">Privacy</h2>
|
<h2 class="section-title">Privacy</h2>
|
||||||
|
|
||||||
<div class="privacy-grid">
|
<div class="privacy-grid">
|
||||||
@@ -509,7 +509,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Local AI System Prompts Section -->
|
<!-- Local AI System Prompts Section -->
|
||||||
<section id="local-ai-prompts" class="docs-section">
|
<section id="local-ai-prompts" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">13 // Local AI System Prompts</div>
|
<div class="section-label">Local AI System Prompts</div>
|
||||||
<h2 class="section-title">Custom System Prompts</h2>
|
<h2 class="section-title">Custom System Prompts</h2>
|
||||||
|
|
||||||
<div class="instructions-content">
|
<div class="instructions-content">
|
||||||
@@ -586,7 +586,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Tool Calls Reference Section -->
|
<!-- Tool Calls Reference Section -->
|
||||||
<section id="tool-calls" class="docs-section section-alt">
|
<section id="tool-calls" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">14 // Tool Calls Reference</div>
|
<div class="section-label">Tool Calls Reference</div>
|
||||||
<h2 class="section-title">Tool Calls Reference</h2>
|
<h2 class="section-title">Tool Calls Reference</h2>
|
||||||
|
|
||||||
<div class="instructions-content">
|
<div class="instructions-content">
|
||||||
@@ -611,7 +611,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Known Bugs Section -->
|
<!-- Known Bugs Section -->
|
||||||
<section id="known-bugs" class="docs-section section-alt">
|
<section id="known-bugs" class="docs-section section-alt">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">15 // Known Bugs</div>
|
<div class="section-label">Known Bugs</div>
|
||||||
<h2 class="section-title">Known Issues</h2>
|
<h2 class="section-title">Known Issues</h2>
|
||||||
<p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
|
<p class="section-desc">As an alpha release, there are some known limitations and bugs we're actively working on:</p>
|
||||||
|
|
||||||
@@ -650,11 +650,11 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
<!-- Support Section -->
|
<!-- Support Section -->
|
||||||
<section id="support" class="docs-section">
|
<section id="support" class="docs-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">16 // Support & Feedback</div>
|
<div class="section-label">Support & Feedback</div>
|
||||||
<div class="support-card">
|
<div class="support-card">
|
||||||
<div class="support-header">
|
<div class="support-header">
|
||||||
<h2>Alpha Release</h2>
|
<h2>Alpha Release</h2>
|
||||||
<span class="status-badge">FEATURE_INCOMPLETE</span>
|
<span class="status-badge">Alpha</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="support-lead">
|
<p class="support-lead">
|
||||||
We define "Alpha" as "Feature incomplete, but good enough to be useful."
|
We define "Alpha" as "Feature incomplete, but good enough to be useful."
|
||||||
@@ -740,7 +740,6 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
font-size: clamp(2rem, 5vw, 3rem);
|
font-size: clamp(2rem, 5vw, 3rem);
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
margin-bottom: var(--space-xl);
|
margin-bottom: var(--space-xl);
|
||||||
}
|
}
|
||||||
@@ -867,9 +866,7 @@ import BaseLayout from '../layouts/BaseLayout.astro';
|
|||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
font-size: 3rem;
|
font-size: 3rem;
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
color: transparent;
|
color: var(--color-accent);
|
||||||
-webkit-text-stroke: 1px var(--color-accent);
|
|
||||||
text-stroke: 1px var(--color-accent);
|
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
margin-bottom: var(--space-md);
|
margin-bottom: var(--space-md);
|
||||||
}
|
}
|
||||||
|
|||||||
+29
-31
@@ -15,17 +15,17 @@ const version = pkg.version ?? "";
|
|||||||
</div>
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="hero-content">
|
<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">
|
<h1 class="hero-title">
|
||||||
<span class="title-line-1">YOUR CODE STAYS YOURS.</span>
|
<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-2">Cloud when you want it.</span>
|
||||||
</h1>
|
</h1>
|
||||||
<div class="hero-meta">
|
<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-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-divider">/</span>
|
||||||
<span class="meta-item">ANY MODEL PROVIDER</span>
|
<span class="meta-item">Any Model Provider</span>
|
||||||
</div>
|
</div>
|
||||||
<p class="hero-description">
|
<p class="hero-description">
|
||||||
Most AI editors ship your context to a server you don't control.
|
Most AI editors ship your context to a server you don't control.
|
||||||
@@ -37,9 +37,9 @@ const version = pkg.version ?? "";
|
|||||||
</p>
|
</p>
|
||||||
<div class="hero-actions">
|
<div class="hero-actions">
|
||||||
<a href="#download" class="action-primary">
|
<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>
|
||||||
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,7 +58,7 @@ const version = pkg.version ?? "";
|
|||||||
<section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
|
<section id="philosophy" class="features" style="padding-top: var(--space-3xl);">
|
||||||
<div class="features-header">
|
<div class="features-header">
|
||||||
<div class="container">
|
<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>
|
<h2 class="section-title">Why Another Editor<br/>Exists</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -79,7 +79,7 @@ const version = pkg.version ?? "";
|
|||||||
|
|
||||||
<div class="feature-row" style="margin-top: var(--space-xl);">
|
<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;">
|
<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>
|
<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;">
|
<table style="width: 100%; margin-top: var(--space-md); border-collapse: collapse; text-align: left;">
|
||||||
<thead>
|
<thead>
|
||||||
@@ -106,7 +106,7 @@ const version = pkg.version ?? "";
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="feature-item">
|
<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);">
|
<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;">
|
<li style="padding-left: 1.5rem; position: relative;">
|
||||||
<span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
|
<span style="position: absolute; left: 0; color: var(--color-primary);">→</span>
|
||||||
@@ -130,15 +130,14 @@ const version = pkg.version ?? "";
|
|||||||
<section id="workflow" class="features">
|
<section id="workflow" class="features">
|
||||||
<div class="features-header">
|
<div class="features-header">
|
||||||
<div class="container">
|
<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>
|
<h2 class="section-title">What It's Actually<br/>Good At</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="features-layout">
|
<div class="features-layout">
|
||||||
<div class="feature-row">
|
<div class="feature-row">
|
||||||
<div class="feature-item">
|
<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);">
|
<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>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>
|
<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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="feature-item feature-highlight">
|
<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);">
|
<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>Ask for change.</li>
|
||||||
<li>AI calls project tools.</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="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-content">
|
||||||
<div class="banner-text">ACTIVE DEVELOPMENT: PRE-V1.0</div>
|
<div class="banner-text">Active Development: Pre-v1.0</div>
|
||||||
</div>
|
</div>
|
||||||
<p style="color: var(--color-bg); font-weight: 500; max-width: 800px; margin: 0 auto; line-height: 1.6;">
|
<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.
|
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 -->
|
<!-- How It Works Section -->
|
||||||
<section class="architecture-section">
|
<section class="architecture-section">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section-label">03 // Architecture</div>
|
<div class="section-label">Architecture</div>
|
||||||
<div class="arch-grid">
|
<div class="arch-grid">
|
||||||
<div class="arch-node">
|
<div class="arch-node">
|
||||||
<div class="node-header">
|
<div class="node-header">
|
||||||
<div class="node-num">1</div>
|
<div class="node-num">1</div>
|
||||||
<div class="node-status">ACTIVE</div>
|
<div class="node-status">Active</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>Zaguán Blade (UI)</h3>
|
<h3>Zaguán Blade (UI)</h3>
|
||||||
<p>Tauri v2 + Vite + React<br/>User interface only.<br/>Lightning fast.</p>
|
<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="arch-node arch-node-center">
|
||||||
<div class="node-header">
|
<div class="node-header">
|
||||||
<div class="node-num">2</div>
|
<div class="node-num">2</div>
|
||||||
<div class="node-status">ACTIVE</div>
|
<div class="node-status">Active</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>zcoderd (AI daemon)</h3>
|
<h3>zcoderd (AI daemon)</h3>
|
||||||
<p>Go server<br/>State management<br/>Tool execution & AI</p>
|
<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="arch-node">
|
||||||
<div class="node-header">
|
<div class="node-header">
|
||||||
<div class="node-num">3</div>
|
<div class="node-num">3</div>
|
||||||
<div class="node-status">ACTIVE</div>
|
<div class="node-status">Active</div>
|
||||||
</div>
|
</div>
|
||||||
<h3>Model Provider</h3>
|
<h3>Model Provider</h3>
|
||||||
<p>Local or remote.<br/>Ollama, Anthropic, OpenAI, etc.<br/>You choose.</p>
|
<p>Local or remote.<br/>Ollama, Anthropic, OpenAI, etc.<br/>You choose.</p>
|
||||||
@@ -212,16 +210,16 @@ const version = pkg.version ?? "";
|
|||||||
<section class="pricing">
|
<section class="pricing">
|
||||||
<div class="pricing-container">
|
<div class="pricing-container">
|
||||||
<div class="pricing-block">
|
<div class="pricing-block">
|
||||||
<div class="section-label">04 // Subscription Model</div>
|
<div class="section-label">Subscription Model</div>
|
||||||
<h2 class="pricing-title">ZAGUÁN AI<br/>REQUIRED</h2>
|
<h2 class="pricing-title">Zaguán AI<br/>Required</h2>
|
||||||
<div class="pricing-grid">
|
<div class="pricing-grid">
|
||||||
<div class="pricing-item">
|
<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 class="pricing-value">Manual edits, no AI features</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="pricing-divider"></div>
|
<div class="pricing-divider"></div>
|
||||||
<div class="pricing-item pricing-item-highlight">
|
<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 class="pricing-value">AI tool calls, code review, multi-model access</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -243,18 +241,18 @@ const version = pkg.version ?? "";
|
|||||||
<section id="download" class="download">
|
<section id="download" class="download">
|
||||||
<div class="download-layout">
|
<div class="download-layout">
|
||||||
<div class="download-header">
|
<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>
|
<h2 class="download-title">Get Blade<br/>for Your OS</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="download-grid">
|
<div class="download-grid">
|
||||||
<a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-windows" target="_blank" rel="noopener">
|
<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-icon">🪟</div>
|
||||||
<div class="platform-info">
|
<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-meta">v{version} / x64, arm64</div>
|
||||||
<div class="platform-formats">MSI, EXE</div>
|
<div class="platform-formats">MSI, EXE</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="platform-action">DOWNLOAD →</div>
|
<div class="platform-action">Download →</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-mac" target="_blank" rel="noopener">
|
<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-meta">v{version} / arm64 (Apple Silicon)</div>
|
||||||
<div class="platform-formats">DMG, TAR.GZ</div>
|
<div class="platform-formats">DMG, TAR.GZ</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="platform-action">DOWNLOAD →</div>
|
<div class="platform-action">Download →</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a href="https://github.com/ZaguanLabs/ZaguanBlade/releases" class="platform-card platform-linux" target="_blank" rel="noopener">
|
<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-icon">🐧</div>
|
||||||
<div class="platform-info">
|
<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-meta">v{version} / amd64</div>
|
||||||
<div class="platform-formats">DEB, RPM, AppImage</div>
|
<div class="platform-formats">DEB, RPM, AppImage</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="platform-action">DOWNLOAD →</div>
|
<div class="platform-action">Download →</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="download-disclaimer">
|
<div class="download-disclaimer">
|
||||||
|
|||||||
Reference in New Issue
Block a user