hanzo.ai/app/(marketing)/philosophy/page.tsx

import type { Metadata } from "next";
import Link from "next/link";
import type { ComponentProps, ReactNode } from "react";
import { ArrowRight } from "lucide-react";
import HexagramExplorer from "@/components/zen/HexagramExplorer";
import { Box, Text, View, XStack, YStack } from '@/components/ui'
import { Grid } from '@hanzo/ui/grid'
import { Band } from '@/components/marketing/band'
import { Action, Display, Lede, Title } from '@hanzo/ui/marketing'

/**
 * /philosophy — the five traditions, the five laws, the sixty-four patterns.
 *
 * The seven section frames are `components/marketing/band`'s `Band` — the
 * rule above, the rhythm around, the gutter beside and the measure it centres
 * on — the type and the controls are @hanzo/ui's marketing components, and the
 * rest is gui props over @hanzo/design's tokens.
 *
 * `Head` is deliberately NOT used here: it centres, and this page's section
 * heads are left-aligned blocks at a 672 measure. The frame is shared; the
 * alignment is this page's. The label above each heading stays this page's
 * own — mono, xs, and dimmer than the site eyebrow — because it is a
 * different decision, not a copy of it.
 */

export const metadata: Metadata = {
  title: "The Zen of Hanzo — 64 patterns for intelligent systems",
  description:
    "Systems philosophy for open, decentralized AI. Architectural patterns for understandable, adaptive, and human-aligned intelligence.",
};

/** The inks this page draws in. */
const INK = 'var(--foreground)'
const DIM = 'var(--muted-foreground)'
/** A share of the muted or the full ink, for the inks this page dims by degree. */
const muted = (pct: number) => `color-mix(in oklab, var(--muted-foreground) ${pct}%, transparent)`
const ink = (pct: number) => `color-mix(in oklab, var(--foreground) ${pct}%, transparent)`

/** The faint ground the tiles sit on. */
const GROUND = { backgroundColor: 'color-mix(in oklab, var(--secondary) 20%, transparent)' } as const

type TextProps = ComponentProps<typeof Text>

/** The label above a section heading: mono, small, and quieter than a lede. */
function Label({ children }: { children: ReactNode }) {
  return (
    <Text
      render="p"
      display="block"
      fontFamily="$mono"
      fontSize="$1"
      lineHeight="0.9167rem"
      letterSpacing={1.1}
      textTransform="uppercase"
      $platform-web={{ color: muted(50) }}
    >
      {children}
    </Text>
  )
}

/** A paragraph in this page's essay voice. */
function Prose({ children, ...p }: { children: ReactNode } & Omit<TextProps, 'children'>) {
  return (
    <Text render="p" display="block" fontSize="$4" lineHeight="1.5234rem" color={DIM} {...p}>
      {children}
    </Text>
  )
}

/** A section's label and heading, left-aligned. */
function Opening({ label, title }: { label: string; title: string }) {
  return (
    <>
      <Label>{label}</Label>
      <Title quiet mt={12}>
        {title}
      </Title>
    </>
  )
}

/** A tile's name and its paragraph. */
function CardTitle({ children, ...p }: { children: ReactNode } & Omit<TextProps, 'children'>) {
  return (
    <Text render="h3" display="block" fontSize="$3" lineHeight="1.3125rem" fontWeight="600" color={INK} {...p}>
      {children}
    </Text>
  )
}

function CardBody({ children, ...p }: { children: ReactNode } & Omit<TextProps, 'children'>) {
  return (
    <Text render="p" display="block" fontSize="$2" lineHeight="1.3203rem" color={DIM} {...p}>
      {children}
    </Text>
  )
}

/** The hairline tile the traditions and the method are set in. */
function Tile({ children, ...p }: { children: ReactNode } & ComponentProps<typeof Box>) {
  return (
    <Box rounded="var(--radius-xl)" borderWidth={1} borderColor="var(--border)" p={24} {...p} $platform-web={GROUND}>
      {children}
    </Box>
  )
}

/** A step's or a law's number, mono and quiet. */
function Count({ children, ...p }: { children: ReactNode } & Omit<TextProps, 'children'>) {
  return (
    <Text fontFamily="$mono" $platform-web={{ color: muted(40) }} {...p}>
      {children}
    </Text>
  )
}

