About

Minimal About with Stats

Plain about section: a heading beside two paragraphs, then a row of three figures with labels. Theme tokens only, light and dark.

Free, MIT licenseOpen in Browse
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import {
  Stat,
  StatGroup,
  StatLabel,
  StatValue,
} from "@/components/editorial/stats"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Our story",
} as const

const PARAGRAPHS = [
  "Orbcore began in 2019 with four people and one rule: a plan is only useful if the whole team can read it.",
  "Today the same small group answers support, writes the docs and ships every release, with customers in more than forty countries.",
] as const

const STATS = [
  { value: "3,400+", body: "Teams planning their releases in Orbcore." },
  { value: "42", body: "Countries our customers work from." },
  { value: "99.98%", body: "Uptime over the last twelve months." },
] as const

export default function MinimalAbout02() {
  return (
    <Section>
      <SectionContent>
        <SectionColumns>
          <SectionHeader>
            <SectionTitleGroup>
              <Heading>{COPY.title}</Heading>
            </SectionTitleGroup>
          </SectionHeader>
          <SectionDescription
            render={<div />}
            className="flex max-w-md flex-col gap-6"
          >
            {PARAGRAPHS.map((text) => (
              <p key={text}>{text}</p>
            ))}
          </SectionDescription>
        </SectionColumns>
        <StatGroup cols={3} className="pt-8 md:gap-12 lg:pt-16">
          {STATS.map((stat) => (
            <Stat key={stat.value}>
              <StatValue className="text-4xl/10 @2xl/section:text-5xl/12">
                {stat.value}
              </StatValue>
              <StatLabel>{stat.body}</StatLabel>
            </Stat>
          ))}
        </StatGroup>
      </SectionContent>
    </Section>
  )
}

Installation

pnpm dlx shadcn add @01orbital/minimal-about-02
npx shadcn add @01orbital/minimal-about-02
yarn shadcn add @01orbital/minimal-about-02
bunx --bun shadcn add @01orbital/minimal-about-02

Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.

It lands at components/blocks/about/minimal-about-02/index.tsx, as source you own and edit.

Usage

import MinimalAbout02 from "@/components/blocks/about/minimal-about-02"

export default function Example() {
  return <MinimalAbout02 />
}

Dependencies

Registry pieces it installs with it: