A split hero with copy on the left and a layered product mockup on the right that floats gently and tilts in depth with the pointer, above a row of customer logos.
NewBill pay with approvals is live
Cards, bills, payroll and real-time reporting in a single workspace. Close the books in hours instead of weeks.
npx shadcn@latest add https://hyperblur.dev/r/hero-product.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-product.tsx.
import { HeroProduct } from "@/components/hyperblur/hero-product"
<HeroProduct title="Payroll that runs itself" highlight="runs itself" logos={["Acme", "Globex", "Initech"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Bill pay with approvals is live" | Announcement pill with a New tag above the headline. Hidden when empty. |
| title | string | "Your company's money, finally in one place" | Headline. |
| highlight | string | "in one place" | Part of the title painted with the accent gradient. Ignored when not found in the title. |
| subtitle | string | "Cards, bills, payroll and real-time reporting..." | Supporting paragraph under the headline. Hidden when empty. |
| primaryCta | { label: string; href: string } | null | { label: "Open an account", href: "#" } | Solid accent button. null hides it. |
| secondaryCta | { label: string; href: string } | null | { label: "Talk to sales", href: "#" } | Outlined button. null hides it. |
| checks | string[] | ["Free for 30 days", "No setup fees", "SOC 2 Type II"] | Short reassurance items with check marks under the buttons. |
| logosLabel | string | "Trusted by finance teams at" | Caption in front of the logo row. |
| logos | string[] | ["Kestrel", "Orbital", "Fathom", "Halcyon", "Quanta", "Northway"] | Company names rendered as wordmarks with simple glyphs. Empty array hides the row. |
| accent | string | "#2f7bff" | Color of the primary button, highlight, chart line and active bar. |
| headingAs | "h1" | "h2" | "h1" | Heading level of the headline. Use h2 when the page already has an h1. |