4c057be069
A linter/formatter reverted our content edits. Re-applying: - Hero: concrete claims, no WhatsApp/Slack promises, beta pricing - Logo bar: tech stack instead of fake customer logos - Pricing: single honest Public Beta tier (removed $12/$24/$99) - FAQ: real install flow, honest pricing language - Features: claudemesh.com/install URL - Toaster: v0.1.4 announcement - Copy: "volunteers" / "shares" instead of jargon - Links: #docs → GitHub README, claudemesh.sh → claudemesh.com Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
108 lines
4.2 KiB
TypeScript
108 lines
4.2 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
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: "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: "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.",
|
|
},
|
|
];
|
|
|
|
export const Features = () => {
|
|
const [active, setActive] = useState(0);
|
|
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)]">
|
|
<Reveal className="mb-6 flex justify-center">
|
|
<SectionIcon glyph="grid" />
|
|
</Reveal>
|
|
<Reveal delay={1}>
|
|
<h2
|
|
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?
|
|
</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}>
|
|
<p
|
|
className="mt-4 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>
|
|
</p>
|
|
</Reveal>
|
|
<Reveal delay={4}>
|
|
<div className="mt-16 flex justify-center gap-2">
|
|
{FEATURES.map((f, i) => (
|
|
<button
|
|
key={f.key}
|
|
onClick={() => setActive(i)}
|
|
className={
|
|
"rounded-[var(--cm-radius-xs)] border px-4 py-2 text-[13px] font-medium transition-colors " +
|
|
(active === i
|
|
? "border-[var(--cm-clay)] bg-[var(--cm-clay)]/10 text-[var(--cm-clay)]"
|
|
: "border-[var(--cm-border)] text-[var(--cm-fg-secondary)] hover:border-[var(--cm-fg-tertiary)] hover:text-[var(--cm-fg)]")
|
|
}
|
|
style={{ fontFamily: "var(--cm-font-mono)" }}
|
|
>
|
|
{f.tab}
|
|
</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>
|
|
</Reveal>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|