hanzo.ai/app/(marketing)/computer/page.tsx

'use client'

import { ArrowRight, Eye, Keyboard, Laptop, MousePointer2, Shield, Workflow, Zap } from 'lucide-react'
import { useI18n } from '@hanzo/i18n/react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { Line } from '@hanzo/ui/marketing'

/**
 * Hanzo Computer, through the ONE product kit.
 *
 * A fourth cluster of the same duplicated shape — computer, desktop, gallery
 * and world scored 83–97% identical on their className sets. Hero, a six-card
 * grid, a call to action, written out four times. They now pass one typed
 * props object to `ProductLanding` and carry zero layout classes of their own.
 * See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE, with the same one deletion /node and
 * /network took: a trailing "Get started with X" card whose two links were the
 * docs and GitHub, both of which the hero and the card above it already reach.
 * ProductFooter was nested inside it, so it also rendered narrower than on
 * every other product page; out here it is the width it is everywhere else.
 */

export default function HanzoComputerPage() {
  const { t } = useI18n()
  return (
    <>
      <ProductLanding
        badge={"computer.hanzo.ai"}
        badgeIcon={Laptop}
        title={"Hanzo Computer"}
        tagline={t("An agent that uses the computer in front of it")}
        lede={t('It takes a screenshot, decides where to click, and clicks — the same inputs and outputs a person has. Say what you want in a sentence and it works through the apps already on the machine, with no API and no integration for any of them. Install it with pip, run {operate}, and type an objective.', { operate: <Line render="code" color="inherit">operate</Line> })}
        ctas={[
          { label: t("Try Hanzo Computer"), href: "https://computer.hanzo.ai", icon: ArrowRight },
          { label: t("Documentation"), href: "https://docs.hanzo.ai" },
        ]}
        what={{
          title: t("If a person can click it, so can this"),
          sub: t("The screen is the interface. That is the whole trick, and it is why the app you need to automate does not have to know anything about it."),
          pillars: [
            {
              icon: Eye,
              title: t("It reads pixels"),
              body: t("No DOM, no accessibility tree, no selectors to maintain. A native app, a canvas, a remote desktop and a web page all look the same to it — like a screenshot."),
            },
            {
              icon: MousePointer2,
              title: t("Mouse and keyboard"),
              body: t("Mac, Windows, and Linux with an X server. On macOS the terminal asks for Screen Recording and Accessibility the first time, because those are exactly the permissions this needs."),
            },
            {
              icon: Keyboard,
              title: t("OCR when clicking is hard"),
              body: t("Add -with-ocr to the model and it reads text off the screen to build a map of clickable elements — the fix for a button a model can see but keeps missing by twenty pixels."),
            },
            {
              icon: Workflow,
              title: t("Set-of-Mark prompting"),
              body: t("Add -with-som and the screenshot arrives pre-labelled, so the model names a marked element instead of guessing a coordinate."),
            },
            {
              icon: Zap,
              title: t("Say it out loud"),
              body: t("operate --voice takes the objective by microphone. Needs the audio extras and portaudio installed; it is not in the base install."),
            },
            {
              icon: Shield,
              title: t("It has whatever you have"),
              body: t("This runs as you, on your machine, with your logged-in sessions. Give it a fresh user account or a VM before you give it anything that matters — and remember that text on a web page can try to redirect it."),
            },
          ],
        }}
        finalCta={{
          title: t("For the software with no API"),
          sub: t("The vendor portal that exports one CSV at a time. The desktop tool from 2009. The internal app nobody will reopen. Those."),
          buttons: [
            { label: t("Try Hanzo Computer"), href: "https://computer.hanzo.ai", icon: ArrowRight },
            { label: t("View on GitHub"), href: "https://github.com/hanzoai/computer" },
          ],
        }}
      />
      <ProductFooter slug={"computer"} name={"Computer"} />
    </>
  )
}