Files
hanzo.ai/components/bot/BotLanding.tsx
zeekay 713e9c815a beta, bot, billing, brand: the words go through @hanzo/i18n
/beta's questions, hints and options are marked with phrase() and drawn
with t(), so every answer posted to the leads and beta endpoints, every
track() payload and every comparison keeps the English value. The
referral's tracking channel is a fixed field instead of the button's
label, which is now translated. Plurals are two keys, "Skip the rest"
sits at the inline end, and the program cards align to the start. The
bot and billing pages translate what they hand ProductLanding, with
prices and rates as values; /brand wraps its own words.
2026-10-22 18:13:04 -07:00

375 lines
17 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
'use client'
import type { ReactNode } from 'react'
import {
Bot,
Brain,
Briefcase,
Bug,
CalendarClock,
Check,
FileText,
Link2,
Lock,
Mail,
MessagesSquare,
Monitor,
Network,
PenLine,
Receipt,
Rocket,
Search,
ShieldCheck,
Users,
} from 'lucide-react'
import { Box } from '@hanzo/ui'
import { useI18n } from '@hanzo/i18n/react'
import { ProductLanding, SectionHead } from '@/components/product/ProductLanding'
import { ProductFooter } from '@/components/products/ProductFooter'
import { Connectors } from '@/components/product/Connectors'
import { Band } from '@/components/marketing/band'
import { Faq, type FaqItem } from '@/components/ui/faq'
import type { Say } from '@hanzo/i18n/react'
import { AdditionalBotsWidget } from '@/components/bot/AdditionalBotsWidget'
import { PricingModelExplained } from '@/components/bot/PricingModelExplained'
/** The bot's own docs: where a new reader starts, and where each claim below is explained. */
const BOT_DOCS = 'https://docs.hanzo.bot/docs'
const START = `${BOT_DOCS}/start/getting-started`
const INSTALL_DOCS = `${BOT_DOCS}/install`
const GITHUB = 'https://github.com/hanzoai/bot'
/**
* The migration guide as the repo holds it. docs.hanzo.bot publishes the same
* page at /docs/install/migrate-from-openclaw once its lane ships; until then
* that address answers 404, and this one is the page itself.
*/
const OPENCLAW = `${GITHUB}/blob/main/docs/install/migrate-from-openclaw.md`
/** The section the hero's install control scrolls to. */
const INSTALL = '#install'
const SALES = '/contact-sales'
/** Every answer is one the bot's README or docs.hanzo.bot states. */
const faq = (t: Say): FaqItem[] => [
{
question: t('What is Hanzo Bot?'),
answer: t(
'An AI teammate. It runs behind a gateway on your machine, in our cloud, or both. You message it on the chat apps you already use, and it does the work with its own browser, terminal and tools.',
),
},
{
question: t('Is it open source?'),
answer: t('Yes, MIT licensed, at {repo}. Run it on your own machine and your keys and data stay there.', {
repo: 'github.com/hanzoai/bot',
}),
},
{
question: t('What does it run on?'),
answer: t(
'macOS or Linux, and Windows through WSL2, with {node} or newer. A Mac is only needed for macOS-only tools; a small server works for everything else.',
{ node: 'Node 22' },
),
},
{
question: t('Which models does it use?'),
answer: t(
'The ones you choose: API keys for the providers you use, or a local model so your data stays on your device. {command} manages the choice and the sign-in.',
{ command: 'hanzo-bot models' },
),
},
{
question: t('Can it work on a schedule?'),
answer: t('Yes. Cron jobs run it every morning or at a set time, survive a restart, and can post the result to a chat.'),
},
{
question: t('Does it remember what I tell it?'),
answer: t(
'It writes what it learns to Markdown files in its workspace and searches them when it needs them. If you want something to stick, ask it to write it down.',
),
},
{
question: t('I use OpenClaw. Can I move over?'),
answer: t(
'{command} shows what would move and writes nothing. Add {flag} to move config, credentials, workspace, sessions, skills and cron jobs. It never changes {dir}.',
{ command: 'hanzo-bot migrate openclaw', flag: '--apply', dir: '~/.openclaw' },
),
},
{
question: t('What does Hanzo Bot cost?'),
answer: t(
'Running Hanzo Bot on your own machine is {share} free and open source (MIT licensed). In Hanzo Cloud, resident bots require a {floor} monthly plan (Max 5x at {max5}, Max 20x at {max20}, or Max 50x at {max50}). Each {floor} plan includes {n} resident bot. Additional resident bots can be added to your plan for {extra}.',
{ share: '100%', floor: '$100+', max5: '$100/mo', max20: '$200/mo', max50: '$500/mo', n: 1, extra: '$50/bot/month' },
),
},
{
question: t('Can I add additional resident bots to my plan?'),
answer: t(
'Yes. You can purchase additional resident bots for {extra} directly on {bot} or {bots}. Each extra bot gets its own dedicated cloud sandbox container, isolated headless Chromium browser, independent bash shell, and isolated Markdown memory files.',
{ extra: '$50/bot/month', bot: 'hanzo.ai/bot', bots: 'hanzo.ai/bots' },
),
},
{
question: t('Why is there a {floor} floor for cloud resident bots?', { floor: '$100/mo' }),
answer: t(
'Unlike simple chat prompts where compute ends as soon as generation stops, a resident bot has an always-on dedicated cloud environment. It runs an isolated sandbox container, headless browser, terminal, filesystem, and active cron listeners. The {floor} floor covers dedicated compute and guarantees uptime.',
{ floor: '$100/mo' },
),
},
{
question: t('How do model token costs work for bots?'),
answer: t(
'Routine tasks (sorting inboxes, web scraping, scheduling, receipt parsing) execute on fast, cost-effective Enso and {sol} models at {fraction} the token cost of frontier models, preserving {share} of your plan allowance. Higher tiers (Max 50x at {max50}) unlock Zen Ultra and Astra Ultra frontier models for complex multi-step reasoning.',
{ sol: 'Sol 6.1', fraction: '~1/5th', share: '85-90%', max50: '$500/mo' },
),
},
]
/**
* Hanzo Bot is a teammate, not a chat window. The page says what one does for
* you — it has a computer, it signs in to your tools, it comes back when the
* work is done — then how many work together, how it learns a routine and what
* it remembers, where you talk to it, what it costs and how to install it.
*
* Every section states something the bot repo does: multi-agent routing,
* sub-agents and session tools; skills, cron jobs and Runbook's approval
* gates; Markdown memory with search. A section the product does not back is
* not on this page.
*/
/** `install` is the two commands, highlighted by the server page (app/(marketing)/bot/details). */
export default function BotLanding({ install }: { install: ReactNode }) {
const { t } = useI18n()
return (
<>
<ProductLanding
badge={t('Hanzo Bot · AI teammates')}
badgeIcon={Bot}
title={t('Teammates you can hand real work to.')}
lede={t('Give a bot a job. It has its own computer, signs in to your tools the way you do, and comes back when the work is done. On your machine, in our cloud, or both.')}
ctas={[
{ label: t('Try Hanzo'), href: '/login', icon: Rocket },
{ label: t('Install on your Mac'), href: INSTALL },
{ label: t('Contact sales'), href: SALES },
]}
note={{ icon: Lock, text: t('Open source. Run it on your own machine if you want to — your keys and your data stay with you.') }}
surface="bot"
what={{
eyebrow: t('What a bot is'),
title: t('A teammate with its own computer'),
sub: t('Not a chat window. A bot has a computer of its own and works while you do something else.'),
pillars: [
{
icon: Monitor,
title: t('Its own computer'),
body: t('Each bot runs in its own sandbox with a browser, a terminal and your apps. Nothing it does touches your machine unless you let it.'),
},
{
icon: Link2,
title: t('Works where you work'),
body: t('Sign it in once. It uses the same tools and websites you do, including the ones that are hard to automate.'),
},
{
icon: Check,
title: t('Comes back when it is done'),
body: t('Give it a task and go do something else. It returns with finished work and asks only when it needs your say.'),
},
],
}}
features={[
{
eyebrow: t('Give each bot a job'),
title: t('One bot per job'),
items: [
{ icon: Mail, title: t('Inbox'), body: t('Sorts what came in, answers what it can, and parks drafts for your ok.') },
{ icon: Users, title: t('Sales outreach'), body: t('Researches accounts, drafts messages in your voice, and leaves a review list.') },
{ icon: Search, title: t('Research'), body: t('Reads, compares, and writes up what it found.') },
{ icon: Bug, title: t('Bug reproduction'), body: t('Reproduces the report, finds the failing step, and files it.') },
{ icon: Receipt, title: t('Expenses'), body: t('Collects the receipts and files the report.') },
{ icon: Briefcase, title: t('Chief of staff'), body: t('Keeps the other bots on task and tells you what changed.') },
],
},
{
eyebrow: t('Work with many at once'),
title: t('Bots that hand work to each other'),
items: [
{
icon: Users,
title: t('One gateway, many bots'),
body: t('Each bot has its own workspace, sign-ins and history, and each message goes to the bot it is meant for.'),
},
{
icon: Network,
title: t('Sub-agents'),
body: t('A bot can start background runs that work in parallel and post what they found back in the chat that asked.'),
},
{
icon: MessagesSquare,
title: t('Bots message bots'),
body: t('One bot can read another’s session and send it a message, so a handoff needs no copy and paste.'),
},
],
link: { label: t('How multi-agent works'), href: `${BOT_DOCS}/concepts/multi-agent` },
},
{
eyebrow: t('Show it how it is done'),
title: t('Teach it a routine once'),
items: [
{
icon: FileText,
title: t('Skills'),
body: t('Write the steps in a plain Markdown skill, and the bot uses it whenever the job comes up.'),
},
{
icon: CalendarClock,
title: t('On a schedule'),
body: t('Every morning, or in twenty minutes. Scheduled jobs survive a restart and can post the result to a chat.'),
},
{
icon: ShieldCheck,
title: t('Your say at each step'),
body: t('A multi-step routine can stop at the steps you mark and wait for your yes before it goes on.'),
},
],
link: { label: t('Skills in the docs'), href: `${BOT_DOCS}/tools/skills` },
},
{
eyebrow: t('Gets better as it goes'),
title: t('It remembers what it learns'),
items: [
{
icon: Brain,
title: t('Memory is files'),
body: t('Decisions, preferences and running notes go into Markdown files in its workspace, not into the model.'),
},
{
icon: Search,
title: t('It looks things up'),
body: t('It searches those notes when it needs them, so what you told it last week still counts.'),
},
{
icon: PenLine,
title: t('Yours to read and fix'),
body: t('Open the files, correct them or delete them. The next session starts from what you left.'),
},
],
link: { label: t('How memory works'), href: `${BOT_DOCS}/concepts/memory` },
},
]}
steps={{
eyebrow: t('How it starts'),
title: t('Three steps'),
items: [
{ n: '01', title: t('Name it and give it a job'), body: t('Say what you want done, in plain words.') },
{ n: '02', title: t('Sign it in to your tools'), body: t('Once. It keeps the access it needs and nothing more.') },
{ n: '03', title: t('Let it work'), body: t('It comes back when it is done, or when it needs you.') },
],
}}
chips={{
eyebrow: t('Talk to it anywhere'),
title: t('Message your bots where you already are'),
items: [t('Desktop'), 'iPhone', 'WhatsApp', 'Telegram', 'Slack', 'Discord', 'iMessage', 'Signal', t('Web chat')],
link: { label: t('Coming from OpenClaw? One command moves your install'), href: OPENCLAW },
}}
plans={{
eyebrow: t('Pricing'),
title: t('Included in {floor} Max plans', { floor: '$100+' }),
sub: t('Every {floor} monthly plan includes {n} resident cloud bot. Scale with additional bots or run free on your own machine.', {
floor: '$100+',
n: 1,
}),
items: [
{
name: 'Max 5x',
price: '$100',
period: t('month'),
points: [
t('{n} Resident Bot included in cloud', { n: 1 }),
t('{amount} of included AI usage each month', { amount: '$75' }),
t('{burst} Pro burst headroom ({rate})', { burst: '5x', rate: '2,500 req/min' }),
t('Enso orchestration & {sol} execution', { sol: 'Sol 6.1' }),
t('Dedicated sandbox, browser & terminal'),
t('Markdown memory & scheduled cron jobs'),
],
cta: { label: t('Get {plan}', { plan: 'Max 5x' }), href: '/login?next=/bot&plan=max-5x' },
},
{
name: 'Max 20x',
price: '$200',
period: t('month'),
points: [
t('{n} Resident Bot included in cloud', { n: 1 }),
t('{amount} of included AI usage each month', { amount: '$150' }),
t('{burst} Pro burst headroom ({rate})', { burst: '20x', rate: '10,000 req/min' }),
t('Priority GPU inference queues'),
t('Multi-bot coordination & sub-agent handoffs'),
t('Continuous heavy background automation'),
],
cta: { label: t('Get {plan}', { plan: 'Max 20x' }), href: '/login?next=/bot&plan=max-20x' },
pick: true,
},
{
name: 'Max 50x',
price: '$500',
period: t('month'),
points: [
t('{n} Resident Bot included in cloud', { n: 1 }),
t('{amount} of included AI usage each month', { amount: '$375' }),
t('{burst} Pro burst headroom ({rate})', { burst: '50x', rate: '25,000 req/min' }),
t('Zen Ultra & Astra Ultra frontier models'),
t('Non-stop multi-step autonomous execution'),
t('Priority compute cluster allocation'),
],
cta: { label: t('Get {plan}', { plan: 'Max 50x' }), href: '/login?next=/bot&plan=max-50x' },
},
],
footnote: t(
'Plans under {floor} (Free, Pro {pro}, Team {team}) do not include resident cloud bots. Self-hosted on your own Mac or Linux machine is {share} free and open source.',
{ floor: '$100', pro: '$20/mo', team: '$25/mo', share: '100%' },
),
}}
code={{
id: 'install',
head: {
eyebrow: t('Install'),
title: t('On your Mac in two commands'),
sub: t(
'{node} or newer, on macOS or Linux. The second command walks you through your model, channels and skills, and keeps the gateway running in the background.',
{ node: 'Node 22' },
),
},
name: 'terminal',
source: install,
ctas: [
{ label: t('Install guide'), href: INSTALL_DOCS },
{ label: t('View on GitHub'), href: GITHUB },
],
}}
finalCta={{
title: t('Meet your first bot'),
sub: t('A teammate you can trust with real work.'),
buttons: [
{ label: t('Try Hanzo'), href: '/login', icon: Rocket },
{ label: t('Contact sales'), href: SALES },
],
}}
>
<Connectors
eyebrow={t('Works where you work')}
title={t('Sign it in to the tools you use')}
sub={t("You log in once in the bot's own browser. It keeps the session and works in the same tools and sites you do.")}
/>
<Band measure={1024}>
<AdditionalBotsWidget />
</Band>
<PricingModelExplained />
<Band id="faq">
<SectionHead eyebrow={t('FAQ')} title={t('Questions')} />
<Box maxW={768} mx="auto" width="100%">
<Faq items={faq(t)} />
</Box>
</Band>
</ProductLanding>
<ProductFooter slug="bot" name="Bot" />
</>
)
}