diff --git a/apps/web/src/app/[locale]/(marketing)/page.tsx b/apps/web/src/app/[locale]/(marketing)/page.tsx index bf33cde..011010e 100644 --- a/apps/web/src/app/[locale]/(marketing)/page.tsx +++ b/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 = () => { + diff --git a/apps/web/src/modules/marketing/home/what-is-claudemesh.tsx b/apps/web/src/modules/marketing/home/what-is-claudemesh.tsx new file mode 100644 index 0000000..f01837e --- /dev/null +++ b/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: , + }, + { + angle: -30, + label: "teammate's claude", + sub: "claude code · repo B", + icon: , + }, + { + angle: 30, + label: "phone peer", + sub: "ios · same keypair", + icon: ( + <> + + + + ), + }, + { + angle: 90, + label: "whatsapp gateway", + sub: "bot · signs as a peer", + icon: ( + + ), + }, + { + angle: 150, + label: "slack peer", + sub: "workspace · channel routes", + icon: ( + <> + + + + + + ), + }, + { + angle: -150, + label: "another laptop", + sub: "claude code · repo C", + icon: , + }, + ]; + + const toXY = (angle: number) => { + const rad = (angle * Math.PI) / 180; + return { x: CX + R * Math.cos(rad), y: CY + R * Math.sin(rad) }; + }; + + return ( +
+ + {peers.map((p, i) => { + const { x, y } = toXY(p.angle); + return ( + + ); + })} + + + {(() => { + const { x, y } = toXY(-30); + const mx = (CX + x) / 2 + 16; + const my = (CY + y) / 2 - 8; + return ( + + CIPHERTEXT + + ); + })()} + + + {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 ( + + + + {p.icon} + + + {p.label} + + + {p.sub} + + + ); + })} + + + + + broker + + + routes only + + + never decrypts + + + +
+ ); +}; + +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 ( +
+
+ + + + +
+ — what is claudemesh? +
+ + +

+ A mesh of Claudes.{" "} + + Not one you talk to. + +

+ + + {/* Mental shift: before / after */} + +
+
+
+ before +
+

+ 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. +

+
+
+
+ with the mesh +
+

+ 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. +

+
+
+ + + {/* Use cases */} + +
+ — what it actually does +
+

+ Three scenarios, with the honest limits. +

+ + + + {USE_CASES.map((u) => ( + +
+ {u.tag} +
+

+ {u.title} +

+
+
+
+ before +
+

+ {u.before} +

+
+
+
+ now +
+

+ {u.now} +

+
+
+
+ honest limits +
+

+ {u.limits} +

+
+
+ + ))} + + + {/* Architecture diagram */} + +
+ — the wire +
+ + + + {/* What it's NOT */} + +
+ — what claudemesh is not +
+
    + {NOT_ITEMS.map((item) => ( +
  • + + ✗ + + {item} +
    • + ))} +
+ + + {/* One-liner closer */} + +
+ 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's + work when useful. The human coordinates once, instead of N times. +
+ +
+
+ ); +};