Better Stack Hero Section

Summary

A centered, dark hero where a two-line headline leads into one email field and a Start for free button. A faded customer logo strip closes the section.

Visual description

Near-black navy background with a faint dot grid and two angled, halftone light beams entering from the left and right edges. The top bar has the logo at left, then text links, three with small chevrons (Platform, Community, Company), plus Documentation, Pricing, and Enterprise. On the right, Sign in as a text link and a violet filled Sign up button. Centered in the hero: a small logo lockup, then the headline "Radically better / observability stack" in large white sans-serif, with a silver-to-grey gradient on the lower part of the letters. A grey two-line subhead follows. Below it, a dark rounded email field with a placeholder reading "Your work e-mail" sits beside a violet-blue filled Start for free button. A small grey line underneath reads "Start monitoring for free or book a demo", with the demo link underlined. Near the bottom, a row of low-contrast customer logos runs the full width and is cut off at both edges.

Key takeaway

The hero's first action is one input and one button, not a generic CTA, so the sign-up step starts on the page. The light beams on the flanks add depth without a product image, which keeps the headline as the visual center.

Reuse notes

A strong template for developer tools and SaaS sign-up heroes in dark mode. The input-plus-button pattern suits products with a free tier. The light beams are decorative and can be dropped if the brand has no matching asset. The logo strip is very faded, so check its legibility before reusing it at smaller sizes.