feat: port cms about layout into trade-pro

Task 10e: rewrite pages/about.html from the 2-row thin variant to the
full cms about page design (about.astro, pixel baseline
dist/hesupipe/en/about/): page hero with breadcrumb + cover backdrop +
in-page anchor button, company intro two-col with derived stats bar,
rich body (gated on body), advantages grid, dark mission band with
gallery backdrop and glass feature cards, gallery-driven facility card
grid (hidden when empty), certifications grid.

Data mapping: about page = ordinary page entry; cms dict-only stats and
factory copy have no platform fields, so stats reuse the 10a home
derivation (products/categories/brands/cases counts, hidden when all
empty) and facility cards are driven by page.cover + fields.gallery
(make_context gallery, deduped, cover first); markFloatImages is not
ported (sanitize strips class attributes, same conclusion as 10d) and
the body renders through body_copy + the 10d sf-tp-article-body
typography layer via dual classing.

CSS lands in pro.css under sf-tp-about-* reusing the 10a/10b/10c
components (two-col, stats, feature/card grids, section head, page
hero, breadcrumb); responsive collapse comes from the existing 10a/10c
media blocks, with about-specific 900/620 rules in a dedicated block
(767 intentionally empty, covered by 10c page-hero).

Tests: test_trade_pro_about_layout_structure drives a data-rich /about/
(PATCHed bootstrap entry with cover/summary/rich body/gallery + product
and post entries) and an empty custom-route about page
(meta.page_template), asserting structure, data mapping, and empty-data
section hiding.

Co-Authored-By: Claude Code <noreply@anthropic.com>

themes/trade-pro/pro.css

@@ -445,3 +445,49 @@
   .sf-theme-trade-pro .sf-tp-article-side-item{grid-template-columns:72px 1fr}
   .sf-theme-trade-pro .sf-tp-article-side-cta{padding:16px}
 }
+
+/* ── Task 10e：about 关于页（about.astro 移植）──
+   源 src/pages/[locale]/about.astro：PageHero → 公司介绍两栏（实景图 +
+   悬浮数据条）→ 富文本正文 → 优势网格 → 使命深色带（实景底图 + 玻璃
+   特性卡，cms dark-photo/.dark .feature）→ 厂区图集卡（CardGrid cols-4，
+   平台 gallery 驱动）→ 资质网格。共享组件复用 10a/10b/10c 移植成果：
+   sf-tp-two-col/copy/photo/stats（介绍两栏 = 首页关于两栏同构，cms 源码
+   本就同款）、sf-tp-feature-grid/card-grid/section-head（cms 同组件）、
+   sf-tp-page-hero/breadcrumb（10c 内页 hero）、sf-tp-article-body（10d
+   富文本排版层，about-body 与全站 rich-body 同构，markup 双挂类名）。
+   本块只补 about 专属形态：使命带底图叠层与玻璃卡、厂区图集卡。 */
+
+/* 使命深色带：cms dark-photo = section--dark 渐变 + 实景图（object-position
+   center 55%）。叠层级序（同 page-hero）：图（z-1）→ ::before 渐变罩
+   （z-base，复刻 section--dark 渐变盖住图保证文字对比）→ .wrap（z-raised）。
+   无图时罩层叠在原渐变上，视觉与 .section--dark 纯渐变一致。 */
+.sf-theme-trade-pro .sf-tp-about-mission{position:relative;overflow:hidden}
+.sf-theme-trade-pro .sf-tp-about-mission-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;z-index:calc(var(--sf-tp-z-base) - 1)}
+.sf-theme-trade-pro .sf-tp-about-mission::before{content:"";position:absolute;inset:0;z-index:var(--sf-tp-z-base);background:linear-gradient(90deg,color-mix(in srgb,var(--sf-tp-color-surface-inverse) 94%,transparent),color-mix(in srgb,var(--sf-tp-color-brand-primary) 60%,transparent))}
+.sf-theme-trade-pro .sf-tp-about-mission .wrap{position:relative;z-index:var(--sf-tp-z-raised)}
+/* 玻璃特性卡（cms .dark .feature）：半透明白 + 反色字。0,3,0 无条件压过
+   10a 的 .sf-tp-feature 底色（0,2，0），620 横排布局仍由 10a 折叠规则提供 */
+.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature{background:color-mix(in srgb,var(--sf-tp-color-neutral-0) 10%,transparent);border-color:var(--sf-tp-color-border-inverse)}
+.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature h3{color:var(--sf-tp-color-text-inverse)}
+.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-feature p{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 82%,transparent)}
+.sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{color:color-mix(in srgb,var(--sf-tp-color-text-inverse) 82%,transparent)}
+/* 厂区图集卡（cms CardGrid 卡片形态，数据驱动无悬停语义故不复用 .sf-tp-card
+   的链接上抬）：媒体复用 sf-tp-card-media（4:3 + 裁剪），编号 tag 补位
+   cms 卡片标题行 */
+.sf-theme-trade-pro .sf-tp-about-facility{margin:0;background:var(--sf-tp-color-surface-default);border:var(--sf-tp-border-width-hairline) solid var(--sf-tp-color-border-subtle);border-radius:var(--sf-tp-card-border-radius);overflow:hidden;box-shadow:var(--sf-tp-shadow-xs)}
+.sf-theme-trade-pro .sf-tp-about-facility figcaption{padding:var(--sf-tp-space-3) var(--sf-tp-space-4)}
+
+/* ── about 响应式（cms 断点 900/620；767 无 about 专属规则——内页 hero
+   的 767 竖版由 10c 既有块覆盖。介绍两栏/数据条/特性网格/图集栅格的折叠
+   全部由 10a 既有块提供（复用同一批类名）；10d 的 620 富文本字号经
+   sf-tp-article-body 双挂类名作用于本页正文。折叠规则收在本任务媒体块
+   内的原则只针对本任务新类名（10c 教训：同特异性按源顺序取胜）── */
+@media (max-width: 900px){
+  .sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{max-width:100%}
+}
+@media (max-width: 620px){
+  .sf-theme-trade-pro .sf-tp-about-mission h2{font-size:22px}
+  .sf-theme-trade-pro .sf-tp-about-mission .sf-tp-intro{font-size:11px}
+  .sf-theme-trade-pro .sf-tp-about-facility figcaption{padding:9px 10px}
+  .sf-theme-trade-pro .sf-tp-about-facility .sf-tp-tag{font-size:10px}
+}