From ccff802163e9ced5b9044342135ada0da2f559d3 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 23:32:48 +0100
Subject: [PATCH] fix(web): rewrite pricing to match shipped product (honest
 beta tier)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 6-tier grid was selling features that don't exist yet:
- Pro \$12/mo: dashboard, peer registry, message history (not built)
- Plus \$24/mo: Tailscale mesh (already default), MCP bridge (free),
  audit log (not built)
- Team \$99/mo: \"self-hosted broker\" AND \"25 peers\" AND
  \"unlimited peers\" — three contradictions in one tier
- Business \$499/mo: multi-region, retention, Slack/Linear (roadmap)
- Enterprise: claimed \"SOC 2 pack\" without certification

Replaced with a single Public-Beta card:
- Free, no card required
- Two columns: Shipping today (verified against source) + Roadmap
  v0.2–v0.3 (clearly labeled)
- Promise: \"Beta users keep the free plan for life\"

Non-additive rewrite of a shipped section. Authorized by user
explicitly; required because the prior pricing created refund +
legal risk.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/modules/marketing/home/pricing.tsx    | 231 +++++++++---------
 1 file changed, 112 insertions(+), 119 deletions(-)

diff --git a/apps/web/src/modules/marketing/home/pricing.tsx b/apps/web/src/modules/marketing/home/pricing.tsx
index 3ae2b2c..a6e55d7 100644
--- a/apps/web/src/modules/marketing/home/pricing.tsx
+++ b/apps/web/src/modules/marketing/home/pricing.tsx
@@ -1,64 +1,25 @@
-"use client";
-import { useState } from "react";
 import Link from "next/link";
 import { Reveal, SectionIcon } from "./_reveal";
 
-const TIERS = {
-  individual: [
-    {
-      name: "Solo",
-      desc: "Run the broker on your laptop. Pair your Claude Code sessions across repos.",
-      price: "Free",
-      cta: "Start free",
-      href: "/auth/register",
-    },
-    {
-      name: "Pro",
-      desc: "Mesh dashboard, peer registry, message history, priority routing.",
-      price: "$12",
-      note: "per month",
-      cta: "Start free trial",
-      href: "/auth/register",
-    },
-    {
-      name: "Plus",
-      desc: "Cross-machine mesh via Tailscale / WireGuard, MCP bridge, audit log.",
-      price: "$24",
-      note: "per month",
-      cta: "Start free trial",
-      href: "/auth/register",
-    },
-  ],
-  team: [
-    {
-      name: "Team",
-      desc: "Self-hosted broker. SSO, shared presence, team audit log, 25 peers.",
-      price: "$99",
-      note: "per month · unlimited peers",
-      cta: "Start free",
-      href: "/auth/register",
-    },
-    {
-      name: "Business",
-      desc: "Multi-region brokers, retention controls, Slack/Linear bridges.",
-      price: "$499",
-      note: "per month",
-      cta: "Start free",
-      href: "/auth/register",
-    },
-    {
-      name: "Enterprise",
-      desc: "Air-gapped deploy, custom SAML, dedicated support, SOC 2 pack.",
-      price: "Contact",
-      cta: "Contact sales",
-      href: "/contact",
-    },
-  ],
-};
+const SHIPPING = [
+  "CLI + MCP server (Claude Code integration)",
+  "Hosted broker on claudemesh.com",
+  "End-to-end encrypted direct messages (crypto_box)",
+  "Priority routing (now / next / low)",
+  "Mesh invites + membership",
+  "Windows, macOS, Linux support",
+];
+
+const ROADMAP = [
+  "Mesh dashboard (browser UI)",
+  "Message history + retention controls",
+  "Audit log",
+  "Slack / WhatsApp / Telegram gateways",
+  "Self-host broker + SSO",
+  "Cross-broker federation",
+];
 
 export const Pricing = () => {
-  const [tab, setTab] = useState<"individual" | "team">("individual");
-  const tiers = TIERS[tab];
   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)]">
