Centered Product Hero
Near-full-screen centered hero with announcement pill, oversized headline, dual pill CTAs, trust microcopy, a framed inline product-UI mock, and converging wire-line illustrations.
Centered Product Hero
Near-full-screen centered hero with announcement pill, oversized headline, dual pill CTAs, trust microcopy, a framed inline product-UI mock, and converging wire-line illustrations.
Installation
$npx shadcn@latest add @vandoko/vkb-hero-02Synthesis
Design synthesis (not a recolor): shadcnblocks structure + Mobbin form (v0 / Coda / Linear landing language) + Vandoko color & content (oklch tokens, cyan as signal, brand-true copy).
Lineage
| Property | Value |
|---|---|
| Source | @shadcnblocks/hero229 |
| Version | 1.0.0 |
| Curated | 2026-05-25 |
| License | Commercial |
Sources
Modifications
- framer-motion → motion/react
- Vandoko voice copy + announcement pill + trust microcopy
- oklch tokens; cyan as signal (CTA fill, dot, one bg-primary/15 blur media glow)
- dual pill CTAs (solid primary + ArrowRight, outline secondary) size-lg rounded-full
- inline framed product-UI mock (rounded-2xl border bg-card shadow-lg ring-primary/10) — no external images
- decorative wire SVGs use currentColor via text-border
Ported by shadcnblocks-pages-importer v1.2.0 → component-creator (page-decompose pilot).
Related Components
Crossfade Stack Hero
Two-column split hero: oversized tight-leading headline, dual pill CTAs with hover lift, and a framed media surface housing four crossfading image-stack slots.
Editorial Outcome Hero
Warm-light editorial hero with an oversized tight-leading headline, dual pill CTAs, a three-column hover feature row, and a crossfading framed product preview with slide dots.