hanzo.ai/components/home/Home.tsx

'use client'

import { Suspense, useState } from 'react'
import dynamic from 'next/dynamic'
import { ChevronDown, ChevronUp } from 'lucide-react'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { XStack, YStack } from '@hanzo/ui'
import { Action, More } from '@hanzo/ui/marketing'
import { Box } from '@/components/ui'
import { Onward } from './label'
import { SiteFooter, SiteHeader } from './shell'
import { Beta } from './beta'
import Backing from './Backing'
import Start from './Start'

// 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 Speed = dynamic(() => import('./Speed'))
const Flash = dynamic(() => import('./Flash'))
const Pareto = dynamic(() => import('./Pareto'))
const Benchmarks = dynamic(() => import('./Benchmarks'))
const Products = dynamic(() => import('./Products'))
const Models = dynamic(() => import('./Models'))
const Platform = dynamic(() => import('./Platform'))
const OpenSource = dynamic(() => import('./OpenSource'))
const Questions = dynamic(() => import('./Questions'))

/**
 * The landing at `/`: progressively narrated from core opt-in to conversion:
 * 1. Core opt-in & prompt (<Beta />, <Start />, <Backing />)
 * 2. Latest releases (<Products />)
 * 3. Research & frontier proof (<Models />, <Pareto />, plus progressive deep-dive benchmarks)
 * 4. Open apps & cloud platform (<Platform />)
 * 5. Open-source ecosystem (<OpenSource />)
 * 6. Plans & FAQ (<Plans />, <Questions />)
 */
export default function Home() {
  const { t } = useI18n()
  const [showBenchmarks, setShowBenchmarks] = useState(false)

  return (
    <Box minH="100vh" $platform-web={{ color: 'var(--foreground)', overflowX: 'clip' }}>
      <SiteHeader />
      <main>
        <Beta />
        <Start />
        <Backing />
        <Suspense>
          {/* 1. Latest Releases */}
          <Products />

          {/* 2. Research & Frontier Proof (1 focused proof section + progressive expansion) */}
          <Models />
          <Pareto />
          <YStack width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" pb={24} items="center">
            <XStack gap={16} flexWrap="wrap" items="center" justify="center">
              <Action
                render="button"
                type="button"
                onClick={() => setShowBenchmarks((v) => !v)}
                aria-expanded={showBenchmarks}
              >
                {t('Explore all benchmarks')}
                {showBenchmarks ? <ChevronUp width={16} height={16} aria-hidden /> : <ChevronDown width={16} height={16} aria-hidden />}
              </Action>
              <More href="/benchmarks">
                <Onward>{t('View benchmark')}</Onward>
              </More>
              <More href="/research">
                <Onward>{t('Published research & specifications')}</Onward>
              </More>
            </XStack>
          </YStack>
          {showBenchmarks ? (
            <>
              <Speed />
              <Race />
              <Flash />
              <Benchmarks />
            </>
          ) : null}

          {/* 3. Open Apps & Platform */}
          <Platform />

          {/* 4. Open Source */}
          <OpenSource />

          {/* 5. Plans & Conversion */}
          <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('Build what’s next')} ask={phrase('Try Hanzo')} footer={false} />
          </YStack>
          <Questions />
        </Suspense>
      </main>
      <SiteFooter />
    </Box>
  )
}