Hero Section With Eclipse Glow

Pro

A centered AI-product hero set against a dimmed purple eclipse-arc background, with a small wordmark, an eyebrow badge pill, a bold two-line headline, dual CTAs, and a static trusted-by row of real company wordmarks.

When to use Hero Section With Eclipse Glow

This is a self-contained landing hero: the wordmark, badge, headline, CTAs and logo row all ship in one component, so there is no separate navbar to keep in sync and no seam between blocks. There is no navigation menu built in on purpose, drop your own navbar block above this one once visitors need to move past the first screen.

The eclipse arc sits behind a soft radial scrim so a light headline stays readable no matter where it lands on the glow. Swap the background for something busier or higher key and recheck contrast in the middle of the frame before shipping, since that is exactly where the badge and headline sit.

The trusted-by row uses real, recognizable wordmarks rendered as inline SVG, not placeholder brand names, so treat it the way you would any other trademarked logo: fine for illustrating what a fully populated social-proof row looks like, but swap it for your own customers' names before a real launch. It is a static row on purpose, matching the no-marquee convention every other hero on this page follows.

Block details

Renders
CSS only. Paints as soon as the stylesheet arrives
Theme
Fixed dark surface. No light variant
Responsive
Mobile, tablet and desktop breakpoints are already set
Dependencies
@tabler/icons-reactclsxtailwind-merge
Source
221 lines, 25 KB in one file
Install
wensity add hero-section-with-eclipse-glow --type block
Stack
React, Next.js, TypeScript and Tailwind CSS v4
Licence
Included with Wensity Pro. The CLI copies the file into your repository and you own it from there
Tags
dark, ai, eclipse, badge, logo-wall, centered, trust
Last updated

More hero sections