mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekayandGitHub
e20dc71ad8
The product pages from /s3 to /zap, /university and its course data, /trust, /security, /sdks, /support, /tasks, /startups, /sms-opt-in, the buying specialist, Zen, Kai's guide, Studio, the settings pages, and the shared sales, solutions, zap and ui pieces. Client code draws with t(), server components with <T>, copy held as data is marked with phrase() and drawn through t() where it lands. A link or a figure inside a sentence is a value, so a translator reorders the whole sentence. Rebased on main: every page main moved onto Fold or Steps keeps main's layout, with its words wrapped (label, title, lede, points). Steps now draws a step's body through t, as it already drew the title. Settings keeps main's usage panel, refresh, rewards wallet and sign-in wallet rows, each label wrapped. Left English: the skills page's install line (a command and two URLs), and the solution eyebrow and sibling heading built from a kind label. Claude-Session: https://claude.ai/code/session_015XYKLjZtDTJEnMo4eK3AFH
101 lines
5.5 KiB
TypeScript
101 lines
5.5 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* NO TAILWIND. `Band` and `Head` carry the section frame and the centred head;
|
|
* the diagram frame and the three figures under it are gui props over
|
|
* @hanzo/design's tokens.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import { Box, View } from '@hanzo/ui'
|
|
import { Grid as Columns } from '@hanzo/ui/grid'
|
|
import { Band, Head, Words } from '@/components/marketing/band'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
|
|
/** The drawing's ink, and the names inside it one step brighter. */
|
|
const RULES = 'color-mix(in oklab, var(--foreground) 80%, transparent)'
|
|
const SOFT = 'color-mix(in oklab, var(--foreground) 70%, transparent)'
|
|
|
|
/** A box's name inside the drawing. */
|
|
function Name({ children }: { children: string }) {
|
|
return <Words color={SOFT}>{children}</Words>
|
|
}
|
|
|
|
/** One figure under the drawing: the ratio, and what it counts. */
|
|
function Figure({ value, caption }: { value: string; caption: string }) {
|
|
return (
|
|
<Box $platform-web={{ textAlign: 'center' }}>
|
|
<Words render="div" mb={8} fontSize="$8" lineHeight="1.2" weight="700" color={SOFT}>{value}</Words>
|
|
<Words render="div" color="var(--muted-foreground)">{caption}</Words>
|
|
</Box>
|
|
)
|
|
}
|
|
|
|
const ZapArchitecture = () => {
|
|
const { t } = useI18n();
|
|
return (
|
|
<Band rule={false} pad="$11" measure={1152} ground="color-mix(in oklab, var(--secondary) 30%, transparent)">
|
|
<Head
|
|
title={t('How it is put together')}
|
|
lede={t('Many agents on one side, many tool servers on the other, one address in the middle.')}
|
|
/>
|
|
|
|
<Words
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} />}
|
|
overflowX="auto"
|
|
rounded="var(--radius-xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
background="color-mix(in oklab, var(--background) 50%, transparent)"
|
|
p={32}
|
|
fontSize="$2"
|
|
lineHeight="1.4286"
|
|
>
|
|
<Words render="pre" my="1em" whiteSpace="pre" color={RULES}>
|
|
{`┌─────────────────────────────────────────────────────────────────┐
|
|
│ Agent Swarm │
|
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
|
│ │ Agent 1 │ │ Agent 2 │ │ Agent 3 │ │ Agent N │ ... │
|
|
│ └────┬────┘ └────┬────┘ └────┬────┘ └────┬────┘ │
|
|
│ │ │ │ │ │
|
|
│ └────────────┴─────┬──────┴────────────┘ │
|
|
│ │ │
|
|
│ ▼ │
|
|
│ ┌───────────────────────┐ │
|
|
│ │ `}<Name>ZAP Gateway</Name>{` │ │
|
|
│ │ zap://localhost:9999│ │
|
|
│ │ │ │
|
|
│ │ • Schema Federation │ │
|
|
│ │ • Request Routing │ │
|
|
│ │ • Capability Control │ │
|
|
│ └───────────┬───────────┘ │
|
|
│ │ │
|
|
│ ┌──────────────────┼──────────────────┐ │
|
|
│ │ │ │ │
|
|
│ ▼ ▼ ▼ │
|
|
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
|
|
│ │`}<Name>MCP Srv</Name>{` │ │`}<Name>ZAP Srv</Name>{` │ │`}<Name>MCP Srv</Name>{` │ │
|
|
│ │ GitHub │ │ Native │ │ Slack │ ... │
|
|
│ └─────────┘ └─────────┘ └─────────┘ │
|
|
└─────────────────────────────────────────────────────────────────┘`}
|
|
</Words>
|
|
</Words>
|
|
|
|
<View
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} />}
|
|
display="block"
|
|
mt={32}
|
|
>
|
|
<Columns columns={{ min: 224, max: 3 }} gap={24}>
|
|
<Figure value="N:1" caption={t('Every agent, one address')} />
|
|
<Figure value="1:M" caption={t('One schema over every backend')} />
|
|
<Figure value="0" caption={t('Copies of the same tool server')} />
|
|
</Columns>
|
|
</View>
|
|
</Band>
|
|
);
|
|
};
|
|
|
|
export default ZapArchitecture;
|