# About Page > A whole about page, built from our website components: a floating navbar, a page title, the story beside its headline, a few figures, what you hold to, the people, a closing band, and a footer. - Name: `about-page` - Status: beta - Categories: about, company, team, marketing, page - Files: the install writes `about-page.tsx`, and any part files named `about-page-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours. - Other registry items: `@arbokui/navbar`, `@arbokui/headline`, `@arbokui/feature-grid`, `@arbokui/team-grid`, `@arbokui/call-to-action-band`, `@arbokui/footer`, `@arbokui/stat-band`. The install adds them. - Gallery: https://arbokui.com/templates/about-page - Registry item: https://arbokui.com/r/about-page.json ## Install 1. Add the registry to `components.json`. Do this first, once: ```bash npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json" ``` The command writes this entry. You can also add it by hand: ```json { "registries": { "@arbokui": "https://arbokui.com/r/{name}.json" } } ``` Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control. 2. Add the theme once per app. It replaces your color tokens with ones checked for contrast: ```bash npx shadcn@latest add @arbokui/theme ``` 3. Add the template. It also adds every component it uses: ```bash npx shadcn@latest add @arbokui/about-page ``` ## Use it for - The about page of a product site. Render it as the whole page, from your app's page file. - Write every word in the props: one object for the navbar, the header, the story, the values, the team, the closing band, and the footer. - Keep the story to two to four short paragraphs: why you started, what you built, and where it stands. - Use \`stats\` for two to four figures that are true today, like the size of the team or the year you started. - Use \`values\` for what you hold to, two to six, each a short title and one line. - Use \`team\` for the people, and set \`team.team.openRoles\` to end the grid with a link to open roles. - Use \`cta\` for the one thing to do next, like signing up or seeing open roles. - Pass your router's link once in \`renderLink\`. The navbar, the team, the closing band, and the footer all use it. From a server page, render the page from a client file, since a server page cannot pass a function. - Set \`embedded\` when you show the page inside another page, like a gallery, so it has no second main. ## Avoid it for - A history told year by year. Tell it in a few lines, and link to a changelog for the rest. - Figures that will be out of date next month, like a count of signups, unless you update the page. - Values no one would disagree with, like quality. Name what you do, like answering every message. - A team grid of more than about sixteen people. Show the leads, and link to the rest. ## Props - `navbar`: `NavbarProps`. The Navbar's props. It floats as a pill once the page scrolls, and folds into a menu below 42rem. - `header`: `HeadlineProps`. The headline at the top of the page. It renders as the page's one h1. - `story`: `{ id?: string; headline: HeadlineProps; paragraphs: ReactNode[] }`. Why you started, as a headline beside a few short paragraphs. They stack below 64rem. Its id defaults to "story". - `stats`: `{ id?: string; headline?: HeadlineProps; label?: string; items: StatBandItem[] }`. Two to four figures, as a Stat Band, each with a \`value\`, a \`label\`, and an optional \`note\`. Its id defaults to "numbers". With no headline, \`label\` names it for screen readers, default "Numbers". With no items, it is left out. - `values`: `{ id?: string; headline?: HeadlineProps; label?: string; items: FeatureGridItemProps[] }`. What you hold to, one Feature Grid cell each. Its id defaults to "values". With no headline, \`label\` names it for screen readers, default "Values". With no items, it is left out. - `team`: `{ id?: string; headline?: HeadlineProps; label?: string; team: TeamGridProps }`. The people, as a Team Grid. Its id defaults to "team". With no headline, \`label\` names it for screen readers, default "Team". With no people and no open roles, it is left out. - `cta`: `CallToActionBandProps`. The closing band above the footer. - `footer`: `FooterProps`. The Footer's props. - `renderLink`: `(props: NavbarLinkProps) => ReactNode`. Default `a plain `. Draws every link in the navbar, the team, the closing band, and the footer, unless a part sets its own. - `embedded`: `boolean`. Default `false`. Renders the content in a div, not a main, for a preview inside another page. - `className`: `string`. Extra classes on the root, which holds the container query. ## Accessibility - The content sits in a main landmark, between the navbar's nav and the footer, so skip links and screen readers find it. - The header renders the page's one h1. Each section's headline is an h2, and each person's name an h3. - Each section has an id, so the navbar can link to it, and it scrolls into view below the floating navbar. - Each part keeps its own accessibility, listed on its page. ## Examples ### A short about page ```tsx ```