Shadcn Secondary Hero Block Four

Block Four is built around a wide illustration before it asks the headline to do any work. The source renders ImageIllustration at the top of a white Quartz surface, then places the headline and paragraph in a two-column grid that shifts upward with md:-mt-12.

The imported image component uses a 3D building asset and the same cursor-following blurred gradient pattern used by the medical variant. Here the effect feels more architectural: the image creates atmosphere, while the copy below explains the startup-growth angle. The demo text mentions Vercel, so treat it as placeholder positioning unless your page is actually about deployment infrastructure.

Where It Fits

Use this secondary hero for a company page, startup program page, or SaaS landing page section that needs an editorial image before the value proposition. It is less CTA-driven than many hero layouts, which makes it useful for narrative pages where the next section provides the action.

Source-Backed Details

The section spacing grows from py-24 to md:pt-32 and lg:pt-44, giving the image room to breathe. The copy grid uses md:grid-cols-2 and items-end, so the headline and paragraph align at the baseline instead of stacking like a basic content block. Keep that relationship when you adapt it with Tailwind CSS.

Related Shadcn UI Blocks

• Secondary Hero Blocks
• Hero Section Blocks

Preview Shadcn Secondary Hero Block Four