@@ -73,72 +34,104 @@ export const Pricing = () => {
             Get started with claudemesh
           </h2>
         </Reveal>
-        <Reveal delay={2} className="mt-10 flex justify-center">
-          <div className="inline-flex rounded-[var(--cm-radius-xs)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-1">
-            {(["individual", "team"] as const).map((k) => (
-              <button
-                key={k}
-                onClick={() => setTab(k)}
-                className={
-                  "rounded-[calc(var(--cm-radius-xs)-2px)] px-4 py-2 text-[13px] font-medium transition-colors " +
-                  (tab === k
-                    ? "bg-[var(--cm-fg)] text-[var(--cm-bg)]"
-                    : "text-[var(--cm-fg-secondary)] hover:text-[var(--cm-fg)]")
-                }
+        <Reveal delay={2}>
+          <p
+            className="mx-auto mt-4 max-w-[520px] text-center text-[15px] leading-[1.6] text-[var(--cm-fg-secondary)]"
+            style={{ fontFamily: "var(--cm-font-sans)" }}
+          >
+            Free during public beta. The CLI is MIT-licensed. The hosted
+            broker stays free while the roadmap ships. No billing today.
+          </p>
+        </Reveal>
+
+        <Reveal delay={3}>
+          <div className="mx-auto mt-16 max-w-[720px] rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-8 md:p-10">
+            <div className="mb-6 flex items-baseline justify-between gap-4">
+              <h3
+                className="text-[28px] font-medium leading-tight text-[var(--cm-fg)]"
+                style={{ fontFamily: "var(--cm-font-serif)" }}
+              >
+                Public beta
+              </h3>
+              <div className="text-right">
+                <div
+                  className="text-[32px] font-medium text-[var(--cm-fg)]"
+                  style={{ fontFamily: "var(--cm-font-serif)" }}
+                >
+                  Free
+                </div>
+                <div
+                  className="text-xs text-[var(--cm-fg-tertiary)]"
+                  style={{ fontFamily: "var(--cm-font-mono)" }}
+                >
+                  no card required
+                </div>
+              </div>
+            </div>
+
+            <div className="grid gap-8 md:grid-cols-2">
+              <div>
+                <div
+                  className="mb-3 text-[10px] uppercase tracking-wider text-[var(--cm-fg-tertiary)]"
+                  style={{ fontFamily: "var(--cm-font-mono)" }}
+                >
+                  Shipping today
+                </div>
+                <ul className="space-y-2">
+                  {SHIPPING.map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-start gap-2 text-[13px] leading-[1.6] text-[var(--cm-fg-secondary)]"
+                      style={{ fontFamily: "var(--cm-font-sans)" }}
+                    >
+                      <span className="mt-[6px] block h-[6px] w-[6px] shrink-0 rounded-full bg-[var(--cm-clay)]" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+
+              <div>
+                <div
+                  className="mb-3 text-[10px] uppercase tracking-wider text-[var(--cm-fg-tertiary)]"
+                  style={{ fontFamily: "var(--cm-font-mono)" }}
+                >
+                  Roadmap · v0.2–v0.3
+                </div>
+                <ul className="space-y-2">
+                  {ROADMAP.map((item) => (
+                    <li
+                      key={item}
+                      className="flex items-start gap-2 text-[13px] leading-[1.6] text-[var(--cm-fg-tertiary)]"
+                      style={{ fontFamily: "var(--cm-font-sans)" }}
+                    >
+                      <span className="mt-[6px] block h-[6px] w-[6px] shrink-0 rounded-full border border-[var(--cm-fg-tertiary)]" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+
+            <div className="mt-8 flex flex-col items-start gap-3 border-t border-[var(--cm-border)] pt-6 sm:flex-row sm:items-center sm:justify-between">
+              <p
+                className="text-[12px] leading-[1.5] text-[var(--cm-fg-tertiary)]"
                 style={{ fontFamily: "var(--cm-font-sans)" }}
               >
-                {k === "individual" ? "Individual" : "Team & Enterprise"}
-              </button>
-            ))}
-          </div>
-        </Reveal>
-        <Reveal delay={3}>
-          <div className="mt-16 grid gap-6 md:grid-cols-3">
-            {tiers.map((tier) => (
-              <article
-                key={tier.name}
-                className="flex flex-col rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-8 transition-colors hover:border-[var(--cm-clay)]"
+                Paid tiers launch when the dashboard ships. Beta users keep
+                the free plan for life.
+              </p>
+              <Link
+                href="/auth/register"
+                className="inline-flex shrink-0 items-center gap-2 rounded-[var(--cm-radius-xs)] bg-[var(--cm-fg)] px-5 py-2.5 text-sm font-medium text-[var(--cm-bg)] transition-colors hover:bg-[var(--cm-gray-150)]"
+                style={{ fontFamily: "var(--cm-font-sans)" }}
               >
-                <div className="mb-5">
-                  <SectionIcon glyph="leaf" />
-                </div>
-                <h3
-                  className="mb-2 text-[28px] font-medium leading-tight text-[var(--cm-fg)]"
-                  style={{ fontFamily: "var(--cm-font-serif)" }}
-                >
-                  {tier.name}
-                </h3>
-                <p
-                  className="mb-6 text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
-                  style={{ fontFamily: "var(--cm-font-serif)" }}
-                >
-                  {tier.desc}
-                </p>
-                <div className="mb-6 mt-auto">
-                  <div
-                    className="text-[32px] font-medium text-[var(--cm-fg)]"
-                    style={{ fontFamily: "var(--cm-font-serif)" }}
-                  >
-                    {tier.price}
-                  </div>
-                  {tier.note && (
-                    <div
-                      className="text-xs text-[var(--cm-fg-tertiary)]"
-                      style={{ fontFamily: "var(--cm-font-mono)" }}
-                    >
-                      {tier.note}
-                    </div>
-                  )}
-                </div>
-                <Link
-                  href={tier.href}
-                  className="inline-flex items-center justify-center gap-2 rounded-[var(--cm-radius-xs)] border border-[var(--cm-fg-tertiary)] px-5 py-2.5 text-sm font-medium text-[var(--cm-fg)] transition-colors hover:border-[var(--cm-fg)] hover:bg-[var(--cm-bg)]"
-                  style={{ fontFamily: "var(--cm-font-sans)" }}
-                >
-                  {tier.cta}
-                </Link>
-              </article>
-            ))}
+                Start free
+                <span className="transition-transform duration-300 group-hover:translate-x-0.5">
+                  →
+                </span>
+              </Link>
+            </div>
           </div>
         </Reveal>
       </div>