navara-lp
Installation
SKILL.md
Navara landing page
The marketing LP is a single Astro component with a global <style> block, driven
by data files for theme/config, copy, and images. Design reference:
design_handoff_navara_landing_page.
Files & the three-way split
docs/src/components/LandingPage.astro— the whole page (markup +<style is:global>+ reveal/showcase scripts). Rendered per locale by pages that do<LandingPage locale="..." />.docs/src/components/LpHeader.astro— the site header, shared with the docs site:variant="lp"(fixed/transparent, frosts vialp-header-solidtoggled by LandingPage's script, carries the?colorswitcher markup — its behavior script stays in LandingPage) andvariant="docs"(StarlightHeaderoverride wraps it, inside Starlight's header shell, with asearchslot; its LP vars are pinned from--nv-navy/--nv-creamset indocs/src/styles/theme.css). Header markup/styles/lang-select script live here, not in LandingPage. The examples gallery top page mirrors the same design in React (web/navara_three/example/components/SiteHeader.tsx).docs/src/data/lp.json— theme colors, image slots, external links (not copy). Colors:primary/accent/sub/maplibre(fed as CSS vars--pri/--acc/--sub/--ml; the derived--ink*/--on-dark*/--line*vars come from these).themeVariantslists candidate primary/sub/accent sets (verbatim from the design palette sheet) for the header preview switcher, revealed only by?colorin the URL (?color=<name>preselects one). Switching rewrites--pri/--sub/--accat runtime; roles a candidate can't fill without losing contrast fall back to plain black/white via--pri-ink(always-dark ink/scrim source, =--prinormally),--on-band(text on--pribands) and--on-acc— and a synthetic resize re-samples the adaptive gallery inks.images.<slot>.srcis a repo-root-relative path intodocs/src/assetsorweb/navara_three/example/public/screenshots, resolved byresolveImage.docs/src/data/lp-locales/<locale>.json— all copy, per locale.enisROOT_LOCALE(served at/, others under/<locale>/). Image alt text lives here, inimageAltskeyed by the lp.json slot id (a missing alt throws at build).
To add a locale: add its lp-locales/<code>.json and a page rendering <LandingPage locale="code" />.