hanzo.ai/components/operator/OperativeCTA.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { ExternalLink } from "lucide-react"
import { Github, Twitter } from "@/components/brand"
import { Box, YStack, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Line } from '@/components/type'
import { Action, Lede, Title, Leaf } from '@hanzo/ui/marketing'

/** The three washes behind the ask, each sized against the section. */
const FADE = 'linear-gradient(to bottom, var(--background), color-mix(in oklab, var(--pure-white) 10%, transparent))'
const CAP = 'linear-gradient(to bottom, var(--neutral-950), transparent)'
const BLUR = 'color-mix(in oklab, var(--primary) 10%, transparent)'

/** The three places to go next. One shape, stated once. */
const DOORS = [
  { icon: ExternalLink, href: 'https://hanzo.blog/blog/2025-04-20-hanzo-operative-launch/', label: 'Read the Blog' },
  { icon: Twitter, href: 'https://twitter.com/hanzoai', label: 'Follow Updates' },
  { icon: Github, href: 'https://github.com/hanzoai', label: 'Contribute' },
] as const

const OperativeCTA = () => {
  return (
    <YStack
      render="section"
      position="relative"
      overflow="hidden"
      py={64}
      px={16}
    >
      <Box position="absolute" inset={0} background={FADE} />
      <Box position="absolute" t={0} l={0} width="100%" height="33.333333%" background={CAP} />
      <Box position="absolute" t="33.333333%" l="50%" width="50%" height="50%" rounded={9999} x="-50%" y="-50%" background={BLUR} filter="blur(64px)" />

      {/* 1618 is the measure this page chose, kept exactly. */}
      <YStack
        position="relative"
        z="var(--z-raised)"
        width="100%"
        maxW={1618}
        mx="auto"
        py={24}
      >
        <YStack width="100%" maxW={768} mx="auto" $platform-web={{ textAlign: 'center' }}>
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            <Title quiet>
              Run it and watch
            </Title>
            <Lede mt="$3.5">
              The most useful hour you can spend with computer use is the
              first one, watching where it gets stuck.
            </Lede>

            <XStack flexWrap="wrap" justify="center" gap={16}>
              <Action href="https://github.com/hanzoai" fill>
                <Github width={20} height={20} />
                Star on GitHub
              </Action>
              <Action href="https://discord.gg/XthHQQj">
                Join Discord Community
              </Action>
            </XStack>

            <Box mt={32} width="100%" maxW={672} mx="auto">
              <Grid columns={{ min: 180, max: 3 }}>
                {DOORS.map(({ icon: Icon, href, label }) => (
                  /* `Leaf` is the site's card-that-is-a-link: it already
                     carries the 16px pad and the xl corner this row drew by
                     hand. Its lift moves the EDGE where this one moved the
                     ground — one behaviour for every such card, rather than a
                     second rule for this row. */
                  <Leaf render="a" key={label} href={href}>
                    <YStack items="center">
                      <Icon width={24} height={24} color="var(--foreground)" />
                      <Line weight="500" color="var(--white)" $group-hover={{ color: 'var(--text-primary)' }}>{label}</Line>
                    </YStack>
                  </Leaf>
                ))}
              </Grid>
            </Box>
          </motion.div>
        </YStack>
      </YStack>
    </YStack>
  );
};

export default OperativeCTA;