Hero 02

About this block

Hero 02 is a centered hero section with a subtle grid background pattern, a bold headline, a subtitle, primary and secondary CTA buttons, and a full-width product screenshot below. Built with shadcn/ui and Tailwind CSS, it uses a centered single-column layout that works at any viewport width. The grid background is rendered via CSS and adds visual depth without any images or external assets. Dark mode is fully supported.

When to use it

• App landing pages where a centered layout feels more balanced than a two-column split
• SaaS homepages where the product screenshot is the main visual focus
• Situations where you want a single, unambiguous primary CTA without a competing column
• Products with a wide dashboard or app screenshot that benefits from full-width display

Notes

The grid background is a pure CSS pattern — no SVG or image file required. Adjust the grid color via the CSS variable in the component to match your brand.