Back to components
Home component
Hero Banner
Full-width hero banner with autoplay carousel, gradient overlays, action buttons, and dot indicators.
Install
What it does
- Autoplay carousel with configurable interval
- Gradient overlay on images for text readability
- Title, subtitle, and CTA button per slide
- Dot indicators for current slide position
- Swipe gesture navigation
When to use
Use it
Home page hero sliders, promotional banners, featured content carousels.
Skip it
Static image banners (use a simple Image component instead).
Files & routes added
- components/home/hero-banner.tsx