hanzo.ai/components/home/Together.tsx

'use client'

import { ArrowUpRight } from 'lucide-react'
import { YStack, XStack, Text } from '@hanzo/ui'
import { Run } from '@hanzo/ui/marketing'

import { Grid } from '@hanzo/ui/grid'
import { Cta, Section } from '@/components/marketing/page-kit'
import { SH } from './nav-data'
import { Caption, Dim, Plate, Row } from './plate'

/**
 * The close.
 *
 * Nothing here is new — every line names a section the reader has already
 * passed — because a closing section lets the page land, not introduce. The
 * five lines are read as simultaneous rather than serial: the ordinals a
 * predecessor numbered them with came off, and `run`'s wide sweep keeps
 * three of the five lit at any moment so none of them is ever the next one.
 *
 * Beside them, the ask, as the thing it actually is: the three commands that
 * put the whole platform under your hands. Every character is already
 * published by this repo — /cli prints exactly these three under "Install,
 * sign in, start working", `hanzo.sh` is verified live as a POSIX installer
 * (components/cloud/CloudLanding.tsx, Portable), and bare `hanzo` in a repo
 * is a coding session, which is /cli's own sentence. Only the INPUT lines are
 * drawn: what the installer or the session answers is output this page has no
 * business inventing. (`hanzo up`, which older pages printed, is NOT a
 * command — the CLI reads an unknown first word as a task for the agent — so
 * it must never appear here.)
 *
 * ONE action, because the composer is docked directly below this section and
 * IS the other ask: its field hands a prompt to hanzo.chat and its [+] menu
 * already holds the app and cloud doors. This section's previous two CTAs
 * ("Try Hanzo", third on the page after the header and the fold; "Build an
 * app", also in the composer's menu) competed with the bar under the reader's
 * thumb. What is left is the one door the composer does not offer — the
 * terminal — stated once.
 */

const TOGETHER: [string, string][] = [
  ['Think', 'with Enso'],
  ['Build', 'with App and Dev'],
  ['Work', 'in Team'],
  ['Learn', 'with Insights'],
  ['Run', 'on Hanzo Cloud'],
]

/** The start, exactly as /cli publishes it. Command, then an optional aside —
 *  drawn as a shell comment, because that is what an aside in a terminal is. */
const START: [string, string?][] = [
  ['curl -fsSL https://hanzo.sh | sh'],
  ['hanzo auth login'],
  ['hanzo', 'a coding session in your repo'],
]

export function Together() {
  return (
    <Section title="Everything works better together.">
      <Grid columns={{ min: 300, max: 2 }} gap={16} width="100%" items="flex-start">
        <Run rest="var(--neutral-300)" gap="$3">
          {TOGETHER.map(([verb, rest], i) => (
            <XStack key={verb} data-beat={i} items="baseline" gap="$2" flexWrap="wrap">
              <Text fontSize="$5" fontWeight="500" color="inherit">
                {verb}
              </Text>
              <Text fontSize="$5" color="inherit">
                {rest}.
              </Text>
            </XStack>
          ))}
        </Run>

        {/* 448 is the same cap LocalStack puts on its command block, so the two
            terminals on this page are one width when the grid stacks. */}
        <YStack maxW={448}>
          <Plate>
            {START.map(([cmd, note]) => (
              <Row key={cmd} lead="$">
                {cmd}
                {note ? <Dim> # {note}</Dim> : null}
              </Row>
            ))}
          </Plate>
          <Caption>install, sign in, start working</Caption>
        </YStack>
      </Grid>

      <XStack mt="$6">
        <Cta href={SH} icon={ArrowUpRight}>
          Start building
        </Cta>
      </XStack>
    </Section>
  )
}

export default Together