feat(marketing): trim landing to hero, crew, hierarchy, security
Remove the Pitch, One-click, Works, Always-on and Skills sections and the "Build your AI crew" footer CTA banner. Page is now Hero → CrewStrip → Hierarchy → Security → FAQ → footer (dark tier kept). Prune the now-dead section functions, consts, and imports (Image, skills icons). Repoint the "marketing rendered" heading assertion (p0/p7/visual) from the removed Pitch heading to the hero h1 (/agentic systems/); 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
44512a744f
commit
5638006eb6
@@ -1,5 +1,4 @@
|
||||
import { Lock, Package, Share2, ShieldCheck, Wand2 } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { Lock, ShieldCheck } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import { AgentToken } from "./AgentToken";
|
||||
@@ -127,334 +126,6 @@ export function CrewStrip() {
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 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 },
|
||||
];
|
||||
|
||||
export function Pitch() {
|
||||
return (
|
||||
<section
|
||||
id="crew"
|
||||
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]"
|
||||
>
|
||||
<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-[650] 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" />
|
||||
AI coworkers
|
||||
</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=""
|
||||
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 #e0584a" }}
|
||||
>
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden>
|
||||
<path d="M12 5v14M5 12h14" stroke="#e0584a" 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-[650]"
|
||||
style={{ color: "#161d27", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}
|
||||
>
|
||||
One-click 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-center justify-center overflow-hidden"
|
||||
style={{ height: 168, background: "linear-gradient(160deg, #1e293b, #0b1220)" }}
|
||||
>
|
||||
<AgentToken name="Sandy Clawson" size={76} />
|
||||
</div>
|
||||
<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: "#e0584a" }}>
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------- 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-[650]" style={{ color: "#0f172a", fontSize: "clamp(32px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
|
||||
Works where you do
|
||||
</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-[650]" style={{ color: "#f8fafc", fontSize: "clamp(36px, 5vw, 56px)", lineHeight: 0.9, letterSpacing: "-0.04em" }}>
|
||||
Always on
|
||||
</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 z-10 flex min-w-0 flex-1 items-center justify-center lg:py-[64px] lg:pr-[64px]">
|
||||
<div className="w-full max-w-[520px] overflow-hidden rounded-2xl border border-white/10 bg-[#0b1220] font-mono text-[12.5px] leading-relaxed shadow-2xl">
|
||||
<div className="flex items-center gap-1.5 border-b border-white/10 px-4 py-3">
|
||||
<span className="size-2.5 rounded-full bg-white/20" />
|
||||
<span className="size-2.5 rounded-full bg-white/20" />
|
||||
<span className="size-2.5 rounded-full bg-white/20" />
|
||||
<span className="ml-2 text-[11px] text-marketing-slate-light">
|
||||
marketing-claw · activity
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 px-4 py-4 text-marketing-slate-light">
|
||||
<p>
|
||||
<span className="text-marketing-slate-light">02:14</span>{" "}
|
||||
<span className="text-marketing-azure">→</span> drafting the weekly
|
||||
report…
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-marketing-slate-light">02:15</span>{" "}
|
||||
<span className="text-marketing-azure">→</span> querying the
|
||||
analytics warehouse
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-marketing-slate-light">02:17</span>{" "}
|
||||
<span className="text-marketing-teal">✓</span> 3 tool calls
|
||||
completed
|
||||
</p>
|
||||
<p className="rounded-md bg-white/[0.04] px-2 py-1.5">
|
||||
<span className="text-marketing-teal">●</span> awaiting human
|
||||
approval — <span className="text-white">send email → team@</span>
|
||||
</p>
|
||||
<p>
|
||||
<span className="text-marketing-slate-light">02:19</span>{" "}
|
||||
<span className="text-marketing-teal">✓</span> approved by you ·
|
||||
sent
|
||||
</p>
|
||||
<p className="flex items-center gap-2 text-marketing-slate-light">
|
||||
<span className="inline-block size-2 rounded-full bg-marketing-teal" />
|
||||
running while you sleep
|
||||
</p>
|
||||
</div>
|
||||
</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-marketing-mist 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-[650] tracking-[-1.28px] text-[#161d27] sm:text-[48px] sm:tracking-[-2.24px] lg:text-[56px]">
|
||||
Your work, your way
|
||||
</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>
|
||||
<div className="grid w-full gap-6 sm:grid-cols-3">
|
||||
{[
|
||||
{
|
||||
Icon: Wand2,
|
||||
title: "Create any new skill",
|
||||
body: "Turn your team's workflows into custom skills simply by chatting.",
|
||||
},
|
||||
{
|
||||
Icon: Package,
|
||||
title: "Install our skill packs",
|
||||
body: "Get started with our library of battle-tested skills. Tweak as you need.",
|
||||
},
|
||||
{
|
||||
Icon: Share2,
|
||||
title: "Share skills easily",
|
||||
body: "Your team builds once and gets the benefits of AI together.",
|
||||
},
|
||||
].map(({ Icon, title, body }) => (
|
||||
<div
|
||||
key={title}
|
||||
className="flex flex-col items-center gap-4 rounded-3xl border border-marketing-border bg-white px-6 py-10 text-center"
|
||||
>
|
||||
<span
|
||||
className="flex size-14 items-center justify-center rounded-2xl"
|
||||
style={{ backgroundColor: "rgba(59,130,246,0.1)" }}
|
||||
>
|
||||
<Icon aria-hidden size={26} strokeWidth={1.75} className="text-marketing-azure" />
|
||||
</span>
|
||||
<h3 className="text-[18px] leading-[1.1] font-semibold tracking-[-0.18px] text-marketing-ink">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="max-w-[260px] text-[14px] leading-[1.5] text-marketing-slate">
|
||||
{body}
|
||||
</p>
|
||||
</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." },
|
||||
@@ -517,33 +188,6 @@ const FOOTER_LINKS = [
|
||||
export function Footer() {
|
||||
return (
|
||||
<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]">
|
||||
<div className="flex items-center justify-center gap-2.5">
|
||||
{[
|
||||
{ n: "Marketing Claw", a: "#3b82f6" },
|
||||
{ n: "Support Claw", a: "#14b8a6" },
|
||||
{ n: "Research Claw", a: "#3b82f6" },
|
||||
{ n: "Ops Claw", a: "#3b82f6" },
|
||||
{ n: "Growth Claw", a: "#14b8a6" },
|
||||
].map(({ n, a }) => (
|
||||
<AgentToken key={n} name={n} size={44} accent={a} />
|
||||
))}
|
||||
</div>
|
||||
<h2 className="text-center text-[40px] leading-none font-[650] 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>
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user