Shadcn Secondary Hero Block Seven

Block Seven is a direct split hero layout. The left column carries the Billing label, headline, paragraph, and two CTAs. The right column renders HeroIllustration, a layered set of card shapes around invoice fields, a signature area, and invoice totals.

This is a practical secondary hero for an inner SaaS page because the illustration echoes the actual feature category. It does not rely on a generic dashboard screenshot; it shows forms, invoices, and signatures, which makes the billing promise easier to understand at a glance.

Responsive Shape

The source uses md:grid-cols-2 with gap-12, then centers the copy only on small screens with max-md:text-center. The paragraph is capped at max-w-md, so the left column remains readable while the illustration keeps its visual density.

Customization Guidance

Use this hero layout when the page needs a conventional, reliable sales structure: category, headline, proof-oriented copy, primary CTA, secondary CTA, and product visual. Replace the invoice names and amounts if they become visible in your final artwork, and make sure the Get Started and Get a demo links point to different user intents.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Seven