hanzo.ai/app/(marketing)/models/enso/page.tsx

/**
 * /models/enso — the family, and the runs that measure its router, on gui.
 *
 * The presets are what the catalog sells: a pool and a rate, the rate the price
 * list's (components/api/rate). No preset card states a score, because no run
 * is of a preset: the research API's `enso.*` runs measure enso-bench's router
 * at a tag, and the boards under the presets draw them when the page opens
 * (components/benchmarks/Ladder, lib/enso). This file types no figure.
 *
 * NO TAILWIND. The opening is `components/models/kit`'s `Hero`; the four
 * sections under it are
 * `components/marketing/band`'s `Band` (the rule above, the rhythm around, the
 * gutter beside and the measure it centres on) and its `Card`; the type and the
 * controls are @hanzo/ui's marketing components — `Title`/`Lede` for a section's
 * head, `Line` for a card's own words, `Action` for a control. No element
 * carries a style object.
 *
 * Four things the page used to decide for itself and now takes from the kit,
 * each a VISIBLE change rather than a translation:
 *
 *   - THE HAIRLINE. The hero drew `border-b` and every section after it drew
 *     `border-t`, which is one line stated from both sides. `Band`'s is the
 *     only one now, so each boundary still carries exactly one.
 *   - THE GUTTER. A flat `px-4` becomes the kit's 16 → 24 → 32, which is what
 *     every other product page already stands in.
 *   - THE HEADS. `text-2xl font-bold` becomes `Title quiet` and the
 *     paragraph under it becomes `Lede`, which is the one ladder this site
 *     has. Both step up a rung at 640 rather than at 768.
 *   - THE CONTROLS. Six links drew the same two button shapes by hand. They are
 *     `Action` now, at its two weights.
 */

import type { Metadata } from 'next'
import { Hero, XS } from '@/components/models/kit'
import { GuestKey } from '@/components/models/guest'
import { CODE, PRESETS } from '@/lib/enso'
import { Ladder } from '@/components/benchmarks/Ladder'
import { Models } from '@/components/api/count'
import { Pair } from '@/components/api/rate'
import { Box, XStack, YStack } from '@/components/ui'
import { Action, Lede, Line, Title } from '@hanzo/ui/marketing'
import { Grid } from '@hanzo/ui/grid'
import { Band, Card } from '@/components/marketing/band'
import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'

const TITLE = 'Hanzo Enso — presets and research runs'
const DESCRIPTION =
  'Enso frontier model router: dynamic routing across top AI models, benchmarked on GPQA Diamond and LiveCodeBench for quality and cost.'

export const metadata: Metadata = {
  title: TITLE,
  description: DESCRIPTION,
  alternates: { canonical: 'https://hanzo.ai/models/enso' },
  openGraph: {
    title: TITLE,
    description: DESCRIPTION,
    url: 'https://hanzo.ai/models/enso',
    siteName: 'Hanzo AI',
    type: 'website',
  },
  twitter: { card: 'summary_large_image', title: TITLE, description: DESCRIPTION },
}

/** A section's heading, and the sentence under it. The roles carry the type; a
 *  call site carries only the gap to the next thing. */
const TITLE_GAP = { mb: 8 } as const
const LEDE_GAP = { mb: 32, width: "100%", maxW: 768 } as const

/** The two words a tier card can wear, in the one outline and the one fill. */
const TAG = {
  display: 'inline-flex',
  items: 'center',
  rounded: 'var(--radius-full)',
  px: 8,
  py: 2,
  fontSize: 'var(--text-floor)',
  lineHeight: '1.6',
  fontWeight: '700',
  textTransform: 'uppercase',
  letterSpacing: '0.025em',
} as const
const OUTLINE = { ...TAG, borderWidth: 1, borderColor: 'var(--white-30)', color: 'var(--foreground)' } as const
const FILL = { ...TAG, bg: 'var(--pure-white)', color: 'var(--pure-black)' } as const

/** An id or a figure, set in mono at the small rung. */
const MONO = { fontFamily: '$mono', ...XS, color: 'var(--muted-foreground)' } as const

