Company
Sections about the people and the answers behind the product: the story so far, the team, the open roles and an FAQ.
Installation & usage
npx @youj/cli add marketing-aboutAlso installs button, counter, icon-compass, icon-heart, icon-leaf, icon-lightbulb, icon-play, icon-refresh, reveal, stagger, use-controllable-state, use-visible, youj-core, youj-presets, youj-ui-core.
The CLI copies the block to blocks/marketing/about.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 { About, type AboutProps } from '@/blocks/marketing/about'
export function AboutView({ milestones, metrics, values }: Pick<AboutProps, 'milestones' | 'metrics' | 'values'>) {
return (
<About
milestones={milestones}
metrics={metrics}
values={values}
copy={{ eyebrow: 'About us' }}
onValueChange={(value) => {
// your code
}}
/>
)
}Description
Tell the story as something to scrub through: a rail of years under a growth line the block draws, where each year rolls the figures to how they stood, draws the line up to it and swaps the chapter in. It plays through once in view, holds while you point at it, and stops when you pick a year; then the values, numbered. Under reduced motion it rests on today.
Introduce the people with portraits that look designed even before there's a photo: their initials set large, where they work from and their local time, ticking. A bio rises over the portrait on hover or focus, the name pins it open, and a team filter re-flows the grid.
List the open roles so people find theirs: teams as tabs with live counts, a search that marks what it found, a location filter, and rows that line up the place, the kind and the salary band, with New on the last fortnight's. The open application closes it.
Answer common questions like a small help center: a search that marks its words and opens the answer that matched, topics with counts, a link to every answer that opens and flashes it, and “Was this helpful?” under each.
Code
About, the About story: the files youj add writes.
blocks/marketing
Reference
Props12 props, 3 types
Props
| Prop | Type | |
|---|---|---|
theme | ThemeInputDefault: the theme around it. The showcase passes the chosen preset here. | – |
embedded | booleanA section inside another page: the host lays it out (no page background, section padding or max width). default false | false |
milestones | AboutMilestone[]The story's chapters, oldest first; default the demo's seven years | the demo's seven years |
metrics | AboutMetric[]The numbers the story is told in, each milestone giving its figure. default people, teams and regions | people, teams and regions |
values | AboutValue[]The values; default the demo's four | the demo's four |
value | stringThe milestone shown (its | – |
defaultValue | stringThe milestone shown first, uncontrolled. Default: the first while the story plays, else the last. | – |
onValueChange | (value: string) => voidCalled with the milestone's id when someone picks one or the story moves on. | – |
autoAdvance | booleanPlay through the years once, in view. default true | true |
locale | stringThe locale the figures are written in. Default: the YoujProvider's. | – |
copy | Partial<AboutCopy>Any of the block's strings, to rewrite or translate. | – |
headingLevel | HeadingLevel123The section heading's level; the parts' headings sit one below. default 2 | 2 |
AboutMetric
| Prop | Type | |
|---|---|---|
idRequired | string | – |
labelRequired | string | – |
format | Intl.NumberFormatOptionsHow the number is written ( | – |
suffix | string | – |
chart | booleanDraw this one as the growth line under the years. The first metric that says so is drawn; default the second. | – |
AboutMilestone
| Prop | Type | |
|---|---|---|
id | stringA stable id, the milestone's value. Default: its label. | – |
labelRequired | stringThe year on the rail: "2021", "Today". | – |
titleRequired | string | – |
descriptionRequired | string | – |
figuresRequired | Record<string, number>Each metric's value then, by the metric's id. | – |
AboutValue
| Prop | Type | |
|---|---|---|
titleRequired | string | – |
descriptionRequired | string | – |
icon | ReactNodeA 16px glyph beside its number. | – |
Strings9 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.
eyebrowmissiondescriptiontimelinemilestoneNamepauseplayreplayvaluesTitleAccessibilitylandmarks, headings, tabs, disclosures, live counts
Accessibility
Each section is a <section> named by its own heading (aria-labelledby); the heading is an h2 by default and headingLevel changes it, with every part's heading a level below.
About's years are a tab list: the arrows, Home and End move along the rail and pick a year, and its chapter is the tab panel. Each figure ends on the same text a screen reader gets, and the tour holds while keyboard focus is in it, with a button to pause, play or replay it. The growth line is decorative; the figures carry its meaning.
Team's people are articles named for them. The name is a disclosure button (aria-expanded) that pins the bio open, and Escape lets it go; a bio's links only join the tab order while it's open. Local times are written out in full for screen readers, with day or night named.
Careers' rows are single links named with the role, its place and its kind; the team tabs are a labeled group, the search a search field (Escape clears it) and the count a polite status.
FAQ is the kit's Accordion, so every question is a heading button that reports aria-expanded; answers stay in the page for find-in-page. The search is a search field whose count sits in it, Escape clears it and ↓ moves to the first question; the topics are a labeled group. “Was this helpful?” is a labeled group and its thanks a status. Links and buttons are real a and button elements with the kit's focus ring.