feat(stake): aplica o redesign na página /stake

O protótipo /stake/preview vira a página real. A rota de protótipo e o
design lab foram removidos; os componentes subiram para
src/components/stake/ e a spec para docs/design/.

Estrutura: hero centrado, e daí um card por seção — rider, taxas,
posições, prova social, subnet — empilhados no fundo da página. Não há
mais uma ilha única envolvendo tudo.

Light + dark: o chrome segue o tema do site (tokens em stake-ui.ts);
dourado como texto vira amber-700 no claro, onde #f7c948 é ilegível. A
arte (palco do rider, palco do orbit) fica dark fixa nos dois temas —
os cut-outs e o SVG são desenhados para fundo escuro.

Seletor: o CharacterSelector de produção continua sendo o picker. A
ficha de skills é coluna a partir de lg e painel sobre o rider abaixo
disso, onde a coluna só teria como empilhar embaixo da arte. Roster em
uma linha com scroll horizontal — sete riders nunca deixam um órfão sob
uma fileira cheia.

Orbit: passa a renderizar em qualquer largura (já tinha o braço mobile
pronto, faltava ligar) e abre centrado, em vez de na margem vazia.

r4to: cut-out novo com chroma key aplicado e clipe alpha. O clipe toca
no clique, uma vez, e congela no último frame — no palco e no nó do
orbit. Nome em minúsculo nos dois locales.

Milestones da subnet viram dados; os rótulos foram para o i18n, que
corrige uma lista inteira em inglês no meio da página pt-BR.

StakeAdminPanel sai da página pública (mostra um card de diagnóstico
para qualquer não-admin conectado) e ganha /stake/admin, noindex.

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

Author: r4topunk

docs/INDEX.md

@@ -15,6 +15,7 @@ This is the canonical entry point for project documentation. Everything below sh
 - `docs/architecture/exploration-progress.md`
 - `docs/architecture/refactor-audit.md`
 - `docs/i18n/tone-brief.md` — PT-BR translation tone brief
+- `docs/design/stake-visual-system.md` — /stake visual system: panel/row/accent tokens (`src/components/stake/stake-ui.ts`), section-header pattern, copy rules, page composition
 
 ## Features
 

…/components/stake/preview/DESIGN-SPEC.md docs/design/stake-visual-system.mdsrc/components/stake/preview/DESIGN-SPEC.md renamed to docs/design/stake-visual-system.md src/components/stake/preview/DESIGN-SPEC.md renamed to docs/design/stake-visual-system.md

@@ -1,14 +1,36 @@
-# /stake/preview — visual direction v3 (committed)
+# /stake — visual system
+
+> **Status: finalized 2026-08-07 and applied to the production `/stake` and
+> `/stake/[rider]` routes.** The `/stake/preview` prototype route is gone; the
+> tokens described below live in `src/components/stake/stake-ui.ts` and the page
+> is composed by `src/components/stake/StakePageContent.tsx`.
+>
+> Two decisions changed on the way in, and the sections below are read with them
+> in mind:
+>
+> - **The rider picker is the production `CharacterSelector`.** The prototype's
+>   `RiderSelect` fork was rejected, so the "RiderSelect" section at the end is
+>   history, not spec — the arcade stage, the stat meters and the roster grid all
+>   stayed.
+> - **Chrome follows the site theme.** Every `white/xx` alpha quoted below became
+>   a `foreground` / `muted-foreground` equivalent so the page reads in light mode
+>   too. The one committed-dark surface left is `ORBIT_STAGE`, the panel the orbit
+>   SVG is drawn on (it is artwork lit for a dark stage, like the rider cut-outs).
+>   Gold and Morpheus green ship as light/dark pairs (`GOLD_TEXT`, `MOR_TEXT`,
+>   `MOR_FILL`) because the bright values are unreadable on a light card.
+> - The message namespace is `stake.page.*` (it was `stake.preview.*`).
 
 Pass 3. Inputs: the triple visual evaluation (grades 6/5/5) and the owner's
 anti-slop taste rules. Everything here is decided; no toggles for these choices.
 
-## System tokens (preview-config.ts)
+## System tokens (stake-ui.ts)
 
