# About Section v1

> About us section with an eyebrow label, heading and intro copy, two feature highlight cards, and a full-width stats strip.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/about-section-v1
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/about-section-v1-light-fa4baf97f5f07006.png
- Registry item: https://uiception.com/r/about-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/about-section-v1.json
```

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

## Files

### `registry/new-york/blocks/about-section-v1/page.tsx`

```tsx
import AboutSectionV1 from "./components/about-section-v1"

export default function Page() {
  return <AboutSectionV1 />
}
```

### `registry/new-york/blocks/about-section-v1/components/about-section-v1.tsx`

```tsx
import { FEATURES, HEADING, PARAGRAPHS, STATS } from "../lib/config"

export default function AboutSectionV1() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-2 lg:gap-16">
          <h2 className="text-3xl font-medium tracking-[-0.03em] text-balance text-foreground lg:text-4xl">
            {HEADING}
          </h2>

          <div className="flex flex-col gap-8">
            <div className="flex flex-col gap-5">
              {PARAGRAPHS.map((paragraph, index) => (
                <p
                  key={index}
                  className="max-w-2xl text-[0.9375rem] leading-relaxed text-muted-foreground"
                >
                  {paragraph}
                </p>
              ))}
            </div>

            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
              {FEATURES.map((feature) => (
                <div key={feature.id} className="flex flex-col gap-2">
                  <h3 className="text-base font-medium tracking-[-0.01em] text-foreground">
                    {feature.title}
                  </h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">
                    {feature.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-3 lg:mt-16">
          {STATS.map((stat) => (
            <div key={stat.id} className="flex flex-col gap-1">
              <span className="text-4xl font-medium tracking-[-0.02em] text-foreground lg:text-5xl">
                {stat.value}
              </span>
              <span className="text-sm text-muted-foreground">
                {stat.label}
              </span>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/about-section-v1/lib/config.ts`

```ts
export const HEADING = "What is Acme?"

export const PARAGRAPHS = [
  "Acme is an AI operations platform for engineering teams. It pairs an autonomous agent layer with workflow tools so ops work costs less time and focus.",
  "Companies like Nimbus, Fractal, and Lumen use Acme to automate deployments, monitoring, and incident response. They resolve incidents 6x faster and cut on-call hours in half.",
] as const

export type AboutFeature = {
  id: string
  title: string
  description: string
}

export const FEATURES: AboutFeature[] = [
  {
    id: "autonomous",
    title: "Autonomous by default",
    description:
      "AI agents triage alerts, patch known failure modes, and hand off only what actually needs a human.",
  },
  {
    id: "scale",
    title: "One control plane",
    description:
      "Keeps pace with millions of events without adding headcount.",
  },
]

export type AboutStat = {
  id: string
  value: string
  label: string
}

export const STATS: AboutStat[] = [
  {
    id: "teams",
    value: "12,000+",
    label: "Teams using Acme",
  },
  {
    id: "saved",
    value: "$40M+",
    label: "Saved in engineering time",
  },
  {
    id: "resolved",
    value: "6M+",
    label: "Incidents auto-resolved",
  },
]
```