Shadcn Secondary Hero Block Twenty
Block Twenty closes the category with a practical billing hero: split copy, two CTA buttons, two small stats, and a product illustration. The left column uses the Billing label, Streamline Your Invoicing Process headline, supporting copy, and Get Started plus Get a demo actions.
The stat row is built directly under the CTAs. It highlights 99.9% uptime and 12X faster processing. Those numbers are useful placeholders for layout testing, but they should be swapped for real, defensible metrics before publishing.
Visual Side
The imported HeroIllustration combines an invoice card, a dashed signature area, and a large rounded image tile. The invoice card includes a sample invoice number, amount, and due date, so the visual reinforces the billing topic without needing a full dashboard screenshot.
Best Fit
Use this secondary hero for an inner page where the message is already clear and you want immediate product context plus lightweight proof. It is a strong default for SaaS billing, payments, accounts receivable, or finance workflow pages in a React, Next.js, and Tailwind CSS codebase.
Related Shadcn UI Blocks
Build with Tailark
Production-ready marketing blocks, pages, and illustrations for Shadcn UI.