feat(pitch): crew speech balloons on /morpheus, live product embeds on /base

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

Author: sktbrd

messages/en/base.json

@@ -38,5 +38,7 @@
     "farcaster": "Farcaster mini-app integration — the auction and stake flows run inside the feed.",
     "mobile": "Mobile-first: every DAO feature works on a phone."
   },
-  "culture": "What Gnars brings to Base is an audience crypto doesn't reach on its own: skate, BMX, and surf culture, funding real riders and real videos through a DAO that actually executes onchain."
+  "culture": "What Gnars brings to Base is an audience crypto doesn't reach on its own: skate, BMX, and surf culture, funding real riders and real videos through a DAO that actually executes onchain.",
+  "liveTitle": "Don't take our word for it — this is the live product",
+  "liveDesc": "The sections below aren't screenshots. They're the same live components the site runs in production — auction, governance, swap, and rider staking."
 }

messages/en/stake.json

@@ -27,6 +27,13 @@
       "unlocked": "unlocked",
       "next": "next up",
       "upcoming": "on the ladder"
+    },
+    "crew": {
+      "title": "The crew breaks it down",
+      "vlad": "We run a Builder subnet on Morpheus. Stake MOR behind the crew — every coin funds what Gnars ships next on decentralized AI.",
+      "r4to": "Morpheus also powers the sponsorship vaults: back a rider on /stake with stETH or USDC and the yield lands in MOR — principal unlocks 7 days after your last stake.",
+      "yan": "The $gnars airdrop is locked. Every milestone the community stakes past unlocks the next bucket — early stakers set the pace.",
+      "pamtech": "And every milestone ships real Morpheus marketing from our side: the Gnars TV ad at 10k, edits, swag, IRL activations."
     }
   },
   "title": "Stake or Die",

messages/pt-br/base.json

@@ -38,5 +38,7 @@
     "farcaster": "Integração de mini-app do Farcaster — os fluxos de leilão e stake rodam dentro do feed.",
     "mobile": "Mobile-first: toda funcionalidade da DAO funciona no celular."
   },
-  "culture": "O que a Gnars traz pra Base é uma audiência que a cripto não alcança sozinha: a cultura do skate, BMX e surf, financiando riders e vídeos de verdade através de uma DAO que executa onchain de fato."
+  "culture": "O que a Gnars traz pra Base é uma audiência que a cripto não alcança sozinha: a cultura do skate, BMX e surf, financiando riders e vídeos de verdade através de uma DAO que executa onchain de fato.",
+  "liveTitle": "Não precisa acreditar — isto abaixo é o produto ao vivo",
+  "liveDesc": "As seções abaixo não são screenshots. São os mesmos componentes que o site roda em produção — leilão, governança, swap e staking de riders."
 }

messages/pt-br/stake.json

@@ -27,6 +27,13 @@
       "unlocked": "destravado",
       "next": "próximo",
       "upcoming": "na escada"
+    },
+    "crew": {
+      "title": "A crew explica",
+      "vlad": "A gente roda uma subnet Builder na Morpheus. Faça stake de MOR atrás da crew — cada moeda financia o que a Gnars entrega em IA descentralizada.",
+      "r4to": "A Morpheus também move os vaults de patrocínio: apoie um rider na /stake com stETH ou USDC e o rendimento chega em MOR — o principal libera 7 dias depois do último stake.",
+      "yan": "O airdrop de $gnars está travado. Cada marco que a comunidade cruza destrava o próximo bucket — quem staka cedo dita o ritmo.",
+      "pamtech": "E cada marco entrega marketing de verdade da Morpheus do nosso lado: o anúncio na Gnars TV aos 10 mil, edits, swag, ativações IRL."
     }
   },
   "title": "Stake or Die",

src/app/[locale]/base/page.tsx

@@ -1,6 +1,9 @@
 import type { Metadata } from "next";
 import { getTranslations, setRequestLocale } from "next-intl/server";
-import { BasePageContent } from "@/components/base/BasePageContent";
+import { BasePageContent, BaseUnderHood } from "@/components/base/BasePageContent";
+import { GovSection } from "@/components/newhome/GovSection";
+import { StakeSection } from "@/components/newhome/StakeSection";
+import { SwapSection } from "@/components/newhome/SwapSection";
 
 // The pitch page for Base ecosystem programs (Base Batches): everything Gnars
 // runs on Base, with links to the live surfaces. See BasePageContent.
