Hero
Opening sections for a landing page, from a centered headline to a terminal demo or a pointer-reactive motion panel.
Installation & usage
npx @youj/cli add marketing-hero-centeredAlso installs aurora, badge, button, icon-arrow-right, stagger, youj-presets, youj-ui-core.
The CLI copies the block to blocks/marketing/hero-centered.tsx with every component it uses, so it’s yours to edit.
Every prop is optional and falls back to the demo, so it renders as you see it until you pass your own. Give it your data, rewrite or translate its strings through copy, and connect its actions:
'use client'
import Link from 'next/link'
import { HeroCentered, type HeroCenteredProps } from '@/blocks/marketing/hero-centered'
export function HeroCenteredView({ primaryCta }: Pick<HeroCenteredProps, 'primaryCta'>) {
return (
<HeroCentered
primaryCta={primaryCta}
copy={{ badge: 'New' }}
linkComponent={Link}
/>
)
}Description
Open with a centered headline, a badge and calls to action over a soft animated background. Pick it when the words should carry the page.
Put the pitch on one side and the product in a window on the other, and let the selling points steer it: pick a point, or let them tour, and the window’s camera glides to that part of the screen while it plays its moment. Point at the window to see all of it. Pick it when visitors should see what they get right away.
Show the product itself in a browser frame beneath the headline. Pick it for a product whose screen sells it.
Introduce a command-line tool with a copyable install command beside an animated terminal session that deploys, then lands what it deployed on the terminal’s corner: the live site, in a window of its own. Pick it when the product is used from a shell.
A headline that rises word by word over a pointer-reactive dot matrix, beside a live panel where visitors change speed, reduced motion and theme and watch a checklist respond. Pick it to show the kit’s motion settings working.
Code
Hero Centered, the Centered story: the files youj add writes.
blocks/marketing
Reference
Props8 props, 1 types
Props
| Prop | Type | |
|---|---|---|
headline | stringThe headline. Same as | – |
description | stringThe sentence under the headline. Same as | – |
copy | Partial<HeroCenteredCopy>Any of the block's strings, to rewrite or translate. | – |
announcement | HeroCenteredCta | nullThe announcement pill above the headline; default the demo's launch note | the demo's launch note |
primaryCta | HeroCenteredCtaThe main call to action. default "Start deploying" to `#signup` | "Start deploying" to `#signup` |
secondaryCta | HeroCenteredCta | nullThe second call to action; default "Talk to sales" to `#sales` | "Talk to sales" to `#sales` |
linkComponent | ElementTypeRenders every link: pass your router's Link. default 'a' | 'a' |
headingLevel | 1 | 2 | 3The headline's level. default 1 | 1 |
HeroCenteredCta
| Prop | Type | |
|---|---|---|
labelRequired | string | – |
hrefRequired | string | – |
onClick | MouseEventHandler<HTMLAnchorElement>Runs on click; the link still follows | – |
Strings4 keys for copy
Strings
copy takes any of these keys; the rest keep their defaults. A key whose text holds a value (a count, a name) takes a function.
badgeheadlinedescriptionnoteAccessibilitylandmarks, headings, motion, keyboard
Accessibility
Each hero is a <section> named by its own heading (aria-labelledby). The heading is an h1 by default and an h2 when you set embedded; set headingLevel to 1, 2 or 3 where the page around it needs another.
The product shots, browser frames, terminal sessions and Terminal’s landed site in Split, Product and Terminal are decorative: they are inert (Split’s demo screen and Product also aria-hidden), so the headline and copy have to carry the meaning; a media you pass to Split is read as you give it, so give an image its alt. Split’s points are a named list of buttons, with aria-current on the one on show; its tour has a Play and Pause button in the window’s title bar and holds while keyboard focus is on the points. Motion’s control panel uses labelled controls (a select and switches) under its own headings.
The animated heroes (Split, Terminal, Product, Motion) check the reduced-motion setting and hold a still frame when it is on: Split shows its whole window, with no tour and no camera. The buttons and links are real a and button elements with the kit’s focus ring.