feat(morpheus): illustrated amplification ladder, flywheel icons, quieter permissionless line

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

Author: sktbrd

messages/en/stake.json

@@ -2,7 +2,7 @@
   "morpheusPage": {
     "eyebrow": "Gnars × Morpheus",
     "title": "Gnars builds on Morpheus",
-    "lede": "Gnars — the community-owned action-sports DAO — runs a Builder subnet on Morpheus, the decentralized AI network. Permissionlessly: no official deal, no gatekeeper, just Gnars building on an open protocol and bringing skate, BMX, and surf culture with it.",
+    "lede": "Gnars — the community-owned action-sports DAO — runs a Builder subnet on Morpheus, the decentralized AI network, building permissionlessly on the open protocol and bringing skate, BMX, and surf culture with it.",
     "ctaStake": "Stake MOR",
     "ctaFull": "Every way to stake",
     "how": {
@@ -19,6 +19,14 @@
       "f1": "Your principal stays yours — only your wallet can withdraw it, straight from the contract on Base.",
       "f2": "Withdrawals unlock 7 days after your last deposit — each new deposit restarts the lock on your whole position.",
       "f3": "Rewards accrue to the subnet — you're backing the builder, not farming yield."
+    },
+    "amp": {
+      "title": "The amplification ladder",
+      "desc": "Milestones aren't just airdrop buckets. Every rung the community climbs, Gnars puts its own media and its own crew behind Morpheus — real reach, shipped by the DAO itself.",
+      "liveChip": "{n, number} MOR staked so far",
+      "unlocked": "unlocked",
+      "next": "next up",
+      "upcoming": "on the ladder"
     }
   },
   "title": "Stake or Die",

messages/pt-br/stake.json

@@ -2,7 +2,7 @@
   "morpheusPage": {
     "eyebrow": "Gnars × Morpheus",
     "title": "A Gnars constrói na Morpheus",
-    "lede": "A Gnars — DAO de esportes de ação de propriedade da comunidade — roda uma subnet Builder na Morpheus, a rede de IA descentralizada. De forma permissionless: sem acordo oficial, sem gatekeeper, só a Gnars construindo sobre um protocolo aberto e levando junto a cultura do skate, BMX e surf.",
+    "lede": "A Gnars — DAO de esportes de ação de propriedade da comunidade — roda uma subnet Builder na Morpheus, a rede de IA descentralizada, construindo de forma permissionless sobre o protocolo aberto e levando junto a cultura do skate, BMX e surf.",
     "ctaStake": "Fazer stake de MOR",
     "ctaFull": "Todas as formas de stake",
     "how": {
@@ -19,6 +19,14 @@
       "f1": "Seu principal continua seu — só a sua carteira consegue sacar, direto do contrato na Base.",
       "f2": "O saque destrava 7 dias depois do último depósito — cada depósito novo reinicia o lock da posição inteira.",
       "f3": "As recompensas vão para a subnet — você está apoiando o builder, não farmando yield."
+    },
+    "amp": {
+      "title": "A escada de amplificação",
+      "desc": "Os marcos não são só buckets de airdrop. A cada degrau que a comunidade sobe, a Gnars coloca a própria mídia e a própria crew atrás da Morpheus — alcance de verdade, entregue pela própria DAO.",
+      "liveChip": "{n, number} MOR em stake até agora",
+      "unlocked": "destravado",
+      "next": "próximo",
+      "upcoming": "na escada"
     }
   },
   "title": "Stake or Die",

src/components/stake/MorpheusPageContent.tsx

@@ -12,18 +12,48 @@
 // wallet, 7-day lock counted from the LAST deposit, rewards accrue to the
 // subnet. Don't add a claim here without reading the contract first.
 import { useState } from "react";
-import { useTranslations } from "next-intl";
+import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
+import {
+  Clapperboard,
+  Flag,
+  Gift,
+  HandCoins,
+  MapPin,
+  Megaphone,
+  Rocket,
+  Shirt,
+  Tv,
+} from "lucide-react";
 import { GnarsStakeDialog } from "@/components/stake/GnarsStakeDialog";
 import { RoadmapSection } from "@/components/stake/RoadmapSection";
 import { CARD, CARD_PAD, GOLD, GOLD_CTA, GOLD_INK, MUTED } from "@/components/stake/stake-ui";
 import { SubnetSection } from "@/components/stake/SubnetSection";
 import { Button } from "@/components/ui/button";
+import { useGnarsSubnet } from "@/hooks/use-gnars-subnet";
 import { Link } from "@/i18n/navigation";
