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

'use client'

import { ArrowRight, Activity, Cpu, HardDrive, Network, Server, ShieldCheck, Terminal } from 'lucide-react'
import { ProductLanding } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { phrase } from '@hanzo/i18n'

/**
 * Hanzo Visor, through the ONE product kit.
 *
 * The largest cluster left: TWELVE pages — engine, gateway, guard, ingress,
 * jin, metrics, o11y, operator, sentinel, skills, telemetry, visor — at 85%+
 * identical className sets, each a hero, a six-card grid and a call to action
 * written out again. All twelve pass one typed props object to
 * `ProductLanding`. See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE. ProductFooter came out of the final
 * card's `max-w-3xl` wrapper, where it had been rendering narrower than on
 * every other product page.
 */

export default function HanzoVisorPage() {
  return (
    <>
      <ProductLanding
        badge={"hanzoai/visor"}
        badgeIcon={Server}
        title={"Hanzo Visor"}
        tagline={phrase("Machines from several clouds, through one API")}
        lede={phrase("Launch a machine, attach a volume, open a console, tear it down — the same four verbs whether the hardware is DigitalOcean, AWS, Hetzner, Azure, Google Cloud, Aliyun, Lightsail, or a KVM host in your own rack. Every machine belongs to an organization, and that organization is read from the signed identity on the request, never from a field the caller filled in.")}
        ctas={[
          { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
        ]}
        what={{
          title: phrase("What you get for the price of one integration"),
          sub: phrase("A machine is a machine. The provider is a field on it."),
          pillars: [
            {
              icon: Cpu,
              title: phrase("One catalogue, GPUs included"),
              body: phrase("Regions, sizes and GPU instances from each provider, cached and priced, read through the same call. Ask for what you want; Visor knows which provider can give it to you and what it will cost there."),
            },
            {
              icon: HardDrive,
              title: phrase("Volumes and images"),
              body: phrase("Attach and detach block storage, launch from a provider image or one of your own. Batch launches name themselves in sequence and group under the prefix, so a fleet is just machines and there is no second object to learn."),
            },
            {
              icon: Network,
              title: phrase("Pools, and managed Kubernetes"),
              body: phrase("Node pools group machines by shape and role. Managed Kubernetes clusters are provisioned the same way, so the cluster and the machines beside it are one inventory rather than two consoles."),
            },
            {
              icon: Activity,
              title: phrase("Priced before it exists"),
              body: phrase("A launch can run as a dry run: it returns the quote and spends nothing. A real launch is metered against the organization as it goes, per provider, so the bill is assembled from the same numbers the quote came from."),
            },
            {
              icon: Terminal,
              title: phrase("A console in the browser"),
              body: phrase("RDP, VNC and SSH reach the machine through a gateway and render in a tab — no client to install, no key to hand out, and no bastion of your own to keep patched. The session is a record, not just a connection."),
            },
            {
              icon: ShieldCheck,
              title: phrase("Every action leaves a row"),
              body: phrase("Who launched it, who opened a console, who destroyed it, under which organization and project. Authorization runs through the same grant calculus the rest of the estate uses, so a machine cannot be reached by anyone whose token does not cover it."),
            },
          ],
        }}
        finalCta={{
          title: phrase("Get started with Hanzo Visor"),
          buttons: [
            { label: phrase("View on GitHub"), href: "https://github.com/hanzoai" },
          ],
        }}
      />
      <ProductFooter slug={"visor"} name={"Visor"} />
    </>
  )
}