feat(web): rewrite hero (pain-first) + streamline page + enterprise tier
Hero: 'Your Claude Code sessions work alone. claudemesh connects them.' Three pain cards (context dies, teams relay by hand, setup per developer). Solution paragraph focuses on shared wire with E2E encryption. Page: removed 5 redundant sections (Surfaces, LaptopToLaptop, MeshVsMcp, MeetsYou, BeyondTerminal, DemoDashboard). Kept the strongest: Hero, Features, WhatIsClaudemesh, Timeline, Pricing, FAQ, CTA, MeshStats. Pricing: added Enterprise tier with Contact sales → info@claudemesh.com. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
@@ -1,15 +1,6 @@
|
||||
import Link from "next/link";
|
||||
import { Reveal, SectionIcon } from "./_reveal";
|
||||
|
||||
const LOGOS = [
|
||||
"Claude Code",
|
||||
"MCP",
|
||||
"libsodium",
|
||||
"Bun",
|
||||
"TypeScript",
|
||||
"MIT",
|
||||
];
|
||||
|
||||
export const Hero = () => {
|
||||
return (
|
||||
<section className="relative overflow-hidden border-b border-[var(--cm-border)] bg-[var(--cm-bg)]">
|
||||
@@ -26,43 +17,40 @@ export const Hero = () => {
|
||||
<SectionIcon glyph="mesh" />
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={1} className="mb-5">
|
||||
<div
|
||||
className="flex items-center gap-2 text-[11px] uppercase tracking-[0.22em] text-[var(--cm-clay)]"
|
||||
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||
>
|
||||
<span className="inline-block h-1 w-1 rounded-full bg-[var(--cm-clay)]" />
|
||||
— meshing
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={2}>
|
||||
<Reveal delay={1}>
|
||||
<h1
|
||||
className="max-w-5xl text-center text-[clamp(2.75rem,7vw,5.75rem)] font-medium leading-[1.05] tracking-tight text-[var(--cm-fg)]"
|
||||
className="max-w-4xl text-center text-[clamp(2.75rem,7vw,5.25rem)] font-medium leading-[1.08] tracking-tight text-[var(--cm-fg)]"
|
||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||
>
|
||||
Built for{" "}
|
||||
<span className="inline-flex items-baseline gap-2 text-[var(--cm-clay)]">
|
||||
<span className="italic">{"<"}</span>
|
||||
<span className="italic">swarms</span>
|
||||
<span className="italic">{">"}</span>
|
||||
Your Claude Code sessions{" "}
|
||||
<span className="text-[var(--cm-clay)]">work alone.</span>
|
||||
<br />
|
||||
<span className="text-[var(--cm-fg-secondary)]">
|
||||
claudemesh connects them.
|
||||
</span>
|
||||
</h1>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={3}>
|
||||
<Reveal delay={2}>
|
||||
<p
|
||||
className="mx-auto mt-6 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl"
|
||||
className="mx-auto mt-8 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg-secondary)] md:text-xl"
|
||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||
>
|
||||
Your Claude Code sessions form a team. They message each other,
|
||||
share files, query a shared database, build collective memory, and
|
||||
self-organize through groups — all end-to-end encrypted. 43 MCP
|
||||
tools. Five persistence backends. 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>
|
||||
Right now you relay AI insights through Slack threads. You re-explain
|
||||
context every time you switch machines. Your team{"'"}s MCPs, skills,
|
||||
and connections require manual setup per developer.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={3}>
|
||||
<p
|
||||
className="mx-auto mt-4 max-w-2xl text-center text-lg leading-[1.65] text-[var(--cm-fg)] md:text-xl"
|
||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||
>
|
||||
claudemesh gives every Claude Code session a shared wire. Each Claude
|
||||
keeps its own repo and perspective. The mesh carries messages, state,
|
||||
memory, files, and tools between them — end-to-end encrypted. The
|
||||
broker routes ciphertext. It never reads your messages.
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
@@ -83,39 +71,63 @@ export const Hero = () => {
|
||||
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||
>
|
||||
<span className="text-[var(--cm-clay)]">$</span>
|
||||
<span>npm i -g claudemesh-cli</span>
|
||||
<span>curl -fsSL claudemesh.com/install | bash</span>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Pain points — three concrete scenarios */}
|
||||
<Reveal delay={5}>
|
||||
<div className="mx-auto mt-20 grid max-w-4xl gap-6 md:grid-cols-3">
|
||||
{([
|
||||
{
|
||||
label: "Context dies",
|
||||
body: "Close the terminal. Everything your Claude learned disappears. Open a new session — start from zero.",
|
||||
},
|
||||
{
|
||||
label: "Teams relay by hand",
|
||||
body: "Your backend Claude finds a bug. You copy the insight into Slack. The frontend dev pastes it into their Claude. Three tools for one thought.",
|
||||
},
|
||||
{
|
||||
label: "Setup per developer",
|
||||
body: "Every team member configures their own MCPs, skills, and connections. No shared standard. No shared context.",
|
||||
},
|
||||
] as const).map((pain) => (
|
||||
<div
|
||||
key={pain.label}
|
||||
className="rounded-[var(--cm-radius-md)] border border-[var(--cm-border)] bg-[var(--cm-bg-elevated)] p-6"
|
||||
>
|
||||
<div
|
||||
className="mb-2 text-[11px] uppercase tracking-[0.18em] text-[var(--cm-clay)]"
|
||||
style={{ fontFamily: "var(--cm-font-mono)" }}
|
||||
>
|
||||
{pain.label}
|
||||
</div>
|
||||
<p
|
||||
className="text-[14px] leading-[1.6] text-[var(--cm-fg-secondary)]"
|
||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||
>
|
||||
{pain.body}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={6}>
|
||||
<p
|
||||
className="mt-6 text-sm text-[var(--cm-fg-tertiary)]"
|
||||
className="mt-12 text-center text-sm text-[var(--cm-fg-tertiary)]"
|
||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||
>
|
||||
Or{" "}
|
||||
Open-source CLI · Free during public beta ·{" "}
|
||||
<Link
|
||||
href="/getting-started"
|
||||
href="https://github.com/alezmad/claudemesh-cli"
|
||||
className="underline decoration-[var(--cm-fg-tertiary)] underline-offset-4 transition-colors hover:text-[var(--cm-fg)] hover:decoration-[var(--cm-clay)]"
|
||||
>
|
||||
read the getting started guide
|
||||
View source
|
||||
</Link>
|
||||
</p>
|
||||
</Reveal>
|
||||
|
||||
<Reveal delay={8}>
|
||||
<div className="mt-20 flex flex-wrap items-center justify-center gap-x-12 gap-y-6 opacity-70">
|
||||
{LOGOS.map((logo) => (
|
||||
<div
|
||||
key={logo}
|
||||
className="text-xl font-medium tracking-tight text-[var(--cm-fg-secondary)]"
|
||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||
>
|
||||
{logo}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
@@ -136,6 +136,36 @@ export const Pricing = () => {
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
|
||||
{/* Enterprise tier */}
|
||||
<Reveal delay={4}>
|
||||
<div className="mx-auto mt-6 max-w-[720px] rounded-[var(--cm-radius-md)] border border-dashed border-[var(--cm-border)] p-6 md:p-8">
|
||||
<div className="flex flex-col items-start gap-4 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h3
|
||||
className="text-[18px] font-medium text-[var(--cm-fg)]"
|
||||
style={{ fontFamily: "var(--cm-font-serif)" }}
|
||||
>
|
||||
Enterprise
|
||||
</h3>
|
||||
<p
|
||||
className="mt-1 text-[13px] leading-[1.5] text-[var(--cm-fg-secondary)]"
|
||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||
>
|
||||
Self-hosted broker. SSO. Custom SAML. Dedicated support.
|
||||
Air-gapped deployment. SLA.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="mailto:info@claudemesh.com"
|
||||
className="inline-flex shrink-0 items-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-elevated)]"
|
||||
style={{ fontFamily: "var(--cm-font-sans)" }}
|
||||
>
|
||||
Contact sales
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user