docs: polish landing — full-bleed hero, readable nav, code highlighting, favicon bg#18
Merged
Conversation
…lighting + favicon bg Four follow-up fixes after #17: 1. **Hero is now full-bleed.** The previous 1440-wide container clipped the radial chartreuse glow at the right edge of the constrained box, leaving a hard cut on wide viewports. The hero now spans the viewport (`padding: 0 clamp(24px, 4vw, 64px)`), inner content stays centered at `max-width: 1480px`, and the glow + grid fade naturally to the viewport edges. Glow size also bumped to `clamp(600px, 60vw, 1100px)` so it scales with the new room. 2. **Nav logo is bigger and readable.** `Lockup` size in the fumadocs nav went 22 → 32, and the wordmark/mark ratio went 0.44 → 0.60 (text now ~60% of mark height instead of 44%). "vitus·labs" was 10px before — now ~19px and actually legible. 3. **Code-block syntax highlighting fixed.** The previous regex-based highlighter ran *after* HTML-escaping, so JSX angle brackets stopped keyword matches dead and quoted strings (already encoded as `'`) never matched the string regex. Replaced with explicit per-token JSX spans — same approach as the source design — with the original `.kw / .str / .fn / .ty / .cm` palette intact. 4. **Favicon has a solid background.** Both `icon.svg` and `apple-icon.svg` now use a dark ink (`#0a0b0d`) rounded background with a chartreuse mark. At 16/32px the previous transparent-bg chartreuse triangles disappeared on light tab backgrounds; with the dark plate they read consistently across any browser theme. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
…nt switcher, syntax theme
Pulls in the latest design package from Claude Design (J3lE5xxSeGBbwc_pj3bClg). Same brand system, more motion:
**Hero background — aurora stack**
Six layered effects replace the single radial glow:
- `.conic` — slow-rotating chartreuse + cobalt conic-gradient, blurred 80px (60s rotation)
- `.aurora` — large dual-radial bloom that drifts on `vl-aurora` (18s alternating)
- `.glow-2` — bottom-left cobalt counter-note (22s alternate-reverse)
- `.grid` — 72px dot grid with radial mask
- `.noise` — SVG fractal-noise grain at 6%/4% opacity (light/dark) with multiply/overlay blend
- `.vignette` — bottom fade so the hero meets the next section cleanly
**Rotating verb in the headline**
`VerbRotator` client component cycles through `ship → theme → test → animate → bundle` every 2.6s with a 420ms 3D flip (rotateX out → in). Respects `prefers-reduced-motion`.
**Hero visual — three switchable variants**
`HeroVisual` client component (state-driven) replaces the static orbit. Variant switcher pill (icons: orbital / stacked bars / radar circles) at the bottom of the visual fades between:
- **Orbit** — the existing four rings + floating labels (`core · engine`, `styler · 4.82 KB`, `kinetic · 123 presets`, `elements · 5 primitives`)
- **Stack** — animated bars assembling top-down (`vl-sbar` keyframes) plus a token row underneath
- **Pulse** — radar sweep (conic + mask), three expanding rings (`vl-radar-ring`), four blips (`vl-blip`), Mark in the center
**Syntax theme tokens**
Brand css gained `--vl-code-{fg,kw,str,fn,ty,num,cm,punct}` with light + dark variants (chartreuse keywords / amber strings / cobalt fns in dark; olive / terracotta / true cobalt in light). The demo code block now uses those tokens including a new `<Num>` span for numeric literals.
**hero-inner**
Grid bumped 1.15fr 0.85fr → 1.1fr 0.9fr, gap 64 → 80, max-width 1480 → 1640 to match the new design. Hero `min-height` set to `calc(100vh - 64px)` so it fills the fold above other sections.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-ups to #17. Four issues caught after merge:
clamp(600px, 60vw, 1100px).Lockupsize 22 → 32; wordmark/mark ratio 0.44 → 0.60. "vitus·labs" went from 10px to ~19px.<Element …>never matched and pre-encoded strings stayed unstyled. Replaced with explicit per-token JSX spans (same approach as the original design HTML).#0a0b0drounded plate behind a chartreuse mark. The previous transparent-bg chartreuse triangles disappeared on light tab backgrounds.Test plan
bun run build— clean (5.8s, 68 pages, no warnings)grep class=on rendered HTML confirms 9 keywords / 10 strings / 7 types / 6 fns / 1 comment in the code block🤖 Generated with Claude Code