import { Button } from "@atropos/ui";
 
<Button>Start a project</Button>
<Button variant="secondary">View work</Button>
<Button variant="ghost">See the work</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>

import { Input } from "@atropos/ui";
 
const [name, setName] = React.useState("ledger-api");
 
<Input
  label="Service name"
  hint="Lowercase, hyphen-separated."
  value={name}
  onChange={(e) => setName(e.target.value)}
/>
<Input label="Webhook URL" error="Must be a valid HTTPS URL." />

import { Card } from "@atropos/ui";
 
<Card eyebrow="01 · Infrastructure" title="ledger-api">
  Event-sourced payments ledger. p95 142ms · 99.98% · 6 replicas.
</Card>
<Card framed eyebrow="02 · Stamp" title="Framed surface">
  Ink rule, no shadow - the brand stamp treatment.
</Card>

import { Badge } from "@atropos/ui";
 
<Badge>prod</Badge>
<Badge variant="accent">ember</Badge>
<Badge variant="success">healthy</Badge>
<Badge variant="error">down</Badge>

import { Textarea } from "@atropos/ui";
 
<Textarea label="Engagement brief" placeholder="Describe the work…" hint="Markdown supported." />
<Textarea label="Summary" showCount maxLength={600} defaultValue="…" />
<Textarea label="Notes" error="Brief is required." />

import { Select } from "@atropos/ui";
 
const [value, setValue] = React.useState("us-east-1");
 
<Select label="Region" options={regions} value={value} onValueChange={setValue} />

import { Checkbox } from "@atropos/ui";
 
const [agree, setAgree] = React.useState(true);
 
<Checkbox label="New build" checked={agree} onChange={(e) => setAgree(e.target.checked)} />
<Checkbox label="Rescue job" defaultChecked />
<Checkbox label="Unavailable option" disabled />

import { Radio } from "@atropos/ui";
 
<Radio name="engagement" defaultChecked label="Embedded team" />
<Radio name="engagement" label="Fixed-scope project" />
<Radio name="engagement" label="Advisory / fractional" />

import { Switch } from "@atropos/ui";
 
const [on, setOn] = React.useState(true);
 
<Switch
  label="Deploy on merge"
  description="Ship prod when CI passes on main"
  checked={on}
  onChange={(e) => setOn(e.target.checked)}
/>

import { Segmented } from "@atropos/ui";
 
const [value, setValue] = React.useState("grid");
 
<Segmented options={views} value={value} onValueChange={setValue} />

import { Slider } from "@atropos/ui";
 
const [value, setValue] = React.useState(6);
 
<Slider aria-label="Estimate" min={1} max={12} value={value} onChange={(e) => setValue(Number(e.target.value))} />

import { NativeSelect } from "@atropos/ui";
 
<NativeSelect aria-label="Region" defaultValue="us-east">
  <option value="us-east">us-east-1</option>
  <option value="us-west">us-west-2</option>
</NativeSelect>
<NativeSelect aria-label="Region" invalid defaultValue="us-east">…</NativeSelect>

import { ToggleGroup } from "@atropos/ui";
 
const [single, setSingle] = React.useState("left");
const [multiple, setMultiple] = React.useState<string[]>(["bold"]);
 
<ToggleGroup type="single" options={align} value={single} onValueChange={setSingle} />
<ToggleGroup type="multiple" options={format} value={multiple} onValueChange={setMultiple} />

import { Combobox } from "@atropos/ui";
 
const [value, setValue] = React.useState("ledger-api");
 
<Combobox label="Service" options={services} value={value} onValueChange={setValue} />

import { DatePicker } from "@atropos/ui";
 
const [date, setDate] = React.useState<Date>(new Date(2026, 5, 21));
 
<DatePicker label="Kickoff date" value={date} onChange={setDate} />

import { InputOTP } from "@atropos/ui";
 
const [code, setCode] = React.useState("4821");
 
<InputOTP length={6} value={code} onChange={setCode} />

import { Label } from "@atropos/ui";
 
<Label htmlFor="email" required>Work email</Label>
<input id="email" placeholder="you@trajectory.software" />

import { Field } from "@atropos/ui";
 
<Field label="Repository" htmlFor="repo" hint="Owner/name of the GitHub repository.">
  <input id="repo" placeholder="atropos/platform" />
</Field>
<Field label="Branch" htmlFor="branch" required error="That branch could not be found.">
  <input id="branch" placeholder="main" />
