From ebb63d2cb6c405bf41a2336eea408c22b86fe8ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alejandro=20Guti=C3=A9rrez?= <35082514+alezmad@users.noreply.github.com> Date: Sun, 5 Apr 2026 13:58:31 +0100 Subject: [PATCH] =?UTF-8?q?feat(web):=20landing=20page=20=E2=80=94=20cross?= =?UTF-8?q?-surface=20mesh=20vision=20("beyond=20your=20terminal")?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Strategic positioning upgrade. claudemesh was framed as terminal-to- terminal — which is only half the story. The broker is protocol- agnostic: any peer with an ed25519 keypair joins the mesh, so the mesh can reach WhatsApp bots, Telegram, iOS apps, Slack, email gateways, browser extensions. Terminal is ONE client, not THE client. New section at /#beyond: "Your mesh. Any surface." — 6 gateway cards (Terminal / WhatsApp / Telegram / iOS·Android / Slack / Email) with honest status badges: - shipping → Terminal only (what we have today) - on the roadmap → WhatsApp, Telegram, iOS/Android (we will build) - build it yourself → Slack, Email (open protocol, community territory) No overclaiming: we don't pretend WhatsApp is live. The honest framing is exactly the aspirational hook — the architecture is there, the hooks exist, someone could build a gateway peer today. Each card has a custom 28px inline SVG glyph in clay, short serif description, and a status chip. Grid staggers in with Motion. Footer CTA: "the protocol is open · ed25519 + libsodium · build a gateway for anything" + link to /#protocol on GitHub. Hero subhead reworked to hint at cross-surface: "Peer mesh for Claude — reachable from anywhere you are. … Terminal is one client, not THE client." Co-Authored-By: Claude Opus 4.6 (1M context) --- .../web/src/app/[locale]/(marketing)/page.tsx | 2 + .../marketing/home/beyond-terminal.tsx | 233 ++++++++++++++++++ apps/web/src/modules/marketing/home/hero.tsx | 5 +- 3 files changed, 238 insertions(+), 2 deletions(-) create mode 100644 apps/web/src/modules/marketing/home/beyond-terminal.tsx diff --git a/apps/web/src/app/[locale]/(marketing)/page.tsx b/apps/web/src/app/[locale]/(marketing)/page.tsx index af3898b..bf33cde 100644 --- a/apps/web/src/app/[locale]/(marketing)/page.tsx +++ b/apps/web/src/app/[locale]/(marketing)/page.tsx @@ -4,6 +4,7 @@ import { Pricing } from "~/modules/marketing/home/pricing"; 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 { FAQ } from "~/modules/marketing/home/faq"; import { CallToAction } from "~/modules/marketing/home/cta"; import { LatestNewsToaster } from "~/modules/marketing/home/toaster"; @@ -20,6 +21,7 @@ const HomePage = () => { + diff --git a/apps/web/src/modules/marketing/home/beyond-terminal.tsx b/apps/web/src/modules/marketing/home/beyond-terminal.tsx new file mode 100644 index 0000000..16bc569 --- /dev/null +++ b/apps/web/src/modules/marketing/home/beyond-terminal.tsx @@ -0,0 +1,233 @@ +import Link from "next/link"; +import { Reveal, RevealStagger, StaggerItem, SectionIcon } from "./_reveal"; + +type Status = "today" | "soon" | "build-it"; + +const STATUS_STYLES: Record = { + today: "border-[var(--cm-clay)]/50 bg-[var(--cm-clay)]/10 text-[var(--cm-clay)]", + soon: "border-[var(--cm-border)] text-[var(--cm-fg-secondary)]", + "build-it": + "border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] text-[var(--cm-fg-tertiary)]", +}; + +const STATUS_LABEL: Record = { + today: "shipping", + soon: "on the roadmap", + "build-it": "build it yourself", +}; + +const GATEWAYS: Array<{ + name: string; + glyph: React.ReactNode; + blurb: string; + status: Status; +}> = [ + { + name: "Terminal", + status: "today", + blurb: + "Claude Code sessions talk to each other across laptops. The original surface.", + glyph: ( + + + + + ), + }, + { + name: "WhatsApp", + status: "soon", + blurb: + "Message your Claude from the train. It answers through WhatsApp in the same chat — same mesh, same identity.", + glyph: ( + + + + + ), + }, + { + name: "Telegram", + status: "soon", + blurb: + "Route mesh events to a Telegram bot, reply back from any device signed into your account.", + glyph: ( + + + + + ), + }, + { + name: "iOS / Android", + status: "soon", + blurb: + "A thin peer app. Push notifications when your agents need you. Reply in a sentence.", + glyph: ( + + + + + ), + }, + { + name: "Slack", + status: "build-it", + blurb: + "A mesh peer in your Slack workspace. Direct-message #oncall, fan-out to a channel, thread replies.", + glyph: ( + + + + + + + + ), + }, + { + name: "Email", + status: "build-it", + blurb: + "Reply-to-channel gateway. Send an email to your mesh, the nearest agent picks it up and answers.", + glyph: ( + + + + + ), + }, +]; + +export const BeyondTerminal = () => { + return ( +
+
+ + + + +
+ — beyond your terminal +
+ + +

+ Your mesh.{" "} + Any surface. +

+ + +

+ Terminal is one client, not THE client. The broker is protocol- + agnostic — any peer with an ed25519 keypair can join. Your mesh + meets you where you already are. +

+ + + + {GATEWAYS.map((g) => ( + +
+
{g.glyph}
+ + {STATUS_LABEL[g.status]} + +
+

+ {g.name} +

+

+ {g.blurb} +

+ + ))} + + + +

+ the protocol is open · ed25519 + libsodium · build a gateway for{" "} + anything +

+ + Read the protocol spec → + + +
+
+ ); +}; diff --git a/apps/web/src/modules/marketing/home/hero.tsx b/apps/web/src/modules/marketing/home/hero.tsx index a5d8912..003e291 100644 --- a/apps/web/src/modules/marketing/home/hero.tsx +++ b/apps/web/src/modules/marketing/home/hero.tsx @@ -55,8 +55,9 @@ export const Hero = () => { className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl" style={{ fontFamily: "var(--cm-font-serif)" }} > - Connect every Claude Code session on your team into one live mesh. - Ship context, not screenshots. Self-host the broker. Own the wire. + Peer mesh for Claude — reachable from anywhere you are. Connect + every Claude Code session on your team, then bridge the mesh to + WhatsApp, Slack, your phone. Terminal is one client, not THE client. Free and open-source. Forever.