Offices section: a heading and visiting note above four city entries, each marked by a thin left rule with a primary accent at the title, and a street address set in an address element.
import {
Feature,
FeatureDescription,
FeatureGroup,
FeatureTitle,
} from "@/components/editorial/features"
import { Heading } from "@/components/editorial/heading"
import {
Section,
SectionContent,
SectionDescription,
SectionHeader,
SectionTitleGroup,
} from "@/components/editorial/section"
// The copy: change text here, not in the markup.
const COPY = {
title: "Our offices",
body: "Four studios, each with a front desk that answers the phone. Visits are by appointment; write to the studio first and someone will meet you at the door.",
} as const
const OFFICES = [
{ name: "Lisbon", address: ["14 Lantern Row", "1200-118 Lisbon"] },
{ name: "Melbourne", address: ["212 Comet Lane", "Fitzroy VIC 3065"] },
{ name: "Montréal", address: ["88 Rue des Orbites", "Montréal, QC H2T 1S1"] },
{ name: "Oslo", address: ["5 Nordlys Gate", "0182 Oslo"] },
] as const
export default function About08() {
return (
<Section>
<SectionHeader>
<SectionTitleGroup>
<Heading>{COPY.title}</Heading>
</SectionTitleGroup>
<SectionDescription>{COPY.body}</SectionDescription>
</SectionHeader>
<SectionContent>
<FeatureGroup cols={4}>
{OFFICES.map((office) => (
<Feature key={office.name} variant="outline">
<FeatureTitle>{office.name}</FeatureTitle>
<FeatureDescription render={<address />}>
{office.address.map((line) => (
<p key={line}>{line}</p>
))}
</FeatureDescription>
</Feature>
))}
</FeatureGroup>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/about-08npx shadcn add @01orbital/about-08yarn shadcn add @01orbital/about-08bunx --bun shadcn add @01orbital/about-08Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/about/about-08/index.tsx, as source you own and edit.
import About08 from "@/components/blocks/about/about-08"
export default function Example() {
return <About08 />
}Registry pieces it installs with it:
About Community Avatar Wall
Community section in Instrument Serif: an index eyebrow and contributor count over a rule, a heading with a join button, and a wall of Celestograph avatars ending in a +381 chip.
About Section with Process Steps
Process section in Instrument Serif: an eyebrow beside a long statement heading, a rule, then three numbered steps (Install, Compose, Deploy), each with a short list.