hanzo.ai/components/operator/OperativeFeatures.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { Globe, Zap, ShieldCheck, Compass, Database, Cpu } from "lucide-react"
import { Github } from "@/components/brand"
import { View, YStack, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Head, Words } from '@/components/marketing/band'
import { Line } from '@/components/type'
import { Chip } from '@hanzo/ui/marketing'

/** The tile a feature sits in. It has no hover: hovered and at rest, the
 *  tile is the same oklab(0.204625 … / 0.3). */
const TILE = {
  p: 24,
  rounded: 'var(--radius-xl)',
  borderWidth: 1,
  borderColor: 'var(--neutral-800)',
  background: 'color-mix(in oklab, var(--neutral-900) 30%, transparent)',
} as const

/** The disc a feature's mark sits on. */
const MARK = {
  width: 48,
  height: 48,
  alignItems: 'center',
  justifyContent: 'center',
  marginBottom: 16,
  borderRadius: 'var(--radius-lg)',
  backgroundColor: 'color-mix(in oklab, var(--primary) 20%, transparent)',
} as const

const OperativeFeatures = () => {
  const features = [
    {
      icon: Globe,
      title: "A desktop in the image",
      description: "Xvfb and X11 give the container a screen with no monitor attached, so a real window manager and real applications run inside it."
    },
    {
      icon: Zap,
      title: "Watch it work",
      description: "VNC on 5900 for a native client, noVNC on 6080 in a browser, and the control page on 8501. You see the cursor move as it moves."
    },
    {
      icon: Compass,
      title: "Say what you want",
      description: "Type an objective and it plans, acts, looks at the result, and goes again. You can interrupt at any point."
    },
    {
      icon: Database,
      title: "Bash and a file editor too",
      description: "Not only the screen. It can run a command or edit a file directly when that is the shorter path, instead of typing into a GUI text editor."
    },
    {
      icon: ShieldCheck,
      title: "Blast radius is the container",
      description: "Stop it and everything it touched goes with it. Give it the narrowest privileges and an allowlist of domains, and keep credentials that matter out of the image."
    },
    {
      icon: Cpu,
      title: "Where the model comes from",
      description: "The API directly, AWS Bedrock, or Google Vertex — chosen with an environment variable. The container is the same in all three cases."
    }
  ];

  return (
    <YStack
      render="section"
      position="relative"
      overflow="hidden"
      py={96}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
      bg="var(--neutral-950)"
    >
      {/* Sized against the section, so it stays a sibling of the measure. */}
      <YStack
        position="absolute"
        b={0}
        l="50%"
        width="75%"
        height="50%"
        rounded={9999}
        x="-50%"
        background="color-mix(in oklab, var(--primary) 10%, transparent)"
        filter="blur(64px)"
      />

      <YStack position="relative" z="var(--z-raised)" width="100%" maxW={1280} mx="auto">
        <Head
          measure={768}
          title="What is in the container"
          lede="A screen, a way to watch it, and the tools the model drives it with"
        />

        <Grid columns={{ min: 280, max: 3 }} gap={32}>
          {features.map((feature, index) => (
            <View
              key={index}
              render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: index * 0.1 }} />}
              display="block"
              {...TILE}
            >
              <YStack {...MARK}>
                <feature.icon width={24} height={24} color="var(--foreground)" />
              </YStack>
              <Line render="h3" size="xl" weight="600" color="var(--white)" marginBottom={8}>{feature.title}</Line>
              <Line render="p" tone="muted">{feature.description}</Line>
            </View>
          ))}
        </Grid>

        <XStack mt={64} justify="center">
          <Chip
            render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.6 }} />}
            gap={12}
            px={24}
            py={12}
            bg="color-mix(in oklab, var(--neutral-900) 50%, transparent)"
          >
            <Github width={20} height={20} color="var(--muted-foreground)" />
            <Line tone="soft">Open Source on</Line>
            {/* No hover: measured rgb(250,250,250) hovered and at rest. */}
            <Words render="a" href="https://github.com/hanzoai" color="var(--white)" weight="600">GitHub</Words>
          </Chip>
        </XStack>
      </YStack>
    </YStack>
  );
};

export default OperativeFeatures;