</Field>

import { InputGroup, Button } from "@atropos/ui";
 
<InputGroup>
  <InputGroup.Addon>https://</InputGroup.Addon>
  <input placeholder="my-service" />
  <InputGroup.Addon>.trajectory.software</InputGroup.Addon>
</InputGroup>
<InputGroup>
  <input placeholder="Search deployments" />
  <Button variant="primary">Search</Button>
</InputGroup>

import { ButtonGroup, Button } from "@atropos/ui";
 
<ButtonGroup>
  <Button variant="ghost">Day</Button>
  <Button variant="ghost">Week</Button>
  <Button variant="ghost">Month</Button>
</ButtonGroup>

import { Tabs, type TabItem } from "@atropos/ui";
 
const tabs: TabItem[] = [
  { value: "overview", label: "Overview", content: "Service is healthy." },
  { value: "logs", label: "Logs", content: "09:14 INFO deploy ok" },
];
 
<Tabs tabs={tabs} defaultValue="overview" />

import { Breadcrumb } from "@atropos/ui";
 
<Breadcrumb
  items={[
    { label: "projects", href: "#" },
    { label: "ledger-api", href: "#" },
    { label: "migration" },
  ]}
/>

import { Pagination } from "@atropos/ui";
 
const [page, setPage] = React.useState(5);
 
<Pagination page={page} count={12} onPageChange={setPage} />

import { DropdownMenu, type MenuItem } from "@atropos/ui";
 
const items: MenuItem[] = [
  { label: "View logs", shortcut: "⌘L" },
  { divider: true },
  { label: "Tear down", shortcut: "⌘⌫", danger: true },
];
 
<DropdownMenu header="ledger-api" items={items}>Actions</DropdownMenu>

import { Command, type CommandGroup } from "@atropos/ui";
 
const groups: CommandGroup[] = [
  { heading: "Actions", items: [{ label: "Deploy to prod", shortcut: "⌘R" }] },
];
 
const [open, setOpen] = React.useState(false);
 
<Command groups={groups} open={open} onOpenChange={setOpen} />

import { Kbd } from "@atropos/ui";
 
<Kbd>⌘K</Kbd>
<span className="inline-flex gap-1">
  <Kbd>⇧</Kbd>
  <Kbd>⌘</Kbd>
  <Kbd>P</Kbd>
</span>

import { ContextMenu, type ContextMenuItem } from "@atropos/ui";
 
const items: ContextMenuItem[] = [
  { label: "View logs", shortcut: "⌘L" },
  { divider: true },
  { label: "Tear down", shortcut: "⌘⌫", danger: true },
];
 
<ContextMenu items={items} header="ledger-api">
  <div>Right-click anywhere here</div>
</ContextMenu>

import { Menubar, type MenubarMenu } from "@atropos/ui";
 
const menus: MenubarMenu[] = [
  { label: "File", items: [{ label: "New service", shortcut: "⌘N" }] },
  { label: "Edit", items: [{ label: "Undo", shortcut: "⌘Z" }] },
];
 
<Menubar menus={menus} />

import { NavigationMenu, type NavMenuItem } from "@atropos/ui";
 
const items: NavMenuItem[] = [
  {
    label: "Services",
    active: true,
    links: [{ label: "Infrastructure", description: "Kubernetes, IaC, CI/CD" }],
  },
  { label: "Work", href: "#" },
];
 
<NavigationMenu items={items} />

import {
  Sidebar, SidebarHeader, SidebarContent,
  SidebarSection, SidebarItem, SidebarFooter,
} from "@atropos/ui";
 
<Sidebar>
  <SidebarHeader>Northwind</SidebarHeader>
  <SidebarContent>
    <SidebarSection title="Platform">
      <SidebarItem icon={<GridIcon />} active count={38}>Services</SidebarItem>
      <SidebarItem icon={<DeployIcon />}>Deploys</SidebarItem>
    </SidebarSection>
  </SidebarContent>
  <SidebarFooter>Alex Mercer</SidebarFooter>
</Sidebar>

import { Item } from "@atropos/ui";
 
<Item
  leading={<ItemAvatar initials="LA" />}
  title="ledger-api"
  description="Platform · prod"
  trailing={<HealthyBadge />}
/>
<Item bare active title="edge-gateway" description="Edge · prod" onClick={() => {}} />

