Equals Hero Section

Equals Hero Section, light-mode, minimal, light

Preview image. Unlock full-res

Light SaaS hero with a left-aligned headline beside a large ARR-dashboard screenshot framed by colorful spreadsheet-cell bars.

Summary

A light, left-aligned SaaS hero pairing an oversized headline with a detailed ARR-dashboard product screenshot, both flanked by bands of colorful spreadsheet-cell bars.

Visual description

A slim top nav shows the "= Equals" logo, a few center links, a "Sign in" text link, and a lilac pill "Get started." The left column carries a large two-line dark headline about a connected spreadsheet, a three-line gray subhead, and a single lilac "Get started" button. Filling the rest of the fold is a large white product screenshot titled "ARR Summary": filter chips, four metric tiles ($11.7M ARR, $1.3M net new, 1,104 customers, 112 net new), a "Total ARR" line chart with MoM growth, a stacked "ARR by components" bar chart, and a breakdown data table below. Saturated multicolor horizontal bars (magenta, teal, cobalt, yellow, coral, mint, peach) bleed in from the left edge and stack behind the screenshot on the right, echoing spreadsheet rows.

Key takeaway

Wrapping a dense, credible dashboard screenshot in the brand's colorful cell motif so the fold feels both serious (real metrics, charts, tables) and lively. The bleeding color bars on both sides frame the product shot without a hard container.

Reuse notes

Ideal for a data, analytics, or fintech SaaS that can show a genuinely rich, realistic dashboard above the fold. Needs both a polished product screenshot and a confident multicolor palette to work; either alone falls flat. The dense screenshot carries the section, so it must read cleanly at hero scale.

More hero sections

See all

More like this