A two-column hero, and how much "tighten the spacing" actually moved

The homepage Hero has always been a single centered column: logo on top, heading and CTAs below, everything squeezed into a max-w-3xl box. At anything wider than a laptop screen, that leaves a lot of black space on either side, and pushes the first real content section down further than it needs to.

I filed this one after staring at a screenshot on a wide monitor and wondering why so much of the fold was empty. The fix seemed obvious: split the hero into two columns, logo on one side, copy and buttons on the other. But the issue itself flagged a real tradeoff. Centered reads as a clean “identity moment” for the logo. Splitting it might dilute that.

So before touching anything, I measured. I loaded the current hero in a real browser and read the #software section’s offset from the top: 1017.5px, at both 1280 and 1920 wide, since a centered layout doesn’t get any taller or shorter with viewport width. Then I built the two-column version (flex-row at md:, logo left, text right, mobile untouched) and re-measured: 651px. A 36% cut, just from using space that was already there.

I screenshotted both versions at four widths and compared them side by side instead of deciding from a description. Two-column won, with one note to carry forward: tighten the spacing with the section below.

That one was a smaller win than it sounds. I only touched Hero’s own bottom padding (md:pb-20 → md:pb-10), which took the number from 651px to 611px. The bigger chunk of that gap is SoftwareSection’s own top padding (md:py-28), which I left alone since it’s shared rhythm across the page, not something specific to this hero. If someone wants it tighter than 611px, that’s a follow-up touching a different component.

End result: 1017.5px → 611px, a 40% reduction in scroll distance to the first content section, confirmed live in production.