79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
|
import { Reveal } from "@/components/marketing/reveal";
|
||
|
|
|
||
|
|
const rows = [
|
||
|
|
{ label: "Markdown backlog in git", sbmtr: true, linear: false, notion: "partial", convoy: false },
|
||
|
|
{ label: "MCP claim / complete", sbmtr: true, linear: false, notion: false, convoy: true },
|
||
|
|
{ label: "Full workspace surface", sbmtr: true, linear: "partial", notion: true, convoy: false },
|
||
|
|
{ label: "Role-based convoys", sbmtr: true, linear: false, notion: false, convoy: true },
|
||
|
|
{ label: "Human approval gates", sbmtr: true, linear: false, notion: false, convoy: "partial" },
|
||
|
|
] as const;
|
||
|
|
|
||
|
|
function Cell({ value }: { value: boolean | string }) {
|
||
|
|
if (value === true) return <span className="font-mono-brand text-agent">yes</span>;
|
||
|
|
if (value === false) return <span className="text-muted-foreground/50">—</span>;
|
||
|
|
return <span className="font-mono-brand text-matter">{value}</span>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ComparisonSection() {
|
||
|
|
return (
|
||
|
|
<section className="border-b border-border bg-background py-20 sm:py-28">
|
||
|
|
<div className="mx-auto max-w-6xl px-4 sm:px-6">
|
||
|
|
<Reveal className="mb-10 max-w-2xl">
|
||
|
|
<p className="font-mono-brand text-[11px] uppercase tracking-[0.2em] text-muted-foreground">Compare</p>
|
||
|
|
<h2 className="mt-4 font-marketing text-3xl font-semibold tracking-[-0.02em] text-foreground">
|
||
|
|
The agent-native lane
|
||
|
|
</h2>
|
||
|
|
</Reveal>
|
||
|
|
|
||
|
|
<Reveal delay={0.08}>
|
||
|
|
<div className="overflow-x-auto">
|
||
|
|
<table className="w-full min-w-[640px] border-collapse text-left text-sm">
|
||
|
|
<thead>
|
||
|
|
<tr className="border-b-2 border-foreground">
|
||
|
|
<th className="py-3 pr-4 font-marketing font-medium text-muted-foreground" scope="col">
|
||
|
|
Capability
|
||
|
|
</th>
|
||
|
|
<th
|
||
|
|
className="px-4 py-3 font-display text-xs font-extrabold tracking-[0.2em] text-foreground"
|
||
|
|
scope="col"
|
||
|
|
>
|
||
|
|
SBMTR
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
|
||
|
|
Linear
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
|
||
|
|
Notion
|
||
|
|
</th>
|
||
|
|
<th className="px-4 py-3 font-marketing font-medium text-muted-foreground" scope="col">
|
||
|
|
Convoy tools
|
||
|
|
</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
{rows.map((row) => (
|
||
|
|
<tr key={row.label} className="border-b border-border">
|
||
|
|
<td className="py-4 pr-4 font-marketing text-foreground">{row.label}</td>
|
||
|
|
<td className="px-4 py-4">
|
||
|
|
<Cell value={row.sbmtr} />
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-4">
|
||
|
|
<Cell value={row.linear} />
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-4">
|
||
|
|
<Cell value={row.notion} />
|
||
|
|
</td>
|
||
|
|
<td className="px-4 py-4">
|
||
|
|
<Cell value={row.convoy} />
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
))}
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
</Reveal>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|