About this block

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.

When to use

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

• Nothing; it leads the page. The hero carries the shared sticky navbar at the top, like the other Modern SaaS heroes

After

• A feature section to break down the product once the hero has set the tone
• A pricing section further down for visitors who arrive ready to buy

What you can customize

• Headline and CTAs. Swap the two word headline and relabel both buttons. Keep the headline to a short two words so it wraps onto two clean lines like the original.
• Right rail statement. The monospace lines are the one deliberate accent in an otherwise Inter set block. Keep them short, three lines read best, and let the planet carry the weight rather than padding the column with filler.
• Planet. The illustration is a self contained 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. Replace the entries in the 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.