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

'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'
import { useI18n } from '@hanzo/i18n/react'

/**
 * 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 }) {
  const { t } = useI18n()
  return (
    <>
      <ProductLanding
        badge={t("{pkg} — Cross-Platform UI Kit", { pkg: "@hanzo/gui" })}
        badgeIcon={Layers}
        title={"Hanzo GUI"}
        tagline={t("One UI kit. Every platform.")}
        lede={t("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: t("Build it once. Ship it everywhere."),
          sub: t("The same code that runs your web app runs your iOS app. No bridges, no compromise."),
          pillars: [
            {
              icon: Smartphone,
              title: t("One codebase, every platform"),
              body: t("Write your UI once. Render it natively on iOS, Android, web, and desktop. Same components, same props, same behavior."),
            },
            {
              icon: Palette,
              title: t("Design tokens, not CSS"),
              body: t("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: t("Compile-Time CSS"),
              body: t("Styles flatten to atomic CSS at build time. Zero runtime cost on the web, zero style recalc on native."),
            },
            {
              icon: Component,
              title: t("Composable Primitives"),
              body: t("Stack, XStack, YStack, Text, Button, Sheet, and Dialog — primitives that compose into anything without leaking abstraction."),
            },
            {
              icon: Sparkles,
              title: t("Animated by Default"),
              body: t("Spring-driven animations on every prop. No extra library, no boilerplate — just declare the target state and ship."),
            },
            {
              icon: Code2,
              title: t("The shorthands are the API"),
              body: t("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: t("Native") },
            { value: "Android", label: t("Native") },
            { value: t("Web"), label: t("Atomic CSS") },
            { value: t("Desktop"), label: "macOS · Win · Linux" },
          ],
        }}
        code={{
          head: { title: t("Drop it in. Start shipping."), sub: t("One install gets you the whole kit.") },
          name: "terminal",
          source,
        }}
        finalCta={{
          title: t("The design system that ships your product"),
          sub: t("Runs every Hanzo app in production, on web, native, and desktop."),
          buttons: [
            { label: t("View on GitHub"), href: "https://github.com/hanzoai/gui", icon: ArrowRight },
          ],
        }}
      />
      <ProductFooter slug={"gui"} name={"GUI"} />
    </>
  )
}