hanzo.ai/components/extension/HanzoExtensionUseCases.tsx

'use client'

/**
 * What you would reach for it to do.
 *
 * NO TAILWIND. The section frame and its centred head are
 * `components/marketing/band`'s `Band` and `Head`; the card is gui props over
 * @hanzo/design's tokens, and the pair wraps by width through `Grid`.
 */

import { motion } from "@/components/motion";
import { FileText, Search, Code, ShoppingCart } from "lucide-react";
import { View } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'

/** How narrow a column may get before the pair becomes a stack. */
const DUO = { min: 320, max: 2 } as const


const UseCaseCard = ({ icon: Icon, title, description }) => {
  return (
    <View
      render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
      display="block"
      p={32}
      rounded="var(--radius-xl)"
      borderWidth={1}
      borderColor="var(--neutral-800)"
      background="color-mix(in oklab, var(--neutral-900) 30%, transparent)"
    >
      {/* The icon sits on a line of its own, as it did when it carried the margin. */}
      <Words render="div" mb={16}>
        <Icon width={40} height={40} color="var(--foreground)" />
      </Words>
      <Words render="h3" mb={8} fontSize="$7" lineHeight="1.3333" weight="700" color="var(--foreground)">{title}</Words>
      <Words render="p" color="color-mix(in oklab, var(--foreground) 80%, transparent)">{description}</Words>
    </View>
  );
};

const HanzoExtensionUseCases = () => {
  return (
    <Band rule={false} pad="$11" ground="var(--neutral-950)">
      <Head
        title="What you would use it for"
        lede="Mostly the work that only exists inside a browser window"
        measure={768}
      />

      <Grid columns={DUO} gap={32}>
        <UseCaseCard
          icon={FileText}
          title="Check the change you just made"
          description="An agent that edited a page can open it, look at what rendered, and read the console — instead of telling you it thinks the fix worked."
        />

        <UseCaseCard
          icon={Search}
          title="Behind a login"
          description="An internal dashboard, a vendor console, an admin panel. It runs in the session you already have, so there is no service account to provision for a one-off task."
        />

        <UseCaseCard
          icon={Code}
          title="Debug the request, not the guess"
          description="Network requests and console messages come back as data. When a page misbehaves, the agent can read what the browser saw."
        />

        <UseCaseCard
          icon={ShoppingCart}
          title="The long boring form"
          description="Multi-step flows that exist only in a UI and have no API behind them. It fills them in and tells you where it got stuck."
        />
      </Grid>
    </Band>
  );
};

export default HanzoExtensionUseCases;