const TRADITIONS = [
  {
    name: "I Ching",
    lead: "Understand the condition.",
    body: "The 64 hexagrams form a language for recognizing recurring states of change. Before acting, understand what kind of situation the system is in. Creation requires a different response than obstruction. Abundance requires a different response than scarcity. Completion requires a different response than beginning.",
  },
  {
    name: "Zen",
    lead: "See without attachment.",
    body: "Approach every system with beginner's mind. Do not defend an abstraction simply because it already exists. Do not confuse complexity with sophistication. Observe reality directly, remove what is unnecessary and remain willing to begin again.",
  },
  {
    name: "Curry",
    lead: "Compose from primitives.",
    body: "Haskell Curry's combinatory logic demonstrates how expressive systems can emerge from a small foundation of composable operations. Build small components. Give each a precise meaning. Compose them without hidden coupling. Let finite primitives produce unbounded capability.",
  },
  {
    name: "Hickey",
    lead: "Untangle complexity.",
    body: "Rich Hickey distinguishes what is genuinely simple from what is merely easy to access. Convenience can conceal entanglement. Hanzo separates identity from state, policy from execution, data from process and capability from interface. Systems become understandable when independent concerns remain independent.",
  },
  {
    name: "Pike",
    lead: "Cover the space with fewer ideas.",
    body: "Rob Pike's engineering philosophy favors small sets of orthogonal features that interact predictably. The objective is not the smallest feature count. The objective is the smallest coherent basis capable of expressing the whole system.",
  },
];

const LAWS = [
  { lead: "See the system clearly", body: "Understand the current condition before prescribing action." },
  { lead: "Separate what changes independently", body: "Do not bind together concepts that evolve for different reasons." },
  { lead: "Compose capability from complete primitives", body: "Small components should combine without central coordination or hidden behavior." },
  { lead: "Preserve the user's authority", body: "The user should control their models, data, keys, infrastructure and economic participation." },
  { lead: "Design for the next transformation", body: "Every completed system is already approaching its next condition." },
];

const METHOD = [
  { step: "Observe", body: "Identify the actual condition of the system." },
  { step: "Separate", body: "Untangle concerns that change for different reasons." },
  { step: "Reduce", body: "Find the smallest complete set of concepts." },
  { step: "Compose", body: "Combine orthogonal primitives into greater capability." },
  { step: "Verify", body: "Measure behavior instead of trusting intention." },
  { step: "Adapt", body: "Respond to evidence without abandoning the foundation." },
  { step: "Distribute", body: "Place data, computation and authority where they belong." },
  { step: "Continue", body: "Treat every completion as the beginning of another cycle." },
];

const PRODUCTS = [
  { name: "Hanzo Models", href: "/models", body: "Open and adaptable intelligence across language, vision, audio, code, tools and physical systems." },
  { name: "Hanzo Platform", href: "/cloud", body: "One control plane, assembled from services you can take apart." },
  { name: "Hanzo Engine", href: "/engine", body: "Efficient execution built around measurable performance, hardware awareness and composable runtimes." },
  { name: "Hanzo Router", href: "/gateway", body: "Model choice treated as a changing systems problem—balancing capability, latency, cost, privacy and availability." },
  { name: "Hanzo Network", href: "/network", body: "Distributed intelligence designed to reduce centralized dependence and share value with those who contribute compute, models, code and knowledge." },
  { name: "Hanzo Open Source", href: "/open-source", body: "Infrastructure that can be inspected, operated, modified and carried forward by the people who depend upon it." },
];

const QUESTIONS = [
  "Is it understandable?",
  "Is it composable?",
  "Is it verifiable?",
  "Can it operate privately?",
  "Can the user leave?",
  "Can it survive failure?",
  "Can it evolve without being destroyed?",
  "Does it increase human agency?",
];

const CLOSING = [
  "From one line, two forces.",
  "From two forces, eight patterns.",
  "From eight patterns, sixty-four conditions.",
  "From small primitives, unbounded intelligence.",
];

