Every Section Had the Same Shape

We were doing a standout pass on the homepage and noticed something: every content section had the exact same shape. Left-aligned max-w-3xl heading. A muted second sentence. Empty space on the right. Then the next section. Same thing.

Five sections. Same rhythm. Forty percent of the content area sitting empty every time.

The muted sentence was the tell. Each heading had a <span className="text-muted"> sitting inside the <h2>. The visual intent was "here's the claim, and here's the softer supporting line." But the structure said something different: the heading contained its own caveat. Semantically, that second sentence belonged somewhere else.

The second problem was the empty space. The page used a max-w-6xl container with a max-w-3xl heading inside it. On a wide viewport, the heading fills the left half and the right side is empty on every section. Not white space around a focused element. Just unused shell.

We extracted a SectionHeader component that takes the same copy and puts it in the right places:

<div className="grid grid-cols-1 gap-x-12 gap-y-6 md:grid-cols-[1.7fr_1fr] md:items-end">
  <div>
    <p className="font-mono text-xs uppercase tracking-[0.2em] text-accent">{eyebrow}</p>
    <h2 className="mt-6 text-3xl font-semibold leading-[1.12] tracking-tight sm:text-5xl">
      {title}
    </h2>
  </div>
  <div className="md:pb-2">
    <p className="text-lg leading-relaxed text-muted">{note}</p>
  </div>
</div>

The h2 now contains only the heading. The supporting sentence moves to the right column as its own paragraph. No copy changed. Same words, different structure.

The grid ratio is 1.7fr 1fr. That keeps the heading dominant: the claim gets most of the horizontal space, the note gets a narrower column that reads more like a caption than a headline. items-end aligns the baselines of the heading bottom and the note text, so they read as a pair instead of the note floating to the top of a short column.

The result was visible in the page height. Desktop went from 8300px to 7421px. Not because we deleted anything, but because sections that were leaving space empty weren't doing that anymore.

The component also accepts optional eyebrowClass and noteClass overrides. One section sits on a dark background, so it needed different token values there. The overrides handle that without duplicating the structure.

The lesson here is about using CSS to put content where it belongs structurally, not just visually. We had text in the wrong place, hidden behind styling that made it look right. Moving it to the correct semantic position fixed the structure and the layout problem at the same time.