Plain about section: a heading beside two paragraphs, then a row of three figures with labels. Theme tokens only, light and dark.
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>
)
}
pnpm dlx shadcn add @01orbital/minimal-about-02npx shadcn add @01orbital/minimal-about-02yarn shadcn add @01orbital/minimal-about-02bunx --bun shadcn add @01orbital/minimal-about-02Free 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.
import MinimalAbout02 from "@/components/blocks/about/minimal-about-02"
export default function Example() {
return <MinimalAbout02 />
}Registry pieces it installs with it:
Minimal About Section
Plain about section: a heading beside two paragraphs, stacking on narrow screens. Theme tokens only, light and dark.
Split About with Gradient Strips
Dark split section: a heading and two paragraphs on one side, and a full-bleed panel of nine painted gradient strips stepping from blue to coral under sandpaper grain on the other.