+import { isMilestoneDone, nextMilestone, SUBNET_MILESTONES } from "@/lib/stake-milestones";
+import { cn } from "@/lib/utils";
+
+// One icon per flywheel step and per milestone rung. Data-keyed (not positional)
+// so a ladder edit in stake-milestones.ts can't silently shift every icon.
+const STEP_ICONS = { step1: HandCoins, step2: Gift, step3: Megaphone } as const;
+const RUNG_ICONS: Record<string, typeof Tv> = {
+  "10k": Tv,
+  "15k": Flag,
+  "25k": Clapperboard,
+  "30k": Shirt,
+  "50k": MapPin,
+  "100k": Rocket,
+};
 
 export function MorpheusPageContent() {
   const t = useTranslations("stake.morpheusPage");
+  const tSub = useTranslations("stake.page.subnet");
+  const locale = useLocale();
   const [stakeOpen, setStakeOpen] = useState(false);
+  const { totalStaked } = useGnarsSubnet();
+  const next = nextMilestone(totalStaked);
 
   const steps = ["step1", "step2", "step3"] as const;
   const facts = ["f1", "f2", "f3"] as const;
@@ -64,18 +94,93 @@ export function MorpheusPageContent() {
       <section className={`${CARD} ${CARD_PAD}`}>
         <h2 className="text-lg font-bold tracking-tight">{t("how.title")}</h2>
         <ol className="mt-4 grid gap-4 sm:grid-cols-3">
-          {steps.map((s, i) => (
-            <li key={s} className="rounded-xl border border-border/60 bg-background/40 p-4">
-              <div className="flex h-6 w-6 items-center justify-center rounded-full bg-foreground text-xs font-bold text-background">
-                {i + 1}
-              </div>
-              <div className="mt-2.5 text-sm font-semibold">{t(`how.${s}t`)}</div>
-              <p className={`mt-1 text-xs leading-relaxed ${MUTED}`}>{t(`how.${s}d`)}</p>
-            </li>
-          ))}
+          {steps.map((s) => {
+            const Icon = STEP_ICONS[s];
+            return (
+              <li key={s} className="rounded-xl border border-border/60 bg-background/40 p-4">
+                <div className="flex h-9 w-9 items-center justify-center rounded-full bg-foreground text-background">
+                  <Icon className="h-4.5 w-4.5" aria-hidden />
+                </div>
+                <div className="mt-2.5 text-sm font-semibold">{t(`how.${s}t`)}</div>
+                <p className={`mt-1 text-xs leading-relaxed ${MUTED}`}>{t(`how.${s}d`)}</p>
+              </li>
+            );
+          })}
         </ol>
       </section>
 
+      {/* The amplification ladder, illustrated — the marketing Gnars ships for
+          Morpheus at each rung, with live unlock state. Morpheus green is the
+          accent on purpose: this page is the Morpheus page. */}
+      <section className={`${CARD} ${CARD_PAD} sm:p-8`}>
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <h2 className="text-lg font-bold tracking-tight">{t("amp.title")}</h2>
+          <span className="rounded-full bg-emerald-500/15 px-3 py-1 text-xs font-semibold text-emerald-600 dark:text-emerald-300">
+            {t("amp.liveChip", { n: Math.floor(totalStaked) })}
+          </span>
+        </div>
+        <p className={`mt-1.5 max-w-2xl text-sm ${MUTED}`}>{t("amp.desc")}</p>
+        <ul className="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {SUBNET_MILESTONES.map((m) => {
+            const done = isMilestoneDone(m, totalStaked);
+            const isNext = next?.id === m.id;
+            const Icon = RUNG_ICONS[m.id] ?? Rocket;
+            return (
+              <li
+                key={m.id}
+                className={cn(
+                  "rounded-2xl border p-4 transition-colors",
+                  done &&
+                    "border-emerald-500/40 bg-gradient-to-br from-emerald-500/[0.12] to-transparent",
+                  isNext &&
+                    "border-amber-500/50 bg-gradient-to-br from-amber-500/[0.08] to-transparent",
+                  !done && !isNext && "border-border/60 bg-background/40",
+                )}
+              >
+                <div className="flex items-center justify-between">
+                  <span
+                    className={cn(
+                      "flex h-10 w-10 items-center justify-center rounded-xl",
+                      done
+                        ? "bg-emerald-500 text-white"
+                        : isNext
+                          ? "bg-amber-500/90 text-white"
+                          : "border border-border text-muted-foreground",
+                    )}
+                  >
+                    <Icon className="h-5 w-5" aria-hidden />
+                  </span>
+                  <span
+                    className={cn(
+                      "rounded-full px-2 py-0.5 text-[10px] font-bold uppercase tracking-wider",
+                      done
+                        ? "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300"
+                        : isNext
+                          ? "bg-amber-500/15 text-amber-600 dark:text-amber-300"
+                          : "text-muted-foreground",
+                    )}
+                  >
+                    {done ? t("amp.unlocked") : isNext ? t("amp.next") : t("amp.upcoming")}
+                  </span>
+                </div>
+                <div className="mt-3 text-xl font-black tabular-nums">
+                  {m.amountMor.toLocaleString(locale)}{" "}
+                  <span className="text-xs font-medium text-muted-foreground">MOR</span>
+                </div>
+                <div className="mt-1 text-sm font-medium leading-snug">
+                  {tSub(`milestones.${m.id}`)}
+                </div>
+                <div
+                  className={`mt-1.5 text-[10px] font-semibold uppercase tracking-wider ${MUTED}`}
+                >
+                  {tSub(`firmness.${m.firmness}`)}
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      </section>
+
       {/* Custody facts — every line verified against the contract */}
       <section className={`${CARD} ${CARD_PAD}`}>
         <h2 className="text-lg font-bold tracking-tight">{t("facts.title")}</h2>
@@ -89,7 +194,7 @@ export function MorpheusPageContent() {
       </section>
 
       {/* Live ladder + stake CTA, and the four phases — the production sections */}
-      <SubnetSection />
+      <SubnetSection showChecklist={false} />
       <RoadmapSection />
 
       <GnarsStakeDialog open={stakeOpen} onOpenChange={setStakeOpen} />

src/components/stake/SubnetSection.tsx

@@ -63,7 +63,7 @@ import { cn } from "@/lib/utils";
 const fmtMor = (n: number, locale: string) =>
   n.toLocaleString(locale, { maximumFractionDigits: 0 });
 
-export function SubnetSection() {
+export function SubnetSection({ showChecklist = true }: { showChecklist?: boolean } = {}) {
   const t = useTranslations("stake.page.subnet");
   const locale = useLocale();
   const { address: you } = useUserAddress();
@@ -186,44 +186,51 @@ export function SubnetSection() {
 
         {/* The ladder needs naming and framing before it is read: without these
             two lines it looks like a reward schedule, which is the other axis
-            entirely and the one the stake dialog's disclaimer contradicts. */}
-        <h3 className="mt-6 text-sm font-semibold">{t("milestonesTitle")}</h3>
-        <p className={cn("mt-1 max-w-prose text-xs", MUTED)}>{t("milestonesNote")}</p>
+            entirely and the one the stake dialog's disclaimer contradicts.
+            /morpheus passes showChecklist={false}: its illustrated ladder card
+            carries the same milestones, and printing them twice on one page
+            reads as filler. */}
+        {showChecklist ? (
+          <>
+            <h3 className="mt-6 text-sm font-semibold">{t("milestonesTitle")}</h3>
+            <p className={cn("mt-1 max-w-prose text-xs", MUTED)}>{t("milestonesNote")}</p>
 
-        <ul className="mt-3 space-y-2">
-          {SUBNET_MILESTONES.map((m) => {
-            const done = isMilestoneDone(m, totalStaked);
-            return (
-              <li key={m.id} className="flex items-start gap-2.5 text-sm">
-                {/* Filled = reached, hollow = pending. Colourless on purpose: green
+            <ul className="mt-3 space-y-2">
+              {SUBNET_MILESTONES.map((m) => {
+                const done = isMilestoneDone(m, totalStaked);
+                return (
+                  <li key={m.id} className="flex items-start gap-2.5 text-sm">
+                    {/* Filled = reached, hollow = pending. Colourless on purpose: green
                     is spent on the bar and the total, and a green tick here would
                     make three different greens argue inside one panel. */}
-                <span
-                  aria-hidden
-                  className={cn(
-                    "mt-1.5 size-1.5 shrink-0 rounded-full",
-                    done ? "bg-foreground/70" : "border border-foreground/30",
-                  )}
-                />
-                <span className={done ? "" : MUTED}>
-                  {t("milestoneRow", { n: m.amountMor, what: t(`milestones.${m.id}`) })}{" "}
-                  {/* Inline rather than a right-aligned column: these labels are
+                    <span
+                      aria-hidden
+                      className={cn(
+                        "mt-1.5 size-1.5 shrink-0 rounded-full",
+                        done ? "bg-foreground/70" : "border border-foreground/30",
+                      )}
+                    />
+                    <span className={done ? "" : MUTED}>
+                      {t("milestoneRow", { n: m.amountMor, what: t(`milestones.${m.id}`) })}{" "}
+                      {/* Inline rather than a right-aligned column: these labels are
                       long enough to wrap on a phone, and a pinned column would
                       squeeze them to two words a line. Not a PILL either — a pill
                       is a badge about the page, never the state a row is in. */}
-                  <span
-                    className={cn(
-                      "whitespace-nowrap text-[10px] font-semibold tracking-wide uppercase",
-                      MICRO,
-                    )}
-                  >
-                    · {t(`firmness.${m.firmness}`)}
-                  </span>
-                </span>
-              </li>
-            );
-          })}
-        </ul>
+                      <span
+                        className={cn(
+                          "whitespace-nowrap text-[10px] font-semibold tracking-wide uppercase",
+                          MICRO,
+                        )}
+                      >
+                        · {t(`firmness.${m.firmness}`)}
+                      </span>
+                    </span>
+                  </li>
+                );
+              })}
+            </ul>
+          </>
+        ) : null}
 
         <Button
           className={cn(GOLD_CTA, "mt-6 w-full sm:w-auto")}