-- `PANEL` = `rounded-2xl border border-white/[0.08] bg-white/[0.06]` — raised from
-  0.03: the site's own `--card` step is ~2× what we shipped.
-- Rows inside a panel: NO sub-cards. Transparent rows separated by ONE hairline
-  (`divide-y divide-white/[0.06]` on the container). Never border-t AND border-b.
+- `CARD` = `rounded-2xl border bg-card text-card-foreground shadow-sm` — one
+  section, one card, stacked on the page background. (Supersedes the prototype's
+  `PANEL` foreground-alpha recipe, which existed to step panels above a wrapping
+  island; the island is gone, so sections use the site's own card token.)
+- Rows inside a card: NO sub-cards. Transparent rows separated by ONE hairline
+  (`divide-y` on the container). Never border-t AND border-b.
 - `MUTED` `text-white/50`, `MICRO` `text-white/35` unchanged.
 - GOLD unchanged, still the only UI accent. **Color rule tightened:** every key
   number / earned yield renders gold; Morpheus green appears ONLY on the subnet
@@ -26,7 +48,7 @@ optional one-line desc (`text-sm text-white/50 max-w-prose`). The rhythm comes
 from consistency, not numbering. No uppercase-tracking eyebrows anywhere in
 preview files.
 
-## Copy rules (both locales, stake.preview.* namespace)
+## Copy rules (both locales, `stake.page.*` namespace)
 
 - **Zero em-dashes (`—`) and zero en-dash separators** in any user-visible
   preview string. Restructure with period, comma, colon or parentheses.
@@ -43,14 +65,17 @@ preview files.
     Builder subnet, which funds what the DAO ships. Your MOR stays yours and
     unlocks 7 days after you stake."
 
-## Page composition (StakePreview)
+## Page composition (StakePageContent)
 
 - Page container `max-w-6xl` (match the site shell); narrow measure only on
   paragraphs (`max-w-2xl`).
-- **h1 + hero paragraph live OUTSIDE the island**, so the page opens exactly like
-  Treasury/Auctions. The island starts at the rider section as an explicit stage:
-  `bg-white/[0.02] rounded-2xl ring-1 ring-white/[0.06] shadow-xl mx-0 px-4 py-8
-  sm:px-6` (all breakpoints rounded; no -mx bleeds).
+- **h1 + hero paragraph sit on the page background**, so the page opens exactly
+  like Treasury/Auctions. Below them, **every section is its own `CARD`** in a
+  `space-y-6` stack — the prototype's single wrapping island was replaced by
+  per-section cards at the owner's request (2026-08-07). The rates strip keeps
+  slimmer padding than the other cards so global rates weigh less than the
+  user's own money; PositionsHub and SubnetSection render their own cards
+  because they own their headers (PositionsHub self-suppresses).
 - Social proof: **orbit graph is desktop-only** (`hidden md:block`); below `md`
   render the ranked list (BackerList) instead. The `?orbit=list` param now only
   affects desktop.

messages/en/stake.json

@@ -3,7 +3,6 @@
   "subtitle": "Pick your rider",
   "intro": "Choose a character to represent you. Use the thumbnails, arrows, or arrow keys to switch.",
   "chooseLabel": "Choose your character",
-  "selected": "Selected",
   "selectedRider": "{name} is ready to drop in.",
   "stakeCta": "Stake with {name}",
   "stakeToast": "Staked with {name}",
@@ -21,6 +20,7 @@
   "disclaimer": "Your deposit stays yours and is withdrawable anytime. Rates vary; this isn't financial advice.",
   "prev": "Previous rider",
   "next": "Next rider",
+  "playClip": "Play {name}'s clip",
   "statusTitle": "Status",
   "ethStaking": "ETH staking",
   "usdcLending": "USDC lending",
@@ -46,7 +46,7 @@
       "tagline": "Frontend flow, backend grind."
     },
     "r4to": {
-      "name": "R4to",
+      "name": "r4to",
       "tagline": "Onchain from the first push."
     },
     "pamtech": {
@@ -226,14 +226,15 @@
     "claimHint": "To claim, open the reward box (bottom-right) once the MOR unlock date has passed — it bridges your MOR to Arbitrum and splits it to your wallet.",
     "powerLockNote": "A far-off MOR unlock means a longer power-lock was chosen at deposit (higher APR / power factor) — the MOR stays locked until that date."
   },
