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.
94 lines
4.1 KiB
TypeScript
94 lines
4.1 KiB
TypeScript
'use client'
|
|
|
|
import type { ReactNode } from 'react'
|
|
import { ArrowRight, Code2, Component, Layers, Palette, Smartphone, Sparkles, Zap } from 'lucide-react'
|
|
import { ProductLanding } from '@/components/product/ProductLanding'
|
|
import { ProductFooter } from '@/components/products/ProductFooter'
|
|
|
|
/**
|
|
* Hanzo GUI, 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 GUI" 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 HanzoGUIPage({ source }: { source: ReactNode }) {
|
|
return (
|
|
<>
|
|
<ProductLanding
|
|
badge={"@hanzo/gui — Cross-Platform UI Kit"}
|
|
badgeIcon={Layers}
|
|
title={"Hanzo GUI"}
|
|
tagline={"One UI kit. Every platform."}
|
|
lede={"The primitives underneath every Hanzo app. One component tree renders through react-native-web in a browser and natively on a phone, off the same props — so a screen is written once and read once, whichever thing is showing it."}
|
|
ctas={[
|
|
{ label: "GitHub", href: "https://github.com/hanzoai/gui", icon: ArrowRight },
|
|
]}
|
|
what={{
|
|
title: "Build it once. Ship it everywhere.",
|
|
sub: "The same code that runs your web app runs your iOS app. No bridges, no compromise.",
|
|
pillars: [
|
|
{
|
|
icon: Smartphone,
|
|
title: "One codebase, every platform",
|
|
body: "Write your UI once. Render it natively on iOS, Android, web, and desktop. Same components, same props, same behavior.",
|
|
},
|
|
{
|
|
icon: Palette,
|
|
title: "Design tokens, not CSS",
|
|
body: "Colour, spacing, typography and motion are tokens in one place. Brand is resolved from the hostname it is served on, so the same build wears the right name on every domain without a fork.",
|
|
},
|
|
{
|
|
icon: Zap,
|
|
title: "Compile-Time CSS",
|
|
body: "Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native.",
|
|
},
|
|
{
|
|
icon: Component,
|
|
title: "Composable Primitives",
|
|
body: "Stack, XStack, YStack, Text, Button, Sheet, and Dialog — primitives that compose into anything without leaking abstraction.",
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Animated by Default",
|
|
body: "Spring-driven animations on every prop. No extra library, no boilerplate — just declare the target state and ship.",
|
|
},
|
|
{
|
|
icon: Code2,
|
|
title: "The shorthands are the API",
|
|
body: "p, px, bg, items, justify, rounded — the short style props are what the config accepts, and every token behind them is typed. A value that has drifted out of the design system fails the typecheck rather than the review.",
|
|
},
|
|
],
|
|
}}
|
|
stats={{
|
|
items: [
|
|
{ value: "iOS", label: "Native" },
|
|
{ value: "Android", label: "Native" },
|
|
{ value: "Web", label: "Atomic CSS" },
|
|
{ value: "Desktop", label: "macOS · Win · Linux" },
|
|
],
|
|
}}
|
|
code={{
|
|
head: { title: "Drop it in. Start shipping.", sub: "One install gets you the whole kit." },
|
|
name: "terminal",
|
|
source,
|
|
}}
|
|
finalCta={{
|
|
title: "The design system that ships your product",
|
|
sub: "Runs every Hanzo app in production, on web, native, and desktop.",
|
|
buttons: [
|
|
{ label: "View on GitHub", href: "https://github.com/hanzoai/gui", icon: ArrowRight },
|
|
],
|
|
}}
|
|
/>
|
|
<ProductFooter slug={"gui"} name={"GUI"} />
|
|
</>
|
|
)
|
|
}
|