Light logo grid of six icon-and-name marks above a GlowSeam rule, closed by a line of customer copy and an underlined link to customer stories.
import {
AnchorIcon,
ArrowRightIcon,
CompassIcon,
DiamondIcon,
DropIcon,
MountainsIcon,
SunIcon,
} from "@phosphor-icons/react/dist/ssr"
import { Logo, LogoGroup } from "@/components/editorial/logo"
import {
Section,
SectionContent,
} from "@/components/editorial/section"
import { GlowSeam } from "@/components/glow/glow-seam"
// The copy: change text here, not in the markup.
const COPY = {
label: "Companies using Orbcore",
body: "Over 2,500 companies build their sites with Orbcore.",
link: "Read our customer stories",
} as const
const LOGOS: {
name: string
icon: typeof AnchorIcon
weight: "fill" | "bold"
}[] = [
{ name: "Sulaco", icon: AnchorIcon, weight: "fill" },
{ name: "Higuerota", icon: MountainsIcon, weight: "fill" },
{ name: "Azuera", icon: SunIcon, weight: "fill" },
{ name: "Placido", icon: DropIcon, weight: "fill" },
{ name: "Costaguana", icon: CompassIcon, weight: "bold" },
{ name: "Esmeralda", icon: DiamondIcon, weight: "fill" },
]
export default function LogoCloud05() {
return (
<Section>
<SectionContent>
<LogoGroup aria-label={COPY.label}>
{LOGOS.map((logo) => (
<Logo key={logo.name}>
<logo.icon aria-hidden="true" weight={logo.weight} />
{logo.name}
</Logo>
))}
</LogoGroup>
<GlowSeam />
<p className="text-center text-sm/6 text-muted-foreground">
{COPY.body}{" "}
<a
href="#"
className="whitespace-nowrap text-foreground underline decoration-current/40 underline-offset-4 hover:decoration-current"
>
{COPY.link}{" "}
<ArrowRightIcon
aria-hidden="true"
className="inline size-4 align-[-0.1875em]"
/>
</a>
</p>
</SectionContent>
</Section>
)
}
pnpm dlx shadcn add @01orbital/logo-cloud-05npx shadcn add @01orbital/logo-cloud-05yarn shadcn add @01orbital/logo-cloud-05bunx --bun shadcn add @01orbital/logo-cloud-05Free under the MIT license. Add the @01orbital registry to components.json once (install guide), then run the command.
It lands at components/blocks/logo-cloud/logo-cloud-05/index.tsx, as source you own and edit.
import LogoCloud05 from "@/components/blocks/logo-cloud/logo-cloud-05"
export default function Example() {
return <LogoCloud05 />
}npm: @phosphor-icons/react. The CLI installs them for you.
Registry pieces it installs with it:
Glow Rig Wordmark Logo Cloud
Dark logo band under an overhead GlowRig and grain veil: an "In production at" eyebrow over six wordmarks, each set in its own type style. Pulls in Geist Mono and Hanken Grotesk.
Logo Cloud with Inline Label
Slim dark band with a short "Run by finance teams at" label in a narrow left column and five muted wordmarks wrapping beside it on one baseline.