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

'use client'

import { ArrowRight, Globe, Lock, NetworkIcon, Shield, Terminal, Zap } from 'lucide-react'
import { ProductLanding, Session } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { Text } from '@hanzo/ui'
import { mix } from '@hanzo/app/lib/mix'

/**
 * Tunnel, through the ONE product kit.
 *
 * registry and tunnel had byte-identical className sets: a hero, a six-card
 * grid, a terminal and two calls to action. See LLM.md, "Tailwind is NOT gone".
 *
 * EVERY WORD IS THE ONE THAT WAS HERE, the coloured session included — the
 * prompt, the command and its argument are three tones, which is how the
 * sample reads, so `code.source` takes markup rather than a string.
 *
 * TWO THINGS MOVED. The session was in the hero and is now the kit's terminal
 * section, where it gains the heading that used to sit above the paragraph
 * below it. And the trailing "Get started with Tunnel" card is dropped, as on
 * every other page here: its docs and GitHub links are both already reachable.
 */

/**
 * The three tones the sample reads in. A prompt and a comment are quiet, the
 * command is body ink, and its argument is white — so they are three values,
 * named, rather than a colour repeated at seven spans.
 */
const DIM = mix('var(--foreground)', 60)
const CMD = 'var(--foreground)'
const ARG = 'var(--white)'

const SESSION = (
  <>
            <Text color={DIM}>$</Text> <Text color={CMD}>hanzo share</Text> <Text color={ARG}>3000</Text>
            <br/>
            <Text color={DIM}>→ sharing 3000</Text>
            <br/>
            <Text color={ARG}>https://wispyfox7421.share.hanzo.ai</Text> <Text color={DIM}>→</Text> <Text color={ARG}>localhost:3000</Text>
  </>
)

export default function TunnelPage() {
  return (
    <>
      <ProductLanding
        badge={"hanzo share"}
        title={"Hanzo Tunnel"}
        lede={"A public HTTPS URL for something running on your laptop. The port stays bound to localhost and the Hanzo fabric carries the traffic to it, so nothing is listening on whatever network the machine is sitting on."}
        ctas={[
          { label: "View Source", href: "https://github.com/hanzoai" },
        ]}
        what={{
          title: "For the things that need a real URL",
          sub: "A webhook you have to receive. A build a client wants to click through. An OAuth callback that will not accept localhost.",
          pillars: [
            {
              icon: Lock,
              title: "The port stays on localhost",
              body: "Your service keeps listening on 127.0.0.1. The fabric reaches in and carries the traffic, so a café, a client's office, or a conference floor sees nothing.",
            },
            {
              icon: Globe,
              title: "A name you can keep",
              body: "You get a random token by default. Pass --name and the subdomain is yours to reuse, so the callback URL you registered last week still works today.",
            },
            {
              icon: Terminal,
              title: "Your login is the account",
              body: "No second signup, no config file to fill in. The first share provisions the account from the identity you already signed in with, then prints the URL.",
            },
            {
              icon: Shield,
              title: "A shell is never open by hostname",
              body: "hanzo link publishes the terminal you are in so the console can watch it, or drive it. That one is gated behind your org's identity provider — knowing the URL is not enough, and if the gate cannot be applied the command refuses to publish.",
            },
            {
              icon: Zap,
              title: "It ends when you do",
              body: "The tunnel belongs to the command that started it. Close the terminal and the URL stops answering — a share cannot outlive the session that meant to make it.",
            },
            {
              icon: NetworkIcon,
              title: "Four things to put behind it",
              body: "proxy passes traffic through to a local port. web and static serve a directory as a site. drive hands over files. One flag picks which, and a port, a host:port, or a full URL all work as the target.",
            },
          ],
        }}
        code={{
          head: { title: "One command, one URL", sub: "Install the CLI, sign in once, and name a port. It is the same sign-in that runs your agents and bills your usage, so there is nothing else to set up." },
          name: "terminal",
          source: <Session>{SESSION}</Session>,
          ctas: [
            { label: "Install the CLI", href: "https://docs.hanzo.ai/docs/cli", icon: ArrowRight },
            { label: "See Pricing", href: "/pricing" }
          ],
        }}
        finalCta={{
          title: "Get started with Tunnel",
          buttons: [
            { label: "View on GitHub", href: "https://github.com/hanzoai" },
          ],
        }}
      />
      <ProductFooter slug={"tunnel"} name={"Tunnel"} />
    </>
  )
}