import { Dialog, Button } from "@atropos/ui";
 
const [open, setOpen] = React.useState(false);
 
<Button onClick={() => setOpen(true)}>Tear down…</Button>
<Dialog
  open={open}
  onOpenChange={setOpen}
  title="Tear down ledger-api?"
  description="This cannot be undone."
  footer={<Button onClick={() => setOpen(false)}>Tear down</Button>}
/>

import { Sheet, Button, Input } from "@atropos/ui";
 
const [open, setOpen] = React.useState(false);
 
<Button variant="secondary" onClick={() => setOpen(true)}>Edit service</Button>
<Sheet open={open} onOpenChange={setOpen} eyebrow="Service" title="ledger-api">
  <Input label="Replicas" mono defaultValue="6" />
</Sheet>

import { Drawer, Button } from "@atropos/ui";
 
const [open, setOpen] = React.useState(false);
 
<Button variant="secondary" onClick={() => setOpen(true)}>Open drawer</Button>
<Drawer open={open} onOpenChange={setOpen} eyebrow="Deploy" title="Ship v2.4.2">
  <p>Rolling restart across 6 replicas.</p>
</Drawer>

import { AlertDialog, Button } from "@atropos/ui";
 
const [open, setOpen] = React.useState(false);
 
<Button onClick={() => setOpen(true)}>Tear down…</Button>
<AlertDialog
  open={open}
  onOpenChange={setOpen}
  onConfirm={() => {}}
  title="Tear down ledger-api?"
  description="This cannot be undone."
  confirmLabel="Tear down"
/>

import { Tooltip, Button } from "@atropos/ui";
 
<Tooltip content="Last deploy 14m ago · v2.4.1">
  <Button variant="ghost">Hover for tooltip</Button>
</Tooltip>

import { Popover } from "@atropos/ui";
 
<Popover trigger="ledger-api">
  <div className="px-1.5 py-1 font-semibold text-heading">ledger-api</div>
  <div className="px-1.5 pb-2 text-body">Event-sourced payments ledger.</div>
</Popover>

import { HoverCard } from "@atropos/ui";
 
<HoverCard trigger={<span className="text-heading underline">@riya</span>}>
  <div className="font-semibold text-heading">Riya Kapoor</div>
  <div className="text-body">Owns ledger-api deploy pipeline.</div>
</HoverCard>

import { Alert } from "@atropos/ui";
 
<Alert title="Scheduled maintenance">
  Region us-east-1 has a maintenance window Sunday 02:00–04:00 UTC.
</Alert>
<Alert variant="success" title="Deploy succeeded">
  ledger-api v2.4.1 is live in prod. Health checks passed.
</Alert>
<Alert variant="error" title="Health check failed">
  analytics-ingest is returning 503s in us-west-2.
</Alert>

import { useToast } from "@atropos/ui";
 
const { toast } = useToast();
 
<Button
  onClick={() =>
    toast({
      variant: "success",
      title: "Deploy succeeded",
      description: "ledger-api v2.4.1 is live in prod.",
    })
  }
>
  Show toast
</Button>

import { Progress } from "@atropos/ui";
 
<Progress value={64} aria-label="Upload progress" />
<Progress indeterminate aria-label="Loading" />

import { Skeleton } from "@atropos/ui";
 
<Skeleton circle className="h-10 w-10" />
<Skeleton className="h-3 w-3/4" />
<Skeleton className="h-3 w-1/2" />

import { Table, Badge } from "@atropos/ui";
 
<Table>
  <thead>
    <tr>
      <Table.Header>Service</Table.Header>
      <Table.Header>p95</Table.Header>
    </tr>
  </thead>
  <tbody>
    <Table.Row selected>
      <Table.Cell head>ledger-api</Table.Cell>
      <Table.Cell num>142ms</Table.Cell>
    </Table.Row>
  </tbody>
</Table>

import { DataTable, type DataColumn, Badge } from "@atropos/ui";
 
const columns: DataColumn<ServiceRow>[] = [
  { key: "service", header: "Service", head: true },
  { key: "p95", header: "p95", num: true, render: (r) => `${r.p95}ms` },
  { key: "status", header: "Status", sortable: false,
    render: (r) => <Badge variant={statusVariant[r.status]}>{r.status}</Badge> },
];
 
<DataTable<ServiceRow> columns={columns} data={data} defaultSort="p95" zebra />

import { Avatar, AvatarStack } from "@atropos/ui";
 
