hanzo.ai/app/(marketing)/solutions/page.tsx

import { CardGrid, Cta, Page, PageHero, Section } from '@/components/marketing/page-kit'
import { Doors } from '@/components/solutions/Solution'
import { INDEX, KINDS, href, ofKind } from '@/lib/data/solutions'
import { pageMeta } from '@/lib/page-meta'
import { Spare } from '@/components/type'

const TITLE = 'Solutions for every team and industry'
const SAYS = 'What Hanzo does for each team, each industry and each kind of work'
const MORE = 'the workflows it takes over, the products underneath, and what is true about security'
const LEDE = `${SAYS}: ${MORE}.`

export const metadata = pageMeta({ title: TITLE, description: LEDE, path: INDEX })

/** All Solutions: every entry in lib/data/solutions.ts, grouped by kind. A kind of
 *  one (the reserved tier) is its own section rather than a heading over one card. */
export default function Solutions() {
  return (
    <Page>
      <PageHero
        eyebrow="Solutions"
        title={TITLE}
        lede={
          <>
            {SAYS}
            <Spare>: {MORE}</Spare>.
          </>
        }
      >
        <Doors />
      </PageHero>
      {KINDS.map((k) => {
        const all = ofKind(k.id)
        if (all.length === 1) {
          const [s] = all
          return (
            <Section key={k.id} title={s.name} lede={s.lede}>
              <Cta href={href(s)}>{`Explore the ${s.name.toLowerCase()}`}</Cta>
            </Section>
          )
        }
        return (
          <Section key={k.id} title={k.label}>
            <CardGrid columns={3} items={all.map((s) => ({ title: s.name, description: s.hint, href: href(s) }))} />
          </Section>
        )
      })}
    </Page>
  )
}