Marketing landing: rebuild to WorkClaw structure 1:1 (Clawmates-branded)
Re-scanned the live workclaw.com (same content as our prior capture; they redeployed but shipped no landing changes) and rebuilt our landing to mirror its full structure section-for-section, keeping Clawmates branding and honest claims (no borrowed customer logos, no unverified SOC 2). Now matches the real layout: sticky pill nav (Product/Blog/Pricing/FAQ + Sign In + dark Get Started) · light-blue hero with the claws-at-desk art · crew strip (honest stand-in for the customer-logo marquee) · "Multiply your brainpower…" + four trait badges · One-click setup with the create-claw card (Sandy Clawson) · Works where you do with the 13-app icon grid + Slack conversation mockup · Always on (dark, moon + composite art) · Your work, your way skills tiles · Enhanced security (hand-key + key-snap, 4 icon columns) · FAQ on the textured field · two-tier footer (Build your AI crew + dark footer with socials). - Pulled the WorkClaw assets the public capture missed (claws-at-desk, support-claw, slack-convos/cards, always-composite, 13 app icons, security icons, footer-team). Dropped WorkClaw's own logo mark for our PawPrint. - Honest substitutions where WorkClaw's claims aren't ours: no SOC 2 (4th security column is "Air-gappable"; trust pill is "Self-hostable & air-gapped"), and the FAQ keeps our self-host/air-gap positioning. - A11y: consolidated to AA-safe coral-strong (#d23a3a) for button fills and small coral text; axe reports zero serious/critical. - Regenerated the marketing visual baseline. typecheck/lint/build green · p7-marketing (render + a11y) green · @visual green · deployed via Compose and verified live on :3000. 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
3b699f2e98
commit
df589b70d4
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Minus, Plus } from "lucide-react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
const FAQS: { q: string; a: string }[] = [
|
||||
@@ -26,50 +26,52 @@ const FAQS: { q: string; a: string }[] = [
|
||||
},
|
||||
];
|
||||
|
||||
/** FAQ accordion on WorkClaw's solid-blue field: one open at a time, the
|
||||
* "+" toggles to "–", white rounded rows. */
|
||||
/** FAQ on WorkClaw's textured field (faq-bg): white rounded rows, one open at
|
||||
* a time, the "+" rotates 45° to an ×. First item open by default. */
|
||||
export function Faq() {
|
||||
const [open, setOpen] = useState<number | null>(0);
|
||||
return (
|
||||
<section
|
||||
id="faq"
|
||||
className="w-full bg-marketing-blue px-4 py-[80px] sm:py-[112px]"
|
||||
>
|
||||
<h2 className="text-center text-[clamp(30px,5vw,48px)] font-extrabold tracking-[-1.5px] text-marketing-ink">
|
||||
Questions, <span className="text-white">answered</span>.
|
||||
</h2>
|
||||
<div className="mx-auto flex w-[min(880px,94%)] flex-col gap-4 pt-12">
|
||||
{FAQS.map((item, i) => (
|
||||
<div key={item.q} className="rounded-2xl bg-white shadow-sm">
|
||||
<button
|
||||
type="button"
|
||||
aria-expanded={open === i}
|
||||
onClick={() => setOpen(open === i ? null : i)}
|
||||
className="flex w-full items-center justify-between gap-4 px-7 py-5 text-left text-lg font-bold text-marketing-ink"
|
||||
>
|
||||
{item.q}
|
||||
{open === i ? (
|
||||
<Minus
|
||||
aria-hidden
|
||||
size={20}
|
||||
className="shrink-0 text-marketing-slate"
|
||||
/>
|
||||
) : (
|
||||
<Plus
|
||||
aria-hidden
|
||||
size={20}
|
||||
className="shrink-0 text-marketing-slate"
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
{open === i && (
|
||||
<p className="px-7 pb-6 text-sm leading-relaxed text-marketing-slate">
|
||||
{item.a}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
<div id="faq">
|
||||
<section className="relative flex w-full justify-center overflow-hidden bg-[url('/images/marketing/faq-bg.svg')] bg-cover bg-center bg-no-repeat px-4 py-[72px] sm:px-6 sm:py-[99px]">
|
||||
<div className="relative flex w-full max-w-[804px] flex-col gap-4">
|
||||
{FAQS.map((item, i) => {
|
||||
const isOpen = open === i;
|
||||
return (
|
||||
<button
|
||||
key={item.q}
|
||||
type="button"
|
||||
aria-expanded={isOpen}
|
||||
onClick={() => setOpen(isOpen ? null : i)}
|
||||
className="flex w-full flex-col items-start rounded-[16px] bg-white p-6 text-left transition-shadow sm:p-8"
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="pr-4 text-[18px] leading-none font-bold tracking-[-0.46px] text-black sm:text-[23px]">
|
||||
{item.q}
|
||||
</span>
|
||||
<div
|
||||
className="shrink-0 transition-transform duration-300 ease-out"
|
||||
style={{ transform: isOpen ? "rotate(45deg)" : "rotate(0deg)" }}
|
||||
>
|
||||
<Plus aria-hidden className="h-4 w-4 text-black" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="w-full overflow-hidden transition-all duration-300 ease-out"
|
||||
style={{
|
||||
maxHeight: isOpen ? 320 : 0,
|
||||
opacity: isOpen ? 1 : 0,
|
||||
marginTop: isOpen ? 24 : 0,
|
||||
}}
|
||||
>
|
||||
<p className="text-[15px] leading-[1.6] font-normal text-[#0a0f1e]/75 sm:text-[17px]">
|
||||
{item.a}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,48 +1,139 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { PawPrint } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
/** Sticky rounded-pill nav (WorkClaw layout): mark + wordmark left, then
|
||||
* section links, Sign in, and a dark primary pill all right-aligned.
|
||||
* Our brand + ship-crew links. */
|
||||
/** Sticky rounded-pill nav matching WorkClaw's layout: brand mark + wordmark
|
||||
* left, section links + Sign In + a dark "Get Started" pill right. Collapses
|
||||
* to a hamburger + expanding sheet at <sm. Clawmates brand throughout. */
|
||||
export function MarketingNav() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const LINKS = [
|
||||
{ label: "Product", href: "/" },
|
||||
{ label: "Blog", href: "#deck" },
|
||||
{ label: "Pricing", href: "#crew" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
];
|
||||
|
||||
return (
|
||||
<header className="sticky top-4 z-50 mx-auto flex w-[min(1180px,94%)] items-center justify-between rounded-full bg-white/95 px-4 py-3 pl-5 shadow-[0_8px_30px_-12px_rgba(22,29,39,0.18)] ring-1 ring-marketing-border backdrop-blur-[11px]">
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-2">
|
||||
<span className="flex size-9 items-center justify-center rounded-xl bg-marketing-ink">
|
||||
<PawPrint aria-hidden size={20} className="text-marketing-coral" />
|
||||
</span>
|
||||
<span className="text-lg font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-1 sm:gap-2">
|
||||
<nav className="mr-2 hidden gap-6 text-base font-medium text-marketing-slate-dark md:flex">
|
||||
<a href="#crew" className="transition-opacity hover:opacity-70">
|
||||
The crew
|
||||
</a>
|
||||
<a href="#deck" className="transition-opacity hover:opacity-70">
|
||||
On deck
|
||||
</a>
|
||||
<a href="#security" className="transition-opacity hover:opacity-70">
|
||||
Security
|
||||
</a>
|
||||
<a href="#faq" className="transition-opacity hover:opacity-70">
|
||||
FAQ
|
||||
</a>
|
||||
<div className="sticky top-0 z-50 flex justify-center px-2 pt-3 sm:px-6 sm:pt-6">
|
||||
<div className="w-full max-w-[1392px]">
|
||||
{/* Mobile pill + expanding sheet */}
|
||||
<div className="sm:hidden">
|
||||
<nav className="flex w-full items-center justify-between rounded-full border border-[rgba(22,29,39,0.06)] bg-white/95 p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] backdrop-blur-[11.5px]">
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-2 px-2 py-1">
|
||||
<span className="flex size-8 items-center justify-center rounded-lg bg-marketing-ink">
|
||||
<PawPrint aria-hidden size={18} className="text-marketing-coral" />
|
||||
</span>
|
||||
<span className="text-base font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-10 items-center justify-center rounded-full border border-[#e2e8f0] bg-[#1e293b] px-4 text-[14px] font-medium text-white"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={open ? "Close menu" : "Open menu"}
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="relative flex size-10 items-center justify-center rounded-full"
|
||||
>
|
||||
<span className="relative block h-[14px] w-5">
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] rotate-45" : "top-0"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-[6px] block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-opacity duration-200 ${open ? "opacity-0" : "opacity-100"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] -rotate-45" : "top-[12px]"}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
className={`grid transition-[grid-template-rows] duration-300 ease-out ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}
|
||||
>
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<div className="flex flex-col gap-6 px-4 pt-6 pb-8">
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex w-full items-center gap-4 rounded-2xl py-2 pr-6 pl-2 text-marketing-ink transition-colors hover:bg-[rgba(233,86,86,0.08)]"
|
||||
>
|
||||
<span className="text-[18px] font-bold tracking-[-0.25px]">
|
||||
{l.label}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full bg-marketing-coral-strong px-6 py-3 text-[16px] font-medium text-white"
|
||||
>
|
||||
Sign up for free
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full border-[1.75px] border-[#020617] bg-white px-6 py-3 text-[16px] font-medium text-marketing-ink"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop pill */}
|
||||
<nav className="hidden w-full items-center justify-between rounded-full border border-solid border-[rgba(22,29,39,0.06)] bg-white/[0.96] p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] sm:flex">
|
||||
<Link href="/" aria-label="clawmates" className="flex h-12 items-center gap-2 pl-2">
|
||||
<span className="flex size-10 items-center justify-center rounded-xl bg-marketing-ink">
|
||||
<PawPrint aria-hidden size={22} className="text-marketing-coral" />
|
||||
</span>
|
||||
<span className="text-xl font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-base font-medium whitespace-nowrap text-marketing-ink transition-opacity hover:opacity-80"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 items-center justify-center rounded-full border border-solid border-[#e2e8f0] bg-white px-6 py-3 text-base font-medium whitespace-nowrap text-marketing-ink transition-colors hover:bg-black/5"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 items-center justify-center rounded-full border border-solid border-[#e2e8f0] bg-[#1e293b] px-6 py-3 text-base font-medium whitespace-nowrap text-white transition-colors hover:bg-marketing-slate-dark"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<Link
|
||||
href="/login"
|
||||
className="hidden h-11 items-center rounded-full px-4 text-base font-semibold text-marketing-ink transition-colors hover:bg-marketing-periwinkle sm:flex"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-11 items-center rounded-full bg-marketing-ink px-5 text-base font-bold text-white transition-colors hover:bg-marketing-slate-dark"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,456 +1,581 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import type { ReactNode } from "react";
|
||||
import { CreditCard, Gift, PawPrint, Plus, ServerCog } from "lucide-react";
|
||||
import type { LucideIcon } from "lucide-react";
|
||||
import { PawPrint } from "lucide-react";
|
||||
|
||||
/* Marketing landing — WorkClaw's full section layout/styling with our own
|
||||
"clawmates crew on a ship" copy. Images are captured WorkClaw assets used
|
||||
as placeholders; swap in your own art (the hero banner especially). */
|
||||
/* Marketing landing — WorkClaw's full section layout/styling reproduced 1:1,
|
||||
Clawmates-branded with honest claims (no borrowed customer logos, no
|
||||
unverified SOC 2). Measurements/colours lifted from the live source.
|
||||
Coral text on light fills uses the AA-safe `coral-strong`; #e95656 stays on
|
||||
dark fills and solid buttons. */
|
||||
|
||||
// text-xl (20px bold) keeps white-on-coral above the WCAG large-text bar.
|
||||
const ctaCoral =
|
||||
"flex h-14 items-center rounded-full bg-marketing-coral px-9 text-xl font-bold text-white transition-colors hover:bg-[#d84a4a]";
|
||||
const ctaDark =
|
||||
"flex h-14 items-center rounded-full bg-marketing-ink px-9 text-xl font-bold text-white transition-colors hover:bg-marketing-slate-dark";
|
||||
"inline-flex items-center justify-center rounded-full bg-marketing-coral-strong font-semibold text-white transition-colors hover:bg-[#bd2d2d]";
|
||||
const ctaGhost =
|
||||
"flex h-14 items-center rounded-full border border-marketing-border bg-white px-9 text-xl font-semibold text-marketing-slate-dark transition-colors hover:bg-[#f1f3f7]";
|
||||
"inline-flex items-center justify-center rounded-full bg-white font-semibold text-[#0f172a] transition-colors hover:bg-[#f1f3f7]";
|
||||
|
||||
const TRUST: { icon: LucideIcon; label: string }[] = [
|
||||
{ icon: Gift, label: "Free credits to start" },
|
||||
{ icon: CreditCard, label: "No credit card required" },
|
||||
{ icon: ServerCog, label: "Self-hostable & air-gapped" },
|
||||
];
|
||||
|
||||
/** Hero: display headline, dual CTA, trust line, and a wide crew banner. */
|
||||
/* ---------- Hero ---------- */
|
||||
export function Hero() {
|
||||
return (
|
||||
<section className="relative w-full overflow-hidden px-4 pt-16 pb-12 text-center sm:pt-24">
|
||||
<div className="mx-auto w-[min(960px,92%)]">
|
||||
<h1 className="text-[clamp(44px,8vw,75px)] leading-[0.95] font-extrabold tracking-[-3px] text-marketing-ink">
|
||||
Your AI <span className="text-marketing-coral">crew</span>,
|
||||
<br />
|
||||
all hands on deck.
|
||||
</h1>
|
||||
<p className="mx-auto max-w-2xl pt-6 text-[clamp(17px,2.4vw,21.9px)] leading-snug font-medium text-marketing-slate">
|
||||
Clawmates are AI coworkers your whole team can chat with — and every
|
||||
action that leaves the ship waits for a human's go-ahead. Sail in
|
||||
our cloud or fully on your own hardware.
|
||||
</p>
|
||||
<div className="flex flex-wrap justify-center gap-3 pt-8">
|
||||
<Link href="/login" className={ctaCoral}>
|
||||
<section
|
||||
className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#ebf4fd] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
|
||||
style={{ zIndex: 2 }}
|
||||
>
|
||||
<div
|
||||
className="absolute left-1/2 flex w-full max-w-[720px] -translate-x-1/2 flex-col items-center px-6 text-center"
|
||||
style={{ top: "clamp(160px, 12.0139vw, 173px)", gap: 48, zIndex: 2 }}
|
||||
>
|
||||
<div className="flex flex-col items-center" style={{ gap: 13 }}>
|
||||
<h1
|
||||
className="m-0 font-extrabold"
|
||||
style={{
|
||||
color: "#161d27",
|
||||
fontSize: "clamp(49px, 6.667vw, 96px)",
|
||||
lineHeight: 0.9,
|
||||
letterSpacing: "-0.04em",
|
||||
}}
|
||||
>
|
||||
<span className="text-marketing-coral-strong">The AI crew</span>
|
||||
<br />
|
||||
for your team
|
||||
</h1>
|
||||
<p
|
||||
className="m-0 font-medium"
|
||||
style={{
|
||||
color: "#475569",
|
||||
fontSize: "clamp(16px, 1.944vw, 28px)",
|
||||
lineHeight: 1.3,
|
||||
letterSpacing: "-0.04em",
|
||||
maxWidth: 659,
|
||||
}}
|
||||
>
|
||||
Built for collaboration and safe for your whole team.
|
||||
<br className="hidden sm:inline" /> The open Claw runtime for actual
|
||||
work.
|
||||
</p>
|
||||
</div>
|
||||
<div
|
||||
className="flex w-full flex-col items-stretch justify-center px-4 sm:flex-row sm:items-start sm:px-0"
|
||||
style={{ gap: 16, maxWidth: 538 }}
|
||||
>
|
||||
<Link
|
||||
href="/login"
|
||||
className={`${ctaCoral} h-14 px-10 text-base sm:h-16`}
|
||||
style={{ filter: "drop-shadow(0 4px 12px rgba(22,29,39,0.08))" }}
|
||||
>
|
||||
Get started for free
|
||||
</Link>
|
||||
<a href="mailto:[email protected]" className={ctaGhost}>
|
||||
<a
|
||||
href="mailto:[email protected]"
|
||||
className={`${ctaGhost} h-14 border border-[#e2e8f0] px-10 text-base sm:h-16`}
|
||||
style={{ filter: "drop-shadow(0 4px 12px rgba(22,29,39,0.08))" }}
|
||||
>
|
||||
Book a demo
|
||||
</a>
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-x-7 gap-y-3 pt-8 text-sm font-medium text-marketing-slate">
|
||||
{TRUST.map((t) => (
|
||||
<span key={t.label} className="flex items-center gap-2">
|
||||
<t.icon aria-hidden size={18} className="text-marketing-coral" />
|
||||
{t.label}
|
||||
</span>
|
||||
<ul
|
||||
className="m-0 flex list-none flex-wrap items-start justify-center p-0"
|
||||
style={{ gap: 8 }}
|
||||
>
|
||||
{[
|
||||
{ src: "/images/marketing/icon-credits.svg", label: "$100 in free credits" },
|
||||
{ src: "/images/marketing/icon-no-card.svg", label: "No credit card required" },
|
||||
{ src: "/images/marketing/icon-soc2-pill.svg", label: "Self-hostable & air-gapped" },
|
||||
].map((t) => (
|
||||
<li
|
||||
key={t.label}
|
||||
className="inline-flex items-center justify-center rounded-full"
|
||||
style={{ gap: 12, height: 36, padding: "0 16px" }}
|
||||
>
|
||||
<img src={t.src} alt="" aria-hidden className="size-5 shrink-0" />
|
||||
<span
|
||||
className="font-semibold whitespace-nowrap"
|
||||
style={{ color: "#475569", fontSize: 14 }}
|
||||
>
|
||||
{t.label}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Hero art — placeholder; drop in your clawmate-crew illustration. */}
|
||||
<div className="mx-auto mt-14 w-[min(1100px,94%)]">
|
||||
<div className="relative aspect-[1100/560] overflow-hidden rounded-[32px] border border-marketing-border bg-marketing-periwinkle shadow-[0_32px_80px_-32px_rgba(22,29,39,0.25)]">
|
||||
<Image
|
||||
src="/images/onboarding/auth-claws-at-computer.png"
|
||||
alt="Your clawmate crew at work"
|
||||
fill
|
||||
sizes="(max-width: 1100px) 94vw, 1100px"
|
||||
className="object-cover"
|
||||
priority
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="absolute left-1/2 flex w-[600px] -translate-x-1/2 justify-center sm:w-[740px] md:w-[820px] lg:w-[920px] xl:w-[1020px] 2xl:w-[1098px]"
|
||||
style={{ bottom: "-9%", zIndex: 1 }}
|
||||
>
|
||||
<Image
|
||||
src="/images/marketing/claws-at-desk.png"
|
||||
alt="The clawmate crew working at a shared desk"
|
||||
width={1672}
|
||||
height={919}
|
||||
priority
|
||||
unoptimized
|
||||
className="h-auto w-full"
|
||||
style={{ filter: "drop-shadow(0 24px 40px rgba(22,29,39,0.08))" }}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Thin "meet the crew" band — fills WorkClaw's logo-marquee slot honestly
|
||||
* with our own claw lineup rather than borrowed customer logos. */
|
||||
/* ---------- Crew strip (honest replacement for the company-logo marquee) ---------- */
|
||||
export function CrewStrip() {
|
||||
return (
|
||||
<section className="w-full px-4 py-10">
|
||||
<p className="text-center text-sm font-semibold tracking-[0.12em] text-marketing-slate uppercase">
|
||||
A whole crew, ready to ship
|
||||
</p>
|
||||
<div className="mx-auto mt-6 w-[min(1100px,94%)]">
|
||||
<div className="relative aspect-[1100/90] overflow-hidden">
|
||||
<div className="relative w-full" style={{ zIndex: 1 }}>
|
||||
<div className="relative z-[1] flex flex-col items-center gap-6 pt-8 pb-14 lg:gap-8">
|
||||
<p className="text-center text-[16px] font-semibold text-[#77879e]">
|
||||
A whole crew, built on the open{" "}
|
||||
<span className="text-marketing-coral-strong">Claw</span> runtime
|
||||
</p>
|
||||
<div className="w-full overflow-hidden opacity-75">
|
||||
<Image
|
||||
src="/images/onboarding/auth-claw-carousel.png"
|
||||
src="/images/marketing/claw-carousel-strip.png"
|
||||
alt="The clawmate crew"
|
||||
fill
|
||||
sizes="(max-width: 1100px) 94vw, 1100px"
|
||||
className="object-contain"
|
||||
width={4096}
|
||||
height={123}
|
||||
unoptimized
|
||||
sizes="100vw"
|
||||
className="block h-auto w-full max-w-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const BADGES: { src: string; label: string }[] = [
|
||||
{ src: "/images/marketing/badge-secure.svg", label: "Secure" },
|
||||
{ src: "/images/marketing/badge-customizable.svg", label: "Customizable" },
|
||||
{ src: "/images/marketing/badge-easy.svg", label: "Easy to use" },
|
||||
{ src: "/images/marketing/badge-teams.svg", label: "Built for teams" },
|
||||
/* ---------- Pitch + trait badges ---------- */
|
||||
const BADGES = [
|
||||
{ src: "/images/marketing/badge-secure.svg", label: "Secure", w: 40, h: 38 },
|
||||
{ src: "/images/marketing/badge-customizable.svg", label: "Customizable", w: 36, h: 38 },
|
||||
{ src: "/images/marketing/badge-easy.svg", label: "Easy to use", w: 40, h: 40 },
|
||||
{ src: "/images/marketing/badge-teams.svg", label: "Built for teams", w: 40, h: 37 },
|
||||
];
|
||||
|
||||
/** "The crew" — the big positioning headline + the four trait badges. */
|
||||
export function Pitch() {
|
||||
return (
|
||||
<section
|
||||
id="crew"
|
||||
className="flex w-full flex-col items-center bg-white px-4 py-[80px] sm:py-[104px]"
|
||||
className="flex w-full flex-col items-center bg-white px-8 pt-[56px] pb-[80px] lg:px-6 lg:pt-[64px] lg:pb-[104px]"
|
||||
>
|
||||
<h2 className="max-w-4xl text-center text-[clamp(34px,6vw,64px)] leading-[1.02] font-extrabold tracking-[-2.56px] text-marketing-ink">
|
||||
Multiply your crew's horsepower with custom, collaborative{" "}
|
||||
<span className="text-marketing-coral">AI coworkers</span>.
|
||||
</h2>
|
||||
<div className="flex flex-wrap justify-center gap-x-16 gap-y-8 pt-14">
|
||||
{BADGES.map((b) => (
|
||||
<div key={b.label} className="flex flex-col items-center gap-3">
|
||||
<Image src={b.src} alt="" width={44} height={44} unoptimized />
|
||||
<span className="text-sm font-semibold text-marketing-ink">
|
||||
{b.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** A text/image feature row, themed light (periwinkle panel), plain (white),
|
||||
* or dark (navy panel). Eyebrow icon sits above the title. */
|
||||
function FeatureRow({
|
||||
variant,
|
||||
eyebrow,
|
||||
title,
|
||||
accent,
|
||||
body,
|
||||
image,
|
||||
imageAlt,
|
||||
id,
|
||||
}: {
|
||||
variant: "panel" | "plain" | "dark";
|
||||
eyebrow: ReactNode;
|
||||
title: string;
|
||||
accent: string;
|
||||
body: string;
|
||||
image: string;
|
||||
imageAlt: string;
|
||||
id?: string;
|
||||
}) {
|
||||
const dark = variant === "dark";
|
||||
// Bright coral on the periwinkle panel dips under AA; use the darker accent.
|
||||
const accentClass =
|
||||
variant === "panel" ? "text-marketing-coral-strong" : "text-marketing-coral";
|
||||
const wrap =
|
||||
variant === "panel"
|
||||
? "rounded-[40px] bg-marketing-periwinkle"
|
||||
: variant === "dark"
|
||||
? "rounded-[40px] bg-marketing-ink"
|
||||
: "";
|
||||
return (
|
||||
<section id={id} className="w-full px-4 py-6">
|
||||
<div
|
||||
className={`mx-auto grid w-[min(1100px,94%)] items-center gap-10 overflow-hidden px-8 py-12 sm:px-14 sm:py-16 lg:grid-cols-2 lg:gap-16 ${wrap}`}
|
||||
>
|
||||
<div>
|
||||
<span className="inline-flex">{eyebrow}</span>
|
||||
<h3
|
||||
className={`pt-5 text-[clamp(30px,4.5vw,48px)] leading-[1.04] font-extrabold tracking-[-1.8px] ${
|
||||
dark ? "text-white" : "text-marketing-ink"
|
||||
}`}
|
||||
>
|
||||
{title} <span className={accentClass}>{accent}</span>
|
||||
</h3>
|
||||
<p
|
||||
className={`max-w-md pt-4 text-base leading-relaxed ${
|
||||
dark ? "text-white/70" : "text-marketing-slate"
|
||||
}`}
|
||||
>
|
||||
{body}
|
||||
</p>
|
||||
</div>
|
||||
<div className="relative aspect-[4/3] overflow-hidden rounded-3xl bg-marketing-periwinkle">
|
||||
<Image
|
||||
src={image}
|
||||
alt={imageAlt}
|
||||
fill
|
||||
sizes="(max-width: 1100px) 94vw, 520px"
|
||||
className="object-cover"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function FeatureOneClick() {
|
||||
return (
|
||||
<FeatureRow
|
||||
variant="panel"
|
||||
eyebrow={
|
||||
<span className="flex size-10 items-center justify-center rounded-xl border border-dashed border-marketing-coral text-marketing-coral">
|
||||
<Plus aria-hidden size={20} />
|
||||
</span>
|
||||
}
|
||||
title="One-click"
|
||||
accent="setup"
|
||||
body="Spin up as many clawmates as your crew needs in a few minutes — each with its own computer. All in the cloud, no infrastructure to babysit."
|
||||
image="/images/onboarding/verification-claw-laptop.png"
|
||||
imageAlt="Setting up a new clawmate"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function FeatureWorks() {
|
||||
return (
|
||||
<FeatureRow
|
||||
variant="plain"
|
||||
eyebrow={
|
||||
<span className="flex size-10 items-center justify-center rounded-xl bg-marketing-periwinkle">
|
||||
<Image
|
||||
src="/images/marketing/icon-slack.svg"
|
||||
alt=""
|
||||
width={22}
|
||||
height={22}
|
||||
unoptimized
|
||||
/>
|
||||
</span>
|
||||
}
|
||||
title="Works"
|
||||
accent="where you do"
|
||||
body="Each clawmate has its own computer and can collaborate over Slack, email, and 3,000+ apps — right alongside the rest of the crew."
|
||||
image="/images/onboarding/verification-claw-laptop.png"
|
||||
imageAlt="A clawmate collaborating over chat"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function AlwaysOn() {
|
||||
return (
|
||||
<FeatureRow
|
||||
variant="dark"
|
||||
eyebrow={
|
||||
<span className="flex size-10 items-center justify-center rounded-xl bg-white/10 text-marketing-coral">
|
||||
<PawPrint aria-hidden size={22} />
|
||||
</span>
|
||||
}
|
||||
title="Always"
|
||||
accent="on watch"
|
||||
body="Your clawmate crew keeps real work moving while you meet, eat, play, and sleep — and surfaces anything that needs your call."
|
||||
image="/images/onboarding/auth-claws-at-computer.png"
|
||||
imageAlt="A clawmate working through the night"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const SKILLS: { src: string; title: string; body: string }[] = [
|
||||
{
|
||||
src: "/images/marketing/skills-left.gif",
|
||||
title: "Create any new skill",
|
||||
body: "Turn your crew's workflows into custom skills simply by chatting.",
|
||||
},
|
||||
{
|
||||
src: "/images/marketing/skills-center-desktop.svg",
|
||||
title: "Install skill packs",
|
||||
body: "Start from our library of battle-tested skills. Tweak as you need.",
|
||||
},
|
||||
{
|
||||
src: "/images/marketing/skills-right.gif",
|
||||
title: "Share skills easily",
|
||||
body: "Your crew builds once and the whole deck gets the benefit.",
|
||||
},
|
||||
];
|
||||
|
||||
/** "On deck" — the skills showcase (animated placeholders) on periwinkle. */
|
||||
export function SkillsShowcase() {
|
||||
return (
|
||||
<section
|
||||
id="deck"
|
||||
className="flex w-full flex-col items-center overflow-hidden bg-marketing-periwinkle px-4 py-[80px] sm:py-[104px]"
|
||||
>
|
||||
<h2 className="max-w-3xl text-center text-[clamp(34px,6vw,64px)] leading-[1.02] font-extrabold tracking-[-2.56px] text-marketing-ink">
|
||||
Your work,{" "}
|
||||
<span className="text-marketing-coral-strong">your way</span>.
|
||||
</h2>
|
||||
<p className="mx-auto max-w-xl pt-4 text-center text-base text-marketing-slate">
|
||||
Teach your crew a skill once and run it on every watch. Share skills
|
||||
across the whole team.
|
||||
</p>
|
||||
<div className="mt-12 grid w-[min(1040px,94%)] grid-cols-1 gap-8 sm:grid-cols-3">
|
||||
{SKILLS.map((g) => (
|
||||
<div key={g.title} className="flex flex-col items-center text-center">
|
||||
<div className="relative aspect-square w-full max-w-[260px] overflow-hidden rounded-3xl">
|
||||
<Image
|
||||
src={g.src}
|
||||
<div className="flex w-full max-w-[874px] flex-col items-center gap-[40px]">
|
||||
<h2
|
||||
className="w-[348px] text-center text-[40px] leading-none font-extrabold tracking-[-1.6px] sm:w-[600px] sm:text-[50px] lg:w-[874px] lg:text-[64px] lg:tracking-[-2.56px]"
|
||||
style={{ color: "#161d27" }}
|
||||
>
|
||||
Multiply your brainpower
|
||||
<br className="hidden lg:block" /> with a team of custom,
|
||||
<br className="hidden lg:block" /> collaborative{" "}
|
||||
<br className="inline sm:hidden" />
|
||||
<span className="text-marketing-coral">AI coworkers</span>
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 justify-items-center gap-x-4 gap-y-8 sm:grid-cols-4 lg:gap-x-0 lg:gap-y-0">
|
||||
{BADGES.map((b) => (
|
||||
<div
|
||||
key={b.label}
|
||||
className="flex w-[140px] flex-col items-center justify-center gap-4 lg:w-[204px]"
|
||||
>
|
||||
<img
|
||||
src={b.src}
|
||||
alt=""
|
||||
fill
|
||||
sizes="(max-width: 1040px) 94vw, 260px"
|
||||
className="object-contain"
|
||||
style={{ width: b.w, height: b.h }}
|
||||
/>
|
||||
<span
|
||||
className="text-[18px] leading-[0.9] font-medium tracking-[-0.36px] whitespace-nowrap"
|
||||
style={{ color: "#161d27" }}
|
||||
>
|
||||
{b.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- One-click setup ---------- */
|
||||
export function OneClick() {
|
||||
return (
|
||||
<section className="flex w-full justify-center bg-white px-4 py-10 lg:px-10 lg:py-14">
|
||||
<div
|
||||
className="relative flex w-full max-w-[1360px] flex-col items-stretch gap-8 overflow-hidden rounded-[40px] px-6 py-10 sm:px-12 sm:py-16 lg:flex-row lg:gap-4 lg:px-[88px] lg:py-[88px]"
|
||||
style={{ backgroundColor: "#f9fbff" }}
|
||||
>
|
||||
<div className="relative z-10 flex min-w-0 flex-1 flex-col items-start justify-start gap-8">
|
||||
<div className="relative" style={{ width: 137, height: 64 }}>
|
||||
<div
|
||||
className="absolute top-0 left-0 flex items-center justify-center bg-white"
|
||||
style={{ width: 64, height: 64, borderRadius: 16, border: "2px dashed #e95656" }}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
|
||||
<path d="M12 5v14M5 12h14" stroke="#e95656" strokeWidth="2.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<svg
|
||||
className="absolute"
|
||||
style={{ left: 55, top: 32, width: 36, height: 40 }}
|
||||
viewBox="0 0 24 26"
|
||||
fill="none"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M2 2L22 13.5L13.5 15.5L9.5 24L2 2Z" fill="white" stroke="#0f172a" strokeWidth="1.5" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="flex max-w-[623px] flex-col gap-4">
|
||||
<h2
|
||||
className="m-0 font-extrabold"
|
||||
style={{ color: "#161d27", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}
|
||||
>
|
||||
<span className="text-marketing-coral">One-click </span>setup
|
||||
</h2>
|
||||
<p
|
||||
className="m-0 max-w-[448px] font-medium"
|
||||
style={{ color: "rgba(10,15,30,0.75)", fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.6 }}
|
||||
>
|
||||
Set up as many clawmates as your team needs in a few minutes. All
|
||||
in the cloud.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative z-10 flex min-w-0 flex-1 items-center justify-center">
|
||||
<div
|
||||
className="flex flex-col gap-4 overflow-hidden pb-6"
|
||||
style={{ width: 375, maxWidth: "100%", backgroundColor: "white", border: "1px solid #e2e8f0", borderRadius: 32, boxShadow: "0px 17px 40px 0px rgba(0,0,0,0.1)" }}
|
||||
>
|
||||
<div
|
||||
className="relative flex w-full items-end justify-center overflow-hidden"
|
||||
style={{ height: 208, backgroundColor: "#bfd2ff" }}
|
||||
>
|
||||
<Image
|
||||
src="/images/marketing/support-claw.png"
|
||||
alt="A clawmate"
|
||||
width={1530}
|
||||
height={1830}
|
||||
unoptimized
|
||||
sizes="156px"
|
||||
className="object-contain object-bottom"
|
||||
style={{ width: 156, height: 187 }}
|
||||
/>
|
||||
</div>
|
||||
<p className="pt-5 text-lg font-bold text-marketing-ink">
|
||||
{g.title}
|
||||
</p>
|
||||
<p className="max-w-[260px] pt-2 text-sm leading-relaxed text-marketing-slate">
|
||||
{g.body}
|
||||
</p>
|
||||
<div className="flex w-full flex-col gap-6 px-6">
|
||||
<div className="flex flex-col gap-4">
|
||||
<h3 className="m-0 font-bold whitespace-nowrap" style={{ color: "#0f172a", fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
|
||||
Sandy Clawson
|
||||
</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<img src="/images/marketing/icon-slack.svg" alt="" className="size-5" />
|
||||
<span className="font-medium" style={{ color: "#475569", fontSize: 14, letterSpacing: "-0.02em" }}>Slack</span>
|
||||
</div>
|
||||
<span className="font-medium whitespace-nowrap" style={{ color: "#0f172a", fontSize: 14, letterSpacing: "-0.02em" }}>@sandy</span>
|
||||
</div>
|
||||
{["Shared with your team", "Talks with other Claws"].map((row) => (
|
||||
<div key={row} className="flex items-center justify-between">
|
||||
<span className="font-medium" style={{ color: "#475569", fontSize: 14, letterSpacing: "-0.02em" }}>{row}</span>
|
||||
<span aria-hidden className="inline-flex items-center justify-end" style={{ width: 36, height: 20, padding: 2, borderRadius: 9999, backgroundColor: "#e95656" }}>
|
||||
<span className="block" style={{ width: 16, height: 16, borderRadius: 9999, backgroundColor: "white", boxShadow: "0px 0px 1px 0px rgba(0,0,0,0.4), 0px 1px 3px 0px rgba(0,0,0,0.1)" }} />
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="inline-flex w-full items-center justify-center font-semibold transition-colors"
|
||||
style={{ height: 48, borderRadius: 9999, border: "1px solid #e2e8f0", backgroundColor: "white", color: "#0f172a", fontSize: 14, padding: "12px 24px", filter: "drop-shadow(0 4px 12px rgba(22,29,39,0.08))" }}
|
||||
>
|
||||
Create Claw
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const SECURITY: { title: string; body: string }[] = [
|
||||
{
|
||||
title: "Admin controls",
|
||||
body: "Org-wide access policies, per-claw permissions, and audit logs for everything the crew does.",
|
||||
},
|
||||
{
|
||||
title: "Credentials in a vault",
|
||||
body: "Secrets live in a separate broker, encrypted at rest. Crew never see a raw key.",
|
||||
},
|
||||
{
|
||||
title: "Separation of data",
|
||||
body: "Each clawmate gets its own sandboxed computer with private storage and no egress.",
|
||||
},
|
||||
{
|
||||
title: "Air-gappable",
|
||||
body: "Install from a signed, offline-verified bundle. No phone-home — your whole fleet on your hardware.",
|
||||
},
|
||||
];
|
||||
|
||||
/** "Enhanced security" — hand-key visual, headline, four plain columns. */
|
||||
export function Security() {
|
||||
return (
|
||||
<section
|
||||
id="security"
|
||||
className="flex w-full flex-col items-center bg-white px-4 py-[80px] sm:py-[104px]"
|
||||
>
|
||||
<h2 className="max-w-3xl text-center text-[clamp(34px,6vw,64px)] leading-[1.02] font-extrabold tracking-[-2.56px] text-marketing-ink">
|
||||
Safety built into the{" "}
|
||||
<span className="text-marketing-coral">hull</span>.
|
||||
</h2>
|
||||
<p className="mx-auto max-w-xl pt-4 text-center text-base text-marketing-slate">
|
||||
Not a life vest bolted on later — the safety layer is the architecture.
|
||||
</p>
|
||||
{/* Renders for users; appears blank only in Playwright's full-page
|
||||
toHaveScreenshot capture (a known quirk for the deepest <img>). */}
|
||||
<div className="relative mt-10 aspect-[484/396] w-[min(320px,72%)]">
|
||||
<Image
|
||||
src="/images/marketing/security-hand-key.png"
|
||||
alt=""
|
||||
fill
|
||||
sizes="320px"
|
||||
className="object-contain"
|
||||
unoptimized
|
||||
/>
|
||||
</div>
|
||||
<div className="grid w-[min(1040px,94%)] grid-cols-1 gap-10 pt-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{SECURITY.map((s) => (
|
||||
<div key={s.title} className="text-center sm:text-left">
|
||||
<p className="text-base font-bold text-marketing-ink">{s.title}</p>
|
||||
<p className="pt-2 text-sm leading-relaxed text-marketing-slate">
|
||||
{s.body}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/** Closing CTA on the dotted field. */
|
||||
export function CtaBand() {
|
||||
return (
|
||||
<section
|
||||
className="w-full bg-white bg-repeat px-4 py-[96px] sm:py-[128px]"
|
||||
style={{ backgroundImage: "url(/images/marketing/dot-pattern.svg)" }}
|
||||
>
|
||||
<div className="mx-auto flex w-[min(960px,92%)] flex-col items-center gap-10 text-center">
|
||||
<h2 className="text-[clamp(36px,6vw,72px)] font-extrabold tracking-[-2.5px] text-marketing-ink">
|
||||
Build your AI crew.
|
||||
</h2>
|
||||
<div className="flex flex-wrap justify-center gap-3">
|
||||
<Link href="/login" className={ctaCoral}>
|
||||
Get started for free
|
||||
</Link>
|
||||
<a href="mailto:[email protected]" className={ctaDark}>
|
||||
Book a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const FOOTER_LINKS: { label: string; href: string }[] = [
|
||||
{ label: "Get started", href: "/login" },
|
||||
{ label: "Sign in", href: "/login" },
|
||||
{ label: "FAQ", href: "#faq" },
|
||||
{ label: "Security", href: "#security" },
|
||||
/* ---------- Works where you do ---------- */
|
||||
const APPS = [
|
||||
"teams", "google", "notion", "threads", "salesforce", "monday",
|
||||
"asana", "telegram", "zoom", "linkedin", "mailchimp", "canva", "mslant",
|
||||
];
|
||||
|
||||
export function Works() {
|
||||
return (
|
||||
<section className="flex w-full justify-center overflow-hidden bg-white px-4 py-6 lg:px-10 lg:py-8">
|
||||
<div
|
||||
className="relative flex w-full max-w-[1360px] flex-col items-stretch gap-16 rounded-[24px] p-8 sm:p-12 lg:flex-row lg:gap-4 lg:overflow-hidden lg:rounded-[40px] lg:p-[88px]"
|
||||
style={{ backgroundColor: "#f9fbff" }}
|
||||
>
|
||||
<div className="flex min-w-0 flex-1 flex-col items-start justify-between gap-8 self-stretch lg:gap-0">
|
||||
<div className="flex w-full flex-col gap-8">
|
||||
<div className="flex items-center justify-center" style={{ width: 64, height: 64, backgroundColor: "white", borderRadius: 16, boxShadow: "2px 8px 16px 0px rgba(119,135,158,0.2)" }}>
|
||||
<img src="/images/marketing/icon-slack.svg" alt="" style={{ width: 46, height: 46 }} />
|
||||
</div>
|
||||
<div className="flex max-w-[623px] flex-col gap-4">
|
||||
<h2 className="m-0 font-extrabold" style={{ color: "#0f172a", fontSize: "clamp(32px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
|
||||
Works <span className="text-marketing-coral">where you do</span>
|
||||
</h2>
|
||||
<p className="m-0 max-w-[524px] font-medium" style={{ color: "rgba(10,15,30,0.75)", fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.6 }}>
|
||||
Each clawmate has their own computer and can collaborate over
|
||||
Slack, Teams, email, and 3,000+ apps.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="m-0 mt-8 flex w-full max-w-[420px] list-none flex-wrap items-center p-0 lg:mt-12" style={{ gap: 10 }}>
|
||||
{APPS.map((a) => (
|
||||
<li key={a} className="flex items-center justify-center bg-white" style={{ width: 40, height: 40, borderRadius: 10, boxShadow: "2px 8px 16px 0px rgba(119,135,158,0.2)" }}>
|
||||
<img src={`/images/marketing/app-${a}.png`} alt="" className="object-contain" style={{ width: 24, height: 24 }} />
|
||||
</li>
|
||||
))}
|
||||
<li className="inline-flex items-center justify-center" style={{ width: 56, height: 40, color: "#d23a3a", fontSize: 14, fontWeight: 700, letterSpacing: "-0.04em" }}>
|
||||
3,000<span style={{ marginLeft: 2 }}>+</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="relative hidden min-w-0 flex-1 items-center justify-center lg:flex">
|
||||
<div className="relative w-full" style={{ maxWidth: 500, aspectRatio: "1628 / 2106" }}>
|
||||
<Image src="/images/marketing/slack-convos.png" alt="Slack conversation previews" fill unoptimized sizes="500px" className="object-contain" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full lg:hidden" style={{ height: 190 }}>
|
||||
<div className="absolute top-0 left-1/2 flex -translate-x-1/2 items-start" style={{ width: 852 }}>
|
||||
<img src="/images/marketing/slack-card-1.png" alt="" className="shrink-0" style={{ width: 300, height: 179, marginRight: -24 }} />
|
||||
<img src="/images/marketing/slack-card-2.png" alt="" className="relative z-10 shrink-0" style={{ width: 300, height: 232, marginRight: -24 }} />
|
||||
<img src="/images/marketing/slack-card-3.png" alt="" className="shrink-0" style={{ width: 300, height: 177 }} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Always on ---------- */
|
||||
export function AlwaysOn() {
|
||||
return (
|
||||
<section className="flex w-full justify-center bg-white px-4 py-6 lg:px-10 lg:py-8">
|
||||
<div
|
||||
className="relative flex w-full max-w-[1360px] flex-col items-stretch gap-8 overflow-hidden rounded-[40px] px-8 py-10 sm:px-12 sm:py-12 lg:h-[565px] lg:flex-row lg:gap-4 lg:py-0 lg:pr-0 lg:pl-[88px]"
|
||||
style={{ backgroundColor: "#0f172a" }}
|
||||
>
|
||||
<div aria-hidden className="pointer-events-none absolute" style={{ top: -260, left: -260, width: 700, height: 700, background: "radial-gradient(closest-side, rgba(120,170,255,0.22), rgba(120,170,255,0) 70%)", filter: "blur(2px)" }} />
|
||||
<div className="relative z-10 flex min-w-0 flex-1 flex-col items-start justify-center gap-8 lg:justify-start lg:pt-[88px]">
|
||||
<img src="/images/moon.svg" alt="" width={61} height={64} className="block" />
|
||||
<div className="flex max-w-[623px] flex-col gap-4">
|
||||
<h2 className="m-0 font-extrabold" style={{ color: "#f8fafc", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
|
||||
Always <span className="text-marketing-coral">on</span>
|
||||
</h2>
|
||||
<p className="m-0 max-w-[496px] font-medium" style={{ color: "#cbd5e1", fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 1.6 }}>
|
||||
Your team of clawmates get real work done
|
||||
<br className="hidden sm:inline" /> while you meet, eat, play, and
|
||||
sleep.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative flex min-w-0 flex-1 items-center justify-center lg:items-stretch lg:justify-stretch">
|
||||
<div className="relative w-full lg:hidden" style={{ maxWidth: 543, aspectRatio: "449 / 496" }}>
|
||||
<Image src="/images/marketing/always-composite.png" alt="A clawmate working through the night" fill unoptimized sizes="543px" className="object-contain" />
|
||||
</div>
|
||||
<div className="relative hidden w-full lg:block lg:self-stretch">
|
||||
<Image src="/images/marketing/always-composite-desktop.png" alt="A clawmate working through the night" fill unoptimized sizes="50vw" className="object-cover object-center" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Skills (your work, your way) ---------- */
|
||||
export function SkillsShowcase() {
|
||||
return (
|
||||
<div className="relative w-screen" style={{ left: "50%", marginLeft: "-50vw" }}>
|
||||
<section
|
||||
id="deck"
|
||||
className="flex w-full scroll-mt-24 flex-col items-center overflow-x-hidden bg-[#ebf4fd] px-6 pt-[104px] pb-[104px] sm:pt-[176px] sm:pb-[200px]"
|
||||
>
|
||||
<div className="flex w-full flex-col items-center gap-[56px]" style={{ maxWidth: 1014 }}>
|
||||
<div className="flex max-w-[544px] flex-col items-center gap-4">
|
||||
<h2 className="text-center text-[32px] leading-none font-extrabold tracking-[-1.28px] text-[#161d27] sm:text-[48px] sm:tracking-[-2.24px] lg:text-[56px]">
|
||||
Your work, <span className="text-marketing-coral-strong">your way</span>
|
||||
</h2>
|
||||
<p className="max-w-[468px] text-center text-[18px] leading-[1.6] font-medium text-[#0a0f1e]/75 sm:text-[20px]">
|
||||
Teach your clawmates to work the way your company does. Share skills
|
||||
with your whole team.
|
||||
</p>
|
||||
</div>
|
||||
{/* Desktop */}
|
||||
<div className="hidden w-full sm:block">
|
||||
<div className="relative w-full" style={{ aspectRatio: "1014 / 165" }}>
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 rounded-[16px] bg-[#56b1e9]" style={{ width: "24.46%", aspectRatio: "248 / 163" }} />
|
||||
<img src="/images/marketing/skills-left.gif" alt="Create skill illustration" className="absolute" style={{ left: "3%", top: "10%", width: "19.7%" }} />
|
||||
<img src="/images/marketing/skills-center-desktop.svg" alt="" className="absolute left-1/2 z-10 -translate-x-1/2" style={{ top: "6%", width: "60.65%" }} />
|
||||
<img src="/images/marketing/skills-right.gif" alt="Share skills illustration" className="absolute" style={{ right: "3%", top: "10%", width: "19.7%" }} />
|
||||
</div>
|
||||
<div className="mt-4 flex w-full items-start">
|
||||
<div className="flex w-[23%] flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Create any new skill</h3>
|
||||
<p className="max-w-[241px] text-[14px] leading-[1.4] text-[#161d27]">Turn your team's workflows into custom skills simply by chatting.</p>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Install our skill packs</h3>
|
||||
<p className="max-w-[272px] text-[14px] leading-[1.4] text-[#161d27]">Get started with our library of battle-tested skills. Tweak as you need.</p>
|
||||
</div>
|
||||
<div className="flex w-[27%] flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Share skills easily</h3>
|
||||
<p className="max-w-[247px] text-[14px] leading-[1.4] text-[#161d27]">Your team builds once and gets the benefits of AI together.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Mobile */}
|
||||
<div className="flex w-full flex-col items-center gap-[80px] sm:hidden">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/images/marketing/skills-left.gif" alt="Create skill illustration" className="h-auto w-[160px]" />
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Create any new skill</h3>
|
||||
<p className="max-w-[241px] text-[14px] leading-[1.4] text-[#161d27]">Turn your team's workflows into custom skills simply by chatting.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/images/marketing/skills-center-desktop.svg" alt="" className="h-auto w-[300px]" />
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Install our skill packs</h3>
|
||||
<p className="max-w-[272px] text-[14px] leading-[1.4] text-[#161d27]">Get started with our library of battle-tested skills. Tweak as you need.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<img src="/images/marketing/skills-right.gif" alt="Share skills illustration" className="h-auto w-[160px]" />
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">Share skills easily</h3>
|
||||
<p className="max-w-[247px] text-[14px] leading-[1.4] text-[#161d27]">Your team builds once and gets the benefits of AI together.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Enhanced security ---------- */
|
||||
const SECURITY = [
|
||||
{ icon: "icon-admin", title: "Admin controls", body: "Admins can control access, app integrations, and skill installations." },
|
||||
{ icon: "icon-vault", title: "Custom-built vault", body: "Credentials are stored in a secure vault that can require human approval." },
|
||||
{ icon: "icon-separation", title: "Separation of data", body: "Each clawmate has a separate computer with private file storage." },
|
||||
{ icon: "icon-soc2", title: "Air-gappable", body: "Install from a signed, offline-verified bundle and run fully air-gapped." },
|
||||
];
|
||||
|
||||
export function Security() {
|
||||
return (
|
||||
<section id="security" className="flex w-full flex-col items-center px-6 py-[104px] sm:py-[128px]">
|
||||
<div className="flex w-full max-w-[1100px] flex-col items-center gap-10">
|
||||
<div className="flex flex-col items-center gap-4 text-center">
|
||||
<h2 className="text-[36px] leading-none font-extrabold tracking-[-2.24px] text-[#161d27] sm:text-[48px] lg:text-[56px]">
|
||||
Enhanced <span className="text-marketing-coral">security</span>
|
||||
</h2>
|
||||
<p className="max-w-[484px] text-[18px] leading-[1.6] text-[#0a0f1e]/75 sm:text-[20px]">
|
||||
Clawmates is built for security-minded teams, adding a layer of
|
||||
control and safety on top of the open Claw runtime.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-center gap-[14px]">
|
||||
<div className="h-[140px] sm:h-[170px] lg:h-[198px]">
|
||||
<img src="/images/marketing/security-hand-key.png" alt="Hand inserting a key into a vault" className="h-full w-auto" />
|
||||
</div>
|
||||
<div className="-my-[10px] h-[154px] sm:-my-[12px] sm:h-[186px] lg:-my-[14px] lg:h-[217px]">
|
||||
<img src="/images/marketing/key-snap.gif" alt="A clawmate securing a vault" className="h-full w-auto" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid w-full grid-cols-1 gap-10 pt-8 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{SECURITY.map((s) => (
|
||||
<div key={s.title} className="mx-auto flex max-w-[256px] flex-col items-center gap-2">
|
||||
<img src={`/images/marketing/${s.icon}.svg`} alt="" className="size-6" />
|
||||
<h3 className="text-center text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-[#161d27]">{s.title}</h3>
|
||||
<p className="max-w-[247px] text-center text-[14px] leading-[1.4] text-[#161d27]">{s.body}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- Footer (CTA tier + 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: "Book a demo", href: "mailto:[email protected]" },
|
||||
];
|
||||
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="w-full bg-marketing-ink px-4 pt-16 pb-10 text-white">
|
||||
<div className="mx-auto flex w-[min(1100px,94%)] flex-col gap-12">
|
||||
<div className="flex flex-col justify-between gap-8 sm:flex-row">
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-2">
|
||||
<span className="flex size-9 items-center justify-center rounded-xl bg-white/10">
|
||||
<PawPrint aria-hidden size={20} className="text-marketing-coral" />
|
||||
</span>
|
||||
<span className="text-lg font-bold tracking-tight">clawmates</span>
|
||||
</Link>
|
||||
<nav className="flex flex-col gap-3 text-sm sm:items-end">
|
||||
{FOOTER_LINKS.map((l) =>
|
||||
l.href.startsWith("/") || l.href.startsWith("#") ? (
|
||||
<Link
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-white/80 transition-colors hover:text-white"
|
||||
>
|
||||
{l.label}
|
||||
</Link>
|
||||
) : (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-white/80 transition-colors hover:text-white"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
<footer className="w-full">
|
||||
<div className="relative flex w-full flex-col items-center overflow-hidden bg-[#f9fbff] px-6 pt-[127px] pb-[160px] sm:pb-[120px]">
|
||||
<div className="absolute inset-0 h-full w-full opacity-[0.07]" style={{ backgroundImage: "url('/images/marketing/dot-pattern.svg')", backgroundSize: "cover", backgroundPosition: "center" }} />
|
||||
<div className="relative flex w-full max-w-[561px] flex-col items-center gap-[40px] sm:gap-[56px]">
|
||||
<img src="/images/marketing/footer-team.svg" alt="A team working together" className="h-auto w-[140px] sm:w-[190px]" />
|
||||
<h2 className="text-center text-[40px] leading-none font-extrabold tracking-[-2.56px] text-[#161d27] sm:text-[56px] lg:text-[64px]">
|
||||
Build your AI crew
|
||||
</h2>
|
||||
<div className="flex w-full max-w-[454px] flex-col gap-4 sm:flex-row">
|
||||
<Link href="/login" className={`${ctaCoral} h-16 flex-1 p-4 text-[16px] tracking-[-0.32px] whitespace-nowrap`}>
|
||||
Get started for free
|
||||
</Link>
|
||||
<a href="mailto:[email protected]" className="inline-flex h-16 flex-1 items-center justify-center rounded-[56px] bg-[#161d27] p-4 text-[16px] font-semibold tracking-[-0.32px] whitespace-nowrap text-white transition-colors hover:bg-[#2a3444]">
|
||||
Book a demo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col-reverse items-start justify-between gap-3 border-t border-white/10 pt-6 text-xs text-white/50 sm:flex-row sm:items-center">
|
||||
<span>© 2026 Clawmates · clawmates.work</span>
|
||||
<div className="flex gap-5">
|
||||
<a href="#" className="transition-colors hover:text-white/80">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a href="#" className="transition-colors hover:text-white/80">
|
||||
Terms of Service
|
||||
</a>
|
||||
</div>
|
||||
<div className="relative flex w-full flex-col items-center bg-[#161d27] px-6 pt-[40px] pb-12 sm:pt-[42px] sm:pb-16">
|
||||
<div className="flex w-full max-w-[1100px] flex-col gap-[48px] sm:gap-[72px]">
|
||||
<div className="flex items-center justify-between gap-8">
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-3">
|
||||
<span className="flex size-12 items-center justify-center rounded-2xl bg-white/10 sm:size-16">
|
||||
<PawMark />
|
||||
</span>
|
||||
<span className="text-2xl font-bold tracking-tight text-white sm:text-3xl">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex flex-col items-end gap-6">
|
||||
<nav className="flex flex-col items-end gap-6 text-[16px] font-normal text-white sm:flex-row sm:items-center">
|
||||
{FOOTER_LINKS.map((l) =>
|
||||
l.href.startsWith("/") ? (
|
||||
<Link key={l.label} href={l.href} className="transition-colors hover:text-white/80">{l.label}</Link>
|
||||
) : (
|
||||
<a key={l.label} href={l.href} className="transition-colors hover:text-white/80">{l.label}</a>
|
||||
),
|
||||
)}
|
||||
</nav>
|
||||
<div className="flex items-center gap-4">
|
||||
{SOCIALS.map((s) => (
|
||||
<a key={s.label} href="#" aria-label={s.label} className="text-white/70 transition-colors hover:text-white">
|
||||
{s.icon}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[16px] font-normal text-[#77879e]">
|
||||
<span>© 2026 Clawmates</span>
|
||||
<div className="flex items-center gap-8">
|
||||
<a href="#" className="transition-colors hover:text-white/60">Privacy Policy</a>
|
||||
<a href="#" className="transition-colors hover:text-white/60">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
|
||||
function PawMark() {
|
||||
return <PawPrint aria-hidden size={28} className="text-marketing-coral" />;
|
||||
}
|
||||
|
||||
const SOCIALS = [
|
||||
{ label: "Instagram", icon: (<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5"><rect x="2" y="2" width="20" height="20" rx="5" /><circle cx="12" cy="12" r="5" /><circle cx="17.5" cy="6.5" r="1.5" fill="currentColor" stroke="none" /></svg>) },
|
||||
{ label: "X", icon: (<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" /></svg>) },
|
||||
{ label: "LinkedIn", icon: (<svg viewBox="0 0 24 24" fill="currentColor" className="h-5 w-5"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" /></svg>) },
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user