mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekayandGitHub
3df66c3990
Pages from /machines to /risk, the model pages, and the kits they are made of
(page-kit, ProductLanding, LayerPage, Stack, the models kit, band's Head) mark
authored copy where it is written and draw it in the reader's language. A server
page marks a literal phrase('…') or wraps it in <T>; a client page calls t. The
kits translate a string prop through useSay (components/marketing/say), so a
page passes phrase('…') and markup passes as written. An arrow that points
turns over right to left (data-i18n-mirror).
Rebased on main: the fold-based heroes (Fold, PageHero, MachinesHero, the
product and layer pages) keep main's structure and copy, with their label,
title and lede marked phrase. /platform is main's CloudLanding; the deleted
/platform/layers and the old referral components stay deleted.
Claude-Session: https://claude.ai/code/session_015XYKLjZtDTJEnMo4eK3AFH
91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { Cta, Page, PageHero, Prose, Section } from '@/components/marketing/page-kit'
|
|
import type { Layer, Link } from '@/lib/layers'
|
|
import { XStack } from '@/components/ui'
|
|
import { Stack } from './Stack'
|
|
import { Code } from '@/components/code'
|
|
import { Action } from '@hanzo/ui/marketing'
|
|
import { TRY } from '@/components/home/nav-data'
|
|
import { phrase } from '@hanzo/i18n'
|
|
import { T } from '@hanzo/i18n/react'
|
|
|
|
/** A row of links that wraps: the docs, or the pages a layer is made of. */
|
|
function Links({ links }: { links: Link[] }) {
|
|
return (
|
|
<XStack flexWrap="wrap" gap="$3">
|
|
{links.map((l) => (
|
|
<Cta key={l.href} href={l.href}>
|
|
{l.label}
|
|
</Cta>
|
|
))}
|
|
</XStack>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* One layer of Hanzo OS, and the one template every /products/<id> page is:
|
|
* what the layer is beside where it sits in the stack, the operations that
|
|
* serve it, a request to paste, what measures it, and where to read more.
|
|
*/
|
|
export function LayerPage({ layer }: { layer: Layer }) {
|
|
return (
|
|
<Page>
|
|
<PageHero
|
|
eyebrow={layer.rail ? phrase('Hanzo OS · beside every layer') : 'Hanzo OS'}
|
|
title={layer.name}
|
|
lede={layer.line}
|
|
visual={<Stack current={layer.id} title="Hanzo OS" />}
|
|
>
|
|
<Action href={TRY.href} fill>
|
|
<T>{TRY.label}</T>
|
|
</Action>
|
|
{layer.docs[0] ? <Action href={layer.docs[0].href}><T>{layer.docs[0].label}</T></Action> : null}
|
|
</PageHero>
|
|
<Section>
|
|
<Prose>
|
|
<p><T>{layer.body}</T></p>
|
|
</Prose>
|
|
</Section>
|
|
<Section title="API" lede={phrase('Operations on api.hanzo.ai. One key reaches every layer.')}>
|
|
<Prose>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th><T>Method</T></th>
|
|
<th><T>Path</T></th>
|
|
<th><T>What it does</T></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{layer.ops.map((op) => (
|
|
<tr key={`${op.method} ${op.path}`}>
|
|
<td>
|
|
<code>{op.method}</code>
|
|
</td>
|
|
<td>
|
|
<code>{op.path}</code>
|
|
</td>
|
|
<td><T>{op.does}</T></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</Prose>
|
|
</Section>
|
|
<Section title={phrase('Try it')}>
|
|
<Code lang="bash" code={layer.sample} rounded="var(--radius-lg)" borderWidth={1} borderColor="var(--border)" />
|
|
</Section>
|
|
{layer.proofs?.length ? (
|
|
<Section title={phrase('Measured')}>
|
|
<Links links={layer.proofs} />
|
|
</Section>
|
|
) : null}
|
|
<Section title={phrase('Docs')}>
|
|
<Links links={layer.docs} />
|
|
</Section>
|
|
<Section title={phrase('On this site')}>
|
|
<Links links={layer.pages} />
|
|
</Section>
|
|
</Page>
|
|
)
|
|
}
|