mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
0f5536b707
Every word the landing, the header menus, the phone sheet, the footer,
the help corner and the way in (sign-in, sign-up, the reset, the
invitation, the callback, onboarding, the 404) write goes through
@hanzo/i18n's t(): one sentence is one message, its figures, names and
links arguments; copy written as data is phrase('…') where written and
t(label) where drawn. Plans, the chart, the API states and the lines
lib/kai and lib/enso build for the landing do the same.
Right to left: <html lang dir> is set before the first paint (the
package's bootScript first in the head); a figure, clock, range or
price outside a sentence is isolated; sides are logical gui props, the
layout's [data-join] corners logical, a bar grows from the start;
arrows along the line mirror (Onward for "words ->" links). The repo
dates read in the reader's language.
Gates select by slot, never by an English label (rtl, help). New gate
translated.spec.ts: in Arabic the landing at 1440 and 390, every menu
open, the phone sheet, sign-in, sign-up and the app signed in hold no
authored English, nothing scrolls sideways, every range is isolated;
French the same for English's commonest words. What another package
draws with no words prop is listed by name (@hanzo/ui's Footer label,
@hanzo/build's composer row and suggestions).
@hanzo/i18n 0.5.3 (the catalogs: 1,443 keys, every offered locale
complete), @hanzo/app 0.2.1 (the app's words). The link gate imports
the terms versions from @hanzo/app, the one SDK main now resolves.
78 lines
3.2 KiB
TypeScript
78 lines
3.2 KiB
TypeScript
'use client'
|
|
|
|
import { ArrowRight } from 'lucide-react'
|
|
import { phrase } from '@hanzo/i18n'
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
import { HanzoMark } from '@hanzogui/shell'
|
|
import { Text, View, XStack, YStack } from '@/components/ui'
|
|
import { Action } from '@hanzo/ui/marketing'
|
|
import { AGENCY } from './nav-data'
|
|
|
|
/** What Hanzo Agency brings: its engineers in your team, on Hanzo's stack, and the agency rows of @hanzo/plans. */
|
|
const HELPS = [
|
|
phrase('Forward-deployed engineers inside your team'),
|
|
phrase('Agents and apps built on the Hanzo stack, then handed to you'),
|
|
phrase('A creative director and project manager on every engagement'),
|
|
phrase('Strategy for putting AI to work across the business'),
|
|
]
|
|
|
|
/**
|
|
* The landing's last word before the questions: for a company that wants it
|
|
* built with them, Hanzo Agency's forward-deployed engineers work inside the
|
|
* team, on the same stack the page describes, and hand over what ships. One
|
|
* way on: hanzo.agency.
|
|
*/
|
|
export default function Agency() {
|
|
const { t } = useI18n()
|
|
return (
|
|
<View render="section" id="agency" aria-labelledby="agency-title" width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" pb={56} $md={{ pb: 80 }}>
|
|
<XStack
|
|
flexWrap="wrap"
|
|
gap={32}
|
|
items="center"
|
|
justify="space-between"
|
|
p={28}
|
|
rounded={24}
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="$panel"
|
|
$md={{ p: 48 }}
|
|
$platform-web={{ borderRadius: '24px' }}
|
|
>
|
|
<YStack gap={16} flex={1} minW={280} maxW={600}>
|
|
<XStack items="center" gap={12} $md={{ gap: 14 }}>
|
|
<HanzoMark size={30} />
|
|
<Text render="h2" id="agency-title" fontSize="$9" lineHeight="$9" fontWeight="600" color="var(--foreground)" whiteSpace="nowrap" $md={{ fontSize: '$11', lineHeight: '$11' }} $platform-web={{ letterSpacing: '-0.03em' }}>
|
|
Hanzo Agency
|
|
</Text>
|
|
</XStack>
|
|
<Text render="p" fontSize="$6" lineHeight="$6" fontWeight="500" color="var(--foreground)" $md={{ fontSize: '$7', lineHeight: '$7' }}>
|
|
{t('Forward-deployed engineers, building on our stack inside your company.')}
|
|
</Text>
|
|
<Text render="p" fontSize="$4" lineHeight="1.55rem" color="var(--muted-foreground)">
|
|
{t('Our engineers join your team, build your agents and apps on the same stack you see above, and hand you what ships.')}
|
|
</Text>
|
|
</YStack>
|
|
<YStack gap={20} flex={1} minW={260} maxW={420}>
|
|
<YStack gap={10}>
|
|
{HELPS.map((h) => (
|
|
<XStack key={h} gap={10} items="flex-start">
|
|
<View width={6} height={6} mt={8} shrink={0} rounded={9999} bg="var(--foreground)" $platform-web={{ borderRadius: '9999px' }} />
|
|
<Text fontSize="$3" lineHeight="1.4rem" color="var(--foreground)">
|
|
{t(h)}
|
|
</Text>
|
|
</XStack>
|
|
))}
|
|
</YStack>
|
|
<XStack>
|
|
<Action href={AGENCY} target="_blank" rel="noopener noreferrer" fill>
|
|
{t('Learn more')}
|
|
<ArrowRight size={16} aria-hidden data-i18n-mirror="" />
|
|
</Action>
|
|
</XStack>
|
|
</YStack>
|
|
</XStack>
|
|
</View>
|
|
)
|
|
}
|