export default function EnsoModelsPage() {
  return (
    <Box minH="100vh" $platform-web={{ color: 'var(--foreground)' }}>
      <Hero
        crumb="Enso"
        badge={phrase('Research runs · GPQA Diamond and LiveCodeBench')}
        title={phrase('Enso, measured')}
        lede={
          <T values={{ models: <Models /> }}>
            {'Enso is our frontier family, and the router that picks among {models} when you ask for auto. A vendor’s published score and your own are rarely the same number, so every row below was run here, ours and theirs on the same questions, and each one links its run.'}
          </T>
        }
      >
        <Action href="https://platform.hanzo.ai" fill>
          <T>Start using Enso</T>
        </Action>
        <Action href="/enso">
          <T>The Enso product</T>
        </Action>
      </Hero>

      <Box maxW={768} mx="auto" px="$4" mt="$6" mb="$8">
        <GuestKey model="zen-free" />
      </Box>

      {/* Presets */}
      <Band pad="$10" measure={1024}>
        <Title quiet {...TITLE_GAP}>
          <T>Three presets</T>
        </Title>
        <Lede {...LEDE_GAP} mt="$3.5">
          <T>{'Ultra, Pro and Flash. A preset is a pool and a rate, not another name for one model; the band is what you are billed, input then output, per million tokens. The runs below measure the router itself, not a preset.'}</T>
        </Lede>
        {/* Stated as the width a card may not go under rather than as a
            breakpoint, which is the same picture with nothing to keep in
            agreement. 16px is `$4`. */}
        <Grid columns={{ min: 280, max: 3 }} gap={16}>
          {PRESETS.map((t) => (
            <Card
              key={t.id}
              display="flex"
              flexDirection="column"
              p="$5"
              {...(t.flagship
                ? { borderColor: 'var(--white-30)', backgroundColor: 'color-mix(in oklab, var(--neutral-900) 70%, transparent)' }
                : null)}
            >
              <XStack items="center" gap="$2">
                <Line render="h3" fontSize="$4" lineHeight="calc(1.75 / 1.125)" fontWeight="600" color="var(--foreground)">
                  {t.name}
                </Line>
                {t.flagship && (
                  <Line {...OUTLINE}>
                    <T>Flagship</T>
                  </Line>
                )}
                {t.featured && (
                  <Line {...FILL}>
                    <T>Default</T>
                  </Line>
                )}
              </XStack>
              <Line {...MONO}>{t.id}</Line>
              <XStack my="$4" py="$3" borderTopWidth={1} borderBottomWidth={1} borderColor="var(--neutral-800)">
                <Line {...MONO}>
                  <Pair id={t.id} />
                </Line>
              </XStack>
              <Line render="p" display="block" fontSize="$2" lineHeight="var(--leading-relaxed)" color="var(--muted-foreground)">
                <T>{t.blurb}</T>
              </Line>
            </Card>
          ))}
        </Grid>
      </Band>

      {/* The runs */}
      <Band pad="$10" measure={1024}>
        <Title quiet {...TITLE_GAP}>
          <T>Every row a research run</T>
        </Title>
        <Lede {...LEDE_GAP} mt="$3.5">
          <T>{'The router beside single models from other labs, on the same questions, read from api.hanzo.ai when the page opens: each run’s accuracy, its count, and what its tokens cost at list prices on the whole set.'}</T>
        </Lede>
        <YStack gap="$8">
          <Ladder />
          <Ladder bench={CODE} />
        </YStack>
      </Band>

      {/* CTA */}
      <Band pad="$10" measure={672}>
        <YStack $platform-web={{ textAlign: 'center' }}>
          <Title quiet mb={12}>
            <T>Build on the tier that fits</T>
          </Title>
          <Lede mb={24} mt="$3.5">
            <T>Start on Flash. Move a request up to Pro or Ultra when it earns the cost, by changing the model id and nothing else.</T>
          </Lede>
          <XStack flexWrap="wrap" justify="center" gap="$3">
            <Action href="https://platform.hanzo.ai" fill>
              <T>Get API access</T>
            </Action>
            <Action href="/zen">
              <T>Explore Zen (open weights)</T>
            </Action>
          </XStack>
        </YStack>
      </Band>
    </Box>
  )
}