73 lines
3 KiB
TypeScript
73 lines
3 KiB
TypeScript
|
import { Reveal, Stagger, StaggerItem } from "@/components/marketing/reveal";
|
||
|
|
|
||
|
|
const steps = [
|
||
|
|
{
|
||
|
|
n: "01",
|
||
|
|
title: "Write in plans/",
|
||
|
|
body: "YAML frontmatter on every Plan, Epic, and Task. Versioned in git like the rest of your codebase.",
|
||
|
|
code: "plans/Plan-*/Epic-*/Task-*.md",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
n: "02",
|
||
|
|
title: "Sync to Submatter",
|
||
|
|
body: "Importer mirrors frontmatter into Postgres. Cursor mappings keep agent ids aligned with slugs.",
|
||
|
|
code: "watch:markdown-backlog",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
n: "03",
|
||
|
|
title: "Agents claim work",
|
||
|
|
body: "Subagents call MCP tools against a scoped workspace_id. Runs appear in fleet history.",
|
||
|
|
code: "claim_task → complete_task",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
n: "04",
|
||
|
|
title: "Humans gate convoys",
|
||
|
|
body: "Reviewer and architect roles pause for approval. Status flows back to markdown on merge.",
|
||
|
|
code: "ready → in_progress → done",
|
||
|
|
},
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
export function HowItWorksSection() {
|
||
|
|
return (
|
||
|
|
<section id="pipeline" className="border-b border-border bg-card py-20 sm:py-28">
|
||
|
|
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
||
|
|
<Reveal className="mb-14 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
|
||
|
|
<div className="max-w-xl">
|
||
|
|
<p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">
|
||
|
|
How it works
|
||
|
|
</p>
|
||
|
|
<h2 className="mt-4 font-marketing text-3xl font-semibold tracking-[-0.02em] text-foreground sm:text-4xl">
|
||
|
|
From frontmatter to shipped
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<p className="max-w-sm font-marketing text-sm text-muted-foreground lg:text-right">
|
||
|
|
Interactive product demo pattern — show the file, show the pipeline, show the gate.
|
||
|
|
</p>
|
||
|
|
</Reveal>
|
||
|
|
|
||
|
|
<Stagger className="relative grid gap-0 md:grid-cols-4">
|
||
|
|
<div
|
||
|
|
className="absolute left-0 right-0 top-8 hidden h-px bg-border md:block"
|
||
|
|
aria-hidden
|
||
|
|
/>
|
||
|
|
{steps.map((step) => (
|
||
|
|
<StaggerItem key={step.n} className="relative border-t border-border pt-8 md:border-t-0 md:pt-0">
|
||
|
|
<div className="md:px-4 md:first:pl-0 md:last:pr-0">
|
||
|
|
<div className="mb-6 flex items-center gap-3">
|
||
|
|
<span className="flex size-8 items-center justify-center rounded-full border border-border bg-background font-mono-brand text-xs text-foreground">
|
||
|
|
{step.n}
|
||
|
|
</span>
|
||
|
|
<span className="hidden h-px flex-1 bg-border md:block" aria-hidden />
|
||
|
|
</div>
|
||
|
|
<h3 className="font-marketing text-base font-semibold text-foreground">{step.title}</h3>
|
||
|
|
<p className="mt-2 font-marketing text-sm leading-relaxed text-muted-foreground">{step.body}</p>
|
||
|
|
<p className="mt-4 font-mono-brand text-[11px] text-primary">{step.code}</p>
|
||
|
|
</div>
|
||
|
|
</StaggerItem>
|
||
|
|
))}
|
||
|
|
</Stagger>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|