hanzo.ai/components/about/AboutHero.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { ArrowRight, Sparkles } from "lucide-react";
import { useI18n } from '@hanzo/i18n/react'
import { View, XStack, YStack } from '@hanzo/ui'
import { Action, Display, Lede } from '@hanzo/ui/marketing'
import { Words } from '@/components/marketing/band'
import { Line } from '@/components/type'

/** The house glow, a positioned disc centred on its point, and the corner's fainter one. */
const GLOW = 'radial-gradient(circle, var(--primary) 0%, transparent 70%)'
const CORNER = 'radial-gradient(circle, var(--pure-white) 0%, transparent 70%)'

/**
 * The badge above the heading. NOT `Chip` — that role draws a hairline and
 * takes its ink from the neutral ramp, and this one is a tinted fill with no
 * edge at all. Borrowing the role would put a border on it that has never been
 * there, so it keeps its own two declarations.
 *
 * `alignSelf` because the block it sits in is a gui stack now: an inline-flex
 * badge centres itself inside a `text-align: center` BLOCK, but inside a flex
 * column it is an item, and an item with no alignment of its own stretches the
 * full measure.
 */
const BADGE = {
  display: 'inline-flex',
  self: 'center',
  items: 'center',
  gap: 8,
  mb: 24,
  px: 12,
  py: 4,
  rounded: 9999,
  fontSize: '$1',
  weight: '500',
  bg: 'color-mix(in srgb, var(--primary) 15%, transparent)',
  color: 'var(--primary)',
} as const

const LEDE = { maxW: 768, mx: "auto", mb: 40 } as const

const AboutHero = () => {
  const { t } = useI18n()
  return (
    <YStack
      render="section"
      position="relative"
      overflow="hidden"
      pt={96}
      pb={64}
      px={16}
      $md={{ px: 32 }}
      $lg={{ px: 48 }}
    >
      {/* Background gradients */}
      <View aria-hidden position="absolute" t="20%" l="50%" width={640} height={640} x="-50%" y="-50%" pointerEvents="none" opacity={0.16} background={GLOW} filter="blur(100px)" />
      <View aria-hidden position="absolute" t={0} r="12%" width={440} height={440} pointerEvents="none" opacity={0.08} background={CORNER} filter="blur(80px)" />

      <YStack position="relative" z="var(--z-raised)" width="100%" maxW={1024} mx="auto">
        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} />}
          display="block"
          $platform-web={{ textAlign: 'center' }}
        >
          <Words render={<motion.span initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} />} {...BADGE}>
            <Sparkles width={14} height={14} />
            {t('Sovereign Cloud & Open Systems')}
          </Words>

          <Display
            render={<motion.h1 initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.05 }} />}
            mb={24}
          >
            {t('Twelve years of {br}sovereign intelligence.', { br: <br /> })}
          </Display>

          <Lede
            render={<motion.p initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.1 }} />}
            {...LEDE}
          >
            {t('Started in 2014 with SKULLY and open-source commerce, through Techstars ’17, Zoo Labs Foundation in 2021, to 824+ open repositories and the sovereign AI cloud today. Led by CEO Antje Worring and CTO Zach Kelling.')}
          </Lede>

          <XStack
            render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.15 }} />}
            flexWrap="wrap"
            justify="center"
            gap={16}
          >
            <Action href="#timeline" fill>
              {t('Explore the journey')}
              <ArrowRight width={16} height={16} data-i18n-mirror />
            </Action>
            <Action href="/oss">
              {t('Open Source & Research')}
            </Action>
            <Action href="/zen">
              {t('The Zen of Hanzo')}
            </Action>
          </XStack>

          {/* Track record summary stats */}
          <XStack
            render={<motion.div initial={{ opacity: 0, y: 16 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.4, delay: 0.2 }} />}
            flexWrap="wrap"
            justify="center"
            gap={28}
            mt={48}
            pt={32}
            borderTopWidth={1}
            borderColor="var(--border)"
          >
            {[
              { value: '100+', label: t('Startups Built & Funded') },
              { value: '$1B+', label: t('Revenue Generated') },
              { value: '9', label: t('Unicorns') },
              { value: '2', label: t('IPO Exits') },
              { value: '824+', label: t('Open Repositories') },
            ].map((stat) => (
              <YStack key={stat.label} items="center" px={8}>
                <Line size="x2" weight="700" color="var(--foreground)" display="block">
                  {stat.value}
                </Line>
                <Line size="sm" tone="muted" display="block">
                  {stat.label}
                </Line>
              </YStack>
            ))}
          </XStack>
        </View>
      </YStack>
    </YStack>
  );
};

export default AboutHero;