About Section with Process Steps

import { Eyebrow } from "@/components/editorial/eyebrow"
import {
  Feature,
  FeatureDescription,
  FeatureGroup,
  FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionColumns,
  SectionContent,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Process",
  title:
    "As guiding partners for the unknown, we focus not only on perfecting what’s been made before, but on unlocking what comes next. Through the registry’s release programme, builders get proven, considered pieces, each reviewed against the same tokens and the same rules, so they can change the game at speed.",
} as const

const STEPS = [
  { name: "Install", items: ["One command", "Your tokens", "Plain files"] },
  { name: "Compose", items: ["Blocks & legos", "Scenes & orbs", "Your copy"] },
  { name: "Deploy", items: ["Both modes", "Every size", "One system"] },
]

// The eyebrow keeps the narrow column, the statement the wide one; the
// steps count themselves.
export default function About01() {
  return (
    <Section
      className="[--font-display:var(--font-instrument)]"
      aria-labelledby="process-title"
    >
      <SectionContent>
        <SectionColumns variant="intro">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <SectionHeader size="lg">
            <SectionTitleGroup>
              <Heading id="process-title">{COPY.title}</Heading>
            </SectionTitleGroup>
          </SectionHeader>
        </SectionColumns>
        <Separator />
        <FeatureGroup render={<ol />} cols={3}>
          {STEPS.map((step, i) => (
            <Feature key={step.name}>
              <span
                aria-hidden="true"
                className="flex shrink-0 font-sans text-2xl/8 tracking-tight text-muted-foreground tabular-nums"
              >
                {String(i + 1).padStart(2, "0")}
              </span>
              <FeatureTitle>{step.name}</FeatureTitle>
              <FeatureDescription render={<ul role="list" />}>
                {step.items.map((item) => (
                  <li key={item}>{item}</li>
                ))}
              </FeatureDescription>
            </Feature>
          ))}
        </FeatureGroup>
      </SectionContent>
    </Section>
  )
}