Submatter/apps/web/components/marketing/how-it-works-section.tsx

import { Reveal } from "@/components/marketing/reveal";

const logLines = [
  { time: "09:14:02", level: "sync", msg: "imported plans/Plan-automation-foundation/Epic-convoy-lifecycle-mcp/Task-mcp-claim-task-tool.md" },
  { time: "09:14:03", level: "mcp", msg: "claim_task · workspace_id=ws_8a2 · agent=cursor-ide · run=ar_8f2a" },
  { time: "09:14:04", level: "convoy", msg: "role-implementer · model=composer-fast · status=in_progress" },
  { time: "09:18:41", level: "gate", msg: "human approval required · role-reviewer · awaiting operator" },
  { time: "09:22:15", level: "sync", msg: "frontmatter status → done · cursor_todo_id mapped" },
  { time: "09:22:16", level: "mcp", msg: "complete_task · run=ar_8f2a · duration=8m14s" },
] as const;

const levelColor: Record<string, string> = {
  sync: "text-agent",
  mcp: "text-matter",
  convoy: "text-foreground",
  gate: "text-matter",
};

export function HowItWorksSection() {
  return (
    <section id="pipeline" className="border-b border-foreground bg-[hsl(var(--hero))] py-24 text-[hsl(var(--hero-foreground))] sm:py-32">
      <div className="mx-auto max-w-6xl px-4 sm:px-6">
        <Reveal className="mb-12 flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="font-mono-brand text-[11px] uppercase tracking-[0.24em] text-[hsl(var(--hero-muted))]">
              Pipeline log
            </p>
            <h2 className="mt-4 font-marketing text-[clamp(2rem,4vw,3rem)] font-semibold tracking-[-0.03em]">
              From frontmatter to shipped
            </h2>
          </div>
          <p className="max-w-md font-mono-brand text-[11px] leading-relaxed text-[hsl(var(--hero-muted))]">
            tail -f .convoys/.metrics.jsonl
            <br />
            # auditable agent runs, not black-box chat
          </p>
        </Reveal>

        <Reveal delay={0.08}>
          <div className="border border-[hsl(var(--hero-border))] bg-[hsl(0_0%_6%)]">
            <div className="border-b border-[hsl(var(--hero-border))] px-4 py-2 font-mono-brand text-[10px] uppercase tracking-widest text-[hsl(var(--hero-muted))]">
              submatter · fleet · live
            </div>
            <ul className="divide-y divide-[hsl(var(--hero-border))]">
              {logLines.map((line) => (
                <li key={line.time} className="grid gap-2 px-4 py-3 font-mono-brand text-[12px] sm:grid-cols-[5rem_4rem_1fr] sm:gap-4">
                  <span className="text-[hsl(var(--hero-muted))]">{line.time}</span>
                  <span className={levelColor[line.level] ?? "text-[hsl(var(--hero-foreground))]"}>{line.level}</span>
                  <span className="text-[hsl(var(--hero-foreground)/0.9)]">{line.msg}</span>
                </li>
              ))}
            </ul>
          </div>
        </Reveal>
      </div>
    </section>
  );
}