export default function PhilosophyPage() {
  return (
    <>
      {/* Hero */}
      <Box render="section" position="relative" overflow="hidden" pt={112} pb={64} px={16} $md={{ px: 32 }}>
        <Box position="relative" z="var(--z-raised)" width="100%" maxW={768} mx="auto" $platform-web={{ textAlign: 'center' }}>
          <Display>The Zen of Hanzo</Display>
          <Lede mt={16}>64 patterns for intelligent systems</Lede>

          <YStack gap={16} width="100%" maxW={672} mt={32} mx="auto" $platform-web={{ textAlign: 'left' }}>
            <Prose>
              The <Text color={INK}>I Ching</Text> is a map of change. Its 64 hexagrams describe recurring conditions:
              creation, resistance, conflict, growth, decay, transformation, completion and renewal.
            </Prose>
            <Prose>Hanzo interprets these patterns for the age of artificial intelligence.</Prose>
            <Prose color={undefined} $platform-web={{ color: ink(90) }}>
              Not as fortune-telling. Not as decoration. As a systems philosophy — a framework for building
              intelligence that remains open, understandable, adaptable and controlled by the people who use it.
            </Prose>
          </YStack>

          <XStack gap={12} mt={36} items="center" justify="center" flexWrap="wrap">
            <Action href="#patterns" fill>
              Explore the 64 patterns <ArrowRight width={16} height={16} />
            </Action>
            <Action href="https://cloud.hanzo.ai" target="_blank" rel="noopener noreferrer">Build with Hanzo</Action>
          </XStack>
        </Box>
      </Box>

      {/* Intelligence is always changing */}
      <Band rule={false} pad="$11" measure={768}>
        <Opening label="The premise" title="Intelligence is always changing" />
        <YStack gap={16} mt={24}>
          <Prose>No intelligent system remains fixed.</Prose>
          <Prose>
            Models learn. Data changes. Infrastructure fails. Organizations grow. Interfaces become dependencies.
            Successful architectures eventually meet conditions they were never designed to handle.
          </Prose>
          <Prose>
            The goal is not to prevent change. The goal is to build systems capable of changing without losing their
            integrity.
          </Prose>
          <Prose color={INK}>That is the Zen of Hanzo.</Prose>
        </YStack>
      </Band>

      {/* Five traditions */}
      <Band pad="$11" measure={1152}>
        <YStack width="100%" maxW={672}>
          <Opening label="Five traditions" title="Ancient patterns, modern engineering" />
          <Prose mt={12}>Hanzo brings together five complementary traditions.</Prose>
        </YStack>
        <Grid columns={{ min: 300, max: 3 }} gap={16} mt={40}>
          {TRADITIONS.map((t) => (
            <Tile key={t.name}>
              <CardTitle>{t.name}</CardTitle>
              <Text render="p" display="block" mt={4} fontSize="$2" lineHeight="1.1607rem" fontWeight="500" $platform-web={{ color: ink(70) }}>
                {t.lead}
              </Text>
              <CardBody mt={12}>{t.body}</CardBody>
            </Tile>
          ))}
        </Grid>
      </Band>

      {/* Synthesis */}
      <Band pad="$11" measure={896}>
        <YStack width="100%" maxW={672}>
          <Opening label="The synthesis" title="Five operating laws" />
        </YStack>
        <YStack render="ol" gap={1} mt={32} mb={14} pl={40} overflow="hidden" rounded="var(--radius-xl)" borderWidth={1} borderColor="var(--border)">
          {LAWS.map((l, i) => (
            <XStack key={l.lead} render="li" gap={20} p={24} $platform-web={GROUND}>
              <Count fontSize="$2" lineHeight="1.1607rem">
                {String(i + 1).padStart(2, "0")}
              </Count>
              <Box>
                <CardTitle>{l.lead}</CardTitle>
                <CardBody mt={4}>{l.body}</CardBody>
              </Box>
            </XStack>
          ))}
        </YStack>
      </Band>

      {/* The 64 patterns */}
      <Band id="patterns" pad="$11" measure={1280}>
        <YStack width="100%" maxW={672}>
          <Opening label="The 64 patterns" title="Every hexagram is active" />
          <Prose mt={12}>
            Each represents a condition that can appear in a model, an application, a company, a network or an entire
            technological ecosystem. The classical title names the condition. The Hanzo principle defines how we
            respond.
          </Prose>
        </YStack>
        <Box mt={40}>
          <HexagramExplorer />
        </Box>
      </Band>

      {/* How we build */}
      <Band pad="$11" measure={1152}>
        <YStack width="100%" maxW={672}>
          <Opening label="The method" title="How we build" />
        </YStack>
        <Grid columns={{ min: 240, max: 4 }} gap={16} mt={40}>
          {METHOD.map((m, i) => (
            <Tile key={m.step} p={20}>
              <Count fontSize="$1" lineHeight="0.9167rem">
                {String(i + 1).padStart(2, "0")}
              </Count>
              <CardTitle mt={8}>{m.step}</CardTitle>
              <CardBody mt={4}>{m.body}</CardBody>
            </Tile>
          ))}
        </Grid>
      </Band>

      {/* Products */}
      <Band pad="$11" measure={1152}>
        <YStack width="100%" maxW={672}>
          <Opening label="Across the stack" title="One philosophy" />
        </YStack>
        <Grid columns={{ min: 300, max: 3 }} gap={16} mt={40}>
          {PRODUCTS.map((p) => (
            // A card that is a link: the edge brightens on approach, the name
            // lifts to full ink and the arrow steps toward where it goes.
            <Text
              key={p.name}
              render={<Link href={p.href} />}
              group
              display="block"
              p={24}
              borderWidth={1}
              borderColor="var(--border)"
              rounded="var(--radius-xl)"
              fontSize="$3"
              lineHeight="1.25rem"
              color="var(--foreground)"
              textDecorationLine="none"
              whiteSpace="normal"
              hoverStyle={{ borderColor: 'var(--white-20)' }}
              $platform-web={GROUND}
            >
              <XStack items="center" justify="space-between">
                <Text render="h3" display="block" fontSize="$3" lineHeight="1.3125rem" fontWeight="600" color="inherit" $group-hover={{ color: 'var(--foreground)' }}>
                  {p.name}
                </Text>
                <Text
                  display="inline-flex"
                  shrink={0}
                  $group-hover={{ color: 'var(--foreground)', x: 2 }}
                  $platform-web={{ color: muted(40), transition: 'transform var(--duration-fast) var(--ease-in-out), color var(--duration-fast) var(--ease-in-out)' }}
                >
                  <ArrowRight width={16} height={16} />
                </Text>
              </XStack>
              <CardBody mt={12}>{p.body}</CardBody>
            </Text>
          ))}
        </Grid>
      </Band>

      {/* Closing */}
      <Band pad="$12" measure={768}>
        <Title quiet>Build systems that can change</Title>
        <YStack gap={16} mt={24}>
          <Prose>
            The purpose of a philosophy is not to decorate a company. It is to make difficult decisions clearer.
          </Prose>
          <Prose>When we design a model, an API, an agent, a database or a network, we return to the same questions:</Prose>
        </YStack>

        {/* Two columns is all this measure can hold: 280 twice plus the 32 gap
            is 592, and the band is 592 wide from 640 up and narrower below. */}
        <View
          render="ul"
          display="grid"
          gridTemplateColumns="repeat(auto-fit, minmax(min(280px, 100%), 1fr))"
          columnGap={32}
          rowGap={8}
          mt={24}
          mb={14}
          pl={40}
        >
          {QUESTIONS.map((q) => (
            <XStack key={q} render="li" items="flex-start" gap={8}>
              <View render="span" mt={8} height={4} width={4} shrink={0} rounded={9999} $platform-web={{ backgroundColor: ink(40) }} />
              <Text fontSize="$4" lineHeight="1.25rem" $platform-web={{ color: ink(90) }}>
                {q}
              </Text>
            </XStack>
          ))}
        </View>

        <Prose mt={32}>
          The Zen of Hanzo is not a promise that systems will remain still. It is a method for building systems that
          remain whole while everything changes.
        </Prose>

        <Box render="blockquote" mt={40} mx={40} mb={14} pl={24} borderLeftWidth={1} borderColor="var(--border)">
          <Text render="p" display="block" fontFamily="$mono" fontSize="$2" lineHeight="1.75rem" $platform-web={{ color: ink(80) }}>
            {CLOSING.map((line, i) => (
              <Text key={line} display="block" mt={i ? 4 : 0} color="inherit">
                {line}
              </Text>
            ))}
          </Text>
        </Box>

        <XStack gap={12} mt={40} flexWrap="wrap">
          <Action href="/" fill>
            Explore Hanzo <ArrowRight width={16} height={16} />
          </Action>
          <Action href="https://papers.hanzo.ai" target="_blank" rel="noopener noreferrer">Read the research</Action>
          <Action href="https://github.com/hanzoai" target="_blank" rel="noopener noreferrer">View the source</Action>
        </XStack>
      </Band>
    </>
  );
}