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 { Spare } from '@/components/type'
import blog from '@/lib/data/blog.json'

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: 'Getting started',
    description: '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: 'Drive the platform from your terminal — projects, deploys, keys and logs.',
    href: 'https://docs.hanzo.ai/docs/cli',
  },
  {
    icon: Code2,
    title: 'API reference',
    description: 'Every endpoint, parameter and response shape.',
    href: 'https://docs.hanzo.ai/docs/api',
  },
]

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

const BUILD: CardItem[] = [
  {
    icon: Bot,
    title: 'Agents',
    description: '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: 'Connect tools and data to models over the Model Context Protocol.',
    href: 'https://docs.hanzo.ai/docs/mcp',
  },
  {
    icon: Boxes,
    title: 'Starters',
    description: 'A starter for each Hanzo product. Browse, fork, deploy.',
    href: '/gallery',
  },
  {
    icon: Code2,
    title: 'UI',
    description: 'Open-source, accessible React components built on @hanzo/gui primitives.',
    href: '/ui',
  },
  {
    icon: Boxes,
    title: 'GUI',
    description: 'The cross-platform UI kit and design system behind every Hanzo app.',
    href: '/gui',
  },
]

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

export default function LearnPage() {
  return (
    <Page>
      <PageHero
        eyebrow="Learn"
        icon={GraduationCap}
        title="Learn Hanzo"
        lede={<>Start with a working request, then go as deep as you need.<Spare> Everything here is part of the documentation — this page is the map.</Spare></>}
      />

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

      <Section title="Start here">
        <CardGrid items={START} columns={3} />
      </Section>

      <Section title="Pick what to try">
        <CardGrid items={TRY} columns={3} />
      </Section>

      <Section title="Go further">
        <CardGrid items={BUILD} columns={3} />
      </Section>

      <Section title="From the blog">
        <CardGrid items={BLOG_CARDS} columns={3} />
      </Section>

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