# About

> Two about pages: a mission-led story with principles, rolling company numbers and a flip-card team grid, and a company timeline whose line fills and lights each milestone as you scroll.

- Collection: Pages
- Tier: pro
- Docs: https://geturui.com/docs/about-pages
- Install: `npx shadcn@latest add @geturui-pro/about-pages`
- Dependencies: motion, lucide-react

## Variants

### Story

A word-by-word mission headline, the origin story, numbered principles, NumberTicker company stats, a team grid that flips to fun facts, and a hiring CTA.

Install: `npx shadcn@latest add @geturui-pro/about-pages-story`

```tsx
import { Story } from "@/components/pages/about-pages/story";

export default function About() {
  return (
    <Story
      company="Northlight"
      headline="We give every clinic back an hour a day"
      mark="hour"
      stats={[
        { value: 2400, label: "clinics schedule with us" },
        { value: 99.98, label: "uptime", suffix: "%", decimals: 2 },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| company | `string` | "Northlight" | Company name used in eyebrow and headings. |
| headline | `string` | — | Mission headline, revealed word by word. |
| mark | `string` | — | One headline word to underline. |
| intro | `string` | — | Paragraph under the headline. |
| story | `string[]` | — | Origin story paragraphs. |
| principles | `{ title: string; body: string }[]` | — | Numbered principles. |
| stats | `{ value: number; label: string; prefix?: string; suffix?: string; decimals?: number }[]` | — | Numbers rolled in with NumberTicker. |
| team | `{ name: string; role: string; location: string; fact: string }[]` | — | Team grid; initials become monograms. |
| cta | `{ heading; body; primary: { label; href }; secondary?: { label; href } }` | — | Closing call to action. |
| className | `string` | — | Classes for the outer section. |

### Journey timeline

A company history whose centre line fills with scroll, lighting each milestone as it's reached, with sticky year chips that jump to any moment.

Install: `npx shadcn@latest add @geturui-pro/about-pages-journey-timeline`

```tsx
import { JourneyTimeline } from "@/components/pages/about-pages/journey-timeline";

export default function OurStory() {
  return (
    <JourneyTimeline
      company="Tidewater"
      milestones={[
        { year: "2018", title: "Three neighbours and a roof", body: "Panels on a school in Cork.", metric: "48 kW", metricLabel: "first installation" },
        { year: "2026", title: "One hundred communities", body: "The hundredth co-op went live.", metric: "112 MW" },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| company | `string` | "Tidewater" | Company name in the eyebrow. |
| heading | `string` | — | Page heading. |
| intro | `string` | — | Paragraph under the heading. |
| milestones | `{ year: string; title: string; body: string; metric?: string; metricLabel?: string }[]` | — | Timeline entries, oldest first. |
| next | `{ heading; body; action: { label; href } } | null` | — | Closing “what's next” card. null hides it. |
| className | `string` | — | Classes for the outer section. |

## Accessibility

- Animated headlines and number tickers keep their full text in aria-label.
- Team cards are toggle buttons with aria-pressed; timeline year chips are buttons that scroll to and focus their milestone.
- Scroll-linked fills and reveals render in their final state under reduced motion.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.