<Avatar name="Alex Mercer" status="online" />
 
<AvatarStack>
  <Avatar name="Alex Mercer" />
  <Avatar name="Rae Kapoor" />
  <Avatar initials="+5" />
</AvatarStack>

import { Accordion } from "@atropos/ui";
 
const items = [
  { value: "pricing", trigger: "How do you price?", content: "Monthly retainer…" },
  { value: "codebase", trigger: "Do you work in our repo?", content: "Yes - we join…" },
];
 
const [open, setOpen] = React.useState<string[]>(["pricing"]);
 
<Accordion items={items} type="single" value={open} onValueChange={setOpen} />

import { Calendar } from "@atropos/ui";
 
const [date, setDate] = React.useState<Date | null>(new Date(2026, 5, 18));
 
<Calendar value={date} onChange={setDate} today={new Date(2026, 5, 21)} />

import { Carousel } from "@atropos/ui";
 
const [index, setIndex] = React.useState(0);
 
<Carousel label="Platform metrics" index={index} onIndexChange={setIndex} loop>
  {metrics.map((m) => (
    <CarouselSlide key={m.k} {...m} />
  ))}
</Carousel>

import { Eyebrow, Heading, Text } from "@atropos/ui";
 
<Eyebrow>01 · Infrastructure</Eyebrow>
<Heading level={1}>Software you can stop worrying about.</Heading>
<Text>Apps, APIs and deploys that stay understandable.</Text>
<Text variant="muted">Secondary supporting copy.</Text>
<Text variant="mono">build · 2026.06.21 · a1b2c3d</Text>

import { Sticker } from "@atropos/ui";
 
<Sticker tone="accent" rotate={-3}>What I build</Sticker>
<Sticker tone="neutral" rotate={2}>Boring tech</Sticker>
<Sticker tone="success" rotate={-1}>It just runs</Sticker>

import { Reveal } from "@atropos/ui";
 
<Reveal>
  <div className="rounded-xs border bg-card px-4 py-3">
    Slides in once scrolled into view.
  </div>
</Reveal>

import { Separator } from "@atropos/ui";
 
<Separator className="my-3" />
 
<Separator orientation="vertical" />
 
<Separator label="Section 02" />

import { Spinner } from "@atropos/ui";
 
<Spinner size="sm" />
<Spinner size="md" />
 
<span className="inline-flex items-center gap-2 text-muted">
  <Spinner size="sm" className="text-muted" />
  Provisioning…
</span>

import { EmptyState } from "@atropos/ui";
 
<EmptyState
  icon={<InboxIcon />}
  title="No deployments yet"
  description="Connect a repository to run your first pipeline."
/>

import { AspectRatio } from "@atropos/ui";
 
<AspectRatio ratio={16 / 9}>
  <div className="flex items-center justify-center bg-sunken">media</div>
</AspectRatio>

import { Collapsible } from "@atropos/ui";
 
const [open, setOpen] = React.useState(true);
 
<Collapsible title="Environment variables" open={open} onOpenChange={setOpen}>
  <div className="font-mono text-[12.5px]">DATABASE_URL=postgres://…</div>
</Collapsible>

import { ScrollArea } from "@atropos/ui";
 
<ScrollArea maxHeight={168} className="w-full max-w-[340px]">
  {rows.map(([name, value]) => (
    <div key={name} className="flex justify-between border-b px-[14px] py-2.5">
      {name}
      <span className="font-mono text-muted">{value}</span>
    </div>
  ))}
</ScrollArea>

import { Resizable, ResizablePanel } from "@atropos/ui";
 
<Resizable defaultSize={50} className="h-[200px] w-full">
  <ResizablePanel label="Editor">Drag the handle to split.</ResizablePanel>
  <ResizablePanel label="Preview" className="bg-sunken">
    Arrow keys nudge the handle when focused.
  </ResizablePanel>
</Resizable>

import { LogStream } from "@atropos/ui/advanced";
 
const source = [
  { level: "INFO", message: "GET /v2/ledger/entries 200 · 42ms" },
  { level: "WARN", message: "retry queue depth 12 - approaching threshold" },
  { level: "ERR", message: "analytics-ingest connection refused · retrying" },
];
 
<LogStream source={source} title="ledger-api · production" />

import { DiffViewer } from "@atropos/ui/advanced";
 
