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.

Frequently asked questions

Does Hero 01 ship with a real product screenshot?

No, it ships with a placeholder image. Replace the src prop on the Image component with your own screenshot before shipping.

Can I use a single CTA instead of two?

Yes. The secondary button is a separate prop — omit it and the layout collapses to one CTA without additional changes.

Does it support dark mode automatically?

Yes. It uses shadcn/ui's theming system, so it inherits your project's light/dark tokens with no extra configuration.