Shadcn UI Hero Block
The Hero20 shadcn block integrates an interactive accordion with a synchronized carousel, providing users with detailed, structured content. This component is designed to answer potential user queries dynamically while showcasing visually appealing images that correspond to each accordion item. With an intuitive layout, this shadcn component enhances user engagement by combining informative content with captivating visuals.
The component is structured into two primary sections: an accordion that presents questions along with their corresponding answers and icons, and a synchronized carousel displaying related images. The user can interact with the accordion to view different sections, with the carousel concurrently updating its displayed image to match the active accordion item. This combination effectively delivers information and visual context, ensuring users gain a comprehensive understanding effortlessly.
Dependencies
| Package | Type |
|---|---|
| embla-carousel-fade | NPM |
| lucide-react | NPM |
| react | NPM |
accordion @shadcn | Registry |
badge @shadcn | Registry |
carousel @shadcn | Registry |