const lines = [
  { type: "ctx", oldNo: 41, newNo: 41, code: [{ text: "function charge(req) {" }] },
  { type: "del", oldNo: 42, newNo: null, code: [{ text: "  if (!acct) throw …" }] },
  { type: "add", oldNo: null, newNo: 42, code: [{ text: "  if (!acct) throw new NotFoundError();" }] },
];
 
<DiffViewer fileName="services/ledger/charge.ts" lines={lines} />

import { FileTree } from "@atropos/ui/advanced";
 
const nodes = [
  {
    name: "src",
    defaultOpen: true,
    children: [
      { name: "index.ts", git: "M" },
      { name: "schema.sql", git: "A" },
    ],
  },
  { name: "package.json" },
];
 
<FileTree nodes={nodes} repo="ledger-service" defaultSelected="/src/index.ts" />

import { Kanban } from "@atropos/ui/advanced";
 
const columns = [
  { id: "backlog", name: "Backlog", rail: "var(--text-muted)" },
  { id: "progress", name: "In progress", rail: "var(--accent)" },
  { id: "done", name: "Done", rail: "var(--vs-success)" },
];
const cards = [
  { id: "1", columnId: "backlog", title: "Rotate signing keys", priority: "high", assignee: "AM" },
  { id: "3", columnId: "progress", title: "Idempotency keys", priority: "high", assignee: "JL" },
];
 
<Kanban columns={columns} defaultCards={cards} />

import { Gantt } from "@atropos/ui/advanced";
 
const rows = [
  { name: "Ledger v2 rewrite", sub: "platform", start: 0, end: 1.6, color: "var(--accent)" },
  { name: "Billing migration", sub: "payments", start: 1.2, end: 2.5, color: "var(--vs-success)" },
];
 
<Gantt rows={rows} today={2.45} />

import { Wizard } from "@atropos/ui/advanced";
 
const steps = [
  { label: "Account", content: <AccountForm /> },
  { label: "Workspace", content: <WorkspaceForm /> },
  { label: "Review", content: <ReviewSummary /> },
];
 
<Wizard steps={steps} />

import { NotificationCenter } from "@atropos/ui/advanced";
 
