Release Pill: Hero Badge

import { ReleasePill, type Release } from "@/components/ui/release-pill";

const releases: Release[] = [
  {
    version: "v2.4",
    title: "Agents 2.0",
    date: "Oct 10",
    href: "#agents-2",
    summary: "Agents that plan, act and check their own work.",
  },
  { version: "v2.3", title: "Slack approvals", date: "Sep 26", href: "#slack-approvals" },
  { version: "v2.2", title: "SOC 2 Type II", date: "Sep 12", href: "#soc-2" },
  { version: "v2.1", title: "Scheduled runs", date: "Aug 29", href: "#scheduled-runs" },
];

export function ReleasePillDemo() {
  return (
    <section className="relative flex w-full max-w-3xl flex-col items-center px-6 py-16 text-center text-foreground sm:py-24">
      <ReleasePill releases={releases} changelogHref="#changelog" peek />

      <h2 className="mt-7 max-w-[15ch] text-4xl/[1.05] font-semibold tracking-tight text-balance sm:text-6xl/[1.03]">
        The agent that does the busywork
      </h2>
      <p className="mt-5 max-w-md text-base/7 text-pretty text-muted-foreground">
        Hand it the weekly report, the expense chasing and the calendar tetris. It plans the steps,
        does them, and checks its own work before it tells you.
      </p>

      <div className="mt-9 flex flex-wrap items-center justify-center gap-3">
        <a
          href="#start"
          className="inline-flex h-11 items-center rounded-full bg-foreground px-6 text-sm font-medium text-background outline-none hover:opacity-90 focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
        >
          Start for free
        </a>
        <a
          href="#demo"
          className="inline-flex h-11 items-center rounded-full px-6 text-sm font-medium ring-1 ring-foreground/15 outline-none hover:bg-foreground/5 focus-visible:ring-2 focus-visible:ring-foreground"
        >
          Watch a demo
        </a>
      </div>
    </section>
  );
}