Shadcn UI Hero Block
The Hero202 component serves as an engaging introduction section designed to captivate visitors with a combination of visual elements and actionable call-to-actions. It is a shadcn block that leverages a modern design approach, featuring striking graphical content alongside interactive buttons. This component aims to intrigue users and encourage further interaction through its compelling aesthetics.
Hero202 is detailed in its design, providing a dual-column layout that elegantly combines text with imagery. The component consists of a card to hold the content, with specific attention to typography and spacing; the large, bold headline and subtext evoke a sense of creativity and urgency. A small icon accompanies the header to symbolize modularity and simplicity. The presence of buttons offers clear pathways for user engagement, further enriched by subtle animations that add dynamism to the interaction. The shadcn component features a background image with creative transition effects that come into play on hover, enhancing the component's overall appeal.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
button @shadcn | Registry |
card @shadcn | Registry |