Components

SCB Hero 06

Split hero with a framed media surface, announcement pill, and paired CTAs — a synthesized re-port of hero1.

SCB Hero 06

A two-column marketing hero: announcement pill, oversized tight-leading headline, body copy, and paired CTAs on the left; the product shot lifted into a soft gradient-glow surface on the right. Cyan reads as signal on the CTA, the badge dot, and the media glow.

This is the synthesized counterpart to scb-hero-02 — both descend from @shadcnblocks/hero1, but scb-hero-02 is a straight theme-recolor while scb-hero-06 adapts the form to a Mobbin design spec.

Preview
Open in
Loading preview...

Installation

Terminal
$npx shadcn@latest add @vandoko/scb-hero-06

Synthesis

LayerSourceContribution
Structure & function@shadcnblocks/hero1Two-column split skeleton, props interface, CTA + badge behavior
Form & fashionMobbin design specFramed gradient media surface, announcement pill, type scale, pill CTAs
Color & groundingVandoko themeoklch tokens (cyan as signal), brand-true demo content

Lineage

PropertyValue
Source@shadcnblocks/hero1
Version1.0.0
Curated2026-05-25
LicenseCommercial

Sources

  • shadcnblockshero1 (hero / index 1) · hero1.json
  • Mobbin (form spec):
    • Fibery — oversized headline, dual CTA, floating product screenshot · screen
    • Remote — pill CTAs, product UI in a gradient surface panel · screen
    • Chatbase — bold left headline, gradient-framed product shot · screen

Use case: Split marketing hero — oversized tight-leading headline + dual CTA on the left, product UI framed in a soft gradient surface on the right; modeled on Fibery / Remote / Chatbase developer-tool landing pages.

Modifications

  • oklch color conversion via Vandoko theme tokens
  • Mobbin form pass: framed gradient media surface, announcement pill, oversized tight-leading headline, pill CTAs
  • exported ScbHero06Props interface
  • Vandoko-true demo content (no lorem)

Ported by shadcnblocks-pages-importer v1.2.0 → component-creator handoff.

On this page