mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +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.
37 lines
1.6 KiB
TypeScript
37 lines
1.6 KiB
TypeScript
'use client'
|
|
|
|
import { useI18n } from '@hanzo/i18n/react'
|
|
import { Text, View, XStack } from '@/components/ui'
|
|
import { backerLogos, MARK_HEIGHT } from '@/lib/constants/partner-logos'
|
|
|
|
/**
|
|
* Under the hero, one row: who backs Hanzo, Techstars first, then every partner
|
|
* that backed it with investment or credits (lib/constants/partner-logos).
|
|
* Every mark is drawn in the page's ink. Techstars' asset fills only the middle
|
|
* third of its box, so it is drawn taller than a wordmark to read at the same size.
|
|
*/
|
|
export default function Backing() {
|
|
const { t } = useI18n()
|
|
return (
|
|
<View render="section" aria-label={t('Backed by')} width="100%" maxW={1240} mx="auto" px="var(--page-gutter)" py={24} borderTopWidth={1} borderBottomWidth={1} borderColor="var(--white-06)">
|
|
<XStack items="center" justify="center" flexWrap="wrap" columnGap={32} rowGap={14} maxW="100%" minW={0}>
|
|
<Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
|
|
{t('Backed by')}
|
|
</Text>
|
|
{backerLogos.map((l) => (
|
|
<View
|
|
key={l.name}
|
|
render={<a href={l.href} target="_blank" rel="noopener noreferrer" aria-label={l.name} />}
|
|
opacity={0.8}
|
|
hoverStyle={{ opacity: 1 }}
|
|
filter="brightness(0) invert(1)"
|
|
$theme-light={{ filter: 'brightness(0)' }}
|
|
>
|
|
<View render={<img src={l.src} alt={t('{name} logo', { name: l.name })} loading="lazy" />} display="block" height={l.name === 'Techstars' ? 60 : MARK_HEIGHT} width="auto" />
|
|
</View>
|
|
))}
|
|
</XStack>
|
|
</View>
|
|
)
|
|
}
|