feat(web): "what is claudemesh?" explainer + architecture diagram

Fixes the "chatbot integration" misread of the landing page by framing
claudemesh as a mesh-not-a-bridge above the gateways section.

- Mental shift (before/after): one Claude per project → mesh of Claudes,
  mesh-as-substrate with surfaces tapping in
- Three concrete use cases with honest limits: solo multi-machine,
  cross-repo team (Alice's Stripe fix / Bob rediscovers), mobile 3am
  oversight via WhatsApp gateway
- Inline SVG architecture diagram: broker at center ("routes only · never
  decrypts"), six peers hexagon-orbiting with ciphertext edges
- Anti-framing "what claudemesh is NOT" list to kill misreads
- Italic pull-quote closer with the honest one-liner

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/web/src/app/[locale]/(marketing)/page.tsx

@@ -5,6 +5,7 @@ import { LaptopToLaptop } from "~/modules/marketing/home/laptop-to-laptop";
 import { Features } from "~/modules/marketing/home/features";
 import { MeetsYou } from "~/modules/marketing/home/meets-you";
 import { BeyondTerminal } from "~/modules/marketing/home/beyond-terminal";
+import { WhatIsClaudemesh } from "~/modules/marketing/home/what-is-claudemesh";
 import { FAQ } from "~/modules/marketing/home/faq";
 import { CallToAction } from "~/modules/marketing/home/cta";
 import { LatestNewsToaster } from "~/modules/marketing/home/toaster";
@@ -21,6 +22,7 @@ const HomePage = () => {
       <LaptopToLaptop />
       <Features />
       <MeetsYou />
+      <WhatIsClaudemesh />
       <BeyondTerminal />
       <FAQ />
       <CallToAction />

apps/web/src/modules/marketing/home/what-is-claudemesh.tsx

@@ -0,0 +1,469 @@
+import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal";
+
+/**
+ * Architecture diagram — broker in the center, peers orbiting,
+ * ciphertext on every edge. No single peer is "the client."
+ */
+const MeshDiagram = () => {
+  const CX = 400;
+  const CY = 260;
+  const R = 170;
+
+  const peers: Array<{
+    angle: number;
+    label: string;
+    sub: string;
+    icon: React.ReactNode;
+  }> = [
+    {
+      angle: -90,
+      label: "your terminal",
+      sub: "claude code · repo A",
+      icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
+    },
+    {
+      angle: -30,
+      label: "teammate's claude",
+      sub: "claude code · repo B",
+      icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
+    },
+    {
+      angle: 30,
+      label: "phone peer",
+      sub: "ios · same keypair",
+      icon: (
+        <>
+          <rect x="7" y="3" width="10" height="18" rx="2" />
+          <circle cx="12" cy="18" r="0.8" fill="currentColor" />
+        </>
+      ),
+    },
+    {
+      angle: 90,
+      label: "whatsapp gateway",
+      sub: "bot · signs as a peer",
+      icon: (
+        <path
+          d="M12 2a10 10 0 00-8.6 15.1L2 22l5-1.4A10 10 0 1012 2z"
+          strokeLinejoin="round"
+        />
+      ),
+    },
+    {
+      angle: 150,
+      label: "slack peer",
+      sub: "workspace · channel routes",
+      icon: (
+        <>
+          <rect x="3" y="10" width="6" height="2" rx="1" />
+          <rect x="15" y="12" width="6" height="2" rx="1" />
+          <rect x="10" y="3" width="2" height="6" rx="1" />
+          <rect x="12" y="15" width="2" height="6" rx="1" />
+        </>
+      ),
+    },
+    {
+      angle: -150,
+      label: "another laptop",
+      sub: "claude code · repo C",
+      icon: <path d="M4 6l4 4-4 4M12 16h8" strokeLinecap="round" />,
+    },
+  ];
+
+  const toXY = (angle: number) => {
+    const rad = (angle * Math.PI) / 180;
+    return { x: CX + R * Math.cos(rad), y: CY + R * Math.sin(rad) };
+  };
+
+  return (
+    <div className="relative mx-auto max-w-4xl">
+      <svg
+        viewBox="0 0 800 520"
+        className="h-auto w-full"
+        role="img"
+        aria-label="claudemesh architecture: broker at center, peers orbiting, all traffic end-to-end encrypted"
+      >
+        {peers.map((p, i) => {
+          const { x, y } = toXY(p.angle);
+          return (
+            <line
+              key={`line-${i}`}
+              x1={CX}
+              y1={CY}
+              x2={x}
+              y2={y}
+              stroke="var(--cm-clay)"
+              strokeOpacity="0.35"
+              strokeWidth="1"
+              strokeDasharray="4 4"
+            />
+          );
+        })}
+
+        <g>
+          {(() => {
+            const { x, y } = toXY(-30);
+            const mx = (CX + x) / 2 + 16;
+            const my = (CY + y) / 2 - 8;
+            return (
+              <text
+                x={mx}
+                y={my}
+                fill="var(--cm-fg-tertiary)"
+                fontSize="10"
+                fontFamily="var(--cm-font-mono)"
+                letterSpacing="0.1em"
+              >
+                CIPHERTEXT
+              </text>
+            );
+          })()}
+        </g>
+
+        {peers.map((p, i) => {
+          const { x, y } = toXY(p.angle);
+          const labelAbove = p.angle < 0;
+          const ty = labelAbove ? y - 56 : y + 56;
+          const subTy = labelAbove ? y - 42 : y + 70;
+          return (
+            <g key={`peer-${i}`}>
+              <circle
+                cx={x}
+                cy={y}
+                r="28"
+                fill="var(--cm-bg)"
+                stroke="var(--cm-clay)"
+                strokeOpacity="0.55"
+                strokeWidth="1"
+              />
+              <g
+                transform={`translate(${x - 12}, ${y - 12})`}
+                stroke="var(--cm-clay)"
+                strokeWidth="1.4"
+                fill="none"
+              >
+                {p.icon}
+              </g>
+              <text
+                x={x}
+                y={ty}
+                textAnchor="middle"
+                fill="var(--cm-fg)"
+                fontSize="12"
+                fontFamily="var(--cm-font-sans)"
+              >
+                {p.label}
+              </text>
+              <text
+                x={x}
+                y={subTy}
+                textAnchor="middle"
+                fill="var(--cm-fg-tertiary)"
+                fontSize="10"
+                fontFamily="var(--cm-font-mono)"
+                letterSpacing="0.05em"
+              >
+                {p.sub}
+              </text>
+            </g>
+          );
+        })}
+
+        <g>
+          <rect
+            x={CX - 78}
+            y={CY - 32}
+            width="156"
+            height="64"
+            rx="6"
+            fill="var(--cm-bg-elevated)"
+            stroke="var(--cm-clay)"
+            strokeWidth="1.2"
+          />
+          <text
+            x={CX}
+            y={CY - 8}
+            textAnchor="middle"
+            fill="var(--cm-fg)"
+            fontSize="14"
+            fontFamily="var(--cm-font-sans)"
+            fontWeight="500"
+          >
+            broker
+          </text>
+          <text
+            x={CX}
+            y={CY + 10}
+            textAnchor="middle"
+            fill="var(--cm-clay)"
+            fontSize="10"
+            fontFamily="var(--cm-font-mono)"
+            letterSpacing="0.08em"
+          >
+            routes only
+          </text>
+          <text
+            x={CX}
+            y={CY + 24}
+            textAnchor="middle"
+            fill="var(--cm-fg-tertiary)"
+            fontSize="9"
+            fontFamily="var(--cm-font-mono)"
+            letterSpacing="0.08em"
+          >
+            never decrypts
+          </text>
+        </g>
+      </svg>
+    </div>
+  );
+};
+
+type UseCase = {
+  tag: string;
+  title: string;
+  before: string;
+  now: string;
+  limits: string;
+};
+
+const USE_CASES: UseCase[] = [
+  {
+    tag: "solo · multi-machine",
+    title: "One dev, three machines",
+    before:
+      "Laptop, desktop, cloud dev box — each Claude session an island. You re-explain what you're doing every time you switch machines.",
+    now: "Your desktop's Claude asks your laptop's Claude what it was touching. Context travels with you. The machine stops mattering.",
+    limits:
+      "Both peers have to be online. It shares live conversational context — not git state, not open files.",
+  },
+  {
+    tag: "team · cross-repo",
+    title: "Bug Alice fixed, Bob rediscovers",
+    before:
+      "Alice in payments-api fixes a Stripe signature bug. Two weeks later, Bob in checkout-frontend hits the same thing. Alice's fix is buried in a PR thread. Bob re-solves it for three hours.",
+    now: "Bob's Claude asks the mesh: who's seen this? Alice's Claude self-nominates with context. Bob solves in ten minutes. Alice isn't interrupted — her Claude surfaces the history on its own.",
+    limits:
+      "Each Claude stays inside its own repo. Nobody's reading anyone else's files. Information flows at the agent layer, with a human still on the PR.",
+  },
+  {
+    tag: "mobile · oversight",
+    title: "CI fails at 3am",
+    before:
+      "Alert on your phone. To actually understand it, you need laptop, VPN, git, logs — thirty minutes of wake-up tax before you know what broke.",
+    now: "WhatsApp gateway peer forwards the alert. You ask the ops-server Claude what triggered it. It answers. You say roll it back. Done from bed.",
+    limits:
+      "The WhatsApp/phone gateway is on the v0.2 roadmap — the protocol is ready, the bot isn't shipped yet. Someone could build it in a weekend.",
+  },
+];
+
+const NOT_ITEMS = [
+  "a chatbot you talk to",
+  "a replacement for docs, PRs, or Slack",
+  "a central AI brain",
+  '"access Claude from Telegram"',
+  "auto-magic · peers only surface info when asked",
+];
+
+export const WhatIsClaudemesh = () => {
+  return (
+    <section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-32 md:px-12">
+      <div className="mx-auto max-w-[var(--cm-max-w)]">
+        <Reveal className="mb-6 flex justify-center">
+          <SectionIcon glyph="mesh" />
+        </Reveal>
+        <Reveal delay={1}>
+          <div
+            className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            — what is claudemesh?
+          </div>
+        </Reveal>
+        <Reveal delay={2}>
+          <h2
+            className="mx-auto max-w-4xl text-center text-[clamp(2rem,4.5vw,3.25rem)] font-medium leading-[1.1] text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            A mesh of Claudes.{" "}
+            <span className="italic text-[var(--cm-clay)]">
+              Not one you talk to.
+            </span>
+          </h2>
+        </Reveal>
+
+        {/* Mental shift: before / after */}
+        <Reveal delay={3}>
+          <div className="mx-auto mt-16 grid max-w-4xl gap-px overflow-hidden rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-border)] md:grid-cols-2">
+            <div className="bg-[var(--cm-bg-elevated)] p-8">
+              <div
+                className="mb-3 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
+                style={{ fontFamily: "var(--cm-font-mono)" }}
+              >
+                before
+              </div>
+              <p
+                className="text-[16px] leading-[1.65] text-[var(--cm-fg-secondary)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                One Claude per project. Each is an island. Context dies when
+                you close the terminal. Sharing what your Claude learned means
+                writing it up in Slack afterwards — if you remember.
+              </p>
+            </div>
+            <div className="bg-[var(--cm-bg-elevated)] p-8">
+              <div
+                className="mb-3 text-[10px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+                style={{ fontFamily: "var(--cm-font-mono)" }}
+              >
+                with the mesh
+              </div>
+              <p
+                className="text-[16px] leading-[1.65] text-[var(--cm-fg)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                A mesh of Claudes. Each keeps its own repo, memory, history.
+                They reference each other on demand. Your identity travels
+                across surfaces. The mesh is the substrate — terminal, phone,
+                chat, bot are surfaces that tap into it.
+              </p>
+            </div>
+          </div>
+        </Reveal>
+
+        {/* Use cases */}
+        <Reveal delay={4} className="mt-24 text-center">
+          <div
+            className="mb-3 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            — what it actually does
+          </div>
+          <h3
+            className="mx-auto max-w-2xl text-[clamp(1.5rem,2.8vw,2rem)] font-medium leading-[1.2] text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            Three scenarios, with the honest limits.
+          </h3>
+        </Reveal>
+
+        <RevealStagger className="mx-auto mt-14 grid max-w-6xl gap-6 md:grid-cols-3">
+          {USE_CASES.map((u) => (
+            <StaggerItem
+              key={u.title}
+              className="flex flex-col gap-5 rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-7"
+            >
+              <div
+                className="text-[10px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+                style={{ fontFamily: "var(--cm-font-mono)" }}
+              >
+                {u.tag}
+              </div>
+              <h4
+                className="text-[1.25rem] font-medium leading-snug text-[var(--cm-fg)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                {u.title}
+              </h4>
+              <div className="flex flex-col gap-4 border-t border-[var(--cm-border)] pt-5">
+                <div>
+                  <div
+                    className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
+                    style={{ fontFamily: "var(--cm-font-mono)" }}
+                  >
+                    before
+                  </div>
+                  <p
+                    className="text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
+                    style={{ fontFamily: "var(--cm-font-serif)" }}
+                  >
+                    {u.before}
+                  </p>
+                </div>
+                <div>
+                  <div
+                    className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+                    style={{ fontFamily: "var(--cm-font-mono)" }}
+                  >
+                    now
+                  </div>
+                  <p
+                    className="text-[13px] leading-[1.6] text-[var(--cm-fg)]"
+                    style={{ fontFamily: "var(--cm-font-serif)" }}
+                  >
+                    {u.now}
+                  </p>
+                </div>
+                <div>
+                  <div
+                    className="mb-1.5 text-[9px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
+                    style={{ fontFamily: "var(--cm-font-mono)" }}
+                  >
+                    honest limits
+                  </div>
+                  <p
+                    className="text-[12px] leading-[1.6] text-[var(--cm-fg-tertiary)]"
+                    style={{ fontFamily: "var(--cm-font-mono)" }}
+                  >
+                    {u.limits}
+                  </p>
+                </div>
+              </div>
+            </StaggerItem>
+          ))}
+        </RevealStagger>
+
+        {/* Architecture diagram */}
+        <Reveal delay={1} className="mt-28">
+          <div
+            className="mb-8 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            — the wire
+          </div>
+          <MeshDiagram />
+        </Reveal>
+
+        {/* What it's NOT */}
+        <Reveal delay={2} className="mx-auto mt-24 max-w-3xl">
+          <div
+            className="mb-5 text-center text-[11px] uppercase tracking-[0.22em] text-[var(--cm-fg-tertiary)]"
+            style={{ fontFamily: "var(--cm-font-mono)" }}
+          >
+            — what claudemesh is not
+          </div>
+          <ul className="flex flex-col gap-3">
+            {NOT_ITEMS.map((item) => (
+              <li
+                key={item}
+                className="flex items-start gap-3 border-b border-[var(--cm-border)] pb-3 text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)] last:border-b-0"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                <span
+                  className="mt-[3px] select-none text-[var(--cm-clay)]"
+                  style={{ fontFamily: "var(--cm-font-mono)" }}
+                >
+                  ✗
+                </span>
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </Reveal>
+
+        {/* One-liner closer */}
+        <Reveal delay={3} className="mx-auto mt-20 max-w-3xl">
+          <blockquote
+            className="border-l-2 border-[var(--cm-clay)] pl-6 text-[clamp(1.125rem,2vw,1.375rem)] italic leading-[1.55] text-[var(--cm-fg)]"
+            style={{ fontFamily: "var(--cm-font-serif)" }}
+          >
+            claudemesh adds a secure wire and a shared identity between the AI
+            sessions you already run. Your Claudes stay specialized — each
+            knows its own repo. The mesh lets them reference each other&apos;s
+            work when useful. The human coordinates once, instead of N times.
+          </blockquote>
+        </Reveal>
+      </div>
+    </section>
+  );
+};