Hero Section With Eclipse Glow
ProA 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
- Category
- Hero Sections
- 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

