# Mission Statement With Stats

> Centered about us intro built on a mission statement, with an eyebrow badge and a four-metric strip for founding year, customers, countries, and team size.

A shadcn/ui block from the [@7ovr](https://7ovr.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/7ovr/about-1).

- Page, with a live preview: https://shadcn.exchange/r/7ovr/about-1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/7ovr/about-1-light-80561143b9ace792.png
- Registry item: https://7ovr.com/r/about-1.json
- Categories: about
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://7ovr.com/r/about-1.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `@base-ui/react`
- Registry items: `badge`

## Files

### `registry/blocks/about/1/about-block.tsx`

```tsx
import { Badge } from "@/components/ui/badge"

const stats = [
  { value: "2019", label: "Founded" },
  { value: "12K+", label: "Customers" },
  { value: "40", label: "Countries" },
  { value: "85", label: "Team members" },
]

export default function AboutBlock() {
  return (
    <section className="flex w-full items-center justify-center bg-background px-6 py-16 text-foreground">
      <div className="mx-auto w-full max-w-3xl text-center">
        <Badge variant="outline" className="mb-6">
          About us
        </Badge>
        <h2 className="font-heading text-3xl font-bold tracking-tight text-balance sm:text-4xl">
          We are building the tools we always wished we had
        </h2>
        <p className="mx-auto mt-5 max-w-2xl text-lg/relaxed text-pretty text-muted-foreground">
          Acme started with a simple belief: building software should feel fast
          and joyful. Today we help thousands of teams ship better products,
          faster, without the busywork that slows great ideas down.
        </p>

        <dl className="mt-12 grid grid-cols-2 gap-8 border-t border-border pt-10 sm:grid-cols-4">
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col gap-1.5">
              <dt className="order-2 text-sm text-muted-foreground">
                {stat.label}
              </dt>
              <dd className="order-1 text-3xl font-bold tracking-tight tabular-nums">
                {stat.value}
              </dd>
            </div>
          ))}
        </dl>
      </div>
    </section>
  )
}
```