Planet Centerpiece
A full-fold hero spread pairing a headline and CTAs with a token-built planet centerpiece and a monospace statement above a customer logo strip.
A full-fold hero spread pairing a headline and CTAs with a token-built planet centerpiece and a monospace statement above a customer logo strip.
The source for every Modern SaaS block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Planet Centerpiece is a full-fold hero laid out as a three way spread. A
standard sticky navbar tops the page, then a two line headline and its two CTAs
sit on the left, a self contained planet illustration holds the centre, and a
short monospace statement runs down the right. A row of customer logos closes
the hero along the foot. The section fills the viewport with min-h-screen so
the spread centres vertically with calm whitespace around it.
The planet is drawn entirely from theme tokens as a flat, gradient free SVG: a blurred solid circle reads as the rim glow, a tilted ring is split into a back arc behind the body and a front arc over it, a soft phase terminator shades the far side, and a small primary moon rides the ring as the one focal accent. Because nothing here is an external image, the whole hero, planet included, inverts cleanly between light and dark.
The customer logos are inlined as single path brand marks (Simple Icons) rather
than hosted image files, so they ship inside the block's registry item and tint
with the theme through currentColor.
Reach for this as the opening hero on a Modern SaaS landing page when you want a striking, editorial centre piece without a product screenshot or a photographic backdrop. The planet carries the visual weight, so the copy can stay short: a two word headline, two CTAs, and a three line statement are all it needs. The logo strip doubles as instant social proof, so you can often skip a separate logo cloud directly beneath the hero.
A natural flow around it on a Modern SaaS page:
Before
After
Planet component built from
small SVG primitives and text-* token classes. Retune the ring tilt, the
terminator offset, or the moon position, keeping currentColor so it stays
theme aware.logos array with your own single path
brand marks; each renders at currentColor so it inherits the muted logo
treatment automatically.Tip: this hero reads best sparse. Resist filling the right column or crowding the logo strip; the whitespace around the planet is the point.