mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
11265a21fd
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of them hand-inked in four greys. components/code now renders each sample at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub Light light), every colour written as light-dark() so the page's color-scheme picks it, on the theme's own ground. The page ships the coloured spans and no highlighter; e2e/gates/code.spec.ts holds both. A client page that shows code is split into a server page.tsx that owns the sample and a client view.tsx that takes the highlighted node: ProductLanding's code.source, the blockchain pages' codeExamples, the models kit Sample, the guest-key card, realtime, analytics, payments, sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not code and keep their markup. Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it, regenerates app/gui.css for the new theme keys, and lowers the raw-colour allowance to 58: the samples' literal inks are gone.
87 lines
4.0 KiB
TypeScript
87 lines
4.0 KiB
TypeScript
'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'
|
|
|
|
/**
|
|
* 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={"React Component Library"}
|
|
badgeIcon={Blocks}
|
|
title={"Hanzo UI"}
|
|
tagline={"The React components powering Hanzo apps"}
|
|
lede={"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: "Components your design team will sign off on",
|
|
sub: "The same library we use to ship our own products — open-sourced for yours.",
|
|
pillars: [
|
|
{
|
|
icon: Component,
|
|
title: "Overlays are components. The rest is CSS.",
|
|
body: "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: "Accessible by Default",
|
|
body: "WAI-ARIA compliant, keyboard navigable, screen reader tested. Accessibility isn't an afterthought — it's the foundation.",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Nothing invents a colour",
|
|
body: "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: "One package, everywhere",
|
|
body: "pnpm add @hanzo/ui. The same components run chat, console, and cloud — upgrade once and all three move together.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Zero Runtime CSS",
|
|
body: "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: "Production Tested",
|
|
body: "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: <>From <Line render="code" color="var(--foreground)">init</Line> to UI in 60 seconds</>, sub: "Add the components you need. Skip the ones you don't." },
|
|
name: "terminal",
|
|
source,
|
|
}}
|
|
finalCta={{
|
|
title: "Stop reinventing buttons.",
|
|
sub: "Hanzo UI gives you the components — you focus on what makes your product different.",
|
|
buttons: [
|
|
{ label: "View on GitHub", href: "https://github.com/hanzoai/ui" },
|
|
],
|
|
}}
|
|
/>
|
|
<ProductFooter slug={"ui"} name={"UI"} />
|
|
</>
|
|
)
|
|
}
|