hanzo.ai/app/(marketing)/open-source/page.tsx

'use client'

/**
 * /open-source — what we publish, what we stand on, and what we pay back.
 *
 * NO TAILWIND AND NO STYLE OBJECTS. The four section frames are
 * `components/marketing/band`'s `Band` and `Head`; @hanzo/ui's marketing
 * components carry the type and the controls (`Display`, `Lede`, `Title`,
 * `Chip`, `Action`, `Leaf`); everything left is gui props over
 * @hanzo/design's tokens.
 *
 * Three things the swap moves, each the shared shape winning over this page's
 * own copy of it:
 *
 *  - the section headings take `Title quiet`, so they step 3xl -> 4xl at
 *    640 like every other band on the site.
 *  - the four button spellings become `Action` at its two weights.
 *  - a foundation card is `Leaf`: its `hover:border-primary/50` IS the leaf's
 *    hover edge and its `group-hover:text-primary` IS `Lift`, which is
 *    the pair that rule exists for. What `Leaf` cannot say is the card's
 *    GROUND changing on approach, so `hover:bg-secondary/60` stays a class,
 *    stated at the call site where a reader can see it.
 */

import React from "react";
import { motion } from "@/components/motion";
import type { ReactNode } from "react";
import { Star, Heart, ArrowRight, ExternalLink, Code, Building2, GitCommitHorizontal, Check } from "lucide-react"
import { Github } from "@/components/brand"
import { OSSRevenueBanner } from "@/components/oss/OSSRevenueBanner";
import Showcase, { Directory } from "@/components/oss/Showcase";
import { group } from "@/lib/oss";
import { Box, View, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Band, Head } from '@/components/marketing/band'
import { Glow } from '@/components/shared/Glow'
import { Action, Chip, Display, Lede, More, Title, Leaf, Lift, Line } from '@hanzo/ui/marketing'
import { mix } from '@hanzo/app/lib/mix'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

/** The inks this page draws in. */
const INK = 'var(--foreground)'
const DIM = 'var(--muted-foreground)'

/** The badge above a heading, in the tint this page has always drawn it. */
const BADGE = { mb: 24, px: 12, py: 4, fontSize: "$1", lineHeight: "1.3333", fontWeight: "500", borderColor: "transparent", bg: "color-mix(in srgb, var(--primary) 15%, transparent)", color: "var(--primary)" } as const

/** The pair of controls that closes a section, wrapping on a phone. */
const ROW = { flexWrap: 'wrap', items: 'center', justify: 'center', gap: 16 } as const

/** The small rung, on the leading its utility paired it with. */
const XS = { fontSize: '$1', lineHeight: '1.3333' } as const

/** A grey paragraph in a card, at the relaxed leading. */
const Note = ({ mb, children }: { mb?: number; children: ReactNode }) => (
  <Line render="p" display="block" mb={mb} fontSize="$1" color={DIM} lineHeight="var(--leading-relaxed)">
    {children}
  </Line>
)

/** A foundation card: `Leaf`'s edge at rest, its hover edge, 16px inside.
 *
 * The GROUND is not here, and that is the point: an inline `background-color`
 * out-ranks every rule, including the `hover:` that has to replace it, so the
 * card's ground would have been frozen at rest. Measured in the export — the
 * hover changed nothing. Ground and hover are one decision, so both are
 * classes, side by side at the call site. */
const FOUNDATION = { p: 16, borderColor: "var(--border)", bg: mix('var(--secondary)', 30), hoverStyle: { borderColor: mix('var(--pure-white)', 50), bg: mix('var(--secondary)', 60) } } as const

const CLIP = { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } as const

