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

'use client'

import { GraduationCap, Rocket, Terminal, Code2, Boxes, Bot, Waypoints, FileText, Brain, Plug, MessageSquare, Layers, Play, BookOpen, Newspaper } from 'lucide-react'
import { dev } from '@hanzo/app/lib/host'
import { CHAT, UNIVERSITY } from '@/components/home/nav-data'
import { Page, PageHero, Section, CardGrid, type CardItem } from '@/components/marketing/page-kit'
import Questions from '@/components/learn/Questions'
import blog from '@/lib/data/blog.json'
import { Action } from '@hanzo/ui/marketing'
import { Steps } from '@/components/preview/steps'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

const BLOG_CARDS: CardItem[] = blog.posts.slice(0, 3).map((p) => ({
  icon: Newspaper,
  title: p.title,
  description: p.description,
  href: p.link,
  meta: p.date,
}))

const START: CardItem[] = [
  {
    icon: Rocket,
    title: phrase('Getting started'),
    description: phrase('Install, authenticate, and make your first call. The shortest path from nothing to a working request.'),
    href: 'https://docs.hanzo.ai/docs/quickstart',
  },
  {
    icon: Terminal,
    title: 'CLI',
    description: phrase('Drive the platform from your terminal — projects, deploys, keys and logs.'),
    href: 'https://docs.hanzo.ai/docs/cli',
  },
  {
    icon: Code2,
    title: phrase('API reference'),
    description: phrase('Every endpoint, parameter and response shape.'),
    href: 'https://docs.hanzo.ai/docs/openapi',
  },
]

/** Where to start: the one that matches the problem in front of you. */
const TRY: CardItem[] = [
  { icon: MessageSquare, title: 'Chat', description: phrase('One thread with every model, your MCP tools, your files and a code sandbox.'), href: CHAT },
  { icon: Play, title: 'Playground', description: phrase('Every model in every mode, with each run’s tokens and cost beside the answer.'), href: '/playground' },
  { icon: Terminal, title: 'Hanzo Dev', description: phrase('A coding agent that opens the files, makes the change, runs the tests and shows you the diff.'), href: dev() },
  { icon: Brain, title: phrase('Zen models'), description: phrase('Open-weight frontier models you can self-host anywhere, served on the Hanzo API.'), href: '/zen' },
  { icon: Plug, title: 'MCP', description: phrase('Thirteen tools — shell, files, code, git, HTTP — behind one server.'), href: '/mcp' },
  { icon: Layers, title: phrase('Agents'), description: phrase('A Python SDK where an agent is a model, instructions and tools, and several can sit behind one router.'), href: '/agents/sdk' },
]

const BUILD: CardItem[] = [
  {
    icon: Bot,
    title: phrase('Agents'),
    description: phrase('Define an agent once and run it from chat, the API, or your own application.'),
    href: 'https://docs.hanzo.ai/docs/openapi/agents/',
  },
  {
    icon: Waypoints,
    title: 'MCP',
    description: phrase('Connect tools and data to models over the Model Context Protocol.'),
    href: 'https://docs.hanzo.ai/docs/mcp',
  },
  {
    icon: Boxes,
    title: phrase('Starters'),
    description: phrase('A starter for each Hanzo product. Browse, fork, deploy.'),
    href: '/gallery',
  },
  {
    icon: Code2,
    title: 'UI',
    description: phrase('Open-source, accessible React components built on @hanzo/gui primitives.'),
    href: '/ui',
  },
  {
    icon: Boxes,
    title: 'GUI',
    description: phrase('The cross-platform UI kit and design system behind every Hanzo app.'),
    href: '/gui',
  },
]

const UNIVERSITY_CARDS: CardItem[] = [
  {
    icon: GraduationCap,
    title: 'Hanzo University',
    description: phrase('Courses and certifications live on Hanzo University.'),
    href: UNIVERSITY,
  },
]

export default function LearnPage() {
  const { t } = useI18n()
  const cards = (items: CardItem[]) => items.map((item) => ({ ...item, title: t(item.title), description: t(item.description) }))
  return (
    <Page>
      <PageHero
        eyebrow={t('Learn')}
        icon={GraduationCap}
        title={t('Learn Hanzo')}
        lede={t('Start with a working request, then go as deep as you need.')}
        visual={<Steps title={phrase('Start here')} icon={<Rocket size={12} color="currentColor" />} steps={[...START, ...BUILD.slice(0, 2)].map((c) => ({ title: c.title, body: c.description }))} />}
      >
        <Action href={START[0].href!} fill>
          {t('Get started')}
        </Action>
        <Action href={UNIVERSITY}>Hanzo University</Action>
      </PageHero>

      <Section title="Hanzo University">
        <CardGrid items={cards(UNIVERSITY_CARDS)} columns={3} />
      </Section>

      <Section title={t('Start here')}>
        <CardGrid items={cards(START)} columns={3} />
      </Section>

      <Section title={t('Pick what to try')}>
        <CardGrid items={cards(TRY)} columns={3} />
      </Section>

      <Section title={t('Go further')}>
        <CardGrid items={cards(BUILD)} columns={3} />
      </Section>

      <Section title={t('From the blog')}>
        <CardGrid items={BLOG_CARDS} columns={3} />
      </Section>

      <Section title={t('Read the thinking')}>
        <CardGrid
          columns={3}
          items={[
            {
              icon: BookOpen,
              title: t('Technical Blog'),
              description: t('Product launches, architecture deep dives, and research essays.'),
              href: '/blog',
            },
            {
              icon: FileText,
              title: t('Research papers'),
              description: t('The reasoning behind the architecture, published in full.'),
              href: '/research',
            },
            {
              icon: Code2,
              title: t('Source'),
              description: t('The platform is open source — read it, run it, change it.'),
              href: 'https://github.com/hanzoai',
            },
          ]}
        />
      </Section>

      <Questions path="/learn" />
    </Page>
  )
}