BlocksHeroHero 01

Hero 01

About this block

Hero 01 is a two-column hero section built with shadcn/ui and Tailwind CSS for Next.js 15 landing pages. The left column holds an announcement badge, a large headline, a subtitle, and two CTA buttons (primary and secondary). The right column displays a product screenshot or image placeholder. The layout is fully responsive: it stacks vertically on mobile and splits into two equal columns on desktop. Both light and dark modes are supported out of the box through shadcn/ui's theming system.

When to use it

  • SaaS product landing pages where you need a clear value proposition above the fold
  • Startup homepages that require a headline + screenshot layout
  • Marketing pages where you want two CTAs — one primary (sign up) and one secondary (learn more)
  • Any Next.js 15 App Router project that needs a polished first section in minutes

Notes

Swap the placeholder image for a real product screenshot by replacing the src prop on the Image component. The announcement badge text and CTA labels are props — no need to modify component internals.