Blockmesh Protocol

# Blockmesh — Web3 Protocol Website

## Goal
Build a production-ready web3 protocol website called "Blockmesh". Overall vibe: serious infrastructure — closer to a database company than a casino. It should look hand-crafted by a senior product designer — not like a generic template.

## Design System
- **Palette**: graphite #0D0F14, porcelain #E8EBF0 text, single violet #8B5CF6 accent; absolutely no rainbow gradients
- **Typography**: engineering sans; mono for addresses, hashes, and all numbers
- **Grid & spacing**: 12-col grid, 8px base unit. Desktop sections 112-128px vertical padding, mobile 56-64px.
- **Corners & borders**: cards 16px radius, buttons 10px, inputs 10px. 1px borders at 8-12% white (dark) or 8% black (light).
- **Shadows**: layered, soft (0 1px 2px + 0 8px 24px), never harsh.

## Page Structure
1. **Navbar** — logo, Protocol/Docs/Ecosystem/Governance, 'Launch app' violet outline button.
2. **Hero** — left: headline 'Consensus, minus the friction', sub with one metric (3.2s finality), CTAs 'Read docs' (primary) + 'Whitepaper'; right: isometric node network built from SVG — 12 nodes, edges pulse packets along paths.
3. **Metrics row** — 4 live-feeling stats in mono: validators, TVL, finality, uptime — counting up once.
4. **Architecture** — 3 stacked layer cards (Execution / Settlement / Data availability) that spread apart slightly on scroll to show separation.
5. **Builders section** — code snippet (10 lines, syntax highlighted) showing a deploy call + 3 SDK cards (TypeScript/Rust/Go).
6. **Ecosystem grid** — 8 project tiles (logo placeholder + name + category chip), 'View all 120+' link.
7. **Governance teaser** — current proposal card with for/against bar and countdown.
8. **Footer** — includes explorer/status/brand-kit links; small 'audited by' row.

## Motion
- Edge packets: small dots travel node-to-node on randomized 2-4s intervals (SVG offset-path).
- Layer cards translate apart ±24px tied to scroll progress through the section.
- Stats count once, then stay static — recounting on every scroll feels gimmicky.
- All entrances use IntersectionObserver-triggered reveals; never animate on every scroll tick.
- Respect `prefers-reduced-motion`: disable transforms, keep opacity fades under 150ms.

## Details That Matter
- Addresses truncate middle (0x12ab…9f3c) with copy-on-click.
- Governance bar uses violet vs zinc — avoid red/green moralizing.

## Tech & Quality Bar
- Next.js App Router + TypeScript + Tailwind CSS. No UI kit — style from scratch.
- Fully responsive at 375 / 768 / 1024 / 1440px. Mobile nav becomes a full-screen overlay with staggered link reveal.
- Semantic landmarks (header/main/section/footer), WCAG AA contrast, focus-visible rings on all interactive elements.
- Optimize LCP: hero media preloaded, fonts `display: swap`, zero layout shift.