@@ -46,6 +49,13 @@ export default async function BasePage({ params }: { params: Promise<{ locale: s
   return (
     <div className="py-10">
       <BasePageContent />
+      {/* The proof: live production sections, not screenshots. GovSection is
+          the daily auction + recent proposals + activity feed; SwapSection is
+          the working 0x swap widget; StakeSection is the rider roster. */}
+      <GovSection />
+      <SwapSection />
+      <StakeSection />
+      <BaseUnderHood />
     </div>
   );
 }

src/components/base/BasePageContent.tsx

@@ -85,6 +85,23 @@ export function BasePageContent() {
         </ul>
       </section>
 
+      {/* Handoff line into the LIVE embeds the page composes after this
+          component (GovSection, SwapSection, StakeSection — real production
+          sections, not screenshots). */}
+      <section className="pt-2 text-center">
+        <h2 className="text-2xl font-black tracking-tight sm:text-3xl">{t("liveTitle")}</h2>
+        <p className={`mx-auto mt-2 max-w-2xl text-sm ${MUTED}`}>{t("liveDesc")}</p>
+      </section>
+    </div>
+  );
+}
+
+/** The plumbing + culture pitch, rendered by the page AFTER the live embeds. */
+export function BaseUnderHood() {
+  const t = useTranslations("base");
+
+  return (
+    <div className="mx-auto w-full max-w-5xl px-4 sm:px-6">
       {/* The Base-native plumbing — the part reviewers actually ask about */}
       <section className={`${CARD} ${CARD_PAD}`}>
         <h2 className="text-lg font-bold tracking-tight">{t("underHoodTitle")}</h2>

src/components/stake/MorpheusPageContent.tsx

@@ -25,6 +25,7 @@ import {
   Shirt,
   Tv,
 } from "lucide-react";
+import { CHARACTERS } from "@/components/stake/CharacterSelector";
 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";
@@ -38,6 +39,11 @@ 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;
+// The four riders who narrate the page, one Morpheus topic each. Heads are
+// cropped from the /stake cut-outs with the roster's own face zoom data, so a
+// new cut-out automatically works here too.
+const CREW = ["vlad", "r4to", "yan", "pamtech"] as const;
+
 const RUNG_ICONS: Record<string, typeof Tv> = {
   "10k": Tv,
   "15k": Flag,
@@ -50,6 +56,7 @@ const RUNG_ICONS: Record<string, typeof Tv> = {
 export function MorpheusPageContent() {
   const t = useTranslations("stake.morpheusPage");
   const tSub = useTranslations("stake.page.subnet");
+  const tChar = useTranslations("stake.characters");
   const locale = useLocale();
   const [stakeOpen, setStakeOpen] = useState(false);
   const { totalStaked } = useGnarsSubnet();
@@ -181,6 +188,58 @@ export function MorpheusPageContent() {
         </ul>
       </section>
 
+      {/* The crew explains it, fighting-game style: rider heads from the /stake
+          cut-outs + speech balloons. This is also where the Morpheus-powered
+          SPONSORSHIP VAULTS get their mention — the subnet sections above are
+          about MOR, this bubble routes people to the rider side. */}
+      <section className={`${CARD} ${CARD_PAD} sm:p-8`}>
+        <h2 className="text-lg font-bold tracking-tight">{t("crew.title")}</h2>
+        <div className="mt-5 flex flex-col gap-5">
+          {CREW.map((id, i) => {
+            const c = CHARACTERS.find((x) => x.id === id);
+            if (!c) return null;
+            const flipped = i % 2 === 1;
+            return (
+              <div
+                key={id}
+                className={cn("flex items-start gap-3 sm:gap-4", flipped && "flex-row-reverse")}
+              >
+                <div className="flex w-16 shrink-0 flex-col items-center gap-1.5 sm:w-20">
+                  <div
+                    aria-hidden
+                    className={cn("h-16 w-16 rounded-full bg-muted ring-2 sm:h-20 sm:w-20", c.ring)}
+                    style={{
+                      backgroundImage: `url("${c.image}")`,
+                      backgroundSize: c.face.size,
+                      backgroundPosition: c.face.pos,
+                      backgroundRepeat: "no-repeat",
+                    }}
+                  />
+                  <span className="text-[10px] font-bold uppercase tracking-wider">
+                    {tChar(`${id}.name`)}
+                  </span>
+                </div>
+                <div
+                  className={cn(
+                    "relative max-w-xl rounded-2xl border border-border/60 bg-card px-4 py-3 text-sm leading-relaxed shadow-sm",
+                    flipped ? "mr-1.5" : "ml-1.5",
+                  )}
+                >
+                  <span
+                    aria-hidden
+                    className={cn(
+                      "absolute top-7 h-3 w-3 rotate-45 border-border/60 bg-card",
+                      flipped ? "-right-1.5 border-t border-r" : "-left-1.5 border-b border-l",
+                    )}
+                  />
+                  {t(`crew.${id}`)}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </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>