mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
Every import, the catalog pin and the docs name @hanzo/app and github.com/hanzoai/app. lib/rooms.ts is lib/app.ts and components/rooms.tsx is components/app.tsx.
81 lines
3.0 KiB
TypeScript
81 lines
3.0 KiB
TypeScript
import { dev } from '@hanzo/app/lib/host'
|
|
import { Grid } from '@hanzo/ui/grid'
|
|
import { Band, Head } from './band'
|
|
import { CardBody, CardLink, CardTitle } from './plate'
|
|
import { CLOUD } from './nav-data'
|
|
|
|
/**
|
|
* What Hanzo is, in the four things you can do with it.
|
|
*
|
|
* The order is the arc a company actually walks: ask it something, have it
|
|
* build the thing, run the thing here, or take the thing home. Each card is a
|
|
* verb and one sentence of specifics, because a stranger recognises themselves
|
|
* in a verb and skims a paragraph.
|
|
*
|
|
* NO COUNT IN THE HEADING. "Four ways in" is a fact about today's card list and
|
|
* breaks the moment a fifth is right; the heading states the arc instead, which
|
|
* is the thing that is not going to change. Same rule the products menu follows
|
|
* — membership is measured, never written down beside itself.
|
|
*
|
|
* NO NUMBER IN A CARD either, and no page above this one states one any more:
|
|
* the band that carried the model count is gone, so a "500+" typed here would
|
|
* be a figure with no registry behind it — the drift the derived one existed to
|
|
* prevent, arriving by the other route. "Every model" is true whatever the
|
|
* registry does, and the catalog is where a reader goes to count.
|
|
*
|
|
* Inline style over tokens throughout, never a utility class: this site's
|
|
* Tailwind count is a ratchet that may not grow (scripts/tailwind-floor.mjs).
|
|
*
|
|
* `CARD_LINK` arrives finished and is NOT spread here. This file is a Server
|
|
* Component and `plate` is a client module, so a spread of one of its constants
|
|
* silently yields nothing — see the note beside that export.
|
|
*/
|
|
|
|
type Way = { verb: string; what: string; href: string }
|
|
|
|
const WAYS: Way[] = [
|
|
{
|
|
verb: 'Ask',
|
|
what: 'Use every model through one conversation and one API. Your app stays as it is.',
|
|
href: '/models',
|
|
},
|
|
{
|
|
verb: 'Build',
|
|
what: 'Give Dev a goal. It reads the repo, makes the change, runs the tests, and prepares it to ship.',
|
|
href: dev(),
|
|
},
|
|
{
|
|
verb: 'Deploy',
|
|
what: 'Launch with data, identity, secrets, storage, search, and events already connected.',
|
|
href: CLOUD,
|
|
},
|
|
{
|
|
verb: 'Own it',
|
|
what: 'Take the same open stack to your Kubernetes or laptop. Keep the control plane and data where you choose.',
|
|
href: '/open-source',
|
|
},
|
|
]
|
|
|
|
export function Ways() {
|
|
return (
|
|
<Band>
|
|
<Head
|
|
title="One system from the first prompt to production."
|
|
lede="Ask a question, ship a change, launch a product, or run the stack yourself. Every path opens onto the same models, agents, data, and policy."
|
|
/>
|
|
{/* 220 puts four across a laptop, two on a tablet and one on a phone,
|
|
without a breakpoint being named anywhere. */}
|
|
<Grid columns={{ min: 220, max: 4 }} gap={16} pt={40}>
|
|
{WAYS.map((w) => (
|
|
<CardLink key={w.verb} href={w.href}>
|
|
<CardTitle render="h3">{w.verb}</CardTitle>
|
|
<CardBody>{w.what}</CardBody>
|
|
</CardLink>
|
|
))}
|
|
</Grid>
|
|
</Band>
|
|
)
|
|
}
|
|
|
|
export default Ways
|