Shadcn Hero Section Block Eleven

Shadcn Hero Section Block Eleven is the split hero for a product that wants proof beside the pitch. The left column holds the headline, paragraph, two small CTAs, and two metrics: 99.9% uptime and 12X faster processing. The right column is reserved for the visual system.

It is visually different from the centered variants because of the dashed structural grid. An aria-hidden overlay draws three to four vertical columns across the section, then ProductIllustration pushes large screenshots into a rotated, perspective-heavy stack with masked edges and separate light and dark images.

Where this variant works

Use it for infrastructure, fintech, analytics, or developer products where the buyer expects a claim plus evidence. The metric row gives you room for reliability, speed, cost, or adoption numbers without creating a separate stats section.

It is also useful when the product screenshot is wide and detailed. The right column allows the illustration to overflow slightly on desktop, while mobile keeps the content readable with max-lg constraints.

Implementation details from the source

• The decorative grid is pointer-events-none, aria-hidden, and switches from grid-cols-3 to sm:grid-cols-4.
• The hero content uses lg:grid-cols-2, with the illustration pulled right by lg:-mr-6.
• The metrics are plain text blocks in a grid max-w-sm grid-cols-2.
• ProductIllustration uses perspective-[4000px], 3D transforms, radial masks, and two layered app screenshots.
• LogoCloud follows the hero, keeping social proof in the same section flow.

What to customize first

Replace the two metrics first. If they are vague, this variant loses its edge. Then update the CTA labels, screenshot URLs in ProductIllustration, and logo cloud. Keep the copy compact; the split layout works because the left column does not ramble.

Frequently asked questions

Does Shadcn Hero Section Block Eleven support dark mode?

Yes. The component uses theme tokens for borders and cards, and the illustration swaps screenshot assets with dark:hidden and not-dark:hidden.

Is Shadcn Hero Section Block Eleven responsive?

Yes. The two-column layout collapses below the large breakpoint, the decorative grid reduces columns, and the illustration is capped with max-lg:max-w-[calc(100vw-3rem)].

Can I customize this Tailark block?

Yes. The metrics, CTAs, screenshots, logo cloud, and dashed guide treatment are all local to the block.

What is the best use case for this hero section block?

Use it when the first screen needs to say "this is serious software" and support that with numbers immediately.

Related Shadcn UI blocks

• Shadcn Header Block One
• Shadcn Bento Block One

Start from Tailark

Preview Shadcn Hero Section Block Eleven