hanzo.ai/components/home/Proof.tsx

'use client'

import Link from 'next/link'
import { ArrowUpRight } from 'lucide-react'
import { Text, XStack, YStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Cta } from '@/components/marketing/page-kit'
import { Band, Head } from './band'
import { Caption, Mono } from './plate'
import oss from '@/lib/data/oss.json'
import { featured, href, stories } from '@/lib/data/customers'

/**
 * The track record, drawn as the artefact that holds it: the agency's
 * case studies, one card per engagement, each name opening its study.
 *
 * WHAT THE HEADING MAY NOT SAY. "Trusted by teams at" is the sentence this
 * section exists to refuse. These companies came through Hanzo Agency, which
 * BUILT and SHIPPED their products — that is a claim about us, and it is the
 * strong one. "They run Hanzo OS in production" is a different claim, about
 * them, and nothing here supports it. The two are one word apart and a reader
 * who checks would find the second one false, so the heading says the first in
 * the first person and leaves no room to read it the other way.
 *
 * For the same reason the plate shows DOCUMENTS and never an ops log, an uptime
 * figure or a deployment count, and it renders no returns: the Damon study
 * carries a 500X line, and a multiple without its methodology is one a reader
 * cannot check.
 *
 * Each card opens its study on /customers (lib/data/customers.ts).
 * lux-network and zoo-foundation are not drawn: they are our own ventures, and
 * counting them is the same category error in a friendlier coat.
 *
 * Personas Social and Keek are one row. The company is Personas Social, the
 * product is Keek.
 */

const CLIENTS: Array<{ name: string; id: string }> = [
  { name: 'TrillerFest', id: 'trillerfest' },
  { name: 'Damon Motorcycles', id: 'damon-motorcycles' },
  { name: 'Unikrn', id: 'unikoin-gold' },
  { name: 'Bellabeat', id: 'bellabeat' },
  { name: 'Casper', id: 'casper-blockchain' },
  { name: 'Cover Build', id: 'cover-build' },
  { name: 'Myle Tap', id: 'myle-tap' },
  { name: 'Personas Social', id: 'keek-social' },
]

/**
 * The two firsts, and they are the only two figures this band prints.
 *
 * Both are public record — a crowdfunding page and a token sale — so a reader
 * who doubts either can go and check, which is the whole test for a number on
 * this page. That is why they are here and an aggregate like "a billion raised"
 * is not: the aggregate is true and it is also unfalsifiable from outside, and a
 * claim a stranger cannot check reads as a claim we made up.
 */
const FIRSTS: Array<{ figure: string; what: string; who: string }> = [
  { figure: '$1,000,000+', what: 'in its first 24 hours', who: 'SKULLY — our first client' },
  { figure: '120,000 ETH', what: 'in a month', who: 'Unikoin Gold — our first token launch' },
]

const SPOTLIGHTS = [
  {
    company: 'Damon Motorcycles',
    id: 'damon-motorcycles',
    metric: '<50ms',
    metricLabel: 'Edge Telemetry Latency',
    highlight: 'Next-Gen Electric Hypersport Telemetry',
    quote: 'Hanzo has transformed our approach to electric motorcycle development. Their platform gives us the tools to innovate at an unprecedented pace.',
    author: 'Jay Giraud',
    role: 'Founder & CEO at Damon Motorcycles',
  },
  {
    company: 'SKULLY',
    id: 'skully',
    metric: '#1',
    metricLabel: 'Funded Campaign in History',
    highlight: 'AR HUD Smart Helmets · $1M+ First 24h',
    quote: 'Working with Hanzo transformed our ability to create the highest successfully funded campaign in history, streamlining development with total reliability.',
    author: 'Marcus Weller',
    role: 'CEO at SKULLY',
  },
  {
    company: 'Bellabeat',
    id: 'bellabeat',
    metric: 'Millions',
    metricLabel: 'Active Connected Devices',
    highlight: "Scaling Women's Health IoT at Global Scale",
    quote: 'Hanzo has been instrumental in helping us scale our infrastructure across millions of active devices while keeping latency and data integrity pristine.',
    author: 'Sandro Mur',
    role: 'Co-founder & CEO at Bellabeat',
  },
  {
    company: 'Triller',
    id: 'trillerfest',
    metric: '169M+',
    metricLabel: 'Event Audience Reached',
    highlight: '169M+ Global Streaming Audience at Scale',
    quote: "With Trillerfest reaching over 169M people, Hanzo's platform proved essential to delivering exceptional user experiences under peak global concurrency.",
    author: 'Vincent Butta',
    role: 'Board Member at Triller',
  },
]

