<section className="grid gap-10 md:grid-cols-2 md:items-center">
  <div>
    <Badge tone="info" hatched>NEW · REV 0.1.0</Badge>
    <h1 className="mt-4 text-4xl font-bold uppercase leading-[1.05] tracking-[0.04em] text-ink-bright sm:text-5xl">
      Interfaces, drawn to spec.
    </h1>
    <p className="mt-5 max-w-md text-[15px] leading-relaxed text-ink-bright/80">
      Drafthaus is an accessible React component library rendered like a
      drafting-table plan — measured, annotated, and built on Base UI.
    </p>
    <div className="mt-8 flex flex-wrap items-center gap-3">
      <Button size="lg">Get started</Button>
      <Button variant="secondary" size="lg">Read the spec</Button>
    </div>
    <div className="mt-6 flex flex-wrap items-center gap-5">
      <Annotation>EST · 5 MIN SETUP</Annotation>
      <Annotation>DEPS · REACT 19</Annotation>
    </div>
  </div>
  <Card
    variant="hatch"
    title="Sheet"
    subtitle="DWG · 00.00"
    footerTitle="SCALE 1:1"
    footerSubtitle="SHEET 01/01"
  >
    <div className="flex h-44 items-center justify-center">
      <div className="text-center">
        <div className="text-6xl font-bold uppercase tracking-[0.08em] text-ink-bright">DH</div>
        <Annotation>DRAFTHAUS / DS</Annotation>
      </div>
    </div>
  </Card>
</section>