-  "preview": {
+  "page": {
     "hero": "Back a Gnars rider. Your deposit stays yours and keeps earning. You keep half the yield; the other half backs your rider and the treasury.",
-    "rider": {
-      "rosterLabel": "Rider roster",
-      "hint": "Use ← → to switch riders",
-      "position": "{current} / {total}"
-    },
     "ratesTitle": "Current rates",
+    "rateHelpLabel": "About the {asset} rate on {venue}",
+    "rateHelp": {
+      "morphoUsdc": "Annual rate, paid in USDC. No lock: withdraw whenever you want.",
+      "morpheusSteth": "Estimated annual rate, paid in MOR. Your stETH unlocks 7 days after you stake.",
+      "morpheusUsdc": "Estimated annual rate, paid in MOR. Your USDC unlocks 7 days after you stake."
+    },
     "ratesLoading": "loading rates…",
     "ratesNa": "n/a",
     "socialTitle": "Who is already backing",
@@ -246,7 +247,6 @@
     "positions": {
       "title": "Your positions",
       "desc": "Everything you have staked, and when you can touch it.",
-      "sampleData": "sample data",
       "backsSubnet": "backs the subnet",
       "unlocks": "unlocks {date}",
       "venue": {
@@ -270,7 +270,14 @@
       "desc": "This one pays you nothing. Staked MOR powers the Gnars Builder subnet, which funds what the DAO ships. Your MOR stays yours and unlocks 7 days after you stake.",
       "morStaked": "MOR staked",
       "goal": "goal {n, number}",
-      "cta": "Back the subnet"
+      "cta": "Back the subnet",
+      "milestones": {
+        "live": "Subnet live: Gnars is a Morpheus Builder",
+        "backers10": "First 10 backers on board",
+        "10k": "{n, number} MOR staked: featured stakers wall",
+        "50k": "{n, number} MOR staked: community drop",
+        "100k": "{n, number} MOR staked: IRL Gnars event"
+      }
     },
     "backers": {
       "loading": "loading the flow…",

messages/pt-br/stake.json

@@ -3,7 +3,6 @@
   "subtitle": "Escolha seu rider",
   "intro": "Escolha um personagem para te representar. Use as miniaturas, as setas ou as teclas de seta para alternar.",
   "chooseLabel": "Escolha seu personagem",
-  "selected": "Selecionado",
   "selectedRider": "{name} está pronto para descer.",
   "stakeCta": "Fazer stake com {name}",
   "stakeToast": "Stake feito com {name}",
@@ -21,6 +20,7 @@
   "disclaimer": "Seu depósito continua seu e pode ser sacado quando quiser. As taxas variam; isto não é aconselhamento financeiro.",
   "prev": "Rider anterior",
   "next": "Próximo rider",
+  "playClip": "Reproduzir o clipe de {name}",
   "statusTitle": "Status",
   "ethStaking": "Staking de ETH",
   "usdcLending": "Lending de USDC",
@@ -46,7 +46,7 @@
       "tagline": "Flow no frontend, ralação no backend."
     },
     "r4to": {
-      "name": "R4to",
+      "name": "r4to",
       "tagline": "Onchain desde o primeiro empurrão."
     },
     "pamtech": {
@@ -226,14 +226,15 @@
     "claimHint": "Pra sacar, abra a caixa de recompensa (canto inferior direito) depois que a data de unlock do MOR passar — ela leva o MOR pra Arbitrum e divide na sua carteira.",
     "powerLockNote": "Um unlock do MOR distante significa que um power-lock maior foi escolhido no depósito (APR / power factor mais alto) — o MOR fica travado até essa data."
   },
-  "preview": {
+  "page": {
     "hero": "Apoie um rider da Gnars. Seu depósito continua seu e rendendo. Metade do rendimento fica com você; a outra metade banca seu rider e o tesouro.",
-    "rider": {
-      "rosterLabel": "Elenco de riders",
-      "hint": "Use ← → pra trocar de rider",
-      "position": "{current} / {total}"
-    },
     "ratesTitle": "Taxas atuais",
+    "rateHelpLabel": "Sobre a taxa de {asset} na {venue}",
+    "rateHelp": {
+      "morphoUsdc": "Taxa anual, paga em USDC. Sem lock: saque quando quiser.",
+      "morpheusSteth": "Taxa anual estimada, paga em MOR. Seu stETH libera 7 dias depois do stake.",
+      "morpheusUsdc": "Taxa anual estimada, paga em MOR. Seu USDC libera 7 dias depois do stake."
+    },
     "ratesLoading": "carregando as taxas…",
     "ratesNa": "n/d",
     "socialTitle": "Quem já está apoiando",
@@ -246,7 +247,6 @@
     "positions": {
       "title": "Suas posições",
       "desc": "Tudo que você tem em stake, e quando dá pra mexer nisso.",
-      "sampleData": "dados de exemplo",
       "backsSubnet": "sustenta a subnet",
       "unlocks": "libera em {date}",
       "venue": {
@@ -270,7 +270,14 @@
       "desc": "Esse aqui não te paga nada. O MOR em stake sustenta a subnet Gnars Builder, que financia o que a DAO entrega. Seu MOR continua seu e libera 7 dias depois do stake.",
       "morStaked": "MOR em stake",
       "goal": "meta {n, number}",
-      "cta": "Apoiar a subnet"
+      "cta": "Apoiar a subnet",
+      "milestones": {
+        "live": "Subnet no ar: a Gnars virou Builder na Morpheus",
+        "backers10": "Primeiros 10 apoiadores a bordo",
+        "10k": "{n, number} MOR em stake: mural dos apoiadores",
+        "50k": "{n, number} MOR em stake: drop pra comunidade",
+        "100k": "{n, number} MOR em stake: evento Gnars presencial"
+      }
     },
     "backers": {
       "loading": "carregando o fluxo…",

public/stake/cutout/r4to.png

@@ -1,14 +1,10 @@
 import type { Metadata } from "next";
-import { notFound } from "next/navigation";
 import { getTranslations, setRequestLocale } from "next-intl/server";
-import { CharacterSelector } from "@/components/stake/CharacterSelector";
-import { StakeAdminPanel } from "@/components/stake/StakeAdminPanel";
-import { StakeOrbit } from "@/components/stake/StakeOrbit";
-import { MorLootbox } from "@/components/stake/MorLootbox";
-import { MorpheusStakeWidget } from "@/components/stake/MorpheusStakeWidget";
-import { RIDER_LIST, getRider } from "@/lib/gnars-vaults";
-import { STAKE_MINIAPP_EMBED_CONFIG } from "@/lib/miniapp-config";
+import { notFound } from "next/navigation";
+import { StakePageContent } from "@/components/stake/StakePageContent";
 import { BASE_URL } from "@/lib/config";
+import { getRider, RIDER_LIST, type RiderId } from "@/lib/gnars-vaults";
+import { STAKE_MINIAPP_EMBED_CONFIG } from "@/lib/miniapp-config";
 
 // Shareable per-rider entry point: /stake/vlad opens the roster on that rider,
 // so a supporter can link straight to the athlete they're backing.
@@ -58,7 +54,10 @@ export async function generateMetadata({
         button: {
           ...STAKE_MINIAPP_EMBED_CONFIG.button,
           title: `Stake with ${name}`,
-          action: { ...STAKE_MINIAPP_EMBED_CONFIG.button.action, url: `${BASE_URL}/stake/${rider}` },
+          action: {
+            ...STAKE_MINIAPP_EMBED_CONFIG.button.action,
+            url: `${BASE_URL}/stake/${rider}`,
+          },
         },
       }),
     },
@@ -74,25 +73,13 @@ export default async function StakeRiderPage({
   setRequestLocale(locale);
   if (!getRider(rider)) notFound();
 
-  const t = await getTranslations("stake");
-
   return (
     <div className="py-10">
-      <div className="mx-auto max-w-4xl space-y-8">
-        <div className="space-y-2 text-center">
-          <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
-            {t("subtitle")}
-          </p>
-          <h1 className="text-4xl font-black tracking-tight sm:text-5xl">{t("title")}</h1>
-          <p className="mx-auto max-w-xl text-muted-foreground">{t("intro")}</p>
-        </div>
-
-        <CharacterSelector initialRider={rider} />
-        <StakeOrbit />
-        <StakeAdminPanel />
+      {/* max-w-6xl matches the site shell (Treasury, Auctions). The narrow measure
+          that reading text needs is applied by the paragraphs themselves. */}
+      <div className="mx-auto max-w-6xl">
+        <StakePageContent initialRider={rider as RiderId} />
       </div>
-      <MorLootbox />
-      <MorpheusStakeWidget />
     </div>
   );
 }

public/stake/video/r4to.webm

@@ -0,0 +1,44 @@
+import type { Metadata } from "next";
+import { setRequestLocale } from "next-intl/server";
+import { StakeAdminPanel } from "@/components/stake/StakeAdminPanel";
+
+// Home for the sponsorship-vault deploy tool.
+//
+// It used to render at the bottom of /stake, which is now a public marketing +
+// staking surface — an owner tool (3 wallet txs and a Safe batch) does not belong
+// on it, and for a connected non-admin the panel prints a diagnostic card with
+// their own addresses. Taking it off that page left the only UI that can deploy a
+// rider's Morpho V2 vault unreachable, so it gets its own address instead: adding
+// a rider still has a path through the UI, and nobody lands here by accident.
+//
+// A static segment beats the sibling `[rider]` dynamic route, and no rider is
+// called "admin", so this steals nothing. The panel keeps its own isVaultAdmin
+// gate — this route is not an access control, just a place to stand.
+
+export const metadata: Metadata = {
+  title: "Sponsorship vaults",
+  robots: { index: false, follow: false },
+};
+
+export default async function StakeAdminPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  setRequestLocale(locale);
+
+  return (
+    <div className="py-10">
+      <div className="mx-auto max-w-3xl space-y-4">
+        {/* The panel renders nothing at all until a wallet is connected, so the
+            route needs one line of its own — otherwise an owner who lands here
+            signed out gets a blank page and cannot tell it from a broken one.
+            English like the panel it introduces: this whole tool is untranslated. */}
+        <header className="space-y-1">
+          <h1 className="text-2xl font-bold tracking-tight">Sponsorship vaults</h1>
+          <p className="text-sm text-muted-foreground">
+            Owner tool. Connect a SOPA Safe owner wallet to deploy a rider&apos;s vault.
+          </p>
+        </header>
+        <StakeAdminPanel />
+      </div>
+    </div>
+  );
+}

src/app/[locale]/stake/[rider]/page.tsx

@@ -1,11 +1,6 @@
 import type { Metadata } from "next";
 import { getTranslations, setRequestLocale } from "next-intl/server";
-import { CharacterSelector } from "@/components/stake/CharacterSelector";
-import { StakeAdminPanel } from "@/components/stake/StakeAdminPanel";
-import { StakeOrbit } from "@/components/stake/StakeOrbit";
-import { StakePositions } from "@/components/stake/StakePositions";
-import { MorLootbox } from "@/components/stake/MorLootbox";
-import { MorpheusStakeWidget } from "@/components/stake/MorpheusStakeWidget";
+import { StakePageContent } from "@/components/stake/StakePageContent";
 import { STAKE_MINIAPP_EMBED_CONFIG } from "@/lib/miniapp-config";
 
 export async function generateMetadata({
@@ -51,28 +46,13 @@ export default async function StakePage({ params }: { params: Promise<{ locale:
   const { locale } = await params;
   setRequestLocale(locale);
 
-  const t = await getTranslations("stake");
-
   return (
     <div className="py-10">
-      <div className="mx-auto max-w-4xl space-y-8">
-        <div className="space-y-2 text-center">
-          <p className="text-sm font-semibold uppercase tracking-widest text-muted-foreground">
-            {t("subtitle")}
-          </p>
-          <h1 className="text-4xl font-black tracking-tight sm:text-5xl">{t("title")}</h1>
-          <p className="mx-auto max-w-xl text-muted-foreground">{t("intro")}</p>
-        </div>
-
-        <div id="stake-start" className="scroll-mt-24">
-          <CharacterSelector />
-        </div>
-        <StakeOrbit />
-        <StakePositions />
-        <StakeAdminPanel />
+      {/* max-w-6xl matches the site shell (Treasury, Auctions). The narrow measure
+          that reading text needs is applied by the paragraphs themselves. */}
+      <div className="mx-auto max-w-6xl">
+        <StakePageContent />
       </div>
-      <MorLootbox />
-      <MorpheusStakeWidget />
     </div>
   );
 }