Navara 营销落地页是一个 Astro 组件,由主题/配置、文案、图片三类数据文件驱动,设计参考 design_handoff_navara_landing_page。
用途与结构:docs/src/components/LandingPage.astro 承载整页标记、全局样式与显现/展示脚本,按语言由页面以 <LandingPage locale="..." /> 渲染。LpHeader.astro 为站点页头,含 lp、site、docs 三种变体;LpFooter.astro 为页脚,被落地页与品牌资产页共用;lp-shared.ts 提供语言加载、链接与主题样式等共享逻辑。
数据拆分:docs/src/data/lp.json 存主题色、图片槽位与外部链接;docs/src/data/lp-locales/<locale>.json 存各语言全部文案与图片 alt。新增语言需添加对应 JSON 并新建渲染页面。约定不在组件中硬编码文案或颜色。
主要能力:滚动显现通过 data-reveal / data-reveal-group 实现,仅在 prefers-reduced-motion: no-preference 下生效;展示网格由 lp.json 的 showcase-* 槽位构建,侧边标签随滚动交叉淡入;主题色变更经 CSS 变量传播;代码片段使用 Astro 的 Code 组件并映射到落地页配色。
使用与验证:在 docs 目录执行 pnpm build 构建整站,文案或图片缺失会在构建时报错;可用 Playwright 对预览做无头验证。部署时构建于 /docs/lp/,由 scripts/assemble-site.mjs 迁移到站点根路径。
限制:发布前保留 noindex,nofollow;MapLibre 区块由 SHOW_MAPLIBRE = false 暂时关闭;英雄视频在 iOS 低电量模式下无法自动播放,需用户点击。其余细节暂未提供。