const OSS_FOUNDATIONS = [
  { name: "Python", description: phrase("The language powering our ML/AI stack"), url: "https://python.org", github: "https://github.com/python/cpython", creator: "Python Software Foundation", license: "PSF", emoji: "🐍" },
  { name: "Rust", description: phrase("Systems language for our high-performance runtimes"), url: "https://rust-lang.org", github: "https://github.com/rust-lang/rust", creator: "Rust Foundation", license: "MIT/Apache-2.0", emoji: "⚙️" },
  { name: "Go", description: phrase("Powers our gateway, blockchain, and infra tooling"), url: "https://go.dev", github: "https://github.com/golang/go", creator: "Go Authors / Google", license: "BSD-3-Clause", emoji: "🐹" },
  { name: "TypeScript", description: phrase("The backbone of our developer SDKs and web apps"), url: "https://typescriptlang.org", github: "https://github.com/microsoft/TypeScript", creator: "Microsoft", license: "Apache-2.0", emoji: "🔷" },
  { name: "React", description: phrase("Powering every UI we ship"), url: "https://react.dev", github: "https://github.com/react/react", creator: "Meta Open Source", license: "MIT", emoji: "⚛️" },
  { name: "Next.js", description: phrase("Every hanzo.ai product is built on Next.js"), url: "https://nextjs.org", github: "https://github.com/vercel/next.js", creator: "Vercel", license: "MIT", emoji: "▲" },
  { name: "PostgreSQL", description: phrase("The database underlying all our stateful services"), url: "https://postgresql.org", github: "https://github.com/postgres/postgres", creator: "PostgreSQL Global Development Group", license: "PostgreSQL License", emoji: "🐘" },
  { name: "Redis", description: phrase("Fast caching and pub/sub throughout our platform"), url: "https://redis.io", github: "https://github.com/redis/redis", creator: "Redis Ltd. / Salvatore Sanfilippo", license: "BSD-3-Clause", emoji: "🔴" },
  { name: "PyTorch", description: phrase("Foundation of our ML training and inference"), url: "https://pytorch.org", github: "https://github.com/pytorch/pytorch", creator: "Meta AI Research", license: "BSD-3-Clause", emoji: "🔥" },
  { name: "Kubernetes", description: phrase("Orchestrates every workload in production"), url: "https://kubernetes.io", github: "https://github.com/kubernetes/kubernetes", creator: "CNCF / Google", license: "Apache-2.0", emoji: "☸️" },
  { name: "Docker", description: phrase("Containers make our MCP tools portable"), url: "https://docker.com", github: "https://github.com/moby/moby", creator: "Docker / Moby Project", license: "Apache-2.0", emoji: "🐳" },
  { name: "OpenTelemetry", description: phrase("Observability across every service"), url: "https://opentelemetry.io", github: "https://github.com/open-telemetry/opentelemetry-specification", creator: "CNCF", license: "Apache-2.0", emoji: "📊" },
]

const COMMITMENTS = [
  {
    title: phrase("We ship open source first"),
    body: phrase("Every tool we build for ourselves gets published. If it's useful to us, it belongs to the community. No internal-only forks.")
  },
  {
    title: phrase("We contribute upstream"),
    body: phrase("When we find bugs or missing features in projects we depend on, we fix them upstream — not in private patches.")
  },
  {
    title: phrase("We never lock in what we open"),
    body: phrase("Anything published under MIT or Apache-2.0 stays that way. We will never relicense open repos to extract commercial value.")
  },
  {
    title: phrase("We credit our foundations"),
    body: phrase("Our platform is built on hundreds of open-source projects. We acknowledge, link to, and financially support the communities and maintainers who make this possible.")
  },
  {
    title: phrase("We fund what we depend on"),
    body: phrase("Through GitHub Sponsors, Open Collective, and direct partnerships, we invest back into the projects that power Hanzo.")
  },
  {
    title: phrase("We welcome all contributors"),
    body: phrase("Good code can come from anywhere. We maintain a contributor-friendly CONTRIBUTING.md, respond to PRs within 48 hours on active repos, and recognize every contributor.")
  },
]