const items = [
  { id: "1", group: "Today", kind: "deploy", unread: true, time: "12m ago", message: <>ledger-api deployed</> },
  { id: "4", group: "Yesterday", kind: "pr", unread: false, time: "19h ago", message: <>PR #482 merged</> },
];
 
<NotificationCenter defaultItems={items} />

import { CodeBlock } from "@atropos/ui/advanced";
 
const code = `#!/usr/bin/env bash
set -euo pipefail
kubectl rollout status deploy/ledger-api --timeout=90s`;
 
<CodeBlock code={code} filename="deploy.sh" lang="bash" />

import { FileDropzone } from "@atropos/ui/advanced";
 
<FileDropzone hint="PNG, PDF, CSV up to 25 MB" />

import { RangeSlider } from "@atropos/ui/advanced";
 
const histogram = [3, 5, 8, 12, 18, 24, 30, 26, 22, 17, 13, 10];
 
<RangeSlider
  min={0}
  max={500}
  step={10}
  histogram={histogram}
  defaultValue={[120, 340]}
  format={(n) => `${n}`}
  caption="per-seat / month"
/>

import { DateRangePicker } from "@atropos/ui/advanced";
 
const defaultValue = { start: new Date(2026, 5, 8), end: new Date(2026, 5, 21) };
 
<DateRangePicker today={new Date(2026, 5, 21)} defaultValue={defaultValue} />

import { Button, Eyebrow } from "@atropos/ui";
 
<header className="flex items-center justify-between border-b px-6 py-4">
  <span className="text-[19px] font-semibold">atropos.</span>
  <nav className="flex items-center gap-6">
    <a href="#">Work</a>
    <Button size="sm">Start a project</Button>
  </nav>
</header>
 
<Eyebrow>Software you can stop worrying about</Eyebrow>
<h1>Build the product, then keep it <span className="text-accent-ink">running.</span></h1>
<div className="flex gap-3">
  <Button>Start a project</Button>
  <Button variant="ghost">See the work →</Button>
</div>

import { Badge, Button, Sidebar, SidebarContent, SidebarItem, SidebarSection, Table } from "@atropos/ui";
 
<div className="flex h-[560px]">
  <Sidebar width={212}>
    <SidebarContent>
      <SidebarSection title="Platform">
        <SidebarItem icon={<GridIcon />} active count={38}>Services</SidebarItem>
        <SidebarItem icon={<DeployIcon />}>Deploys</SidebarItem>
      </SidebarSection>
    </SidebarContent>
  </Sidebar>
  <div className="flex-1 p-6">
    <Button size="sm">New service</Button>
    <Table>
      <tbody>
        {rows.map((r) => (
          <Table.Row key={r.svc}>
            <Table.Cell head>{r.svc}</Table.Cell>
            <Table.Cell num>{r.p95}</Table.Cell>
            <Table.Cell><Badge variant="success">{r.status}</Badge></Table.Cell>
          </Table.Row>
        ))}
      </tbody>
    </Table>
  </div>
</div>

import { Button, Field, Input, Separator } from "@atropos/ui";
 
<div className="w-full max-w-[400px] rounded-xs border p-[34px]">
  <h1>Welcome back</h1>
  <Input label="Work email" defaultValue="alex@trajectory.software" mono />
  <Field label="Password" error={error ? "That password doesn't match our records." : undefined}>
    <Input aria-label="Password" type="password" error={error ? " " : undefined} />
  </Field>
  <Button className="mt-5 w-full justify-center">Sign in</Button>
  <Button variant="ghost" iconLeft={<GithubGlyph />}>Continue with GitHub</Button>
  <Separator />
</div>

import { Button, Eyebrow, Progress, Separator } from "@atropos/ui";
 
<Eyebrow>Getting started</Eyebrow>
<h1>Set up your workspace</h1>
<div className="flex items-center justify-between">
  <span>2 of 4 complete</span>
  <span className="font-mono">50%</span>
</div>
<Progress value={50} aria-label="Onboarding progress" />
<Separator />
<OnboardingStep done title="Create your organization" action={<span>Done</span>} />
<OnboardingStep title="Deploy your first service" hint="Push to main to trigger a build."
  action={<Button size="sm">Deploy</Button>} />

import { Button, Input, Separator, Switch } from "@atropos/ui";
 
<div className="grid grid-cols-[180px_1fr] gap-7">
  <nav className="flex flex-col gap-0.5">
    {["General", "Deploys", "Billing"].map((item, i) => (
      <a key={item} href="#" aria-current={i === 0 ? "page" : undefined}>{item}</a>
    ))}
  </nav>
  <div className="rounded-xs border p-[26px]">
    <Input label="Organization" defaultValue="Northwind Labs" />
    <Input label="Default region" defaultValue="us-east-1" mono />
    <Separator />
    <Switch defaultChecked label="Deploy on merge" description="Ship to prod when CI passes on main" />
    <Switch label="Weekly digest" description="Summary email every Monday" />
    <div className="flex justify-end gap-2.5">
      <Button variant="ghost">Cancel</Button>
      <Button>Save changes</Button>
    </div>
  </div>
</div>

import { Button } from "@atropos/ui";
 
<div className="flex min-h-[420px] flex-col items-center justify-center rounded-xs bg-heading text-center">
  <div className="font-mono text-[52px] font-semibold text-canvas">
    4<span className="text-[var(--vs-crimson-bright)]">0</span>4
  </div>
  <p className="max-w-[380px] text-canvas/70">
    That route was decommissioned, or never deployed.
  </p>
  <div className="flex gap-3">
    <Button>Back to console</Button>
    <Button variant="ghost">Status page</Button>
  </div>
</div>

import { Button, Card } from "@atropos/ui";
 
<div className="grid grid-cols-1 gap-[18px] md:grid-cols-3">
  <Card className="flex flex-col">
    <div className="font-mono uppercase text-muted">Advisory</div>
    <div className="text-[38px] font-semibold">$8k<span className="text-[15px] text-muted"> /mo</span></div>
    <EngagementsFeatures items={["Architecture reviews", "Weekly office hours"]} />
    <Button variant="ghost" className="mt-auto w-full justify-center">Start advisory</Button>
  </Card>
  <Card framed className="flex flex-col">
    <div className="font-mono uppercase text-accent-ink">Embedded</div>
    <div className="text-[38px] font-semibold">$24k<span className="text-[15px] text-muted"> /mo</span></div>
    <EngagementsFeatures items={["Ships to your production", "In your repos & on-call"]} />
    <Button className="mt-auto w-full justify-center">Start a project</Button>
  </Card>
</div>