Mona Sans Wordmark Logo Cloud

import { useId, type ReactNode } from "react"

import {
  Section,
  SectionContent,
} from "@/components/editorial/section"
import { Separator } from "@/components/ui/separator"

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

// Eight wordmarks in one typeface: weight, width (font-stretch) and tracking
// tell them apart. `mark` is what shows; `name` is the key.
const BRANDS: {
  name: string
  mark: ReactNode
  caption: string
  type: string
}[] = [
  {
    name: "Overdraught",
    mark: "Overdraught",
    caption: "Fintech · overdraft insurance",
    type: "text-4xl font-semibold font-stretch-125% tracking-[-0.03em]",
  },
  {
    name: "Rounders",
    mark: "ROUNDERS",
    caption: "Fintech · round-up savings",
    type: "text-[1.6875rem] font-medium tracking-[0.2em]",
  },
  {
    name: "Vaultless",
    mark: "Vaultless",
    caption: "Fintech · custody, allegedly",
    type: "text-[2.3125rem] font-extrabold font-stretch-75% tracking-[-0.02em]",
  },
  {
    name: "mildly.",
    mark: "mildly.",
    caption: "Consumer · mood tracking",
    type: "text-4xl font-light tracking-[0.01em]",
  },
  {
    name: "Hushline",
    mark: (
      <>
        <span className="font-bold">Hush</span>
        <span className="font-light">line</span>
      </>
    ),
    caption: "Consumer · messaging",
    type: "text-[2.125rem] tracking-[-0.01em]",
  },
  {
    name: "Fondly",
    mark: "FONDLY",
    caption: "Consumer · gifting",
    type: "text-[1.8125rem] font-medium font-stretch-112% tracking-[0.08em]",
  },
  {
    name: "doomscroll",
    mark: "doomscroll",
    caption: "Media · news, endlessly",
    type: "text-[2.375rem] font-extrabold font-stretch-75% tracking-[-0.045em]",
  },
  {
    name: "Broadsheet",
    mark: "BROADSHEET",
    caption: "Publishing · weekend edition",
    type: "text-[1.4375rem] font-normal font-stretch-125% tracking-[0.26em]",
  },
]

// The widths need Mona Sans's wdth axis. The install brings it from
// Fontsource ("@fontsource-variable/mona-sans/wdth.css"); a next/font
// Mona_Sans only has it with `axes: ["wdth"]`.
// The 250px column floor fits the widest wordmark; the grid adds columns as
// the section widens, four at 80rem.
export default function LogoCloud09() {
  const labelId = useId()
  return (
    <Section>
      <SectionContent className="gap-14 font-mona-sans">
        <div className="flex items-center gap-8">
          <h2
            id={labelId}
            className="text-sm font-semibold tracking-[0.05em] font-stretch-125%"
          >
            {COPY.label}
          </h2>
          <Separator
            aria-hidden="true"
            className="flex-auto data-horizontal:w-auto"
          />
        </div>
        <ul
          role="list"
          aria-labelledby={labelId}
          className="grid grid-cols-[repeat(auto-fit,minmax(15.625rem,1fr))] gap-x-10 gap-y-16"
        >
          {BRANDS.map((brand) => (
            <li key={brand.name} className="flex flex-col gap-4">
              <span className="flex h-9 items-center">
                <span
                  className={`leading-none whitespace-nowrap ${brand.type}`}
                >
                  {brand.mark}
                </span>
              </span>
              <span className="text-xs tracking-[0.02em] text-muted-foreground">
                {brand.caption}
              </span>
            </li>
          ))}
        </ul>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/logo-cloud-09

npx shadcn add @01orbital/logo-cloud-09

yarn shadcn add @01orbital/logo-cloud-09

bunx --bun shadcn add @01orbital/logo-cloud-09