const OpenSource = () => {
  // Hanzo's own figures, counted by scripts/sync-oss.ts off one snapshot
  // (lib/oss), so the orgs, the repositories they hold and the year cannot
  // disagree. Lux and Zoo are counted on their own, in the tabs below.
  const hanzo = group("hanzo");
  const fmt = (n: number) => n.toLocaleString("en-US");
  const stats = [
    { label: phrase("Original public repositories"), value: fmt(hanzo.repos), icon: Code },
    { label: phrase("Organizations holding them"), value: fmt(hanzo.orgs.length), icon: Building2 },
    { label: phrase("Commits, past year"), value: fmt(hanzo.commits.year), icon: GitCommitHorizontal },
    { label: phrase("GitHub stars"), value: fmt(hanzo.stars), icon: Star },
  ];
  const { t } = useI18n();

  return (
    <Box minH="100vh" $platform-web={{ color: 'var(--foreground)' }}>
      <main>
        {/* Hero Section */}
        <Box
          render="section"
          position="relative"
          overflow="hidden"
          pt={96}
          pb={64}
          px={16}
          $md={{ px: 32 }}
          $lg={{ px: 48 }}
        >

          <Box position="relative" z="var(--z-raised)" width="100%" maxW={1024} mx="auto">
            <Box $platform-web={{ textAlign: 'center' }}>
              <Chip
                render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} />}
                {...BADGE}
              >
                <Github width={14} height={14} />
                {t('Open Source First')}
              </Chip>

              <Display
                render={<motion.h1 initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.05 }} />}
                mb={24}
              >
                {t('Building in the{br}open.', { br: <br /> })}
              </Display>

              <Lede
                render={<motion.p initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.1 }} />}
                mb={40}
                width="100%"
                maxW={768}
                mx="auto"
              >
                {t('We publish what we build, fix the bugs we find upstream instead of patching them in private, and pay the projects we depend on. The commitments below are specific enough to hold us to.')}
              </Lede>

              <XStack
                render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.15 }} />}
                {...ROW}
                mb={48}
              >
                <Action
                  href="https://github.com/hanzoai"
                  target="_blank"
                  rel="noopener noreferrer"
                  fill
                >
                  <Github width={16} height={16} />
                  {t('View on GitHub')}
                </Action>
                <Action
                  href="https://github.com/hanzoai"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <Star width={16} height={16} />
                  {t('Star Our Repos')}
                </Action>
              </XStack>

              {/* Stats */}
              <motion.div
                initial={{ opacity: 0, y: 16 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.4, delay: 0.2 }}
              >
                <Grid columns={{ min: 150, max: 4 }} gap={16}>
                  {stats.map((stat) => {
                    const Icon = stat.icon;
                    return (
                      <Box
                        key={stat.label}
                        p={16}
                        rounded="var(--radius-xl)"
                        borderWidth={1}
                        borderColor="var(--border)"
                        bg={mix('var(--secondary)', 50)}
                      >
                        <View render={<Icon width={20} height={20} color={DIM} />} display="inline" mb={8} />
                        <Line render="div" display="block" fontSize="$7" fontWeight="700" color={INK} lineHeight="1.3333">{stat.value}</Line>
                        <Line render="div" display="block" {...XS} color={DIM}>{t(stat.label)}</Line>
                      </Box>
                    );
                  })}
                </Grid>
              </motion.div>
            </Box>
          </Box>
        </Box>

        {/* Standing on the Shoulders of Giants */}
        <Band pad="$11" measure={1152}>
          <Head
            title={phrase('What Hanzo is built on')}
            lede={phrase('The projects our platform actually runs on, each with its licence and the people who maintain it.')}
          />

          <Grid columns={{ min: 260, max: 4 }} gap={16}>
            {OSS_FOUNDATIONS.map((foundation, i) => (
              <Leaf
                render={<motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3, delay: i * 0.04 }} />}
                key={foundation.name}
                {...FOUNDATION}
              >
                <XStack items="center" gap={12} mb={8}>
                  <Line fontSize="$7" color="inherit" lineHeight="1.3333">{foundation.emoji}</Line>
                  <Box grow={1} shrink={1} flexBasis="0%" minW={0}>
                    <Lift
                      render="a"
                      href={foundation.github}
                      target="_blank"
                      rel="noopener noreferrer"
                      display="block"
                      fontSize="$2"
                      lineHeight="1.4286"
                      fontWeight="600"
                      color="inherit"
                      {...CLIP}
                    >
                      {foundation.name}
                    </Lift>
                    <Line render="div" display="block" {...CLIP} {...XS} color={DIM}>
                      <More
                        href={foundation.url}
                        target="_blank"
                        rel="noopener noreferrer"
                        fontSize="inherit"
                        fontWeight="inherit"
                      >
                        {foundation.creator}
                      </More>
                    </Line>
                  </Box>
                </XStack>
                <Note mb={8}>
                  {t(foundation.description)}
                </Note>
                <Line px={6} py={2} rounded="var(--radius)" bg="var(--muted)" fontFamily="$mono" fontSize="$1" color={mix('var(--foreground)', 70)} display="inline-block" lineHeight="1.3333">
                  {foundation.license}
                </Line>
              </Leaf>
            ))}
          </Grid>
        </Band>

        {/* Stewardship Commitments */}
        <Band pad="$11" measure={1152}>
          <Head
            title={phrase('Our Stewardship Commitments')}
            lede={phrase('We hold ourselves to explicit, public commitments — not vague marketing language.')}
          />

          <Grid columns={{ min: 300, max: 3 }} gap={20}>
            {COMMITMENTS.map((commitment, i) => (
              <Box
                key={commitment.title}
                render={<motion.div initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.3, delay: i * 0.06 }} />}
                p={20}
                rounded="var(--radius-xl)"
                borderWidth={1}
                borderColor="var(--border)"
                bg={mix('var(--secondary)', 30)}
              >
                <XStack items="flex-start" gap={12}>
                  <Box
                    shrink={0}
                    p={4}
                    mt={2}
                    rounded="var(--radius-full)"
                    bg={mix('var(--primary)', 15, 'srgb')}
                  >
                    <Check width={14} height={14} color="var(--primary)" />
                  </Box>
                  <Box>
                    <Line render="h3" display="block" mb={8} fontSize="$2" fontWeight="600" color={INK} lineHeight="1.4286">{t(commitment.title)}</Line>
                    <Note>{t(commitment.body)}</Note>
                  </Box>
                </XStack>
              </Box>
            ))}
          </Grid>
        </Band>

        {/* The open-source royalty: apps/author's 20%, described at /oss */}
        <OSSRevenueBanner />

        {/* Hanzo, Lux and Zoo, counted, and every org each holds */}
        <Band pad="$11" measure={1240}>
          <Head
            title={phrase('What we publish')}
            lede={phrase('Read from GitHub by every build: the year of commits, the languages and the repositories of each ecosystem, then every organization.')}
          />
          <Showcase index={false} />
          <Directory />
        </Band>

        {/* CTA Section */}
        <Band rule={false} pad="$12" measure={896} ground="linear-gradient(to bottom in oklab, color-mix(in oklab, var(--neutral-900) 30%, transparent), var(--background))">
          <Glow corner="top" pct={10} />
          <Glow corner="bottom" pct={5} />

          <Box position="relative" z="var(--z-raised)" $platform-web={{ textAlign: 'center' }}>
            <Chip
              render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} />}
              mb={24}
              px={12}
              py={4}
              fontSize="$1"
              lineHeight="1.3333"
              fontWeight="500"
              borderColor="var(--border)"
              bg="var(--white-10)"
              color={mix('var(--foreground)', 70)}
            >
              <Heart width={14} height={14} />
              {t('Join the Community')}
            </Chip>

            <Title
              render={<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} />}
              quiet
              mb={16}
            >
              {t('Contribute & Earn')}
            </Title>

            <Lede
              render={<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.1 }} />}
              mb={40}
              width="100%"
              maxW={672}
              mx="auto"
              mt="$3.5"
            >
              {t('We welcome contributions of all kinds — code, documentation, bug reports, and feature requests. Every contribution earns a share of compute revenue through our OSS Revenue Sharing program.')}
            </Lede>

            <XStack
              render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ delay: 0.2 }} />}
              {...ROW}
            >
              <Action
                href="https://github.com/hanzoai"
                target="_blank"
                rel="noopener noreferrer"
                fill
              >
                {t('Start Contributing')}
                <ArrowRight width={20} height={20} data-i18n-mirror />
              </Action>
              <Action
                href="https://discord.gg/XthHQQj"
                target="_blank"
                rel="noopener noreferrer"
              >
                {t('Join Discord')}
                <ExternalLink width={20} height={20} />
              </Action>
              <Action href="/founder">
                Founder Program
                <ArrowRight width={20} height={20} />
              </Action>
            </XStack>
          </Box>
        </Band>
      </main>
    </Box>
  );
};

export default OpenSource;