Hero
Eye-catching hero section components for landing pages with gradient titles, promotional bars, and split layouts.
Note
All presented components are responsive and compatible with Tailwind CSS. Make sure Tailwind is configured in your project to use them.
Gradient Title with App Preview
A centered hero with a vibrant gradient text title, decorative blurred blob backgrounds, and a large app screenshot preview with light/dark mode variants. Includes a single call-to-action button and responsive typography scaling. Ideal for SaaS product launches and creative platform landing pages.
Business Landing with Promo Bar
A full business landing hero featuring a sticky promotional announcement bar, navigation header with logo and CTAs, a split text-and-image layout with trust badges (company logos), and dual call-to-action buttons (primary + outlined). Includes floating decorative corner shapes and a satisfaction score card overlay on the hero image. Perfect for corporate and B2B product sites.
Split Layout with Benefits List
A two-column hero with a benefits checklist (check icons), accent-colored heading highlight, and a large side image with a decorative glow/blur backdrop. The layout switches to single-column on mobile. Great for agency and consulting landing pages that need to emphasize value propositions upfront.