Shadcn Secondary Hero Block Eleven

Block Eleven is closer to an editorial hero than a conversion banner. The source starts with a large headline, waits until after the image to provide detail, and then splits two paragraphs into a responsive two-column grid.

The imported ImageIllustration is a client component from motion/react. It scales a flower image from 1.4 down to 1 as the page scrolls and tightens the clipping inset from five percent to zero. That gives the secondary hero a cinematic entrance without adding buttons or form controls.

Best Fit

Use this layout for an AI report page, product narrative, or landing page section where the copy needs room to breathe. The demo mentions visual processing, medical diagnostics, autonomous navigation, content moderation, and multimodal AI. Those are broad examples, so tighten them to your actual product before publishing.

Implementation Notes

The layout uses lg:pt-96 and pb-56, so it is intentionally tall. It will feel oversized on a simple inner page, but strong on a campaign page that can support a slower scroll. In a React and Next.js app, keep the motion decorative and test reduced-motion behavior if this section sits above important content.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Eleven