BuzzbeeSCD/clustri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: interactive site redesign with dot matrix effects and component polish

Browse Source
This commit is contained in:
Matt
2026-08-25 13:08:21 +00:00
parent efbdf2356f
commit 563d9c0eeb
33 changed files with 969 additions and 505 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Nav.astro
+19 -15
View File
@@ -1,37 +1,41 @@
---
import DotMatrixText from './DotMatrixText.astro'
---
<header class="nav-header fixed top-0 left-0 right-0 z-50 px-4 pt-4">
<nav
class="nav-pill mx-auto flex h-[46px] max-w-6xl items-center justify-between gap-6 rounded-[12px] border border-white/[0.07] bg-[#0f0f14]/70 px-4 backdrop-blur-xl transition-all duration-400"
class="nav-pill mx-auto flex h-[46px] max-w-6xl items-center justify-between rounded-[12px] border border-dotted border-white/15 bg-[#0f0f14]/70 px-5 backdrop-blur-xl transition-all duration-400 dot-grid"
aria-label="Primary"
>
<a href="#" class="flex items-center gap-2.5">
<span class="flex h-7 w-7 items-center justify-center rounded-[8px] bg-primary text-primary-foreground">
<a href="#" class="group flex shrink-0 items-center gap-2.5">
<span class="flex h-7 w-7 items-center justify-center rounded-[8px] border border-dotted border-white/10 bg-primary text-primary-foreground transition-colors group-hover:bg-primary/90">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-3.5 w-3.5" aria-hidden="true">
<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
</svg>
</span>
<span class="text-sm font-semibold tracking-tight text-foreground">Clustri</span>
<span class="hidden font-mono text-[9px] uppercase tracking-[0.14em] text-muted-foreground sm:inline">Ops Console</span>
<DotMatrixText text="CLUSTRI" size="xs" dotClass="text-foreground group-hover:text-primary transition-colors" />
</a>
<div class="hidden items-center gap-5 md:flex">
<a href="#failover-playground" class="font-mono text-[11px] uppercase tracking-[0.08em] text-muted-foreground transition-colors hover:text-foreground">Failover</a>
<a href="#security" class="font-mono text-[11px] uppercase tracking-[0.08em] text-muted-foreground transition-colors hover:text-foreground">Security</a>
<a href="#tour" class="font-mono text-[11px] uppercase tracking-[0.08em] text-muted-foreground transition-colors hover:text-foreground">Tour</a>
<a href="#architecture" class="font-mono text-[11px] uppercase tracking-[0.08em] text-muted-foreground transition-colors hover:text-foreground">Architecture</a>
<div class="hidden items-center gap-6 md:flex">
<span class="h-3 w-px bg-white/10" aria-hidden="true"></span>
<a href="#failover-playground" class="group font-mono text-[11px] tracking-wide text-muted-foreground transition-colors hover:text-foreground">FAILOVER</a>
<a href="#security" class="group font-mono text-[11px] tracking-wide text-muted-foreground transition-colors hover:text-foreground">SECURITY</a>
<a href="#tour" class="group font-mono text-[11px] tracking-wide text-muted-foreground transition-colors hover:text-foreground">TOUR</a>
<a href="#architecture" class="group font-mono text-[11px] tracking-wide text-muted-foreground transition-colors hover:text-foreground">ARCH</a>
</div>
<div class="flex items-center gap-2">
<button data-cmdk-trigger class="hidden sm:flex items-center gap-1.5 rounded-md border border-white/[0.06] bg-white/[0.04] px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground transition-colors hover:border-white/10 hover:text-foreground" aria-label="Open command palette">
<div class="flex shrink-0 items-center gap-3">
<button data-cmdk-trigger class="hidden sm:flex items-center gap-1.5 rounded-md border border-dotted border-white/10 bg-white/[0.04] px-2.5 py-1.5 font-mono text-[11px] text-muted-foreground transition-colors hover:border-white/15 hover:text-foreground" aria-label="Open command palette">
<span>⌘K</span>
</button>
<a href="#download" class="rounded-[10px] bg-primary px-4 py-2 text-[13px] font-semibold text-primary-foreground transition-all hover:bg-primary/90 active:scale-[0.98]">Get Clustri</a>
<a href="#download" class="rounded-[10px] border border-dotted border-primary/30 bg-primary px-4 py-2 text-[13px] font-semibold text-primary-foreground transition-all hover:bg-primary/90 active:scale-[0.98]">Get Clustri</a>
</div>
</nav>
</header>
<style>
.nav-scrolled .nav-pill {
border-color: rgba(255, 255, 255, 0.08);
background-color: oklch(0.11 0.008 275 / 0.85);
border-color: rgba(255, 255, 255, 0.15);
background-color: oklch(0.145 0.012 250 / 0.85);
}
</style>