feat(marketing): add value sections + trim FAQ
Page is now Hero → Hierarchy → Scale → Why → Use cases → FAQ → CTA → footer.
- Scale: per-tenant runtime / scale-to-zero / delegation hierarchy.
- WhyGoverned: humans-in-the-loop, single audit journal, delegation, no rogue access.
- UseCases: support / marketing / research / engineering / finance / data.
- FinalCta: dark ink band bookending the hero ("Build your agent company").
- Trim FAQ to 4 (keep the e2e-referenced Qs); repoint nav/footer anchors to
the live section ids. Refresh the @visual baseline.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
16c3231fba
commit
05c49dc418
@@ -16,10 +16,6 @@ const FAQS: { q: string; a: string }[] = [
|
||||
q: "Can I run it on my own infrastructure?",
|
||||
a: "Yes. The same container images deploy to Kubernetes or to a single-node Docker Compose appliance you can run fully air-gapped, installed from a signed bundle that verifies offline.",
|
||||
},
|
||||
{
|
||||
q: "Which tools can claws connect to?",
|
||||
a: "Slack and email today, plus a growing app directory you connect with API keys or OAuth. Credentials are held by a separate secret broker the agent can never read.",
|
||||
},
|
||||
{
|
||||
q: "How is my data protected?",
|
||||
a: "Credentials are encrypted at rest in an isolated broker process; agent sandboxes have no egress; and in the air-gapped deployment nothing ever leaves your network.",
|
||||
|
||||
@@ -10,9 +10,9 @@ export function MarketingNav() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const LINKS = [
|
||||
{ label: "Product", href: "/" },
|
||||
{ label: "Blog", href: "#deck" },
|
||||
{ label: "Pricing", href: "#crew" },
|
||||
{ label: "Scale", href: "#scale" },
|
||||
{ label: "Use cases", href: "#use-cases" },
|
||||
{ label: "Why", href: "#why" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
];
|
||||
|
||||
|
||||
@@ -1,3 +1,18 @@
|
||||
import {
|
||||
BarChart3,
|
||||
Boxes,
|
||||
Code2,
|
||||
FlaskConical,
|
||||
Gauge,
|
||||
Headset,
|
||||
Lock,
|
||||
type LucideIcon,
|
||||
Megaphone,
|
||||
Network,
|
||||
Receipt,
|
||||
ScrollText,
|
||||
UserCheck,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { HeroAmbient } from "./HeroAmbient";
|
||||
@@ -86,13 +101,215 @@ export function Hero() {
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Footer (CTA tier + dark tier) ---------- */
|
||||
/* Shared bits for the value sections below. */
|
||||
const eyebrow = "font-[500] uppercase";
|
||||
const eyebrowStyle = {
|
||||
color: "#475569",
|
||||
fontSize: 13,
|
||||
letterSpacing: "0.16em",
|
||||
} as const;
|
||||
|
||||
function IconChip({ Icon }: { Icon: LucideIcon }) {
|
||||
return (
|
||||
<span
|
||||
className="flex size-12 items-center justify-center rounded-2xl"
|
||||
style={{ backgroundColor: "rgba(59,130,246,0.1)" }}
|
||||
>
|
||||
<Icon aria-hidden size={24} strokeWidth={1.75} className="text-marketing-azure" />
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Scale (one → a company) ---------- */
|
||||
const SCALE = [
|
||||
{
|
||||
Icon: Boxes,
|
||||
title: "Per-tenant runtime",
|
||||
body: "Each workspace runs in its own isolated container — separate data, separate compute, no noisy neighbors.",
|
||||
},
|
||||
{
|
||||
Icon: Gauge,
|
||||
title: "Scale to zero",
|
||||
body: "Idle workspaces cost nothing and resume in seconds, so a thousand agents are as cheap to keep as one.",
|
||||
},
|
||||
{
|
||||
Icon: Network,
|
||||
title: "Delegation hierarchy",
|
||||
body: "Agents spawn and manage sub-agents, so one operator can run a whole org chart of them.",
|
||||
},
|
||||
];
|
||||
|
||||
export function Scale() {
|
||||
return (
|
||||
<section id="scale" className="flex w-full flex-col items-center bg-white px-6 py-[104px] sm:py-[128px]">
|
||||
<div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
|
||||
<span className={eyebrow} style={eyebrowStyle}>
|
||||
Scale
|
||||
</span>
|
||||
<h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
|
||||
From one agent to a whole company
|
||||
</h2>
|
||||
<p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
|
||||
Start with a single claw. Grow to a fleet that delegates across teams —
|
||||
without changing how you run it.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 grid w-full max-w-[1100px] gap-6 sm:grid-cols-3">
|
||||
{SCALE.map(({ Icon, title, body }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="flex flex-col items-start gap-4 rounded-3xl border border-marketing-border bg-marketing-mist px-7 py-9"
|
||||
>
|
||||
<IconChip Icon={Icon} />
|
||||
<h3 className="text-[20px] font-semibold tracking-[-0.01em] text-marketing-ink">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-[15px] leading-[1.6] text-marketing-slate">{body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Why governed + hierarchical ---------- */
|
||||
const WHY = [
|
||||
{
|
||||
Icon: UserCheck,
|
||||
title: "Humans where it matters",
|
||||
body: "Agents move fast inside the sandbox; only actions that leave it — email, payments, deletes — pause for a one-click human approval.",
|
||||
},
|
||||
{
|
||||
Icon: ScrollText,
|
||||
title: "Nothing runs un-audited",
|
||||
body: "Every action and decision lands in a single, tamper-evident journal you can replay end to end.",
|
||||
},
|
||||
{
|
||||
Icon: Network,
|
||||
title: "Delegation, not chaos",
|
||||
body: "A clear hierarchy keeps large fleets organized and accountable — you always know which agent did what, and why.",
|
||||
},
|
||||
{
|
||||
Icon: Lock,
|
||||
title: "No rogue access",
|
||||
body: "Sandboxed compute with no egress, plus a secret broker the agent can never read — credentials are used, never seen.",
|
||||
},
|
||||
];
|
||||
|
||||
export function WhyGoverned() {
|
||||
return (
|
||||
<section id="why" className="flex w-full flex-col items-center bg-marketing-mist px-6 py-[104px] sm:py-[128px]">
|
||||
<div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
|
||||
<span className={eyebrow} style={eyebrowStyle}>
|
||||
Why Clawmates
|
||||
</span>
|
||||
<h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
|
||||
Built to run in production
|
||||
</h2>
|
||||
<p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
|
||||
The controls that make a fleet of autonomous agents safe to point at
|
||||
real work.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 grid w-full max-w-[920px] gap-6 sm:grid-cols-2">
|
||||
{WHY.map(({ Icon, title, body }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="flex flex-col items-start gap-4 rounded-3xl border border-marketing-border bg-white px-7 py-9"
|
||||
>
|
||||
<IconChip Icon={Icon} />
|
||||
<h3 className="text-[20px] font-semibold tracking-[-0.01em] text-marketing-ink">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-[15px] leading-[1.6] text-marketing-slate">{body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Built for any domain (use cases) ---------- */
|
||||
const USE_CASES = [
|
||||
{ Icon: Headset, title: "Customer support", body: "Triage tickets, draft replies, and escalate with approvals." },
|
||||
{ Icon: Megaphone, title: "Marketing ops", body: "Draft campaigns, schedule posts, and report on performance." },
|
||||
{ Icon: FlaskConical, title: "Research", body: "Gather sources, synthesize findings, and keep a cited trail." },
|
||||
{ Icon: Code2, title: "Engineering", body: "Open PRs, run checks, and ship behind human review." },
|
||||
{ Icon: Receipt, title: "Finance & ops", body: "Reconcile, process refunds, and move money — only with sign-off." },
|
||||
{ Icon: BarChart3, title: "Data & analytics", body: "Query warehouses, build reports, and surface anomalies." },
|
||||
];
|
||||
|
||||
export function UseCases() {
|
||||
return (
|
||||
<section id="use-cases" className="flex w-full flex-col items-center bg-white px-6 py-[104px] sm:py-[128px]">
|
||||
<div className="flex w-full max-w-[760px] flex-col items-center gap-4 text-center">
|
||||
<span className={eyebrow} style={eyebrowStyle}>
|
||||
Use cases
|
||||
</span>
|
||||
<h2 className="text-[32px] leading-none font-[650] tracking-[-1.6px] text-marketing-ink sm:text-[48px] lg:text-[56px]">
|
||||
Put a crew on any kind of work
|
||||
</h2>
|
||||
<p className="max-w-[560px] text-[18px] leading-[1.6] text-marketing-slate sm:text-[20px]">
|
||||
Clawmates is domain-agnostic — give each claw a job, the tools, and the
|
||||
guardrails, and it gets to work.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 grid w-full max-w-[1100px] gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{USE_CASES.map(({ Icon, title, body }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="flex flex-col items-start gap-3 rounded-3xl border border-marketing-border bg-marketing-mist px-7 py-8"
|
||||
>
|
||||
<IconChip Icon={Icon} />
|
||||
<h3 className="text-[18px] font-semibold tracking-[-0.01em] text-marketing-ink">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-[15px] leading-[1.55] text-marketing-slate">{body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Final CTA band ---------- */
|
||||
export function FinalCta() {
|
||||
return (
|
||||
<section className="relative w-full overflow-hidden bg-[#0b1220] px-6 py-[112px]">
|
||||
<div className="mx-auto flex max-w-[680px] flex-col items-center gap-7 text-center">
|
||||
<h2
|
||||
className="m-0 font-[650]"
|
||||
style={{ color: "#f5f8fc", fontSize: "clamp(32px, 4.5vw, 52px)", lineHeight: 1.05, letterSpacing: "-0.02em" }}
|
||||
>
|
||||
Build your agent company
|
||||
</h2>
|
||||
<p className="m-0 max-w-[520px] text-[18px] leading-[1.5] text-[#cbd5e1]">
|
||||
Stand up your first claw today — and the controls to run a thousand of
|
||||
them safely.
|
||||
</p>
|
||||
<div className="flex w-full flex-col items-stretch justify-center gap-4 sm:w-auto sm:flex-row sm:items-center">
|
||||
<a href="mailto:[email protected]" className={`${ctaCoral} h-14 px-10 text-base sm:h-16`}>
|
||||
Book a demo
|
||||
</a>
|
||||
<a
|
||||
href="https://git.redclaw.dev/osobh/clawmates"
|
||||
className="inline-flex h-14 items-center justify-center rounded-full border border-white/25 px-10 text-base font-semibold text-white transition-colors hover:bg-white/10 sm:h-16"
|
||||
>
|
||||
Read the docs
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Footer (dark tier) ---------- */
|
||||
const FOOTER_LINKS = [
|
||||
{ label: "Sign up", href: "/login" },
|
||||
{ label: "Pricing", href: "#crew" },
|
||||
{ label: "Docs", href: "#" },
|
||||
{ label: "Contact", href: "mailto:[email protected]" },
|
||||
{ label: "Blog", href: "#deck" },
|
||||
{ label: "Use cases", href: "#use-cases" },
|
||||
{ label: "Why", href: "#why" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Docs", href: "https://git.redclaw.dev/osobh/clawmates" },
|
||||
{ label: "Book a demo", href: "mailto:[email protected]" },
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user