Skip to content
Agentic UI Kit
Buy

Marketing Hero Split

Landing page hero for a B2B SaaS or analytics product that shows the product dashboard next to the headline and signup button.

Full screen Try a theme

Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.

About this block

What it's for

  • Landing page hero for a B2B SaaS or analytics product that shows the product dashboard next to the headline and signup button.
  • Product section further down a marketing page (h2 mode) explaining one capability with a visual.
  • Homepage hero with three proof points such as setup time, compliance and cancel anytime.

For there is no product visual to show and the message is the headline alone, use Marketing Hero Centered.

Includes

  • Two column layout
  • Media slot
  • Proof points
  • Dual cta
  • Reverse layout
  • Heading level
  • Dark mode

Works with

  • Radix UI and Base UI primitives (pick the one your project uses)
  • React 19, Next.js App Router and Tailwind CSS 4, installed with the shadcn CLI
  • Your theme tokens, in light and dark mode

Install

Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.

Agentic UI CLI
agentic-ui add marketing-hero-split
Installs through shadcn and adapts the component to your design tokens.
shadcn CLI
npx shadcn@4.17.0 add @agentic-ui/marketing-hero-split

Used in

A standalone component: drop it into any screen.

Type
Block
Variants
Radix UI and Base UI
Themes
Light and dark
Widths
Preview it at desktop, tablet and mobile widths above.