Hero

The first screen of a landing page: a headline, a way in and something to look at.

9 variants

Hero 01

NewPro

A landing-page opening: navigation with a phone menu, a headline that rises in word by word, an app window built from our components, and a slow row of customer names.

A split hero: headline, an email sign-up that validates, and a framed screenshot of the product, built from our components and tilted a degree or two.

Hero 03

NewPro

A developer-tool hero: a big headline, an install command with a copy button, and a code window beside a terminal, with tabs for TypeScript, Python and Go.

A centred editorial hero: an announcement pill, an oversized headline, two calls to action and a row of three headline numbers.

A hero with a full-width map drawn in SVG (grid, contours, a dashed route) and the headline in a solid panel that rises out of the page.

A hero whose picture is a stack of three offset component cards (a release, a working checklist and a comment), with a left-aligned headline under a breadcrumb-style eyebrow.

A text-only manifesto hero: a huge multi-line statement with one phrase underlined in the brand colour, a short paragraph and a single button.

Hero 08

NewPro

A hero with a working rent splitter in it: enter the rent and each person's income, switch between by-income and even splits, and see whole-dollar shares that always add up.

A mobile-app hero: a phone built from CSS holding a small working task list made from our components, plain text download buttons and one short quote under a ratings line.