Shadcn Secondary Hero Block Thirteen

Block Thirteen is designed for a mobile app page. The source labels the section iOS, uses the headline Your Invoicing system, in your pocket, and gives the CTA an Apple mark inside an outline button. Below the CTA, three checklist items repeat the core jobs: create invoices, track payments, and manage finances.

The visual side is layered. A desktop-like frame sits behind the main phone mockup, while the mobile screenshot uses the remote mobile_hwua2g.png asset with rounded borders and a shadow. That makes the hero layout useful for a product page where the phone app is the product, not a supporting illustration.

Layout Notes

The grid starts at md:grid-cols-2 and becomes lg:grid-cols-5, with copy occupying two columns and the mockup taking three. The phone becomes absolutely positioned on medium screens, so the composition feels more like app marketing than a simple image column.

Production Guidance

Replace the screenshot with a real app screen and update the download link. If the app is not iOS-only, adjust the label and CTA before shipping. The React component is straightforward to adapt in a Next.js and Tailwind CSS project because the checklist and button are plain JSX.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Thirteen