hanzo.ai/components/extension/HanzoExtensionHero.tsx

'use client'

/**
 * The extension's fold.
 *
 * NO TAILWIND. Layout is gui primitives, the type is @hanzo/ui's marketing
 * roles (`Display`, `Claim`) and the band kit's `Words`, the two controls are
 * `Action`, all over @hanzo/design's tokens.
 *
 * It states its OWN frame rather than taking `components/marketing/band`'s:
 * the rhythm is asymmetric — 128 above, 80 below — where a band states one
 * `pad` for both.
 *
 * `Action` is one shape, so the outline control keeps the white edge and the
 * width its call site asked for and gives up its own `rounded-lg` and
 * `text-lg` — a second button shape is the thing the role exists to prevent.
 */

import { motion } from "@/components/motion";
import { ArrowRight, Globe } from "lucide-react"
import { Chrome } from "@/components/brand"
import { DOCS } from "@/components/home/nav-data"
import { Box, View, XStack } from '@hanzo/ui'
import { Action, Claim, Display } from '@hanzo/ui/marketing'
import { Words } from '@/components/marketing/band'

/** The framed preview's plate, the light thrown across it, and the veil it fades under. */
const PLATE = 'linear-gradient(to bottom right, color-mix(in oklab, var(--pure-white) 25%, transparent), color-mix(in oklab, var(--background) 40%, transparent), color-mix(in oklab, var(--pure-white) 10%, transparent))'
const SPOT = 'radial-gradient(circle at 20% 20%, var(--white-14), transparent 50%)'
const VEIL = 'linear-gradient(to top, color-mix(in oklab, var(--background) 60%, transparent), transparent)'

const HanzoExtensionHero = () => {
  return (
    <Box
      render="section"
      position="relative"
      overflow="hidden"
      pt={128}
      pb={80}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
    >
      <Box 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.6 }} />}
          display="block"
          $platform-web={{ textAlign: 'center' }}
        >
          <Display mb={24}>
            Hanzo Extension
          </Display>
          <Claim
            maxW={768}
            mx="auto"
            mb={48}
            color="color-mix(in oklab, var(--foreground) 80%, transparent)"
          >
            Your browser, as a tool an agent can use.
            <br />It opens tabs, reads pages, and clicks things — in the session you are already signed into.
          </Claim>

          <XStack flexWrap="wrap" justify="center" gap={16} mb={48}>
            {/* The extension is in no browser store and its builds are not public,
                so nothing here offers an install. The first control says where it
                stands; the second is what works in a browser today. */}
            <Action href={`${DOCS}/docs/apps/browser`} fill>
              <Chrome width={20} height={20} />
              Availability
              <ArrowRight width={20} height={20} />
            </Action>

            <Action
              href="https://chat.hanzo.ai"
              px={32}
              borderColor="var(--pure-white)"
              color="var(--white)"
            >
              <Globe width={20} height={20} />
              Use Hanzo Chat
            </Action>
          </XStack>

          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            {/* The framed preview under the copy. */}
            <Box position="relative" width="100%" maxW={896} mx="auto" overflow="hidden" rounded="var(--radius-xl)" boxShadow="var(--shadow-2xl)">
              <Box height={360} $md={{ height: 440 }} width="100%" background={PLATE}>
                <Box position="absolute" inset={0} background={SPOT} />
                <XStack position="relative" z="var(--z-raised)" height="100%" items="center" justify="center">
                  <Box $platform-web={{ textAlign: 'center' }}>
                    <Words render="div" fontSize="$1" lineHeight="1.3333" textTransform="uppercase" letterSpacing="0.1em" color="var(--muted-foreground)">Hanzo Extension</Words>
                    <Words render="div" mt={8} fontSize="$7" lineHeight="1.3333" weight="600" color="var(--white)">Chrome · Firefox · Safari</Words>
                  </Box>
                </XStack>
              </Box>
              <Box position="absolute" inset={0} background={VEIL} />
            </Box>
          </motion.div>
        </View>
      </Box>
    </Box>
  );
};

export default HanzoExtensionHero;