Oversized Display Hero
Type-led editorial hero where a massive tight-leading display headline carries the brand promise, with one cyan signal word, dual CTAs, and a live-count overlapping-avatar trust row.
An oversized, type-led hero for vkb-landing-13 where the display headline is the hero — no screenshot, no split. A single cyan signal word carries the lone accent, dual CTAs drive action, and an overlapping-avatar trust row counts up on view via @number-flow/react.
npx shadcn@latest add @vandoko/vkb-hero-13Usage
import { VkbHero13 } from "@/components/vkb-hero-13";
export default function Page() {
return (
<VkbHero13
headlineLead="Ship the"
headlineAccent="outcome,"
headlineTrail="not just the screen."
trustCount={40}
/>
);
}All copy, nav links, CTAs, trust avatars, and the animated count are overridable via props. The headline is split into headlineLead / headlineAccent (the single cyan word) / headlineTrail so the lone signal stays exactly one word.
Related Components
Split Workflow Pipeline Hero
Split hero with a live workflow canvas: a brand-promise left column and a right-side sprint pipeline of four obsidian node cards (Brief, Design, Build, Ship) linked by curved SVG connectors, with one cyan active node.
Textured Instrument Hero
Page headline hero on a dot-matrix and film-grain control surface — cyan as the lone signal — with a gradient-border framed live capture readout: an inline-SVG waveform above a short transcript with one phrase highlighted in an in-place cyan mark.