Shadcn UI Hero Block
Hero118 is a marketing hero built with shadcn/ui in two columns on wide screens. The left column has a small mono “Coming Soon” badge, a headline that splits muted lead-in text with a stronger second line, supporting copy, and two buttons: secondary bordered and primary with arrow affordance. The right column is a bordered rounded frame around a placeholder image with thin animated gradient bars along the top and left edges. Below the main grid, a separate section introduces a logo strip headline and a slow auto-scrolling carousel of grayscale marks.
Default styling is light theme with muted fills on the badge and generous type scale. Buttons use rounded-xl padding. The image frame animation is subtle line motion rather than full-bleed video. The logo carousel combines auto-scroll and autoplay timing so marks drift continuously.
Reads as a prelaunch or waitlist block: restrained, product-marketing tone without heavy illustration. Moderate complexity: copy, one hero asset, logo SVGs, and the dual animation cues on the frame. Not minimal wireframe because of the motion accents and dual CTA pattern.
On small screens the columns stack with centered text then media, then the logo band stays full width underneath.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-auto-scroll | NPM |
| embla-carousel-autoplay | NPM |
| lucide-react | NPM |
aspect-ratio @shadcn | Registry |
button @shadcn | Registry |
carousel @shadcn | Registry |