hanzo.ai/app/(marketing)/ui/view.tsx

'use client'

import type { ReactNode } from 'react'
import { ArrowRight, Accessibility, Blocks, Code2, Component, Palette, ShieldCheck, Zap } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { Line } from '@hanzo/ui/marketing'
import { phrase } from '@hanzo/i18n'
import { T } from '@hanzo/i18n/react'

/**
 * Hanzo UI, through the ONE product kit.
 *
 * gui and ui scored 89% identical: hero, six-card grid, a terminal, a call to
 * action. See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE, including the `init` set in code inside
 * one of the headings — which is why a section title is a node and not a
 * string. The trailing "Get started with Hanzo UI" card is dropped, as on every
 * other page in this migration: its links were the docs and GitHub, both of
 * which the hero and the card above it already reach.
 */

export default function HanzoUIPage({ source }: { source: ReactNode }) {
  return (
    <>
      <ProductLanding
        badge={phrase("React Component Library")}
        badgeIcon={Blocks}
        title={"Hanzo UI"}
        tagline={phrase("The React components powering Hanzo apps")}
        lede={phrase("Open source, on @hanzo/gui primitives and @hanzo/design tokens. No Tailwind, no Radix, no vendored component folder to maintain — the admin you are reading about elsewhere on this site is built out of it.")}
        ctas={[
          { label: "GitHub", href: "https://github.com/hanzoai/ui" },
        ]}
        what={{
          title: phrase("Components your design team will sign off on"),
          sub: phrase("The same library we use to ship our own products — open-sourced for yours."),
          pillars: [
            {
              icon: Component,
              title: phrase("Overlays are components. The rest is CSS."),
              body: phrase("Dialog and DropdownMenu are real components, because they carry focus management, keyboard behaviour and placement that CSS cannot. Buttons, panels, fields and tables are classes over tokens — which is why reading the markup is still possible."),
            },
            {
              icon: Accessibility,
              title: phrase("Accessible by Default"),
              body: phrase("WAI-ARIA compliant, keyboard navigable, screen reader tested. Accessibility isn't an afterthought — it's the foundation."),
            },
            {
              icon: Palette,
              title: phrase("Nothing invents a colour"),
              body: phrase("Every value comes from a @hanzo/design token — a plain CSS variable, alongside self-hosted faces. Nothing hard-codes a colour, a size or a radius, so retuning the tokens retunes everything at once and a brand fork costs nothing."),
            },
            {
              icon: Code2,
              title: phrase("One package, everywhere"),
              body: phrase("pnpm add @hanzo/ui. The same components run chat, console, and cloud — upgrade once and all three move together."),
            },
            {
              icon: Zap,
              title: phrase("Zero Runtime CSS"),
              body: phrase("Built on @hanzo/gui primitives. No styled-components, no emotion, no CSS-in-JS at render — one atomic stylesheet, generated at build."),
            },
            {
              icon: ShieldCheck,
              title: phrase("Production Tested"),
              body: phrase("Powers chat.hanzo.ai, platform.hanzo.ai, and every Hanzo dashboard. If it ships in our products, it ships in your code."),
            },
          ],
        }}
        code={{
          head: { title: (
            <T values={{ init: <Line render="code" color="var(--foreground)">init</Line>, n: 60 }}>
              {'From {init} to UI in {n} seconds'}
            </T>
          ), sub: phrase("Add the components you need. Skip the ones you don't.") },
          name: "terminal",
          source,
        }}
        finalCta={{
          title: phrase("Stop reinventing buttons."),
          sub: phrase("Hanzo UI gives you the components — you focus on what makes your product different."),
          buttons: [
            { label: phrase("View on GitHub"), href: "https://github.com/hanzoai/ui" },
          ],
        }}
      />
      <ProductFooter slug={"ui"} name={"UI"} />
    </>
  )
}