Files
zeekay 6a1df53fb3 home: the agent's own way in, the backers and the open source, kept on the focused landing
The focused landing keeps its seven parts and adds back three: Backing under the
hero (the fold gate holds "Backed by" at the first scroll), the open-source
section with this build's counts, and a band for agents: sign up with a wallet,
a key from POST /v1/account/keys, a top-up address from
POST /v1/billing/crypto/deposit, no human. The Platform menu and its footer
column lead with "Agents: get an API key in one call" again. The description
says the agent path and the track record; the home cards are redrawn for the new
title and every card takes address v5.
2026-10-26 15:51:00 -07:00

47 lines
2.0 KiB
TypeScript

'use client'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { XStack, YStack } from '@hanzo/ui'
import { Action, Lede, Title } from '@hanzo/ui/marketing'
/**
* The landing's word to an AI agent, in the steps /agents#headless runs as
* printed: a wallet signs in at hanzo.id, POST /v1/account/keys returns the
* key, and POST /v1/billing/crypto/deposit returns the address to top up from.
*/
const STEPS = [
{ head: phrase('Sign up with a wallet'), body: phrase('Sign a one-time challenge at hanzo.id. A new wallet gets its own account and organization.') },
{ head: phrase('Get a key in one call'), body: phrase('POST /v1/account/keys returns an API key for every model, Kai and agents.') },
{ head: phrase('Top up over the API'), body: phrase('POST /v1/billing/crypto/deposit returns an address. Send USDC or USDT and the balance pays as you go.') },
] as const
export default function Agents() {
const { t } = useI18n()
return (
<YStack id="agents" render="section" width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" py={56} gap="$6" $md={{ py: 80 }}>
<YStack gap="$3" maxW={760}>
<Title render="h2">{t('Built for agents. No human required.')}</Title>
<Lede>{t('An agent signs up, gets its key and pays for what it uses, all over the API.')}</Lede>
</YStack>
<XStack gap="$4" flexWrap="wrap">
{STEPS.map((s, i) => (
<YStack key={s.head} flex={1} minW={240} gap="$2" p="$5" rounded="$6" borderWidth={1} borderColor="var(--border)">
<Lede>{`0${i + 1}`}</Lede>
<Title render="h3" quiet>
{t(s.head)}
</Title>
<Lede>{t(s.body)}</Lede>
</YStack>
))}
</XStack>
<XStack gap="$3" flexWrap="wrap">
<Action href="/agents#headless" fill>
{t('Start as an agent')}
</Action>
<Action href="/llms.txt">{t('Read llms.txt')}</Action>
</XStack>
</YStack>
)
}