Hero Section（首屏大图区 / 英雄区）介绍（Web网页落地页Landing Page最顶部的区域）

text 复制代码

 Bash command

   git add -A && git commit -m "$(cat <<'EOF'
   feat(frontend): public landing page + auth boundary via route groups --- UX/SEO

   Previously the root URL force-redirected every visitor (and crawler) through
   Keycloak login, leaving zero indexable content and no product surface for the
   B2C self-registration funnel. This restructures the App Router into two route
   groups: (marketing) --- a public, i18n-ready landing page (hero, six feature
   cards, hosted vs self-hosted comparison, GitHub links) --- and (app), where the
   AuthProvider + AppShell moved from the root layout, shrinking the login-required
   boundary to exactly the app pages (URLs unchanged). keycloak-js init is now
   memoized behind initKeycloak(): the landing runs silent check-sso (new
   public/silent-check-sso.html) so returning users get a "Go to Dashboard" CTA,
   while app routes keep login-required semantics; sign-out now lands on the
   public page instead of bouncing back into Keycloak. SEO: per-request metadata
   (canonical/OG/Twitter + generated og-image) driven by a new runtime SITE_URL
   env (12-factor, wired in base + prod compose), robots.txt disallowing app
   routes, sitemap.xml, and X-Robots-Tag noindex on the auth. subdomain via
   Caddy. E2E smoke rewritten around the landing entry (6 tests incl. silent-SSO
   revisit + logout-to-landing), all green locally against the rebuilt image;
   lint/type-check/build and full unit suite pass.

   此前根路径会把所有访客(包括搜索引擎爬虫)强制重定向到 Keycloak 登录页,导致
   站点没有任何可索引内容,B2C 自助注册漏斗也缺少产品展示入口。本次将 App Router
   重组为两个路由组:(marketing) ------ 公开、i18n-ready 的落地页(Hero、六张功能
   卡片、托管与自托管模式对比、GitHub 链接);(app) ------ AuthProvider 与 AppShell
   从根 layout 下移至此,登录强制边界精确收缩到应用页面(URL 不变)。keycloak-js
   初始化改为 initKeycloak() 记忆化单例:落地页执行静默 check-sso(新增
   public/silent-check-sso.html),老用户回访时 CTA 变为"进入 Dashboard";应用路
   由保持 login-required 语义;登出后回到公开落地页,不再被弹回 Keycloak。SEO 方
   面:基于新的运行时 SITE_URL 环境变量(12-factor,已接入 base 与 prod compose)
   按请求生成 canonical/OG/Twitter 元数据与 og-image;robots.txt 屏蔽应用路由;新
   增 sitemap.xml;Caddy 为 auth. 子域名添加 X-Robots-Tag noindex。E2E 冒烟围绕落
   地页入口重写(6 个测试,含静默 SSO 回访与登出回落地页),已在本地对重建镜像全
   部通过;lint/type-check/build 与完整单元测试套件均通过。

   Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
   EOF
   )" && git push 2>&1 | tail -1 && git log --oneline -1
   Commit landing page work with bilingual message and push

文章目录

- Hero（首屏大图区）
- - 在本次改动中的角色

Hero（首屏大图区）

在这段描述中，Hero 指的是落地页（Landing Page）最顶部的 "Hero Section"（首屏大图区 / 英雄区），是 Web 设计和营销页面中的一个常见术语。

它通常包含以下元素：

元素	说明
大标题（Headline）	一句话说明产品核心价值，如 "开源的 XX 平台"
副标题（Subheadline）	对标题的补充说明
CTA 按钮（Call-to-Action）	如 "立即开始" / "免费注册" / "GitHub Star"
背景图 / 插画 / 动画	吸引视觉注意力

在本次改动中的角色

复制代码

(marketing) 路由组 ------ 公开落地页
├── Hero          ← 首屏大图区（第一印象，转化入口）
├── 六张功能卡片    ← 功能展示
├── 托管 vs 自托管  ← 模式对比
└── GitHub 链接    ← 开源社区入口

简单来说，Hero 就是用户打开网站后看到的第一屏内容，是整个落地页最重要的"门面"，目标是在几秒内抓住访客注意力并引导他们采取行动（注册、了解产品等）。

文中还提到，对于已登录的老用户回访时，Hero 区的 CTA 按钮会智能地从"免费注册"变为"进入 Dashboard"，这就是 initKeycloak() 静默 check-sso 的作用。