Hero307

1.0.0

Fullscreen marketing hero with an oversized headline, paired CTAs, and a CSS-built admin dashboard that tilts in a 3D perspective scene.

npx jabkit add hero307

Component Data

ID: hero307
Category: marketing
Version: 1.0.0
Added: 2026-09-01
Type: block
Keyboard nav: Yes
Reduced motion: Yes

heromarketingdashboard-preview3dctafullscreenlanding

Dependencies

clsx
tailwind-merge

Examples

Default

<Hero307
      kicker={hero307Mocks.kicker}
      title={hero307Mocks.title}
      description={hero307Mocks.description}
      primaryAction={hero307Mocks.primaryAction}
      secondaryAction={hero307Mocks.secondaryAction}
      dashboard={hero307Mocks.dashboard}
    />

Variants

<Hero307
      kicker={hero307EditorialMocks.kicker}
      title={hero307EditorialMocks.title}
      description={hero307EditorialMocks.description}
      primaryAction={hero307EditorialMocks.primaryAction}
      secondaryAction={hero307EditorialMocks.secondaryAction}
      dashboard={hero307EditorialMocks.dashboard}
    />