Hero Section
block / marketing
Marketing hero in three compositions — split, centered or stacked — with a media frame that reserves its aspect ratio before the asset lands.
- type
- block
- files
- 1
- registry deps
- badge, button, skeleton, @automindz/render-link
- npm deps
- lucide-react
installs
- components/automindz/hero-section.tsx
- Three compositions, not one layout behind a flag.
- No media: the grid recomposes to one measured column.
- Title clamps to 4.25rem, balanced, tracking held at -0.02em.
Copy, hrefs and the media node are props: page content, not config. It never fetches or sizes an asset: it reserves a frame at mediaAspect and lets the child fill it, drawing a skeleton in that frame while mediaLoading is true. layout changes everything — split, centered and stacked are three compositions with their own spacing, and with no media the grid recomposes to one measured column. Pass renderLink for your router. Entrance motion is refused: the finished hero is the base state.
Variations
one state per section
- 01Split, with media
- 02Centered, one action
- 03Stacked, media leads
- 04No media
- 05Media loading
- 06Long title, no actions
Split, with media
Copy against the media at md and up, one column below it. The announcement is a single anchor — the badge inside it is a span, not a second link.
AutoMindz Solutions
Client apps, assembled from one registry
Sign-in, billing, the app shell and the states nobody remembers to draw all arrive from the same place. Install the block, get the failure case with it, and spend the sprint on what the client actually hired us for.
Centered, one action
A single measured column with the media full width beneath it. One action rather than two, so nothing competes with it.
AutoMindz Solutions
One command, every state, before the sprint starts
Pending, failed, capped and disabled-with-a-reason arrive with the component — not in the review comments a week later.
Stacked, media leads
The media is a bleed panel flush to the section edge, and the copy sits under it in a 7/5 grid — the third rhythm, not the split one re-aligned.
NewAgency spend forecasting
AutoMindz Solutions
See the gaps before the week does
Every unfilled shift, ranked by how hard it will be to cover, from the moment the draft opens.
32 items · every state drawn · no brand lock-in
No media
Nothing to show yet, so the two-column grid recomposes to one measured column instead of leaving an empty half.
AutoMindz Solutions
Client apps, assembled from one registry
Sign-in, billing, the app shell and the states nobody remembers to draw all arrive from the same place. Install the block, get the failure case with it, and spend the sprint on what the client actually hired us for.
32 items · every state drawn · no brand lock-in
Media loading
A skeleton at the declared aspect ratio — 4/3 here — so the frame is the same box before and after the asset lands and the copy never reflows.
AutoMindz Solutions
Client apps, assembled from one registry
Sign-in, billing, the app shell and the states nobody remembers to draw all arrive from the same place. Install the block, get the failure case with it, and spend the sprint on what the client actually hired us for.
Long title, no actions
The worst case: the largest type scale, a 17-character word and a two-sentence lede. At 390px the title wraps and breaks rather than overflowing.
Interoperability
Interdependent registry items, resolved without a spreadsheet handover
An item names the primitives it needs and the CLI resolves them against your own shadcn style, so a hero and a checkout block installed a month apart still agree about what a button is. Nothing here forks a component to make a page work.
32 items · every state drawn · no brand lock-in