export function Proof() {
  return (
    <Band id="proof">
      <Head
        title="The work."
        lede="Techstars ’17. High-performance software, hardware, and tokens shipped with Hanzo."
      />

      {/* Customer Success Stories & Quotes */}
      <YStack pt={36}>
        <Grid columns={{ min: 280, max: 2 }} gap={16}>
          {SPOTLIGHTS.map((s) => (
            <YStack
              key={s.company}
              justify="space-between"
              gap={16}
              py={24}
              px={20}
              rounded="var(--radius-xl)"
              borderWidth={1}
              borderColor="$edge"
              bg="$panel"
              backgroundImage="var(--sheen-card)"
            >
              <YStack>
                <XStack justify="space-between" items="flex-start" gap={12} mb={12}>
                  {/* The name gives way to the metric: a View keeps its content's
                      width, which pushed the metric off a phone. */}
                  <YStack flex={1} minW={0}>
                    <Text render="h3" fontSize="$4" fontWeight="600" color="$ink">
                      {s.company}
                    </Text>
                    <Text render="p" mt={4} fontSize="$1" color="var(--muted-foreground)">
                      {s.highlight}
                    </Text>
                  </YStack>
                  <YStack items="flex-end" bg="var(--white-05)" borderWidth={1} borderColor="$edge" rounded={6} py={3} px={8}>
                    <Text fontSize="$3" fontWeight="600" fontFamily="$mono" color="$ink">
                      {s.metric}
                    </Text>
                    <Text fontSize="0.625rem" color="var(--muted-foreground)">
                      {s.metricLabel}
                    </Text>
                  </YStack>
                </XStack>
                <Text render="blockquote" display="block" m={0} fontSize="$2" lineHeight="$3" fontStyle="italic" color="$ink" opacity={0.85}>
                  &ldquo;{s.quote}&rdquo;
                </Text>
              </YStack>
              <XStack justify="space-between" items="center" pt={10} borderTopWidth={1} borderColor="$edge">
                <Text fontSize="$1" color="var(--muted-foreground)">
                  {s.author} · {s.role}
                </Text>
                <Text
                  render={<Link href={href([...featured, ...stories].find((x) => x.id === s.id)!)} />}
                  fontSize="$1"
                  color="$ink"
                >
                  Story ↗
                </Text>
              </XStack>
            </YStack>
          ))}
        </Grid>
      </YStack>

      <YStack render="nav" aria-label="Products Hanzo Agency built" pt={32}>
        {/* Eight cards, each washed in the card sheen and each the whole link.
            It was a monospace index — the name, then its slug, twice per row —
            which read as a directory listing of the work rather than as the
            work. The wash carries no information and does not pretend to: it
            is what makes eight names a wall instead of a list, and no card
            wears a logo, because we do not have their logos and drawing one
            would be inventing a mark for somebody else's company. */}
        <Grid columns={{ min: 200, max: 4 }} gap={12}>
          {CLIENTS.map((c) => (
            <YStack
              key={c.id}
              render={<Link href={href([...featured, ...stories].find((s) => s.id === c.id)!)} />}
              position="relative"
              overflow="hidden"
              justify="flex-end"
              minH={108}
              p={16}
              rounded="var(--radius-xl)"
              borderWidth={1}
              borderColor="$edge"
              bg="$panel"
              backgroundImage="var(--sheen-card)"
            >
              <Text fontSize="$3" fontWeight="500" lineHeight="$3" color="$ink">
                {c.name}
              </Text>
              <Text mt={4} fontSize="$2" color="var(--muted-foreground)">
                Case study&nbsp;↗
              </Text>
            </YStack>
          ))}
        </Grid>

        {/* Two figures a reader can go and check. */}
        <Grid columns={{ min: 260, max: 2 }} gap={12} mt={12}>
          {FIRSTS.map((f) => (
            <YStack key={f.who} rounded="var(--radius-lg)" borderWidth={1} borderColor="$edge" bg="var(--surface-card-quiet)" p={12} overflow="hidden">
              <Text render="p" fontSize="$7" fontWeight="600" lineHeight="$8" color="$ink">
                {f.figure}
              </Text>
              <Text render="p" mt={2} fontSize="$2" color="var(--muted-foreground)">
                {f.what}
              </Text>
              <Mono render="p" mt={10}>
                {f.who}
              </Mono>
            </YStack>
          ))}
        </Grid>

        <Caption text="center">Case studies · each name opens the work</Caption>
      </YStack>

      <XStack mt="$4" justify="center" gap="$3" flexWrap="wrap">
        <Cta href="/customers" icon={ArrowUpRight}>
          See what we built
        </Cta>
        <Cta href="https://github.com/hanzoai" icon={ArrowUpRight}>
          {oss.repos.toLocaleString()} open repositories
        </Cta>
      </XStack>
    </Band>
  )
}

export default Proof