Cal.com Hero Section

Cal.com Hero Section, light-mode, minimal, light

Preview image. Unlock full-res

Light split hero with a pill navbar, left-aligned headline, install command, dual CTAs, and large isometric calendar illustrations on the right.

Summary

A light, left-aligned hero for a scheduling platform's developer offering: a floating pill navbar up top, a "New" badge, oversized headline, a copyable npx install command, two CTAs, and large isometric mockups of calendar and booking UI angled across the right. The isometric product art is the signature element.

Visual description

Off-white background with faint dashed guide lines. A rounded pill navbar floats at the top with the "Cal.com" wordmark and green "HIRING" pill at left, centered links (Solutions, Enterprise, Developer, Resources with carets, Pricing), and "Sign in" plus a dark "Get started" button at right. Below left: a small pill badge reading "New / Try the Platform Starter Kit", then an oversized dark two-line headline "Build your pixel-perfect booking experience", a grey supporting sentence, a dark code pill showing "npx @calcom/starter-kit my-platform" with copy and fork icons, and two buttons (dark "Get started", white "Explore the docs"). The right and lower-right area is filled with light isometric, tilted mockups of a monthly calendar grid (June 2022, a dark-highlighted "24"), a booking detail card, and time-slot lists, rendered in a clean white-and-grey 3D perspective.

Key takeaway

The copyable install-command pill placed right in the hero, which speaks directly to developers and invites immediate action. The isometric tilt turns flat product UI into dimensional artwork that fills the right side without a boxed screenshot.

Reuse notes

Best for developer platforms and API products where "start in your terminal" is the core hook. The isometric mockups take real effort to produce well; done poorly they look gimmicky. Light, airy palette suits a trustworthy infrastructure brand. Pair the command pill with working docs links.

More hero sections

See all

More like this