Luminary Hero
A premium dark hero section with atmospheric depth created through layered background effects and a signature rotating corona glow.
Features
- Animated corona — Slowly rotating conic gradient creates a cinematic light source behind the content
- Grain + dot grid — SVG fractal noise and radial dot pattern add tactile depth
- Staggered reveal — Each content block fades in sequentially with a blur-to-sharp transition
- Gradient headline — Lavender-to-peach gradient on the accent text draws the eye
- Dual CTAs — Solid white primary button with soft glow, ghost secondary with icon
- Social proof — Stats grid and trusted-by strip for credibility
- Responsive — Scales from mobile to wide desktop with fluid typography
Dependencies
@/components/ui/badge — Shadcn Badge@/components/ui/button — Shadcn Button@remixicon/react — RiArrowRightLine, RiPlayCircleLine
Customization
- Colors: Adjust the corona
conic-gradient stops and headline linear-gradient to match your brand
- Timing: Modify the
--stagger multiplier (default 0.13s) and base delay (0.2s) in the CSS
- Content: Replace headline, subheadline, badge text, stats, and trusted-by names directly
- Background: Change
#060609 to any near-black tone; slight color tints add richness
