Submatter/apps/web/components/marketing/comparison-section.tsx
Randall Stillwell 2f6adf4382 feat(web): Submatter marketing redesign with Signal Editorial system
Introduce public /landing and /pricing pages for the SBMTR brand with
bento features, convoy product demo, motion reveals, and scoped marketing
tokens. Unauthenticated visitors route to the landing page.

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-10 22:50:05 -05:00

78 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>
);
}