docs(upgrades): emulate the chain.base.org upgrades page on the Upgrades landing page

[youssefea]

What changed? Why?

Ports the Upgrades page on chain.base.org (source: base/ui, app/upgrades) onto the Upgrades tab landing page (base-chain/specs/upgrades/overview).

The landing page previously carried a hand-maintained "Base Upgrades" table with a static Status column that had to be edited every time an upgrade shipped. It now renders the same two views as chain.base.org:

• Grid — one card per upgrade (Denim, Cobalt, Beryl, Azul) with its summary, the upgrade illustration, Sepolia and Mainnet activation dates, and a View features link into that upgrade's spec pages.
• Timeline — planned upgrades under Upcoming, then dated activations grouped by month, newest first, each with a status pill, network, and change count.

Status is derived from each upgrade's per-network lifecycle at render time, matching the upstream data model: a confirmed timestamp resolves to Live or Scheduled, a bare estimate ("September 2026") reads as Planning. Nothing goes stale on an activation date.

The upstream OP Stack hardfork table and the configuration changelog pointer are unchanged. The page is mode: "wide" so the two-up card grid gets the same proportions as the source (888px content column vs. the source's max-w-5xl).

New files:

• docs/snippets/UpgradesOverview.jsx — the component
• docs/images/upgrades/{azul,beryl,cobalt,denim}-illo.svg — the upgrade illustrations, copied from base/ui's public/

Notes to reviewers

Two Mintlify constraints shaped the implementation and are documented in a header comment on the snippet:

1. Only the imported export is in scope in a snippet — module-level constants shared between two exports resolve to undefined at render. Data and helpers therefore live inside the component, and the Grid/Timeline toggle is the component's own state rather than two separate exports.
2. Mintlify rewrites Tailwind classes into a mint- prefixed subset, and utilities outside that subset silently no-op — bg-emerald-50 / text-emerald-700 rendered as an unstyled pill with inherited link-blue text. Styling goes through the CSS-token + <style> pattern the other demo snippets in docs/snippets/ already use, which also handles the three theme states (system, explicit light, explicit dark).

docs/llms.txt and docs/llms-full.txt were regenerated with node scripts/llms.js because the page description changed. The regeneration also picked up ~10 lines of unrelated drift from descriptions that changed on master without a regeneration.

How has it been tested?

Rendered against a local mint dev server and driven with Playwright:

• Grid and Timeline verified at 1600px in light and dark, and at 390px mobile — no console or page errors in any run.
• No horizontal overflow at any width (scrollWidth === clientWidth on the component; document does not exceed the viewport).
• Fixed three defects the render surfaced: status pills falling back to link-blue on the missing emerald palette, the docs .link underline running the full width of each timeline row, and the timeline rail sitting 12px left of the node centers.
• node scripts/validate-docs-structure.js — passes
• node scripts/lint-mdx.js docs/base-chain/specs/upgrades/overview.mdx — 0 errors, 0 warnings
• bash scripts/verify-doc-samples.sh — all verified samples pass

[mintlify]

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated (UTC)
base	🟢 Ready	View Preview	Aug 31, 2026, 5:14 PM

💡 Tip: Enable Workflows to automatically generate PRs for you.

[cb-heimdall]

🟡 Heimdall Review Status

Requirement	Status	More Info
Reviews	🟡 0/1	Denominator calculation Show calculation 1 if user is bot 0 1 if user is external 0 2 if repo is sensitive 0 From .codeflow.yml 1 Additional review requirements Show calculation Max 0 0 From CODEOWNERS 0 Global minimum 0 Max 1 1 1 if commit is unverified 0 Sum 1