Standardize five page layouts (layer-2, learn, reports)

[myelinated-wackerow]

Summary

Standardizes five more app-router pages on the current design-system page skeleton, continuing the ui-page-layouts effort: /layer-2, /layer-2/learn, /layer-2/networks, /learn, and /reports.

Each page now follows the same shape: hero outside the article, MainArticle with .flow, Section chunks with stable ids, spacing via the page/space tokens, cards/callouts composed from Grid + ui/card/Callout, and semantic tokens in place of hardcoded hex.

Changes

Pages

• /reports — flow skeleton; dropped arbitrary [Nlh] spacing.
• /learn — light touch (already on ContentLayout); fixed the local AdditionalDocReading helper (.flow + text-h5, no mt-24/inline flex).
• /layer-2/learn — flow skeleton; md:w-[50%] column splits → flex text/image rows; bg-body-light→bg-background-highlight, bg-orange-100 text-gray-900→bg-tint-warning; rollup cards get hoverLift; "Zero-knowledge" hyphenated.
• /layer-2/networks — PageHero lifted out of the article; the data table gets an sr-only <h2> and stays full-width via *:[section]:not-first:px-page; NetworkMaturity inlined (accordion removed), its intro consolidated to a single t.rich string, maturity hex cells → blue-* tokens, variant="minimal" for flush cells.
• /layer-2 (hub) — HubHero lifted out; raw text-5xl stats → BigNumber + formatPriceUSD; bg-[#B9B9F1]/20→bg-tint-primary; contained bands rounded; duplicate section id fixed; a repeated image de-duplicated (the band now uses mainnet.png).

Cross-cutting: dropped I18nProvider where only common/server <Translation> is used; camelCased all raster image imports (SVGR icon components render via a capitalized binding); aliased JSON-LD imports to PageJsonLD.

Design-system skill docs

Pulled the in-progress skill-reference updates from the parallel page-layouts effort (CardButtonFake on href cards, --edge-spacing tracking px-page, the flow flex/grid-section offset gotcha, the glossary-link <Translation> provider note, layout rules for end-of-page actions + the PageJsonLD alias, and an accurate PageHero/HubHero hero-prop section), and added two learnings surfaced here: exempting a full-bleed first section via :not-first:px-page (and why a plain px-0 can't override the selector), and the SVG-as-component vs camelCase-image-import gotcha.

Test plan

• /layer-2, /layer-2/learn, /layer-2/networks, /learn, /reports render correctly (layout, spacing, image sizing) in light + dark.
• Non-English locale: maturity section renders translated. The new t.rich intro key (page-layer-2-network-maturity-intro) is English until the intl-pipeline propagates it.
• Network-maturity table label cells are flush; the networks table + quiz widgets remain interactive.
• Chromatic full-page review before merge (no dev-server visual confirmation in this branch).

[netlify]

✅ Deploy Preview for ethereumorg ready!

Name	Link
🔨 Latest commit	4cdf4ab
🔍 Latest deploy log	https://app.netlify.com/projects/ethereumorg/deploys/6a5821414195370008acae29
😎 Deploy Preview	https://deploy-preview-18817.ethereum.it
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	7 paths audited Performance: 64 (🟢 up 8 from production) Accessibility: 95 (no change from production) Best Practices: 100 (no change from production) SEO: 98 (no change from production) PWA: 59 (🔴 down 1 from production) View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

🔎 First-pass review — ✅ Looks mergeable

Continuation of the ui-page-layouts effort: standardizes /layer-2, /layer-2/learn, /layer-2/networks, /learn, and /reports on the design-system page skeleton (hero outside the article, MainArticle .flow, id'd Sections, semantic tokens, Grid+ui/card/Callout). NetworkMaturity.tsx is inlined into the networks page. Conventions hold up under full code depth and I found no blocking issues — merge on green CI + Chromatic.

Verified the changes most likely to bite:

• No unused imports — the hub fully drops the getMessages/pick/getRequiredNamespacesForPage/I18nProvider plumbing; networks/learn keep I18nProvider where it's actually needed.
• Dropping I18nProvider on the hub is safe — its single <Translation> has no /glossary/# link, and ExpandableCard reads only common (covered by the layout provider).
• Formatting stays locale-aware (formatPriceUSD/numberFormat, no raw Intl); Table variant="minimal" and the BigNumber props both exist; the camelCase SVG imports render via a capitalized Icon field + <Icon /> (the documented workaround); Grid forwards data-flow.
• Nice catches: the featured-networks border-bottom now keys off userRandomL2s.length instead of a slice of the wrong array, and the duplicate id="layer-2-callout-cards" is resolved.

Analysis

Lane: code (app-router pages + deleted NetworkMaturity.tsx), with English-content edits (src/intl/en/page-layer-2-*.json) and design-system skill-reference docs.

Checked: unused vars/imports (build-fatal) — clean; locale-format wrappers; server/client + I18nProvider boundaries per the skill's own glossary-link rule; Table/BigNumber/Grid prop validity; SVG-as-component gotcha; heading hierarchy (networks table gets an sr-only h2). Didn't judge translation quality — no non-en files here.

CI: still running at review time — not commenting on pending checks.

Non-blocking:

• page-layer-2-network-maturity-intro is a new t.rich key replacing -component-1..6; it's English-only until the intl-pipeline propagates and cleans up the removed keys in the 24 other locales (author flagged this in the test plan). Let the pipeline handle it — don't hand-propagate.
• Maturity cells use literal text-white/text-black on the blue-* bands rather than semantic tokens — acceptable for fixed-color badges.
• Purely visual correctness (spacing, image sizing, light/dark) rides on the Chromatic full-page pass, which the author correctly names as the gate.

Labels: removed stale translation 🌍 (no non-en files changed); kept content 🖋️ (English copy edits); added needs design approval 🧑🎨 for the full-page visual review.

Generated by PR Reviewer (team) for #18817 · 150.2 AIC · ⌖ 24.5 AIC · ⊞ 5.2K · ◷