hanzo.ai/components/home/Home.tsx

'use client'

import { Suspense } from 'react'
import dynamic from 'next/dynamic'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { YStack } from '@hanzo/ui'
import { Action, Lede } from '@hanzo/ui/marketing'
import { Box } from '@/components/ui'
import { SiteFooter, SiteHeader } from './shell'
import { Beta } from './beta'
import Start from './Start'
import Backing from './Backing'
import { GET_KEY } from './nav-data'

// Below the first screen, so each is prerendered into the HTML and its script
// loads at low priority, outside the first load perf.budget.json holds. The
// boundary keeps the first screen from waiting on their chunks to hydrate.
const Plans = dynamic(() => import('@/components/pricing/Plans'))
const Race = dynamic(() => import('./Race'))
const Pareto = dynamic(() => import('./Pareto'))
const Models = dynamic(() => import('./Models'))
const Platform = dynamic(() => import('./Platform'))
const Questions = dynamic(() => import('./Questions'))
const Agents = dynamic(() => import('./Agents'))
const OpenSource = dynamic(() => import('./OpenSource'))

/**
 * The landing at `/`: the hero and who backs us, every model on one API,
 * accuracy against cost, coding agents, the agent's own way in (sign up, key,
 * top-up, no human), the stack in six tiles, what we ship in the open, pricing
 * with its questions, and the key.
 */
export default function Home() {
  const { t } = useI18n()

  return (
    <Box minH="100vh" $platform-web={{ color: 'var(--foreground)', overflowX: 'clip' }}>
      <SiteHeader />
      <main>
        <Beta />
        <Start />
        <Backing />
        <Suspense>
          <Models />
          <Pareto />
          <Race />
          <Agents />
          <Platform />
          <OpenSource />
          <YStack id="plans" width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" py={56} gap="$6" $md={{ py: 80 }}>
            <Plans heading="h2" title={phrase('Pricing')} ask={phrase('Try Hanzo')} footer={false} />
          </YStack>
          <Questions />
          <YStack id="get-key" width="100%" maxW={720} mx="auto" px="var(--page-gutter)" py={56} gap="$4" items="center" $md={{ py: 80 }}>
            <Lede text="center">{t('Better, cheaper, faster.')}</Lede>
            <Lede text="center">{t('Pick all three.')}</Lede>
            <Action href={GET_KEY.href} fill>
              {t(GET_KEY.label)}
            </Action>
          </YStack>
        </Suspense>
      </main>
      <SiteFooter />
    </Box>
  )
}