Files
bot/ui/public/site.html
zooqueenandHanzo Dev 2a2d582eac feat: add Skills Hub with 51 SEO-optimized detail pages + Web3 credits
- Build script (scripts/build-skills-catalog.ts) parses all SKILL.md
  files, outputs JSON catalog and individual detail HTML pages
- Skills Hub list page (/skills) with search, category filters, card grid
- Individual skill pages (/skills/github, etc.) with pre-rendered README,
  metadata sidebar, install commands, GitHub API integration
- Full SEO: unique title, meta description, Open Graph, Twitter Card,
  JSON-LD structured data on every page
- Web3 native messaging: DID identities, wallets, on-chain payments,
  prepaid credit balance model
- Fix stale chat widget system prompt pricing (Pro $5 → actual tiers)
- Add skills:catalog script to package.json

Co-authored-by: Hanzo Dev <[email protected]>
2026-02-13 17:26:25 -08:00

3863 lines
126 KiB
HTML
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hanzo Bot — Your Autonomous AI Workforce</title>
<meta
name="description"
content="Deploy specialized AI agents across every platform. 15 built-in personas. 52+ skills. Running 24/7."
/>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🥷</text></svg>"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<style>
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--brand: #fd4444;
--brand-secondary: #ff6b6b;
--bg: #000000;
--bg-card: rgba(255, 255, 255, 0.04);
--bg-hover: #1a1a1a;
--border: rgba(255, 255, 255, 0.08);
--border-hover: rgba(255, 255, 255, 0.16);
--text: #fff;
--muted: #888;
--subtle: #555;
--max-w: 1200px;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
--font:
"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
sans-serif;
--font-mono: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
html {
scroll-behavior: smooth;
}
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
position: relative;
}
body::before {
content: "";
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 64px 64px;
pointer-events: none;
z-index: 0;
}
body::after {
content: "";
position: fixed;
inset: 0;
opacity: 0.035;
pointer-events: none;
z-index: 0;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * {
position: relative;
z-index: 1;
}
a {
color: inherit;
text-decoration: none;
}
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
color: inherit;
}
/* ===== HEADER ===== */
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(0, 0, 0, 0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.header-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 24px;
height: 56px;
display: flex;
align-items: center;
justify-content: space-between;
}
.header-left {
display: flex;
align-items: center;
gap: 32px;
}
.logo {
display: flex;
align-items: center;
gap: 8px;
}
.logo-mark {
width: 24px;
height: 24px;
animation: logo-flip 0.6s 0.2s var(--ease) both;
}
.logo-mark svg {
width: 100%;
height: 100%;
display: block;
}
.logo-mark path {
animation: path-in 0.4s var(--ease) both;
}
.logo-mark path:nth-child(1) {
animation-delay: 0.3s;
}
.logo-mark path:nth-child(2) {
animation-delay: 0.4s;
}
.logo-mark path:nth-child(3) {
animation-delay: 0.5s;
}
.logo-mark path:nth-child(4) {
animation-delay: 0.35s;
}
.logo-mark path:nth-child(5) {
animation-delay: 0.45s;
}
.logo-mark path:nth-child(6) {
animation-delay: 0.55s;
}
.logo-mark path:nth-child(7) {
animation-delay: 0.6s;
}
.logo-text {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.03em;
animation: text-slide 0.5s 2.5s var(--ease) both;
}
.logo:hover .logo-text {
animation: text-show 0.3s var(--ease) both;
}
@keyframes logo-flip {
from {
opacity: 0;
transform: scale(0.6) rotateY(180deg);
}
to {
opacity: 1;
transform: scale(1) rotateY(0);
}
}
@keyframes path-in {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes text-slide {
from {
opacity: 1;
max-width: 60px;
}
to {
opacity: 0;
max-width: 0;
overflow: hidden;
}
}
@keyframes text-show {
from {
opacity: 0;
max-width: 0;
}
to {
opacity: 1;
max-width: 60px;
}
}
.nav-links {
display: flex;
gap: 4px;
}
.nav-link {
position: relative;
padding: 8px 12px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
border-radius: 6px;
transition:
color 0.15s,
background 0.15s;
}
.nav-link:hover {
color: var(--text);
background: var(--bg-hover);
}
.nav-dropdown {
position: relative;
}
.nav-dropdown-menu {
display: none;
position: absolute;
top: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
min-width: 280px;
background: #111;
border: 1px solid var(--border);
border-radius: 12px;
padding: 8px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
z-index: 200;
}
.nav-dropdown:hover .nav-dropdown-menu {
display: block;
}
.nav-dropdown-menu a {
display: block;
padding: 10px 14px;
font-size: 13px;
color: var(--muted);
border-radius: 8px;
transition:
color 0.15s,
background 0.15s;
}
.nav-dropdown-menu a:hover {
color: var(--text);
background: var(--bg-hover);
}
.nav-dropdown-menu a strong {
display: block;
color: var(--text);
font-weight: 500;
margin-bottom: 2px;
}
.nav-dropdown-menu a span {
font-size: 12px;
color: var(--subtle);
}
.dropdown-divider {
height: 1px;
background: var(--border);
margin: 6px 0;
}
.header-right {
display: flex;
align-items: center;
gap: 8px;
}
.btn-ghost {
padding: 8px 16px;
font-size: 13px;
font-weight: 500;
color: var(--muted);
border-radius: 8px;
transition:
color 0.15s,
background 0.15s;
}
.btn-ghost:hover {
color: var(--text);
background: var(--bg-hover);
}
.btn-primary {
padding: 8px 20px;
font-size: 13px;
font-weight: 600;
color: #fff;
background: var(--brand);
border-radius: 9999px;
transition:
opacity 0.15s,
box-shadow 0.15s;
}
.btn-primary:hover {
opacity: 0.9;
box-shadow: 0 0 24px rgba(253, 68, 68, 0.3);
}
.btn-outline {
padding: 8px 20px;
font-size: 13px;
font-weight: 500;
color: var(--text);
border: 1px solid var(--border);
border-radius: 9999px;
transition:
border-color 0.15s,
background 0.15s,
box-shadow 0.15s;
}
.btn-outline:hover {
border-color: rgba(253, 68, 68, 0.3);
background: rgba(253, 68, 68, 0.06);
}
.btn-lg {
padding: 14px 32px;
font-size: 15px;
border-radius: 9999px;
}
.btn-icon {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ===== HERO ===== */
.hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 48px;
max-width: var(--max-w);
margin: 0 auto;
padding: 120px 24px 80px;
position: relative;
overflow: hidden;
}
.hero::before {
content: "";
position: absolute;
top: -200px;
left: 20%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(253, 68, 68, 0.06) 0%, transparent 70%);
pointer-events: none;
}
.hero-text {
text-align: left;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(253, 68, 68, 0.2);
border-radius: 100px;
font-size: 12px;
color: var(--muted);
margin-bottom: 32px;
animation: fade-up 0.6s 0.1s var(--ease) both;
}
.hero-badge strong {
color: var(--brand);
}
.hero h1 {
font-size: clamp(36px, 5vw, 64px);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.05;
max-width: 600px;
animation: fade-up 0.6s 0.2s var(--ease) both;
}
.hero h1 .gradient-text {
background: linear-gradient(135deg, var(--brand) 0%, var(--brand-secondary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: clamp(16px, 2vw, 20px);
color: var(--muted);
max-width: 500px;
margin-top: 24px;
animation: fade-up 0.6s 0.3s var(--ease) both;
}
.hero-actions {
display: flex;
gap: 12px;
margin-top: 40px;
animation: fade-up 0.6s 0.4s var(--ease) both;
flex-wrap: wrap;
}
.hero-note {
font-size: 13px;
color: var(--subtle);
margin-top: 16px;
animation: fade-up 0.6s 0.5s var(--ease) both;
}
@keyframes fade-up {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===== HERO MOCKUP ===== */
.hero-mockup {
animation: fade-up 0.8s 0.3s var(--ease) both;
}
.mockup-browser {
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
}
.mockup-titlebar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.03);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.traffic-light {
width: 10px;
height: 10px;
border-radius: 50%;
}
.traffic-light.red {
background: #ff5f57;
}
.traffic-light.yellow {
background: #febc2e;
}
.traffic-light.green {
background: #28c840;
}
.mockup-url {
flex: 1;
margin-left: 8px;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
font-size: 11px;
color: var(--subtle);
font-family: var(--font-mono);
}
.mockup-viewport {
position: relative;
height: 320px;
overflow: hidden;
}
.mockup-scene {
position: absolute;
inset: 0;
padding: 24px;
opacity: 0;
will-change: opacity, transform;
animation: scene-cycle 20s infinite;
}
.mockup-scene:nth-child(1) {
animation-delay: 0s;
}
.mockup-scene:nth-child(2) {
animation-delay: 5s;
}
.mockup-scene:nth-child(3) {
animation-delay: 10s;
}
.mockup-scene:nth-child(4) {
animation-delay: 15s;
}
@keyframes scene-cycle {
0%,
2% {
opacity: 0;
transform: translateY(8px);
}
5%,
22% {
opacity: 1;
transform: translateY(0);
}
25%,
100% {
opacity: 0;
transform: translateY(-8px);
}
}
/* Scene 1: Form Auto-Fill */
.scene-form {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-field {
display: flex;
align-items: center;
gap: 12px;
}
.form-label {
width: 80px;
font-size: 11px;
color: var(--subtle);
font-family: var(--font-mono);
text-align: right;
}
.form-bar {
flex: 1;
height: 32px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.08);
overflow: hidden;
position: relative;
}
.form-bar-fill {
height: 100%;
border-radius: 6px;
animation: fill-grow 5s infinite;
}
.form-bar-fill.c1 {
background: rgba(253, 68, 68, 0.25);
animation-delay: 0.5s;
}
.form-bar-fill.c2 {
background: rgba(99, 179, 237, 0.25);
animation-delay: 1s;
}
.form-bar-fill.c3 {
background: rgba(72, 187, 120, 0.25);
animation-delay: 1.5s;
}
.form-bar-fill.c4 {
background: rgba(237, 137, 54, 0.25);
animation-delay: 2s;
}
.form-bar-fill.c5 {
background: rgba(159, 122, 234, 0.25);
animation-delay: 2.5s;
}
@keyframes fill-grow {
0%,
10% {
width: 0;
}
40%,
100% {
width: 85%;
}
}
.form-cursor {
position: absolute;
width: 2px;
height: 16px;
background: var(--brand);
border-radius: 1px;
top: 8px;
left: 0;
animation: cursor-move 5s infinite;
}
@keyframes cursor-move {
0% {
left: 4px;
opacity: 0;
}
10% {
opacity: 1;
}
40% {
left: 80%;
}
100% {
left: 80%;
opacity: 0;
}
}
/* Scene 2: Data Analysis */
.scene-data {
display: flex;
flex-direction: column;
gap: 12px;
}
.data-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
}
.data-cell {
height: 28px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
animation: cell-glow 5s infinite;
}
.data-cell:nth-child(3n) {
animation-delay: 0.3s;
}
.data-cell:nth-child(5n) {
animation-delay: 0.6s;
}
.data-cell:nth-child(7n) {
animation-delay: 0.9s;
}
.data-cell.highlight {
background: rgba(253, 68, 68, 0.1);
border-color: rgba(253, 68, 68, 0.2);
}
@keyframes cell-glow {
0%,
100% {
opacity: 0.5;
}
50% {
opacity: 1;
}
}
.data-chart {
display: flex;
align-items: flex-end;
gap: 6px;
height: 100px;
margin-top: 8px;
}
.chart-bar {
flex: 1;
border-radius: 4px 4px 0 0;
background: linear-gradient(to top, rgba(253, 68, 68, 0.3), rgba(253, 68, 68, 0.1));
animation: bar-grow 5s infinite;
}
@keyframes bar-grow {
0%,
10% {
height: 10%;
}
50% {
height: var(--h, 60%);
}
90%,
100% {
height: var(--h, 60%);
}
}
/* Scene 3: AI Chat */
.scene-chat {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 8px;
}
.chat-bubble {
max-width: 75%;
padding: 10px 14px;
border-radius: 12px;
font-size: 12px;
line-height: 1.5;
font-family: var(--font);
opacity: 0;
animation: bubble-in 5s infinite;
}
.chat-bubble.from-user {
align-self: flex-end;
background: rgba(255, 255, 255, 0.08);
color: var(--text);
}
.chat-bubble.from-bot {
align-self: flex-start;
background: rgba(253, 68, 68, 0.08);
border: 1px solid rgba(253, 68, 68, 0.15);
color: var(--muted);
}
.chat-bubble:nth-child(1) {
animation-delay: 0.3s;
}
.chat-bubble:nth-child(2) {
animation-delay: 1.2s;
}
.chat-bubble:nth-child(3) {
animation-delay: 2.4s;
}
.chat-bubble:nth-child(4) {
animation-delay: 3.4s;
}
@keyframes bubble-in {
0%,
5% {
opacity: 0;
transform: translateY(8px);
}
10%,
90% {
opacity: 1;
transform: translateY(0);
}
95%,
100% {
opacity: 0;
}
}
/* Scene 4: Design Canvas */
.scene-design {
position: relative;
height: 100%;
}
.design-el {
position: absolute;
border-radius: 8px;
border: 2px solid transparent;
animation: design-shift 5s infinite;
}
.design-el.el1 {
width: 120px;
height: 80px;
top: 20px;
left: 20px;
background: rgba(99, 179, 237, 0.1);
border-color: rgba(99, 179, 237, 0.3);
animation-delay: 0s;
}
.design-el.el2 {
width: 160px;
height: 60px;
top: 40px;
right: 40px;
background: rgba(253, 68, 68, 0.08);
border-color: rgba(253, 68, 68, 0.2);
animation-delay: 0.5s;
}
.design-el.el3 {
width: 100px;
height: 100px;
bottom: 40px;
left: 60px;
background: rgba(72, 187, 120, 0.08);
border-color: rgba(72, 187, 120, 0.2);
border-radius: 50%;
animation-delay: 1s;
}
.design-el.el4 {
width: 140px;
height: 40px;
bottom: 60px;
right: 20px;
background: rgba(237, 137, 54, 0.08);
border-color: rgba(237, 137, 54, 0.2);
animation-delay: 1.5s;
}
.design-handle {
position: absolute;
width: 8px;
height: 8px;
background: var(--brand);
border-radius: 2px;
}
.design-handle.tl {
top: -4px;
left: -4px;
}
.design-handle.tr {
top: -4px;
right: -4px;
}
.design-handle.bl {
bottom: -4px;
left: -4px;
}
.design-handle.br {
bottom: -4px;
right: -4px;
}
@keyframes design-shift {
0%,
100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(4px, -4px) scale(1.02);
}
50% {
transform: translate(-2px, 2px) scale(0.98);
}
75% {
transform: translate(2px, 4px) scale(1.01);
}
}
/* ===== HOW IT WORKS ===== */
.how-it-works {
border-top: 1px solid var(--border);
}
.hiw-flow {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
gap: 0;
align-items: center;
}
.hiw-step {
padding: 32px 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
text-align: center;
transition:
transform 0.2s,
box-shadow 0.2s;
}
.hiw-step:hover {
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.hiw-num {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--brand);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 16px;
margin-bottom: 16px;
}
.hiw-step h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
}
.hiw-step p {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
.hiw-connector {
display: flex;
align-items: center;
justify-content: center;
padding: 0 8px;
}
.hiw-connector svg {
width: 40px;
height: 2px;
}
/* ===== TERMINAL FRAME ===== */
.terminal-frame {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
overflow: hidden;
max-width: 640px;
}
.terminal-titlebar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
background: rgba(255, 255, 255, 0.02);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.terminal-title {
flex: 1;
text-align: center;
font-size: 12px;
color: var(--subtle);
font-family: var(--font-mono);
margin-right: 38px;
}
.terminal-body {
padding: 24px;
font-family: var(--font-mono);
font-size: 13px;
line-height: 1.8;
}
.terminal-body .prompt {
color: var(--subtle);
}
.terminal-body .cmd {
color: var(--text);
font-weight: 500;
}
.terminal-body .output {
color: var(--muted);
}
.terminal-body .success {
color: #28c840;
}
/* ===== LIVE DEMO ===== */
.demo-terminal .demo-line {
display: block;
padding: 3px 0;
opacity: 0;
animation: demo-line-in 12s infinite;
}
.demo-terminal .demo-line:nth-child(1) {
animation-delay: 0s;
}
.demo-terminal .demo-line:nth-child(2) {
animation-delay: 1s;
}
.demo-terminal .demo-line:nth-child(3) {
animation-delay: 2s;
}
.demo-terminal .demo-line:nth-child(4) {
animation-delay: 3s;
}
.demo-terminal .demo-line:nth-child(5) {
animation-delay: 4s;
}
.demo-terminal .demo-line:nth-child(6) {
animation-delay: 5s;
}
@keyframes demo-line-in {
0%,
5% {
opacity: 0;
transform: translateX(-4px);
}
10%,
85% {
opacity: 1;
transform: translateX(0);
}
90%,
100% {
opacity: 0;
}
}
.demo-user {
color: #63b3ed;
}
.demo-bot {
color: var(--muted);
}
.demo-check {
color: #28c840;
}
/* ===== SECURITY ===== */
.security-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.security-badge {
padding: 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
text-align: center;
transition: box-shadow 0.2s;
}
.security-badge:hover {
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.security-badge .badge-icon {
font-size: 28px;
margin-bottom: 8px;
}
.security-badge h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 4px;
}
.security-badge p {
font-size: 12px;
color: var(--muted);
}
/* ===== FAQ ===== */
.faq-list {
max-width: 720px;
margin: 0 auto;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-item summary {
padding: 20px 0;
font-size: 15px;
font-weight: 500;
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
transition: color 0.15s;
}
.faq-item summary::-webkit-details-marker {
display: none;
}
.faq-item summary::after {
content: "+";
font-size: 20px;
color: var(--subtle);
transition: transform 0.2s;
}
.faq-item[open] summary::after {
content: "−";
color: var(--brand);
}
.faq-item summary:hover {
color: var(--brand);
}
.faq-item .faq-answer {
padding: 0 0 20px;
font-size: 14px;
color: var(--muted);
line-height: 1.6;
}
/* ===== STAGGER ===== */
.stagger-child {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.5s var(--ease),
transform 0.5s var(--ease);
}
.stagger-child.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== SECTIONS ===== */
section {
padding: 100px 24px;
}
.section-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.section-label {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--subtle);
margin-bottom: 12px;
}
.section-title {
font-size: clamp(28px, 4vw, 44px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
margin-bottom: 16px;
}
.section-desc {
font-size: 16px;
color: var(--muted);
max-width: 560px;
margin-bottom: 48px;
}
.reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity 0.5s var(--ease),
transform 0.5s var(--ease);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
/* ===== PERSONAS ===== */
.personas-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.persona {
padding: 20px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition:
border-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
}
.persona:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.persona-emoji {
font-size: 24px;
margin-bottom: 8px;
}
.persona-name {
font-size: 14px;
font-weight: 600;
margin-bottom: 2px;
}
.persona-role {
font-size: 12px;
color: var(--muted);
margin-bottom: 6px;
}
.persona-desc {
font-size: 11px;
color: var(--subtle);
line-height: 1.5;
}
/* ===== FEATURES ===== */
.features-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.feature {
padding: 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.feature:hover {
border-color: var(--border-hover);
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.feature-icon {
font-size: 28px;
margin-bottom: 12px;
}
.feature h3 {
font-size: 15px;
font-weight: 600;
margin-bottom: 6px;
}
.feature p {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
/* ===== SKILLS ===== */
.skills-categories {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.skill-cat h3 {
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.skill-cat h3 span {
font-size: 18px;
}
.skill-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.skill-tag {
padding: 4px 10px;
font-size: 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--muted);
transition:
color 0.15s,
border-color 0.15s;
}
.skill-tag:hover {
color: var(--text);
border-color: var(--border-hover);
}
/* ===== ECOSYSTEM ===== */
.eco-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.eco-card {
padding: 32px 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition:
border-color 0.2s,
box-shadow 0.2s;
}
.eco-card:hover {
border-color: var(--border-hover);
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.eco-card h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 4px;
}
.eco-card .eco-url {
font-size: 13px;
color: var(--subtle);
margin-bottom: 12px;
}
.eco-card p {
font-size: 13px;
color: var(--muted);
line-height: 1.5;
}
/* ===== CLOUD ===== */
.cloud-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 40px;
}
.cloud-stat {
text-align: center;
padding: 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition: box-shadow 0.2s;
}
.cloud-stat:hover {
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.cloud-stat .num {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.02em;
}
.cloud-stat .label {
font-size: 12px;
color: var(--muted);
margin-top: 4px;
}
/* ===== CLI ===== */
.cli-block {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
max-width: 640px;
}
.cli-block code {
font-family: "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
color: var(--muted);
}
.cli-block .prompt {
color: var(--subtle);
}
.cli-block .cmd {
color: var(--text);
font-weight: 500;
}
.cli-line {
display: block;
padding: 4px 0;
}
/* ===== CTA ===== */
.cta-section {
text-align: center;
padding: 120px 24px;
border-top: 1px solid var(--border);
}
.cta-section h2 {
font-size: clamp(32px, 5vw, 56px);
font-weight: 700;
letter-spacing: -0.04em;
margin-bottom: 16px;
}
.cta-section p {
font-size: 18px;
color: var(--muted);
margin-bottom: 40px;
}
/* ===== PRICING ===== */
.pricing-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 640px;
margin: 0 auto 48px;
}
.pricing-card {
padding: 24px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
text-align: left;
transition: box-shadow 0.2s;
}
.pricing-card:hover {
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.pricing-card.featured {
border-color: var(--brand);
}
.pricing-card h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.pricing-card .price {
font-size: 28px;
font-weight: 700;
margin-bottom: 8px;
}
.pricing-card .price small {
font-size: 14px;
font-weight: 400;
color: var(--muted);
}
.pricing-card ul {
list-style: none;
font-size: 13px;
color: var(--muted);
}
.pricing-card li {
padding: 4px 0;
}
.pricing-card li::before {
content: "✓ ";
color: var(--text);
}
/* ===== FOOTER ===== */
.footer {
border-top: 1px solid var(--border);
padding: 64px 24px 32px;
}
.footer-inner {
max-width: var(--max-w);
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 240px repeat(4, 1fr);
gap: 40px;
margin-bottom: 48px;
}
.footer-brand .footer-logo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
}
.footer-brand .footer-logo svg {
width: 20px;
height: 20px;
}
.footer-brand .footer-logo span {
font-size: 14px;
font-weight: 600;
}
.footer-brand p {
font-size: 13px;
color: var(--muted);
line-height: 1.6;
margin-bottom: 16px;
}
.footer-social {
display: flex;
gap: 12px;
}
.footer-social a {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: 8px;
color: var(--muted);
transition:
color 0.15s,
border-color 0.15s;
}
.footer-social a:hover {
color: var(--text);
border-color: var(--border-hover);
}
.footer-social svg {
width: 14px;
height: 14px;
}
.footer-col h4 {
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--subtle);
margin-bottom: 16px;
}
.footer-col a {
display: block;
font-size: 13px;
color: var(--muted);
padding: 3px 0;
transition: color 0.15s;
}
.footer-col a:hover {
color: var(--text);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 24px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--subtle);
}
/* ===== CHAT WIDGET ===== */
.chat-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
background: #111;
border: 1px solid var(--border);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
cursor: pointer;
transition:
transform 0.2s,
box-shadow 0.2s;
z-index: 200;
}
.chat-fab:hover {
transform: scale(1.08);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.chat-window {
display: none;
position: fixed;
bottom: 84px;
right: 24px;
width: 380px;
height: 520px;
background: #0a0a0a;
border: 1px solid var(--border);
border-radius: 16px;
overflow: hidden;
z-index: 200;
flex-direction: column;
box-shadow: 0 16px 64px rgba(0, 0, 0, 0.6);
}
.chat-window.open {
display: flex;
}
.chat-header {
padding: 16px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header h3 {
font-size: 14px;
font-weight: 600;
}
.chat-header button {
color: var(--muted);
font-size: 18px;
}
.chat-messages {
flex: 1;
overflow-y: auto;
padding: 16px;
display: flex;
flex-direction: column;
gap: 12px;
}
.chat-msg {
max-width: 85%;
padding: 10px 14px;
border-radius: 12px;
font-size: 13px;
line-height: 1.5;
}
.chat-msg.bot {
background: var(--bg-card);
border: 1px solid var(--border);
align-self: flex-start;
color: var(--muted);
}
.chat-msg.user {
background: #222;
align-self: flex-end;
}
.chat-input-wrap {
padding: 12px;
border-top: 1px solid var(--border);
display: flex;
gap: 8px;
}
.chat-input {
flex: 1;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font-size: 13px;
outline: none;
}
.chat-input::placeholder {
color: var(--subtle);
}
.chat-send {
width: 36px;
height: 36px;
background: #fff;
color: #000;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
transition: opacity 0.15s;
}
.chat-send:hover {
opacity: 0.8;
}
/* ===== INTEGRATIONS ===== */
.integrations-marquee {
overflow: hidden;
position: relative;
padding: 20px 0;
}
.integrations-marquee::before,
.integrations-marquee::after {
content: "";
position: absolute;
top: 0;
width: 80px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.integrations-marquee::before {
left: 0;
background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.integrations-marquee::after {
right: 0;
background: linear-gradient(-90deg, var(--bg) 0%, transparent 100%);
}
.integrations-track {
display: flex;
gap: 24px;
animation: marquee 60s linear infinite;
width: max-content;
}
.integrations-track:hover {
animation-play-state: paused;
}
.integration-logo {
width: 44px;
height: 44px;
border-radius: 10px;
opacity: 0.5;
transition:
opacity 0.2s,
transform 0.2s;
flex-shrink: 0;
}
.integration-logo:hover {
opacity: 1;
transform: scale(1.15);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
.integrations-count {
text-align: center;
margin-top: 24px;
font-size: 14px;
color: var(--muted);
}
.integrations-count strong {
color: var(--text);
}
/* ===== CASE STUDIES ===== */
.cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}
.case-card {
padding: 28px;
background: rgba(255, 255, 255, 0.04);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 12px;
transition:
border-color 0.2s,
transform 0.2s,
box-shadow 0.2s;
}
.case-card:hover {
border-color: var(--border-hover);
transform: translateY(-2px);
box-shadow: 0 0 40px rgba(253, 68, 68, 0.06);
}
.case-client {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--subtle);
margin-bottom: 8px;
}
.case-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
}
.case-subtitle {
font-size: 13px;
color: var(--muted);
margin-bottom: 16px;
}
.case-metrics {
display: flex;
gap: 20px;
flex-wrap: wrap;
}
.case-metric .num {
font-size: 22px;
font-weight: 700;
letter-spacing: -0.02em;
}
.case-metric .label {
font-size: 11px;
color: var(--muted);
}
.case-quote {
margin-top: 16px;
padding-top: 16px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--subtle);
font-style: italic;
line-height: 1.5;
}
.case-author {
font-style: normal;
color: var(--muted);
margin-top: 6px;
font-weight: 500;
}
/* ===== BOOK PROMO ===== */
.book-promo {
display: flex;
gap: 32px;
align-items: center;
padding: 32px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
max-width: 640px;
margin: 0 auto;
}
.book-cover {
width: 140px;
height: 180px;
background: linear-gradient(135deg, #222, #111);
border: 1px solid var(--border-hover);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 13px;
font-weight: 600;
color: var(--muted);
text-align: center;
padding: 16px;
line-height: 1.3;
}
.book-info h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.book-info .book-price {
font-size: 28px;
font-weight: 700;
margin-bottom: 4px;
}
.book-info .book-price small {
font-size: 14px;
font-weight: 400;
color: var(--muted);
}
.book-info .book-desc {
font-size: 13px;
color: var(--muted);
margin-bottom: 16px;
line-height: 1.5;
}
@media (max-width: 600px) {
.book-promo {
flex-direction: column;
text-align: center;
}
}
/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
.hero {
grid-template-columns: 1fr;
text-align: center;
padding-top: 100px;
}
.hero-text {
text-align: center;
order: 1;
}
.hero-mockup {
order: 2;
max-width: 500px;
margin: 0 auto;
width: 100%;
}
.hero-actions {
justify-content: center;
}
.features-grid {
grid-template-columns: repeat(2, 1fr);
}
.personas-grid {
grid-template-columns: repeat(3, 1fr);
}
.cloud-stats {
grid-template-columns: repeat(2, 1fr);
}
.hiw-flow {
grid-template-columns: 1fr;
gap: 16px;
}
.hiw-connector {
transform: rotate(90deg);
padding: 0;
}
.security-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-grid {
grid-template-columns: repeat(3, 1fr);
}
.footer-grid .footer-brand {
grid-column: 1/-1;
}
}
@media (max-width: 768px) {
.nav-links {
display: none;
}
.features-grid {
grid-template-columns: 1fr;
}
.personas-grid {
grid-template-columns: repeat(2, 1fr);
}
.skills-categories {
grid-template-columns: 1fr;
}
.eco-grid {
grid-template-columns: 1fr;
}
.cloud-stats {
grid-template-columns: repeat(2, 1fr);
}
.pricing-cards {
grid-template-columns: repeat(2, 1fr) !important;
}
.security-grid {
grid-template-columns: 1fr;
}
.footer-grid {
grid-template-columns: repeat(2, 1fr);
}
.chat-window {
width: calc(100vw - 32px);
right: 16px;
bottom: 76px;
}
.mockup-viewport {
height: 260px;
}
}
@media (max-width: 480px) {
.personas-grid {
grid-template-columns: 1fr;
}
.cloud-stats {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 32px;
}
.mockup-viewport {
height: 220px;
}
}
</style>
</head>
<body>
<!-- HEADER -->
<header class="header">
<div class="header-inner">
<div class="header-left">
<a href="/" class="logo">
<div class="logo-mark">
<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff" />
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#fff" />
<path
d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"
fill="#fff"
/>
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff" />
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff" />
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#fff" />
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff" />
</svg>
</div>
<span class="logo-text">Bot</span>
</a>
<nav class="nav-links">
<a href="https://hanzo.ai" class="nav-link">AI</a>
<div class="nav-dropdown">
<button class="nav-link">Bots ▾</button>
<div class="nav-dropdown-menu">
<a href="#personas"
><strong>Agent Personas</strong><span>15 built-in AI specialists</span></a
>
<a href="https://hanzo.bot"
><strong>Bot Dashboard</strong><span>Launch and manage autonomous agents</span></a
>
<a href="https://hanzo.app"
><strong>Hanzo App</strong><span>Visual chat builder and web interface</span></a
>
<a href="https://hanzo.app/download"
><strong>Desktop App</strong><span>Native app for macOS, Windows, Linux</span></a
>
</div>
</div>
<a href="#channels" class="nav-link">Channels</a>
<div class="nav-dropdown">
<button class="nav-link">Product ▾</button>
<div class="nav-dropdown-menu">
<a href="#features"
><strong>Features</strong><span>Multi-platform, multi-agent, 52+ skills</span></a
>
<a href="#skills"
><strong>Skills Hub</strong
><span>Browse and install from skills.hanzo.bot</span></a
>
<a href="#personas"
><strong>Agent Personas</strong><span>Pre-built specialist agents</span></a
>
<a href="#ecosystem"
><strong>Ecosystem</strong><span>hanzo.ai, hanzo.app, hanzo.bot</span></a
>
<div class="dropdown-divider"></div>
<a href="#pricing"
><strong>Pricing</strong><span>Free $5 credit to get started</span></a
>
</div>
</div>
<div class="nav-dropdown">
<button class="nav-link">Solutions ▾</button>
<div class="nav-dropdown-menu">
<a href="#solutions"
><strong>Customer Support</strong><span>24/7 AI-powered help desk</span></a
>
<a href="#solutions"
><strong>Developer Operations</strong
><span>Code review, deployment, CI/CD</span></a
>
<a href="#solutions"
><strong>Marketing &amp; Content</strong
><span>Campaign management and creation</span></a
>
<a href="#solutions"
><strong>Finance &amp; Analytics</strong
><span>Data analysis and reporting</span></a
>
<a href="#solutions"
><strong>Security &amp; Compliance</strong
><span>Threat monitoring and auditing</span></a
>
<a href="#solutions"
><strong>Enterprise</strong><span>Custom deployment and SLAs</span></a
>
</div>
</div>
<div class="nav-dropdown">
<button class="nav-link">Developers ▾</button>
<div class="nav-dropdown-menu">
<a href="https://docs.hanzo.bot"
><strong>Documentation</strong><span>Guides, tutorials, and references</span></a
>
<a href="https://github.com/hanzoai/bot"
><strong>GitHub</strong><span>Open source on GitHub</span></a
>
<a href="https://docs.hanzo.bot/api"
><strong>API Reference</strong><span>REST and WebSocket APIs</span></a
>
<a href="#cli"><strong>CLI Reference</strong><span>Command-line tools</span></a>
<a href="https://skills.hanzo.bot"
><strong>Skills SDK</strong><span>Build and publish custom skills</span></a
>
</div>
</div>
<div class="nav-dropdown">
<button class="nav-link">Resources ▾</button>
<div class="nav-dropdown-menu">
<a href="https://docs.hanzo.bot/support"
><strong>Help &amp; Support</strong><span>Get help from the team</span></a
>
<a href="#pricing"><strong>Pricing</strong><span>Plans and billing</span></a>
<a href="/book"
><strong>The Hanzo Book</strong><span>$49 — includes 1 month usage</span></a
>
<a href="https://hanzo.ai/blog"
><strong>Blog</strong><span>Updates and insights</span></a
>
<a href="https://discord.gg/XthHQQj"
><strong>Community</strong><span>Join the Discord</span></a
>
<a href="https://status.hanzo.ai"
><strong>Status</strong><span>System health and uptime</span></a
>
</div>
</div>
</nav>
</div>
<div class="header-right">
<a href="https://hanzo.ai/contact" class="btn-ghost">Contact Sales</a>
<a href="/chat" class="btn-primary">Sign In</a>
</div>
</div>
</header>
<!-- HERO -->
<section class="hero">
<div class="hero-text">
<div class="hero-badge">
🥷 <strong>$5 free credit</strong> · Launch your first bot in minutes
</div>
<h1>Your <span class="gradient-text">Autonomous</span> AI Workforce</h1>
<p>
Deploy specialized AI agents across every platform. 15 built-in personas. 52+ skills.
Running 24/7 in the cloud at $1/hr.
</p>
<div class="hero-actions">
<a href="/chat?onboarding=1" class="btn-primary btn-lg">Get Started Free</a>
<a href="/chat?onboarding=1&method=google" class="btn-outline btn-lg btn-icon">
<svg width="16" height="16" viewBox="0 0 24 24">
<path
d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"
fill="#fff"
fill-opacity=".6"
/>
<path
d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
fill="#fff"
fill-opacity=".5"
/>
<path
d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
fill="#fff"
fill-opacity=".4"
/>
<path
d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
fill="#fff"
fill-opacity=".5"
/>
</svg>
Sign Up with Google
</a>
</div>
<p class="hero-note">
$5 free credit on signup · $1/hr cloud compute · BYO keys or use ours ·
<a href="https://hanzo.ai/contact" style="text-decoration: underline">Contact Sales</a>
</p>
</div>
<div class="hero-mockup">
<div class="mockup-browser">
<div class="mockup-titlebar">
<div class="traffic-light red"></div>
<div class="traffic-light yellow"></div>
<div class="traffic-light green"></div>
<div class="mockup-url">hanzo.bot/my-agent</div>
</div>
<div class="mockup-viewport">
<!-- Scene 1: Form Auto-Fill -->
<div class="mockup-scene">
<div class="scene-form">
<div class="form-field">
<span class="form-label">Name</span>
<div class="form-bar">
<div class="form-bar-fill c1"></div>
<div class="form-cursor"></div>
</div>
</div>
<div class="form-field">
<span class="form-label">Email</span>
<div class="form-bar"><div class="form-bar-fill c2"></div></div>
</div>
<div class="form-field">
<span class="form-label">Company</span>
<div class="form-bar"><div class="form-bar-fill c3"></div></div>
</div>
<div class="form-field">
<span class="form-label">Role</span>
<div class="form-bar"><div class="form-bar-fill c4"></div></div>
</div>
<div class="form-field">
<span class="form-label">Message</span>
<div class="form-bar"><div class="form-bar-fill c5"></div></div>
</div>
</div>
</div>
<!-- Scene 2: Data Analysis -->
<div class="mockup-scene">
<div class="scene-data">
<div class="data-grid">
<div class="data-cell"></div>
<div class="data-cell highlight"></div>
<div class="data-cell"></div>
<div class="data-cell"></div>
<div class="data-cell highlight"></div>
<div class="data-cell highlight"></div>
<div class="data-cell"></div>
<div class="data-cell highlight"></div>
<div class="data-cell"></div>
<div class="data-cell"></div>
<div class="data-cell"></div>
<div class="data-cell"></div>
<div class="data-cell highlight"></div>
<div class="data-cell highlight"></div>
<div class="data-cell"></div>
</div>
<div class="data-chart">
<div class="chart-bar" style="--h: 40%"></div>
<div class="chart-bar" style="--h: 70%"></div>
<div class="chart-bar" style="--h: 55%"></div>
<div class="chart-bar" style="--h: 85%"></div>
<div class="chart-bar" style="--h: 45%"></div>
<div class="chart-bar" style="--h: 65%"></div>
<div class="chart-bar" style="--h: 90%"></div>
<div class="chart-bar" style="--h: 50%"></div>
</div>
</div>
</div>
<!-- Scene 3: AI Chat -->
<div class="mockup-scene">
<div class="scene-chat">
<div class="chat-bubble from-user">Deploy my-agent to production</div>
<div class="chat-bubble from-bot">
Running pre-deploy checks... 52 skills loaded ✓
</div>
<div class="chat-bubble from-user">Connect Discord and Slack channels</div>
<div class="chat-bubble from-bot">
Connected to 2 channels. Agent live at hanzo.bot/my-agent ✓
</div>
</div>
</div>
<!-- Scene 4: Design Canvas -->
<div class="mockup-scene">
<div class="scene-design">
<div class="design-el el1">
<div class="design-handle tl"></div>
<div class="design-handle tr"></div>
<div class="design-handle bl"></div>
<div class="design-handle br"></div>
</div>
<div class="design-el el2">
<div class="design-handle tl"></div>
<div class="design-handle tr"></div>
<div class="design-handle bl"></div>
<div class="design-handle br"></div>
</div>
<div class="design-el el3"></div>
<div class="design-el el4"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section class="how-it-works" id="how-it-works">
<div class="section-inner reveal">
<div class="section-label" style="text-align: center">How It Works</div>
<h2 class="section-title" style="text-align: center">Three Steps to Launch</h2>
<p class="section-desc" style="text-align: center; margin: 0 auto 48px">
From idea to deployed AI agent in minutes, not months.
</p>
<div class="hiw-flow">
<div class="hiw-step stagger-child">
<div class="hiw-num">1</div>
<h3>Connect</h3>
<p>
Link your platforms — Discord, Slack, Telegram, or any of 608+ integrations. One click
to authorize.
</p>
</div>
<div class="hiw-connector">
<svg viewBox="0 0 40 2" fill="none">
<line
x1="0"
y1="1"
x2="40"
y2="1"
stroke="var(--subtle)"
stroke-width="2"
stroke-dasharray="4 4"
/>
</svg>
</div>
<div class="hiw-step stagger-child">
<div class="hiw-num">2</div>
<h3>Configure</h3>
<p>
Choose a persona, assign skills, set behavior rules. Use the visual builder or write
YAML config.
</p>
</div>
<div class="hiw-connector">
<svg viewBox="0 0 40 2" fill="none">
<line
x1="0"
y1="1"
x2="40"
y2="1"
stroke="var(--subtle)"
stroke-width="2"
stroke-dasharray="4 4"
/>
</svg>
</div>
<div class="hiw-step stagger-child">
<div class="hiw-num">3</div>
<h3>Deploy</h3>
<p>
Push to Hanzo Cloud with one command. Your agent goes live 24/7 with auto-scaling and
monitoring.
</p>
</div>
</div>
</div>
</section>
<!-- PERSONAS -->
<section id="personas">
<div class="section-inner reveal">
<div class="section-label">Meet Your Team</div>
<h2 class="section-title">15 Specialist Personas</h2>
<p class="section-desc">
Pre-built AI agents with unique personalities and expertise. Deploy them in parallel as
your infinitely scalable 24/7 workforce.
</p>
<div class="personas-grid">
<div class="persona">
<div class="persona-emoji">💻</div>
<div class="persona-name">dev</div>
<div class="persona-role">AI Developer</div>
<div class="persona-desc">
Ships code at light speed. Full-stack architecture and development.
</div>
</div>
<div class="persona">
<div class="persona-emoji">🎨</div>
<div class="persona-name">des</div>
<div class="persona-role">AI Designer</div>
<div class="persona-desc">
Crafts pixel-perfect experiences. UI/UX and design systems.
</div>
</div>
<div class="persona">
<div class="persona-emoji">⚙️</div>
<div class="persona-name">opera</div>
<div class="persona-role">Operations</div>
<div class="persona-desc">Keeps systems at 99.99%. Cloud ops and monitoring.</div>
</div>
<div class="persona">
<div class="persona-emoji">📈</div>
<div class="persona-name">mark</div>
<div class="persona-role">Marketing</div>
<div class="persona-desc">Turns insights into growth. Campaigns and analytics.</div>
</div>
<div class="persona">
<div class="persona-emoji">🛟</div>
<div class="persona-name">su</div>
<div class="persona-role">Support</div>
<div class="persona-desc">Resolves issues before they escalate. Help and training.</div>
</div>
<div class="persona">
<div class="persona-emoji">🖌️</div>
<div class="persona-name">art</div>
<div class="persona-role">AI Artist</div>
<div class="persona-desc">
Creates stunning visual content. Digital art and direction.
</div>
</div>
<div class="persona">
<div class="persona-emoji">🎵</div>
<div class="persona-name">mu</div>
<div class="persona-role">AI Musician</div>
<div class="persona-desc">Composes and produces. Music creation and arrangement.</div>
</div>
<div class="persona">
<div class="persona-emoji">📊</div>
<div class="persona-name">data</div>
<div class="persona-role">Data Scientist</div>
<div class="persona-desc">Finds patterns in the noise. ML and visualization.</div>
</div>
<div class="persona">
<div class="persona-emoji">🏗️</div>
<div class="persona-name">core</div>
<div class="persona-role">Core Engineer</div>
<div class="persona-desc">Builds bulletproof infrastructure. Performance tuning.</div>
</div>
<div class="persona">
<div class="persona-emoji">💰</div>
<div class="persona-name">fin</div>
<div class="persona-role">Finance</div>
<div class="persona-desc">Navigates markets with precision. Analysis and strategy.</div>
</div>
<div class="persona">
<div class="persona-emoji">🔒</div>
<div class="persona-name">sec</div>
<div class="persona-role">Security</div>
<div class="persona-desc">Guards your digital perimeter. Threat prevention.</div>
</div>
<div class="persona">
<div class="persona-emoji">🧬</div>
<div class="persona-name">algo</div>
<div class="persona-role">Algorithms</div>
<div class="persona-desc">Optimizes the impossible. Algorithm design.</div>
</div>
<div class="persona">
<div class="persona-emoji">🗄️</div>
<div class="persona-name">db</div>
<div class="persona-role">Database</div>
<div class="persona-desc">Architects data at scale. Schema and performance.</div>
</div>
<div class="persona">
<div class="persona-emoji">🧮</div>
<div class="persona-name">cal</div>
<div class="persona-role">Calculator</div>
<div class="persona-desc">Models complexity with clarity. Computation.</div>
</div>
<div class="persona">
<div class="persona-emoji">💬</div>
<div class="persona-name">chat</div>
<div class="persona-role">Conversation</div>
<div class="persona-desc">Connects through conversation. Natural language.</div>
</div>
</div>
</div>
</section>
<!-- FEATURES -->
<section id="features">
<div class="section-inner reveal">
<div class="section-label">Capabilities</div>
<h2 class="section-title">Everything You Need</h2>
<p class="section-desc">
A complete framework for building, deploying, and managing autonomous AI agents at any
scale.
</p>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">🌐</div>
<h3>Multi-Platform</h3>
<p>
Deploy across Discord, Slack, Telegram, WhatsApp, X/Twitter, iMessage, and more. One
agent, every channel.
</p>
</div>
<div class="feature">
<div class="feature-icon">🥷</div>
<h3>52+ Skills</h3>
<p>
From coding and content to search, media processing, smart home, and productivity.
Install more from the Skills Hub.
</p>
</div>
<div class="feature">
<div class="feature-icon">🤖</div>
<h3>Multi-Agent</h3>
<p>
Run multiple specialized agents in parallel. Different models, different skills,
different personalities.
</p>
</div>
<div class="feature">
<div class="feature-icon">🧠</div>
<h3>Memory &amp; Knowledge</h3>
<p>
RAG-powered memory with document ingestion. Persistent context across conversations
and sessions.
</p>
</div>
<div class="feature">
<div class="feature-icon">📋</div>
<h3>Recipes &amp; Workflows</h3>
<p>
Pre-built workflows for PR review, deployment, code review, and custom automation
pipelines.
</p>
</div>
<div class="feature">
<div class="feature-icon">🎬</div>
<h3>Media Processing</h3>
<p>
Handle PDFs, audio transcription, video frames, image generation, and text-to-speech
natively.
</p>
</div>
<div class="feature">
<div class="feature-icon">🏪</div>
<h3>Skills Hub</h3>
<p>
Browse, install, and publish skills at skills.hanzo.bot. Semantic search, versioning,
community ratings.
</p>
</div>
<div class="feature">
<div class="feature-icon">☁️</div>
<h3>Cloud &amp; Self-Hosted</h3>
<p>
Run anywhere. Managed cloud, local development, or self-hosted. Full TypeScript. Open
source.
</p>
</div>
</div>
</div>
</section>
<!-- CHANNELS -->
<section id="channels" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Channels</div>
<h2 class="section-title">Deploy Everywhere</h2>
<p class="section-desc">
Your agents operate natively on every platform your team and customers already use.
</p>
<div class="features-grid" style="grid-template-columns: repeat(6, 1fr)">
<div class="feature" style="text-align: center">
<div class="feature-icon">💬</div>
<h3>Discord</h3>
</div>
<div class="feature" style="text-align: center">
<div class="feature-icon">💼</div>
<h3>Slack</h3>
</div>
<div class="feature" style="text-align: center">
<div class="feature-icon">✈️</div>
<h3>Telegram</h3>
</div>
<div class="feature" style="text-align: center">
<div class="feature-icon">📱</div>
<h3>WhatsApp</h3>
</div>
<div class="feature" style="text-align: center">
<div class="feature-icon">🐦</div>
<h3>X / Twitter</h3>
</div>
<div class="feature" style="text-align: center">
<div class="feature-icon">💬</div>
<h3>iMessage</h3>
</div>
</div>
</div>
</section>
<!-- INTEGRATIONS -->
<section id="integrations" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Integrations</div>
<h2 class="section-title">608+ Integrations</h2>
<p class="section-desc">
Connect your bots to every tool your business already uses. Powered by the Hanzo
automation engine.
</p>
<div class="integrations-marquee">
<div class="integrations-track" id="integrationTrack">
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/google-sheets.png"
alt="Google Sheets"
title="Google Sheets"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/slack.png"
alt="Slack"
title="Slack"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/discord.png"
alt="Discord"
title="Discord"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/github.png"
alt="GitHub"
title="GitHub"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/stripe.png"
alt="Stripe"
title="Stripe"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/shopify.png"
alt="Shopify"
title="Shopify"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/salesforce.png"
alt="Salesforce"
title="Salesforce"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/hubspot.png"
alt="HubSpot"
title="HubSpot"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/notion.png"
alt="Notion"
title="Notion"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/airtable.png"
alt="Airtable"
title="Airtable"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/gmail.png"
alt="Gmail"
title="Gmail"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/microsoft-teams.png"
alt="Microsoft Teams"
title="Microsoft Teams"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/trello.png"
alt="Trello"
title="Trello"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/jira-cloud.png"
alt="Jira"
title="Jira"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/zoom.png"
alt="Zoom"
title="Zoom"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/linkedin.png"
alt="LinkedIn"
title="LinkedIn"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/twitter.png"
alt="X / Twitter"
title="X / Twitter"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/instagram-business.png"
alt="Instagram"
title="Instagram"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/youtube.png"
alt="YouTube"
title="YouTube"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/dropbox.png"
alt="Dropbox"
title="Dropbox"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/google-drive.png"
alt="Google Drive"
title="Google Drive"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/google-calendar.png"
alt="Google Calendar"
title="Google Calendar"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/calendly.png"
alt="Calendly"
title="Calendly"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/twilio.png"
alt="Twilio"
title="Twilio"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/sendgrid.png"
alt="SendGrid"
title="SendGrid"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/mailchimp.png"
alt="Mailchimp"
title="Mailchimp"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/asana.png"
alt="Asana"
title="Asana"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/monday.png"
alt="Monday.com"
title="Monday.com"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/pipedrive.png"
alt="Pipedrive"
title="Pipedrive"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/zendesk.png"
alt="Zendesk"
title="Zendesk"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/intercom.png"
alt="Intercom"
title="Intercom"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/freshdesk.png"
alt="Freshdesk"
title="Freshdesk"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/webflow.png"
alt="Webflow"
title="Webflow"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/wordpress.png"
alt="WordPress"
title="WordPress"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/woocommerce.png"
alt="WooCommerce"
title="WooCommerce"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/quickbooks.png"
alt="QuickBooks"
title="QuickBooks"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/xero.png"
alt="Xero"
title="Xero"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/typeform.png"
alt="Typeform"
title="Typeform"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/openai.png"
alt="OpenAI"
title="OpenAI"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/claude.png"
alt="Claude"
title="Claude"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/google-gemini.png"
alt="Google Gemini"
title="Google Gemini"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/telegram-bot.png"
alt="Telegram"
title="Telegram"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/whatsapp.png"
alt="WhatsApp"
title="WhatsApp"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/figma.png"
alt="Figma"
title="Figma"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/mysql.png"
alt="MySQL"
title="MySQL"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/postgres.png"
alt="PostgreSQL"
title="PostgreSQL"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/mongodb.png"
alt="MongoDB"
title="MongoDB"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/supabase.png"
alt="Supabase"
title="Supabase"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/okta.png"
alt="Okta"
title="Okta"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/datadog.png"
alt="Datadog"
title="Datadog"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/snowflake.png"
alt="Snowflake"
title="Snowflake"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/microsoft-excel-365.png"
alt="Excel"
title="Excel"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/microsoft-outlook.png"
alt="Outlook"
title="Outlook"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/todoist.png"
alt="Todoist"
title="Todoist"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/spotify.png"
alt="Spotify"
title="Spotify"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/clickup.png"
alt="ClickUp"
title="ClickUp"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/linear.png"
alt="Linear"
title="Linear"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/posthog.png"
alt="PostHog"
title="PostHog"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/mixpanel.png"
alt="Mixpanel"
title="Mixpanel"
/>
<img
class="integration-logo"
src="https://cdn.activepieces.com/pieces/gitlab.png"
alt="GitLab"
title="GitLab"
/>
</div>
</div>
<div class="integrations-count">
<strong>608+</strong> integrations and growing. CRM, e-commerce, analytics, databases, AI,
and more.
</div>
</div>
</section>
<!-- SKILLS -->
<section id="skills" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Skills Library</div>
<h2 class="section-title">52+ Built-in Skills</h2>
<p class="section-desc">
Every skill your agents need, built-in or installable from the Skills Hub.
</p>
<div class="skills-categories">
<div class="skill-cat">
<h3><span>💻</span> Development</h3>
<div class="skill-list">
<span class="skill-tag">github</span><span class="skill-tag">coding-agent</span
><span class="skill-tag">skill-creator</span><span class="skill-tag">sag</span>
</div>
</div>
<div class="skill-cat">
<h3><span>💬</span> Communication</h3>
<div class="skill-list">
<span class="skill-tag">discord</span><span class="skill-tag">slack</span
><span class="skill-tag">imsg</span><span class="skill-tag">voice-call</span
><span class="skill-tag">bluebubbles</span>
</div>
</div>
<div class="skill-cat">
<h3><span>📝</span> Productivity</h3>
<div class="skill-list">
<span class="skill-tag">notion</span><span class="skill-tag">obsidian</span
><span class="skill-tag">apple-notes</span><span class="skill-tag">things-mac</span
><span class="skill-tag">trello</span><span class="skill-tag">apple-reminders</span>
</div>
</div>
<div class="skill-cat">
<h3><span>🎬</span> Content &amp; Media</h3>
<div class="skill-list">
<span class="skill-tag">summarize</span><span class="skill-tag">openai-whisper</span
><span class="skill-tag">openai-image-gen</span
><span class="skill-tag">video-frames</span
><span class="skill-tag">sherpa-onnx-tts</span><span class="skill-tag">nano-pdf</span>
</div>
</div>
<div class="skill-cat">
<h3><span>🔍</span> Search &amp; Info</h3>
<div class="skill-list">
<span class="skill-tag">local-places</span><span class="skill-tag">weather</span
><span class="skill-tag">blogsetter</span><span class="skill-tag">gifgrep</span
><span class="skill-tag">peekaboo</span>
</div>
</div>
<div class="skill-cat">
<h3><span>🔧</span> Utilities</h3>
<div class="skill-list">
<span class="skill-tag">1password</span><span class="skill-tag">himalaya</span
><span class="skill-tag">spotify-player</span><span class="skill-tag">openhue</span
><span class="skill-tag">sonoscli</span><span class="skill-tag">tmux</span
><span class="skill-tag">healthcheck</span>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 40px">
<a href="https://skills.hanzo.bot" class="btn-outline btn-lg">Browse Skills Hub →</a>
</div>
</div>
</section>
<!-- ECOSYSTEM -->
<section id="ecosystem" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Ecosystem</div>
<h2 class="section-title">The Hanzo Platform</h2>
<p class="section-desc">
A complete AI ecosystem for building, deploying, and scaling intelligent applications.
</p>
<div class="eco-grid">
<a href="https://hanzo.ai" class="eco-card">
<h3>Hanzo AI</h3>
<div class="eco-url">hanzo.ai</div>
<p>
Cloud platform and AI ecosystem. Models, infrastructure, APIs, and developer tools.
</p>
</a>
<a href="https://hanzo.app" class="eco-card">
<h3>Hanzo App</h3>
<div class="eco-url">hanzo.app</div>
<p>
Visual chat builder and web interface. Build conversational AI without code. Desktop
app available.
</p>
</a>
<a href="https://hanzo.bot" class="eco-card">
<h3>Hanzo Bot</h3>
<div class="eco-url">hanzo.bot</div>
<p>
Autonomous bot dashboard. Launch, monitor, and manage AI agents running 24/7 across
every platform.
</p>
</a>
</div>
</div>
</section>
<!-- CASE STUDIES -->
<section id="cases" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Proven Results</div>
<h2 class="section-title">Case Studies</h2>
<p class="section-desc">
From 500x ROI campaigns to $34.9M blockchain launches. See what Hanzo-powered AI delivers.
</p>
<div class="cases-grid">
<div class="case-card">
<div class="case-client">Damon Motorcycles</div>
<div class="case-title">500x ROI Campaign</div>
<div class="case-subtitle">Digital marketing, brand strategy, content production</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">500x</div>
<div class="label">ROI</div>
</div>
<div class="case-metric">
<div class="num">230%</div>
<div class="label">More leads</div>
</div>
<div class="case-metric">
<div class="num">65%</div>
<div class="label">Conversion</div>
</div>
</div>
<div class="case-quote">
"The campaign Hanzo created exceeded all expectations. The ROI speaks for itself."
<div class="case-author">— Jay Giraud, CEO</div>
</div>
</div>
<div class="case-card">
<div class="case-client">Triller</div>
<div class="case-title">TrillerFest — 5M Viewers</div>
<div class="case-subtitle">
Virtual event production, content strategy, artist partnerships
</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">5M+</div>
<div class="label">Viewers</div>
</div>
<div class="case-metric">
<div class="num">100+</div>
<div class="label">Artists</div>
</div>
<div class="case-metric">
<div class="num">350%</div>
<div class="label">App growth</div>
</div>
</div>
<div class="case-quote">
"Hanzo turned an impossible situation into our biggest success."
<div class="case-author">— Mike Lu, CEO</div>
</div>
</div>
<div class="case-card">
<div class="case-client">Unikrn</div>
<div class="case-title">$34.9M Blockchain ICO</div>
<div class="case-subtitle">
Blockchain integration, ICO launch, regulatory compliance
</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">$34.9M</div>
<div class="label">Raised</div>
</div>
<div class="case-metric">
<div class="num">300%</div>
<div class="label">Engagement</div>
</div>
<div class="case-metric">
<div class="num">15+</div>
<div class="label">Jurisdictions</div>
</div>
</div>
<div class="case-quote">
"Hanzo's expertise was instrumental in bringing UnikoinGold to market."
<div class="case-author">— Rahul Sood, CEO</div>
</div>
</div>
<div class="case-card">
<div class="case-client">Bellabeat</div>
<div class="case-title">Women's Health Tech Platform</div>
<div class="case-subtitle">
CMO & CTO services, marketing automation, data analytics
</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">67%</div>
<div class="label">Engagement</div>
</div>
<div class="case-metric">
<div class="num">$35M</div>
<div class="label">Revenue</div>
</div>
<div class="case-metric">
<div class="num">45%</div>
<div class="label">Retention</div>
</div>
</div>
<div class="case-quote">
"Hanzo transformed our approach to both marketing and technology."
<div class="case-author">— Urška Sršen, Co-founder</div>
</div>
</div>
<div class="case-card">
<div class="case-client">Casper Labs</div>
<div class="case-title">Enterprise Blockchain Launch</div>
<div class="case-subtitle">
Blockchain development, technical architecture, strategic consulting
</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">2021</div>
<div class="label">Mainnet</div>
</div>
<div class="case-metric">
<div class="num">Rust</div>
<div class="label">Strategic pivot</div>
</div>
</div>
<div class="case-quote">
"Hanzo's visionary approach shaped Casper into the enterprise-grade blockchain it is
today."
<div class="case-author">— Mrinal Manohar, CEO</div>
</div>
</div>
<div class="case-card">
<div class="case-client">Cover Build</div>
<div class="case-title">Prefab Housing Revolution</div>
<div class="case-subtitle">3D visualization, UX design, digital marketing</div>
<div class="case-metrics">
<div class="case-metric">
<div class="num">300%</div>
<div class="label">More leads</div>
</div>
<div class="case-metric">
<div class="num">40%</div>
<div class="label">Faster sales</div>
</div>
</div>
<div class="case-quote">
"Hanzo transformed how customers experience our homes before they're built."
<div class="case-author">— Alexis Rivas, CEO</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 40px">
<a href="https://hanzo.ai/work" class="btn-outline btn-lg">View All Case Studies →</a>
</div>
</div>
</section>
<!-- CLOUD -->
<section id="cloud" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Infrastructure</div>
<h2 class="section-title">Run in the Cloud</h2>
<p class="section-desc">
Production-grade hosting so your agents never sleep. Focus on building, not
infrastructure.
</p>
<div class="cloud-stats">
<div class="cloud-stat">
<div class="num">99.9%</div>
<div class="label">Uptime SLA</div>
</div>
<div class="cloud-stat">
<div class="num">24/7</div>
<div class="label">Always Running</div>
</div>
<div class="cloud-stat">
<div class="num">∞</div>
<div class="label">Auto-Scaling</div>
</div>
<div class="cloud-stat">
<div class="num">&lt;50ms</div>
<div class="label">Response Time</div>
</div>
</div>
<p style="color: var(--muted); font-size: 14px; max-width: 560px">
Managed cloud deployment with automatic scaling, monitoring, and zero-downtime updates.
Your agents run continuously across all connected channels without interruption.
</p>
</div>
</section>
<!-- LIVE DEMO -->
<section id="demo" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">See It in Action</div>
<h2 class="section-title">Live Demo</h2>
<p class="section-desc">
Watch a real bot deployment conversation — from command to live agent.
</p>
<div class="terminal-frame demo-terminal">
<div class="terminal-titlebar">
<div class="traffic-light red"></div>
<div class="traffic-light yellow"></div>
<div class="traffic-light green"></div>
<div class="terminal-title">hanzo-bot — terminal</div>
</div>
<div class="terminal-body">
<span class="demo-line"
><span class="demo-user">user:</span> @bot deploy my-agent to production</span
>
<span class="demo-line"
><span class="demo-bot">bot:</span> Running pre-deploy checks...</span
>
<span class="demo-line"
><span class="demo-bot">bot:</span> <span class="demo-check">✓</span> 52 skills
loaded</span
>
<span class="demo-line"
><span class="demo-bot">bot:</span> <span class="demo-check">✓</span> Discord, Slack
channels connected</span
>
<span class="demo-line"
><span class="demo-bot">bot:</span> Deployed to hanzo.bot/my-agent
<span class="demo-check">✓</span></span
>
<span class="demo-line"
><span class="demo-bot">bot:</span> Agent is live and monitoring all channels.</span
>
</div>
</div>
</div>
</section>
<!-- CLI / DEV TOOLS -->
<section id="cli" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label">Developer Tools</div>
<h2 class="section-title">Build Locally, Deploy Globally</h2>
<p class="section-desc">
Full TypeScript. Open source. Develop and test agents on your machine, then deploy to the
cloud.
</p>
<div class="terminal-frame">
<div class="terminal-titlebar">
<div class="traffic-light red"></div>
<div class="traffic-light yellow"></div>
<div class="traffic-light green"></div>
<div class="terminal-title">hanzo-bot — terminal</div>
</div>
<div class="terminal-body">
<span class="cli-line"
><span class="prompt">$</span>
<span class="cmd">npx hanzo-bot init my-agent</span></span
>
<span class="cli-line"
><span class="prompt">$</span> <span class="cmd">cd my-agent</span></span
>
<span class="cli-line"
><span class="prompt">$</span> <span class="cmd">npx hanzo-bot dev</span></span
>
<span class="cli-line"
><span class="output"> ↳ Gateway running on http://localhost:18789</span></span
>
<span class="cli-line"
><span class="output"> ↳ Agent "main" ready (claude-opus-4-6)</span></span
>
<span class="cli-line"><span class="output"> ↳ 52 skills loaded</span></span>
<span class="cli-line">&nbsp;</span>
<span class="cli-line"
><span class="prompt">$</span> <span class="cmd">npx hanzo-bot deploy</span></span
>
<span class="cli-line"
><span class="output"> ↳ Deployed to hanzo.bot/my-agent </span
><span class="success">✓</span></span
>
</div>
</div>
<div style="margin-top: 24px; display: flex; gap: 12px">
<a href="https://docs.hanzo.bot/quickstart" class="btn-outline">Quickstart Guide →</a>
<a href="https://github.com/hanzoai/bot" class="btn-ghost">View on GitHub →</a>
</div>
</div>
</section>
<!-- SECURITY & TRUST -->
<section id="security" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label" style="text-align: center">Security & Trust</div>
<h2 class="section-title" style="text-align: center">Enterprise-Grade Security</h2>
<p class="section-desc" style="text-align: center; margin: 0 auto 48px">
Your data is protected by industry-leading security standards and compliance
certifications.
</p>
<div class="security-grid">
<div class="security-badge stagger-child">
<div class="badge-icon">🛡️</div>
<h3>SOC 2 Type II</h3>
<p>Independently audited security controls</p>
</div>
<div class="security-badge stagger-child">
<div class="badge-icon">🇪🇺</div>
<h3>GDPR Compliant</h3>
<p>Full EU data protection compliance</p>
</div>
<div class="security-badge stagger-child">
<div class="badge-icon">🔐</div>
<h3>AES-256 Encryption</h3>
<p>Data encrypted at rest and in transit</p>
</div>
<div class="security-badge stagger-child">
<div class="badge-icon">⏱️</div>
<h3>99.9% SLA</h3>
<p>Guaranteed uptime with financial backing</p>
</div>
<div class="security-badge stagger-child">
<div class="badge-icon">🌍</div>
<h3>Data Residency</h3>
<p>Choose where your data is stored</p>
</div>
<div class="security-badge stagger-child">
<div class="badge-icon">📋</div>
<h3>Audit Logs</h3>
<p>Complete activity tracking and reporting</p>
</div>
</div>
</div>
</section>
<!-- PRICING -->
<section id="pricing" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal" style="text-align: center">
<div class="section-label">Pricing</div>
<h2 class="section-title">Simple, Transparent Pricing</h2>
<p class="section-desc" style="margin: 0 auto 48px">
Pay for what you use. $5 free credit on signup. Bring your own API keys or use ours.
</p>
<!-- THE HANZO BOOK -->
<div class="book-promo" style="margin-bottom: 48px">
<div class="book-cover">The<br />Hanzo<br />Book</div>
<div class="book-info">
<h3>The Hanzo Book</h3>
<div class="book-price">$49 <small>one-time</small></div>
<div class="book-desc">
The complete guide to building and deploying autonomous AI agents. Includes
<strong>1 month of Hanzo Bot usage</strong> — cloud compute, all personas, all skills.
Everything you need to launch.
</div>
<a href="/book" class="btn-primary">Get the Book →</a>
</div>
</div>
<div class="pricing-cards" style="max-width: 1100px; grid-template-columns: repeat(4, 1fr)">
<div class="pricing-card">
<h3>Free</h3>
<div class="price">$0</div>
<ul>
<li>$5 trial credit included</li>
<li>1 active bot</li>
<li>All 15 personas</li>
<li>52+ skills</li>
<li>Community support</li>
<li>Self-hosted option</li>
</ul>
</div>
<div class="pricing-card">
<h3>Starter</h3>
<div class="price">$20 <small>/mo</small></div>
<ul>
<li>3 active bots</li>
<li>20 hrs/mo compute</li>
<li>All channels unlocked</li>
<li>608+ integrations</li>
<li>Email support</li>
<li>Linux cloud env</li>
</ul>
</div>
<div class="pricing-card featured">
<h3>Cloud</h3>
<div class="price">$1 <small>/hr per bot</small></div>
<ul>
<li>Pay-as-you-go compute</li>
<li>AI model costs included</li>
<li>All channels unlocked</li>
<li>Unlimited bots</li>
<li>Auto-scaling</li>
<li>Priority support</li>
</ul>
</div>
<div class="pricing-card">
<h3>Always-On</h3>
<div class="price">$499 <small>/mo per bot</small></div>
<ul>
<li>24/7 dedicated Mac instance</li>
<li>M2 Mac mini (8-core, 24GB)</li>
<li>Login to your services</li>
<li>Use native desktop apps</li>
<li>Full computer environment</li>
<li>Dedicated support</li>
</ul>
</div>
</div>
<!-- COMPUTE ENVIRONMENTS -->
<div
style="
margin-top: 32px;
text-align: left;
max-width: 640px;
margin-left: auto;
margin-right: auto;
"
>
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; text-align: center">
Dedicated Environments (Always-On)
</h3>
<div
style="
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
"
>
<table style="width: 100%; border-collapse: collapse; font-size: 13px">
<thead>
<tr style="border-bottom: 1px solid var(--border)">
<th
style="
padding: 12px 16px;
text-align: left;
font-weight: 500;
color: var(--muted);
"
>
Environment
</th>
<th
style="
padding: 12px 16px;
text-align: right;
font-weight: 500;
color: var(--muted);
"
>
Specs
</th>
<th
style="
padding: 12px 16px;
text-align: right;
font-weight: 500;
color: var(--muted);
"
>
Price
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Linux (DOKS)</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
4 vCPU, 8 GB
</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$99/mo</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Windows Cloud</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
8 vCPU, 32 GB
</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
$299/mo
</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Mac M2</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
8-core, 24 GB
</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
$499/mo
</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Mac M4 Pro</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
14-core, 48 GB
</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
$1,499/mo
</td>
</tr>
<tr>
<td style="padding: 10px 16px">Mac M4 Max</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
36-core, 128 GB
</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">
$4,999/mo
</td>
</tr>
</tbody>
</table>
</div>
<p style="color: var(--subtle); font-size: 12px; margin-top: 8px; text-align: center">
Mac pricing based on AWS EC2 Mac instances (24-hr min). Savings Plans available for up
to 44% off.
</p>
</div>
<p
style="
color: var(--subtle);
font-size: 13px;
margin-top: 24px;
max-width: 640px;
margin-left: auto;
margin-right: auto;
"
>
BYO API keys: 1% cloud management fee. Or use our included AI compute. All top models
supported — Claude, GPT-4, Gemini, Deepseek, Llama, and more.
</p>
<!-- MODEL PRICING -->
<div
style="
margin-top: 48px;
text-align: left;
max-width: 640px;
margin-left: auto;
margin-right: auto;
"
>
<h3 style="font-size: 16px; font-weight: 600; margin-bottom: 16px; text-align: center">
AI Model Pricing (per 1M tokens)
</h3>
<div
style="
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
"
>
<table style="width: 100%; border-collapse: collapse; font-size: 13px">
<thead>
<tr style="border-bottom: 1px solid var(--border)">
<th
style="
padding: 12px 16px;
text-align: left;
font-weight: 500;
color: var(--muted);
"
>
Model
</th>
<th
style="
padding: 12px 16px;
text-align: right;
font-weight: 500;
color: var(--muted);
"
>
Input
</th>
<th
style="
padding: 12px 16px;
text-align: right;
font-weight: 500;
color: var(--muted);
"
>
Output
</th>
</tr>
</thead>
<tbody>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Claude Opus 4</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$15.00</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$75.00</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Claude Sonnet 4</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$3.00</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$15.00</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">GPT-4o</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$2.50</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$10.00</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Gemini Pro</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$1.25</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$5.00</td>
</tr>
<tr style="border-bottom: 1px solid var(--border)">
<td style="padding: 10px 16px">Deepseek V3</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$0.27</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$1.10</td>
</tr>
<tr>
<td style="padding: 10px 16px">Llama 3.1 70B</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$0.59</td>
<td style="padding: 10px 16px; text-align: right; color: var(--muted)">$0.79</td>
</tr>
</tbody>
</table>
</div>
<p style="color: var(--subtle); font-size: 12px; margin-top: 8px; text-align: center">
Prices shown are pass-through costs. BYO keys: 1% management fee. Cached reads up to 90%
cheaper.
</p>
</div>
</div>
</section>
<!-- FAQ -->
<section id="faq" style="border-top: 1px solid var(--border)">
<div class="section-inner reveal">
<div class="section-label" style="text-align: center">FAQ</div>
<h2 class="section-title" style="text-align: center">Frequently Asked Questions</h2>
<p class="section-desc" style="text-align: center; margin: 0 auto 48px">
Everything you need to know about getting started.
</p>
<div class="faq-list">
<details class="faq-item">
<summary>How does the $5 free credit work?</summary>
<div class="faq-answer">
Every new account receives $5 in free credit upon signup. This covers cloud compute,
AI model usage, and all platform features. No credit card required. The credit is
enough to run a bot for several hours or experiment with all 15 personas and 52+
skills.
</div>
</details>
<details class="faq-item">
<summary>Can I bring my own API keys?</summary>
<div class="faq-answer">
Yes! You can use your own API keys from OpenAI, Anthropic, Google, and other
providers. When using BYO keys, we charge a 1% cloud management fee instead of
per-token pricing. This gives you full control over your AI costs while still
benefiting from Hanzo's infrastructure.
</div>
</details>
<details class="faq-item">
<summary>Which platforms are supported?</summary>
<div class="faq-answer">
Hanzo Bot deploys natively to Discord, Slack, Telegram, WhatsApp, X/Twitter, iMessage,
and the web. It also integrates with 608+ business tools including Google Sheets,
GitHub, Salesforce, HubSpot, Notion, and many more via the automation engine.
</div>
</details>
<details class="faq-item">
<summary>Is Hanzo Bot open source?</summary>
<div class="faq-answer">
Yes. The core bot framework is fully open source on GitHub at github.com/hanzoai/bot.
You can self-host, modify, and contribute. The managed cloud service adds hosting,
scaling, monitoring, and enterprise features on top of the open source core.
</div>
</details>
<details class="faq-item">
<summary>What's the difference between Cloud and Always-On?</summary>
<div class="faq-answer">
Cloud ($1/hr per bot) runs your agents on shared infrastructure with auto-scaling —
you pay only when active. Always-On ($499/mo) gives you a dedicated Mac instance
running 24/7 with full desktop access, native apps, and the ability to log into your
own services.
</div>
</details>
<details class="faq-item">
<summary>How do I deploy a bot?</summary>
<div class="faq-answer">
Three ways: (1) Use the web dashboard at hanzo.bot to configure and launch visually,
(2) Use the CLI with <code>npx hanzo-bot deploy</code> for developer workflows, or (3)
Use the Hanzo App desktop client for a native experience. All methods support
one-click deployment to Hanzo Cloud.
</div>
</details>
</div>
</div>
</section>
<!-- CTA -->
<section class="cta-section reveal">
<h2>Launch Your Dashboard</h2>
<p>Your AI workforce is ready. Start deploying agents in minutes.</p>
<div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap">
<a href="/chat?onboarding=1" class="btn-primary btn-lg">Get Started Free →</a>
<a href="/overview" class="btn-outline btn-lg">Launch Dashboard</a>
</div>
</section>
<!-- FOOTER -->
<footer class="footer">
<div class="footer-inner">
<div class="footer-grid">
<div class="footer-brand">
<div class="footer-logo">
<svg viewBox="0 0 67 67" xmlns="http://www.w3.org/2000/svg">
<path d="M22.21 67V44.6369H0V67H22.21Z" fill="#fff" />
<path d="M0 44.6369L22.21 46.8285V44.6369H0Z" fill="#fff" />
<path
d="M66.7038 22.3184H22.2534L0.0878906 44.6367H44.4634L66.7038 22.3184Z"
fill="#fff"
/>
<path d="M22.21 0H0V22.3184H22.21V0Z" fill="#fff" />
<path d="M66.7198 0H44.5098V22.3184H66.7198V0Z" fill="#fff" />
<path d="M66.6753 22.3185L44.5098 20.0822V22.3185H66.6753Z" fill="#fff" />
<path d="M66.7198 67V44.6369H44.5098V67H66.7198Z" fill="#fff" />
</svg>
<span>Hanzo</span>
</div>
<p>Build, deploy, and manage autonomous AI agents across every platform.</p>
<div class="footer-social">
<a href="https://x.com/hanaborteam" aria-label="X"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
/></svg
></a>
<a href="https://linkedin.com/company/hanzo-ai" aria-label="LinkedIn"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
/></svg
></a>
<a href="https://youtube.com/@hanzoai" aria-label="YouTube"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
/></svg
></a>
<a href="https://discord.gg/XthHQQj" aria-label="Discord"
><svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M20.317 4.37a19.791 19.791 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128 10.2 10.2 0 00.372-.292.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.01c.12.098.246.198.373.292a.077.077 0 01-.006.127 12.299 12.299 0 01-1.873.892.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03z"
/></svg
></a>
</div>
</div>
<div class="footer-col">
<h4>Products</h4>
<a href="https://hanzo.ai">Hanzo AI</a>
<a href="https://hanzo.app">Hanzo App</a>
<a href="https://hanzo.bot">Hanzo Bot</a>
<a href="https://hanzo.ai/dev">Hanzo Dev</a>
<a href="https://hanzo.ai/cloud">Hanzo Cloud</a>
<a href="https://hanzo.app/download">Desktop App</a>
<a href="/book">The Hanzo Book</a>
</div>
<div class="footer-col">
<h4>Developers</h4>
<a href="https://docs.hanzo.bot">Documentation</a>
<a href="https://github.com/hanzoai/bot">GitHub</a>
<a href="https://docs.hanzo.bot/api">API Reference</a>
<a href="https://skills.hanzo.bot">Skills Hub</a>
<a href="https://docs.hanzo.bot/cli">CLI Reference</a>
</div>
<div class="footer-col">
<h4>Solutions</h4>
<a href="#">Customer Support</a>
<a href="#">Developer Operations</a>
<a href="#">Marketing</a>
<a href="#">Finance</a>
<a href="#">Security</a>
<a href="#">Enterprise</a>
</div>
<div class="footer-col">
<h4>Company</h4>
<a href="https://hanzo.ai/about">About</a>
<a href="https://hanzo.ai/blog">Blog</a>
<a href="https://hanzo.ai/careers">Careers</a>
<a href="https://hanzo.ai/contact">Contact</a>
<a href="https://hanzo.ai/privacy">Privacy</a>
<a href="https://hanzo.ai/terms">Terms</a>
<a href="https://status.hanzo.ai">Status</a>
</div>
</div>
<div class="footer-bottom">
<span>© 2016–2026 Hanzo Industries. All rights reserved.</span>
<span>hanzo.ai</span>
</div>
</div>
</footer>
<!-- CHAT WIDGET -->
<button class="chat-fab" id="chatFab" aria-label="Chat with AI">🥷</button>
<div class="chat-window" id="chatWindow">
<div class="chat-header">
<h3>🥷 Hanzo Bot</h3>
<button id="chatClose">✕</button>
</div>
<div class="chat-messages" id="chatMessages">
<div class="chat-msg bot">
Hi! I'm Hanzo Bot. Ask me anything about deploying AI agents, skills, pricing, or getting
started.
</div>
</div>
<div class="chat-input-wrap">
<input class="chat-input" id="chatInput" placeholder="Ask anything..." autocomplete="off" />
<button class="chat-send" id="chatSend">→</button>
</div>
</div>
<script>
// Scroll reveal
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add("visible");
observer.unobserve(e.target);
}
});
},
{ threshold: 0.1 },
);
document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
// Staggered children reveal
const staggerObserver = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
const children = e.target.querySelectorAll(".stagger-child");
children.forEach((child, i) => {
child.style.transitionDelay = `${i * 0.1}s`;
child.classList.add("visible");
});
staggerObserver.unobserve(e.target);
}
});
},
{ threshold: 0.1 },
);
document
.querySelectorAll(".hiw-flow, .security-grid")
.forEach((el) => staggerObserver.observe(el));
// Chat widget
const fab = document.getElementById("chatFab");
const win = document.getElementById("chatWindow");
const closeBtn = document.getElementById("chatClose");
const input = document.getElementById("chatInput");
const sendBtn = document.getElementById("chatSend");
const msgs = document.getElementById("chatMessages");
fab.addEventListener("click", () => {
win.classList.toggle("open");
if (win.classList.contains("open")) input.focus();
});
closeBtn.addEventListener("click", () => win.classList.remove("open"));
function addMsg(text, cls) {
const d = document.createElement("div");
d.className = "chat-msg " + cls;
d.textContent = text;
msgs.appendChild(d);
msgs.scrollTop = msgs.scrollHeight;
}
async function sendChat() {
const text = input.value.trim();
if (!text) return;
addMsg(text, "user");
input.value = "";
try {
const res = await fetch("https://api.hanzo.ai/v1/chat/completions", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer hz_widget_public",
},
body: JSON.stringify({
model: "zen-eco-4b",
messages: [
{
role: "system",
content:
"You are Hanzo Bot, an AI assistant on the Hanzo Bot landing page. Help users understand how to deploy AI agents, available skills (52+), personas (15 specialist agents: dev, des, opera, mark, su, art, mu, data, core, fin, sec, algo, db, cal, chat), pricing ($5 free credit, Starter $20/mo, Cloud $1/hr per bot, Always-On $499/mo), prefunded account credits, Web3 features (DID identities via hanzo.id, integrated wallets, on-chain payments, crypto rails), and the Hanzo ecosystem (hanzo.ai, hanzo.app, hanzo.bot, hanzo.id). Keep responses concise and helpful.",
},
{ role: "user", content: text },
],
max_tokens: 400,
temperature: 0.7,
}),
});
const data = await res.json();
addMsg(
data.choices?.[0]?.message?.content ||
"Sorry, I could not process that. Try launching the dashboard for full agent capabilities.",
"bot",
);
} catch (e) {
addMsg(
"I'm having trouble connecting. Try launching the dashboard to chat with a full agent.",
"bot",
);
}
}
sendBtn.addEventListener("click", sendChat);
input.addEventListener("keydown", (e) => {
if (e.key === "Enter") sendChat();
});
// Duplicate integration logos for seamless marquee
const track = document.getElementById("integrationTrack");
if (track) {
track.innerHTML += track.innerHTML;
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach((a) => {
a.addEventListener("click", (e) => {
const target = document.querySelector(a.getAttribute("href"));
if (target) {
e.preventDefault();
target.scrollIntoView({ behavior: "smooth", block: "start" });
}
});
});
</script>
</body>
</html>