mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
ac64d5d7dd
The owner's spec for a landing page is the models bento's: monochrome, the words left and the art right, no extra prose. The folds carried two to four sentences under each heading, and some a claim, a lede and a list besides. Each now says one line: ProductLanding the tagline where a page states one (the lede still describes it to search), a claim alone where the claim is the line (/payments, /treasury, /zap, the extension), and elsewhere the sentence that says what the thing is. /philosophy's two points, /dns' claim that repeated its title, /calculator's capabilities line and the Spare clauses on /research and /learn go.
58 lines
2.0 KiB
TypeScript
58 lines
2.0 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* NO TAILWIND. Layout is gui props, type is @hanzo/ui's marketing roles
|
|
* (`Display`, `Claim`, `Lede`, `Chip`, `Action`) and the band kit's `Words`, over
|
|
* @hanzo/design's tokens.
|
|
*/
|
|
|
|
import React from "react";
|
|
import { Fold } from "@/components/marketing/fold";
|
|
import { Steps } from "@/components/preview/steps";
|
|
import { phrase } from "@hanzo/i18n";
|
|
import { Zap, ArrowRight } from "lucide-react";
|
|
import { Action } from '@hanzo/ui/marketing'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
|
|
/** The first control carries a faint fill; the other two are the bare outline. */
|
|
const FILLED = { px: 32, bg: "color-mix(in oklab, var(--pure-white) 10%, transparent)", color: "var(--primary-foreground)" } as const
|
|
|
|
const OUTLINED = { px: 32, borderColor: "var(--border)" } as const
|
|
|
|
/** What the protocol is, a fact a step, walked beside the heading. */
|
|
const FACTS = [
|
|
{ title: phrase('No parse'), body: phrase('Read it where it landed.') },
|
|
{ title: phrase('A 16-byte header'), body: phrase('The whole header is sixteen bytes.') },
|
|
{ title: 'Go · Rust · TS', body: phrase('One wire, three readers.') },
|
|
{ title: 'MCP · A2A · ACP', body: phrase('All run on ZAP.') },
|
|
]
|
|
|
|
const ZapHero = () => {
|
|
const { t } = useI18n()
|
|
return (
|
|
<Fold
|
|
label="Zero-Copy Agent Protocol"
|
|
mark={<Zap width={14} height={14} color="currentColor" aria-hidden />}
|
|
title="ZAP"
|
|
claim="The wire format is the data structure"
|
|
actions={
|
|
<>
|
|
<Action href="https://zap-proto.dev/docs/quick-start" {...FILLED}>
|
|
{t('Read the docs')}
|
|
<ArrowRight width={16} height={16} data-i18n-mirror />
|
|
</Action>
|
|
<Action href="https://github.com/zap-proto/papers" {...OUTLINED}>
|
|
{t('Read the Papers')}
|
|
</Action>
|
|
<Action href="https://github.com/zap-proto/spec" {...OUTLINED}>
|
|
GitHub
|
|
</Action>
|
|
</>
|
|
}
|
|
preview={<Steps title="ZAP" icon={<Zap size={12} color="currentColor" />} steps={FACTS} />}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default ZapHero;
|