Files
zooqueenandHanzo Dev df50d16787
Hanzo CI/CD / cicd (push) Failing after 1h10m29s
CI/CD / cicd (push) Failing after 2h37m43s
Render every console page with the brand of the host serving it
A static export has no host when it prerenders, so BrandProvider renders the
tree only once the browser has resolved the host, pages that show the brand
are client components, the static head names no brand, and the title and
favicon come from the host. The chain page keeps its static params and
metadata on the server and renders its body on the client, with RPC endpoints
on the brand's API origin at /v1/rpc/{chain}/{network}.

Hanzo's API origin is web3.hanzo.ai itself. The node fleet view, its landing
strip and its nav link belong to the brand that operates a fleet, which is
Lux alone. llms.txt, one file for every host, names no brand and points at
each host's own /docs/api.

Marketing copy states no certification the company does not hold and no
unmeasured uptime, latency, volume or response-time figure. Every internal
link points at a page that exists, every catalog chain is prerendered, and
the routes test holds page bodies to zero dead links.

Co-authored-by: Hanzo Dev <[email protected]>
2026-09-15 12:01:27 -07:00

322 lines
13 KiB
TypeScript

"use client"
import Link from "next/link"
import { Navbar } from "@/components/navbar"
import { Footer } from "@/components/footer"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
import {
ArrowRight,
Bot,
CreditCard,
Globe,
Layers,
Radio,
Rocket,
Terminal,
Webhook,
Zap,
} from "@luxfi/ui/icons"
import { getBrand } from "@/lib/brand"
const apis = [
{
number: "01",
title: "Agentic Signup",
description:
"Sign up with an onchain wallet and prepay for compute, powered by x402.",
icon: Rocket,
},
{
number: "02",
title: "Node APIs",
description:
"Core RPC APIs for 100+ chains with reliable read/write access for agent workflows.",
icon: Globe,
},
{
number: "03",
title: "Data APIs",
description:
"Get onchain data across assets, including tokens, NFTs, prices, balances, and portfolio views.",
icon: Layers,
},
{
number: "04",
title: "Solana APIs",
description:
"Use Yellowstone gRPC streams and DAS APIs built for high-throughput Solana applications.",
icon: Zap,
},
{
number: "05",
title: "Webhooks",
description:
"Push onchain events directly to your backend with managed webhook delivery and signature verification.",
icon: Webhook,
},
{
number: "06",
title: "Recipes & Tutorials",
description:
"Follow practical crypto development recipes and tutorials to ship integrations faster.",
icon: Terminal,
},
]
const compatible = [
"Claude Code",
"Codex",
"Cursor",
"Openclaw",
"Hanzo Bot",
]
export default function AgentsPage() {
const brand = getBrand()
return (
<div className="flex min-h-screen flex-col">
<Navbar />
{/* Hero */}
<section className="relative overflow-hidden border-b bg-gradient-to-b from-background to-muted/20">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#4f4f4f2e_1px,transparent_1px),linear-gradient(to_bottom,#4f4f4f2e_1px,transparent_1px)] bg-[size:14px_24px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
<div className="container relative py-24 md:py-32 lg:py-40">
<div className="mx-auto flex max-w-4xl flex-col items-center text-center">
<Badge variant="secondary" className="mb-4">
<Bot className="mr-1 h-3 w-3" />
Crypto for Agents
</Badge>
<h1 className="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl lg:text-7xl">
Pay, trade, build apps.{" "}
<span
className="bg-clip-text text-transparent"
style={{
backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
}}
>
In 1 prompt.
</span>
</h1>
<p className="mt-6 max-w-2xl text-lg text-muted-foreground md:text-xl">
Agents can sign up and pay autonomously. No human required.
Install the {brand.name} skills to start building.
</p>
{/* Install Command — open standard */}
<div className="mt-10 w-full max-w-xl">
<div className="rounded-lg border bg-card p-1">
<div className="flex items-center gap-2 rounded-md bg-muted px-4 py-3 font-mono text-sm">
<span className="text-muted-foreground select-none">$</span>
<code className="flex-1 text-left">
npx skills add {brand.skillsOrg}/skills --yes
</code>
</div>
</div>
<p className="mt-3 text-sm text-muted-foreground">
Works with{" "}
{compatible.map((name, i) => (
<span key={name}>
<span className="font-medium text-foreground">{name}</span>
{i < compatible.length - 1 ? ", " : ""}
</span>
))}
.{" "}
<span className="text-muted-foreground">
Skills install to{" "}
<code className="text-xs bg-muted rounded px-1 py-0.5">~/.hanzo/skills/</code>{" "}
and auto-link to all agents.
</span>
</p>
</div>
{/* Payment Options */}
<div className="mt-8 flex flex-col gap-3 sm:flex-row sm:items-center sm:gap-6">
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<CreditCard className="h-4 w-4" />
<span>Pay with credit card via your account</span>
</div>
<div className="flex items-center gap-2 text-sm text-muted-foreground">
<Globe className="h-4 w-4" />
<span>Or USDC via x402 — no account needed</span>
</div>
</div>
</div>
</div>
</section>
{/* APIs for every AI agent */}
<section className="py-24">
<div className="container">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
APIs for every AI agent
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Everything an agent needs to interact with 100+ blockchains,
from signup to settlement.
</p>
</div>
<div className="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{apis.map((api) => (
<Card key={api.number} className="group h-full transition-colors hover:border-foreground/20">
<CardHeader>
<div className="flex items-center gap-3">
<span
className="flex h-10 w-10 items-center justify-center rounded-lg font-mono text-sm font-bold"
style={{
background: `linear-gradient(135deg, ${brand.colors.accent}20, ${brand.colors.accentEnd}20)`,
color: brand.colors.accent,
}}
>
{api.number}
</span>
<api.icon className="h-5 w-5 text-muted-foreground" />
</div>
<CardTitle className="mt-4">{api.title}</CardTitle>
<CardDescription>{api.description}</CardDescription>
</CardHeader>
</Card>
))}
</div>
</div>
</section>
{/* Run Locally */}
<section className="border-y bg-muted/30 py-24">
<div className="container">
<div className="grid gap-12 lg:grid-cols-2 lg:gap-16">
<div className="flex flex-col justify-center">
<Badge variant="secondary" className="mb-4 w-fit">
<Terminal className="mr-1 h-3 w-3" />
Run Locally
</Badge>
<h2 className="text-3xl font-bold tracking-tight sm:text-4xl">
Run locally for free
</h2>
<p className="mt-4 text-lg text-muted-foreground">
Boot up a local agent with a single command. Connect to the
Hanzo Bot cloud and start using {brand.name}, or any of our
partner networks — Lux, Zoo, and Pars.
</p>
<div className="mt-8 space-y-4">
<div className="flex gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
<Zap className="h-5 w-5 text-yellow-500" />
</div>
<div>
<h3 className="font-semibold">Zero Config</h3>
<p className="text-sm text-muted-foreground">
One command to install. Auto-connects to hanzo.bot cloud.
</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
<Radio className="h-5 w-5 text-green-500" />
</div>
<div>
<h3 className="font-semibold">Open Standard</h3>
<p className="text-sm text-muted-foreground">
Uses the open Agent Skills spec. Works with any compatible agent.
</p>
</div>
</div>
<div className="flex gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-muted">
<Bot className="h-5 w-5 text-blue-500" />
</div>
<div>
<h3 className="font-semibold">~/.hanzo/skills/</h3>
<p className="text-sm text-muted-foreground">
Single canonical location. Symlinked to Claude, Cursor, Codex, and all agents automatically.
</p>
</div>
</div>
</div>
</div>
<div className="flex flex-col justify-center">
<div className="space-y-4">
<div className="rounded-lg border bg-card p-1">
<div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
<p className="text-muted-foreground"># Install skills (open standard)</p>
<p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx skills add {brand.skillsOrg}/skills --yes</p>
</div>
</div>
<div className="rounded-lg border bg-card p-1">
<div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
<p className="text-muted-foreground"># Or use Hanzo Bot directly</p>
<p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot skills add {brand.skillsOrg}/skills</p>
</div>
</div>
<div className="rounded-lg border bg-card p-1">
<div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
<p className="text-muted-foreground"># Run a local agent</p>
<p className="mt-1"><span className="text-muted-foreground select-none">$ </span>npx @hanzo/bot</p>
</div>
</div>
<div className="rounded-lg border bg-card p-1">
<div className="rounded-md bg-muted px-4 py-3 font-mono text-sm">
<p className="text-muted-foreground"># Skills live in one place, visible to all agents</p>
<p className="mt-1"><span className="text-muted-foreground select-none">$ </span>ls ~/.hanzo/skills/</p>
<p className="mt-0.5 text-muted-foreground"> {brand.skillsOrg}-skills/</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* CTA */}
<section className="py-24">
<div className="container">
<div
className="relative overflow-hidden rounded-3xl px-6 py-20 sm:px-12 sm:py-28"
style={{
backgroundImage: `linear-gradient(to right, ${brand.colors.accent}, ${brand.colors.accentEnd})`,
}}
>
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff1a_1px,transparent_1px),linear-gradient(to_bottom,#ffffff1a_1px,transparent_1px)] bg-[size:14px_24px]" />
<div className="relative mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Launch your own bot
</h2>
<p className="mt-4 text-lg text-white/80">
Deploy an AI agent on hanzo.bot cloud, or run it locally and connect
to any blockchain. Powered by Hanzo AI.
</p>
<div className="mt-10 flex flex-col justify-center gap-4 sm:flex-row">
<Button
size="xl"
className="bg-white text-foreground hover:bg-white/90"
asChild
>
<a href="https://hanzo.bot" target="_blank" rel="noopener noreferrer">
Launch on hanzo.bot
<ArrowRight className="ml-2 h-4 w-4" />
</a>
</Button>
<Button
size="xl"
variant="outline"
className="border-white/30 bg-transparent text-white hover:bg-white/10"
asChild
>
<a href="https://hanzo.ai" target="_blank" rel="noopener noreferrer">
Learn more at hanzo.ai
</a>
</Button>
</div>
</div>
</div>
</div>
</section>
<Footer />
</div>
)
}