feat(web): rewrite landing for v0.3 product (groups, state, memory)

Hero: sessions form a team with groups, state, memory — not just
messaging. Features: 4 tabs with real CLI code (groups, state,
memory, coordination patterns). Use cases: team sprint with 5
agents, new-hire knowledge transfer via recall(), deploy-frozen
via shared state. All match the shipped spec (v0.3.0).

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

apps/web/src/modules/marketing/home/features.tsx

@@ -4,27 +4,46 @@ import { Reveal, SectionIcon } from "./_reveal";
 
 const FEATURES = [
   {
-    key: "onboard",
-    tab: "Onboarding",
-    title: "Bootstrap any teammate",
-    body: "New hire's Claude inherits the team's context library on day one. No hand-holding, no week-long repo tour.",
+    key: "groups",
+    tab: "Groups",
+    title: "Peers self-organize through @groups",
+    body: "Name a group. Assign roles. Route messages to @frontend, @reviewers, or @all. The lead gathers; members contribute. No hardcoded pipelines — conventions in system prompts.",
+    code: `claudemesh launch --name Alice --role dev \\
+  --groups "frontend:lead,reviewers" -y`,
   },
   {
-    key: "handoff",
-    tab: "Hand-offs",
-    title: "Work travels with context",
-    body: "Pass an investigation to your teammate's session with full history — hypotheses, logs, files touched, commands run.",
+    key: "state",
+    tab: "Shared state",
+    title: "Live facts the whole mesh can read",
+    body: "Set a value, every peer sees the change immediately. \"Is the deploy frozen?\" becomes a state read, not a conversation. Sprint number, PR queue, feature flags — shared operational truth.",
+    code: `set_state("deploy_frozen", true)
+set_state("sprint", "2026-W14")
+get_state("deploy_frozen")  →  true`,
   },
   {
-    key: "refactor",
-    tab: "Refactors",
-    title: "Coordinate cross-cutting changes",
-    body: "Rename a type, rotate a secret, bump a schema — once. Every other agent picks up the change from its own repo.",
+    key: "memory",
+    tab: "Memory",
+    title: "The mesh gets smarter over time",
+    body: "New peers join with zero context. Memory stores institutional knowledge — decisions, incidents, lessons. Full-text searchable. Survives across sessions. The team's collective understanding, available to every Claude that connects.",
+    code: `remember("Payments API rate-limits at 100 req/s
+  after March incident", tags: ["payments"])
+recall("rate limit")  →  ranked results`,
+  },
+  {
+    key: "coordinate",
+    tab: "Coordination",
+    title: "Five patterns, zero orchestrator",
+    body: "Lead-gather: one lead collects from the group. Chain review: work passes through each member. Delegation: lead assigns subtasks. Voting: members set state, lead tallies. Flood: everyone responds. All through system prompts — no broker code.",
+    code: `send_message(to: "@frontend",
+  message: "auth API changed, update hooks")
+send_message(to: "@pm",
+  message: "auth v2 done, 3 points, no blockers")`,
   },
 ];
 
 export const Features = () => {
   const [active, setActive] = useState(0);
+  const feature = FEATURES[active]!;
   return (
     <section className="border-b border-[var(--cm-border)] bg-[var(--cm-bg)] px-6 py-24 md:px-12 md:py-32">
       <div className="mx-auto max-w-[var(--cm-max-w)]">
@@ -36,40 +55,19 @@ export const Features = () => {
             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)" }}
           >
-            What could your mesh do?
+            What your mesh can do today
           </h2>
         </Reveal>
-        <Reveal delay={2} className="mt-10 flex justify-center">
-          <div
-            className="flex items-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] px-4 py-3 text-[13px] text-[var(--cm-fg-secondary)]"
-            style={{ fontFamily: "var(--cm-font-mono)" }}
-          >
-            <span className="text-[var(--cm-clay)]">$</span>
-            <span>curl -fsSL claudemesh.com/install | bash</span>
-            <button
-              className="ml-2 rounded border border-[var(--cm-border)] px-1.5 py-0.5 text-[10px] text-[var(--cm-fg-tertiary)] transition-colors hover:border-[var(--cm-fg)] hover:text-[var(--cm-fg)]"
-              aria-label="Copy"
-            >
-              copy
-            </button>
-          </div>
-        </Reveal>
-        <Reveal delay={3}>
+        <Reveal delay={2}>
           <p
-            className="mt-4 text-center text-sm text-[var(--cm-fg-tertiary)]"
+            className="mx-auto mt-4 max-w-xl text-center text-sm text-[var(--cm-fg-tertiary)]"
             style={{ fontFamily: "var(--cm-font-sans)" }}
           >
-            Free forever for solo developers · Or read the{" "}
-            <a
-              href="#"
-              className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 transition-colors hover:text-[var(--cm-fg)] hover:decoration-[var(--cm-clay)]"
-            >
-              documentation
-            </a>
+            30+ MCP tools. Groups, state, memory, messaging — all shipped.
           </p>
         </Reveal>
-        <Reveal delay={4}>
-          <div className="mt-16 flex justify-center gap-2">
+        <Reveal delay={3}>
+          <div className="mt-12 flex flex-wrap justify-center gap-2">
             {FEATURES.map((f, i) => (
               <button
                 key={f.key}
@@ -86,19 +84,29 @@ export const Features = () => {
               </button>
             ))}
           </div>
-          <div className="mx-auto mt-10 max-w-3xl rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-10 text-center">
-            <h3
-              className="mb-4 text-[28px] font-medium leading-tight text-[var(--cm-fg)]"
-              style={{ fontFamily: "var(--cm-font-serif)" }}
-            >
-              {FEATURES[active]?.title}
-            </h3>
-            <p
-              className="text-[15px] leading-[1.65] text-[var(--cm-fg-secondary)]"
-              style={{ fontFamily: "var(--cm-font-serif)" }}
-            >
-              {FEATURES[active]?.body}
-            </p>
+          <div className="mx-auto mt-8 max-w-3xl overflow-hidden rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)]">
+            <div className="p-8 pb-4">
+              <h3
+                className="mb-3 text-[24px] font-medium leading-tight text-[var(--cm-fg)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                {feature.title}
+              </h3>
+              <p
+                className="text-[14px] leading-[1.65] text-[var(--cm-fg-secondary)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                {feature.body}
+              </p>
+            </div>
+            <div className="border-t border-[var(--cm-border)] bg-[var(--cm-gray-900)] px-8 py-5">
+              <pre
+                className="text-[12px] leading-[1.7] text-[var(--cm-fg-secondary)]"
+                style={{ fontFamily: "var(--cm-font-mono)" }}
+              >
+                <code>{feature.code}</code>
+              </pre>
+            </div>
           </div>
         </Reveal>
       </div>

apps/web/src/modules/marketing/home/hero.tsx

@@ -55,10 +55,10 @@ 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)" }}
           >
-            Peer mesh for Claude Code. Connect your sessions across repos and
-            machines. Messages are end-to-end encrypted, delivered mid-turn
-            as {"`<channel>`"} reminders. Your Claudes talk to each other; the
-            broker never sees plaintext.
+            Your Claude Code sessions form a team. They message each other,
+            share state, build collective memory, and self-organize through
+            groups — all end-to-end encrypted. One command to launch. The broker
+            routes ciphertext; it never reads your messages.
             <span className="block pt-2 text-[var(--cm-clay)]">
               Open-source CLI. Free during public beta.
             </span>

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

@@ -229,31 +229,31 @@ type UseCase = {
 
 const USE_CASES: UseCase[] = [
   {
-    tag: "solo · multi-machine",
-    title: "One dev, three machines",
+    tag: "team · groups",
+    title: "Five agents, one sprint",
     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.",
+      "Each Claude works alone. When the frontend agent finishes auth, nobody tells the backend agent. You relay by hand. The PM asks for a status update; you copy-paste from three terminals.",
+    now: "Launch five sessions with --name and --groups. The @frontend lead finishes auth and messages @backend directly. The PM's Claude reads shared state: sprint number, PR queue, deploy status. Nobody relays anything.",
     limits:
-      "Both peers have to be online. It shares live conversational context — not git state, not open files.",
+      "Peers must be online to receive direct messages. Group messages queue until delivery. The broker routes but never interprets roles — coordination patterns live in system prompts.",
   },
   {
-    tag: "team · cross-repo",
-    title: "Bug Alice fixed, Bob rediscovers",
+    tag: "knowledge · memory",
+    title: "New hire's Claude knows the codebase",
     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 volunteers with context. Bob solves in ten minutes. Alice isn't interrupted — her Claude shares the history on its own.",
+      "Alice in payments-api fixes a Stripe rate-limit bug. Three weeks later, a new hire hits the same wall. The fix is buried in a PR thread. They re-solve it for hours.",
+    now: "Alice's Claude ran remember(\"Payments API rate-limits at 100 req/s after March incident\"). The new hire's Claude runs recall(\"rate limit\") and gets ranked results. Ten minutes, not three hours.",
     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.",
+      "Memory stores text, not code diffs. Each Claude stays inside its own repo. Knowledge flows at the agent layer — the human still reviews the PR.",
   },
   {
-    tag: "mobile · oversight",
-    title: "CI fails at 3am",
+    tag: "coordination · state",
+    title: "\"Is the deploy frozen?\" answered in zero messages",
     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.",
+      "You ask in Slack. Someone answers twenty minutes later. Meanwhile two PRs merge. The deploy breaks. Nobody knew it was frozen.",
+    now: "set_state(\"deploy_frozen\", true). Every peer sees the change instantly. get_state(\"deploy_frozen\") returns true. No conversation needed. Shared operational facts, not shared opinions.",
     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.",
+      "State is operational — it lives as long as the mesh. Use memory for permanent knowledge. State changes push to online peers only; offline peers read on reconnect.",
   },
 ];