mirror of
https://github.com/hanzoai/gui.git
synced 2026-11-03 00:13:54 +00:00
zeekay
f37a62f7ce
Every Hanzo surface reads @hanzo/design, @hanzo/tokens, @hanzo/appearance and @hanzo/font; this site set its own type, so its header, ramp and ground drifted from hanzo.ai and a reader's appearance settings reached nothing here. Gui's $n ladder now resolves through the design ramp, dark is the default, the chrome stays grey while the landing sections keep their tints, and everything below the fold loads as it nears the viewport. getFontSize reads the px fallback of a var() size, which is what keeps icon sizing numeric once sizes live on a ramp.
115 lines
3.2 KiB
TypeScript
115 lines
3.2 KiB
TypeScript
import { ChevronRight, Code, Cpu, Layers } from '@hanzogui/lucide-icons-2'
|
|
import { memo } from 'react'
|
|
import type { YStackProps } from '@hanzo/gui'
|
|
import { H3, Paragraph, XStack, YStack } from '@hanzo/gui'
|
|
import { Link } from '~/components/Link'
|
|
|
|
import { CodeInline } from '~/components/Code'
|
|
import { ContainerLarge } from '~/components/Containers'
|
|
import { IconStack } from './IconStack'
|
|
|
|
export const HomeHeroBelow = memo(() => {
|
|
return (
|
|
<>
|
|
<YStack position="relative" z={1000} py="$4" pt="$6" pb="$10">
|
|
<HeroBelowContent />
|
|
</YStack>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export const HeroBelowContent = memo(() => {
|
|
return (
|
|
<ContainerLarge>
|
|
<XStack
|
|
flex={1}
|
|
overflow="hidden"
|
|
flexBasis="auto"
|
|
maxW="100%"
|
|
gap="$8"
|
|
flexWrap="nowrap"
|
|
px="$2"
|
|
mb={-8}
|
|
py="$1"
|
|
$sm={{ flexDirection: 'column' }}
|
|
$gtSm={{
|
|
px: '$6',
|
|
}}
|
|
>
|
|
<Section theme="red">
|
|
<XStack items="center" gap="$4">
|
|
<IconStack>
|
|
<Code size={12} color="var(--color9)" />
|
|
</IconStack>
|
|
<TitleLink href="/docs/core/configuration">Core</TitleLink>
|
|
</XStack>
|
|
<Paragraph opacity={0.7} size="$5">
|
|
A style library for React and React Native with a large typed superset of the
|
|
React Native style API, with no outside dependencies in ~24KB.
|
|
</Paragraph>
|
|
</Section>
|
|
|
|
<Section theme="gray">
|
|
<XStack items="center" gap="$4">
|
|
<IconStack>
|
|
<Cpu size={16} color="var(--color9)" />
|
|
</IconStack>
|
|
<TitleLink href="/docs/intro/why-a-compiler">Static</TitleLink>
|
|
</XStack>
|
|
<Paragraph opacity={0.7} size="$5">
|
|
An optimizer that makes Core faster via partial analysis, CSS extraction, tree
|
|
flattening, and dead code elimination. Next, Webpack, Vite, Babel, Metro.
|
|
</Paragraph>
|
|
</Section>
|
|
|
|
<Section theme="blue">
|
|
<XStack items="center" gap="$4">
|
|
<IconStack>
|
|
<Layers size={16} color="var(--color9)" />
|
|
</IconStack>
|
|
<TitleLink href="/docs/components/stacks">Gui</TitleLink>
|
|
</XStack>
|
|
<Paragraph opacity={0.7} size="$5">
|
|
All the components you need, cross-platform and composable. Compound Component
|
|
APIs, styled or unstyled, easy to size, theme, and more.
|
|
</Paragraph>
|
|
</Section>
|
|
</XStack>
|
|
</ContainerLarge>
|
|
)
|
|
})
|
|
|
|
const TitleLink = ({ href, children, ...props }: any) => {
|
|
return (
|
|
<Link asChild href={href}>
|
|
<H3 cursor="pointer" color="$color" my="$2">
|
|
<CodeInline
|
|
cursor="pointer"
|
|
fontFamily="$pixel"
|
|
bg="$color2"
|
|
px="$1.5"
|
|
py="$1.5"
|
|
hoverStyle={{
|
|
backgroundColor: '$color3',
|
|
}}
|
|
size="$9"
|
|
fontSize="$6"
|
|
ls={0}
|
|
{...props}
|
|
>
|
|
{children} <ChevronRight size={12} />
|
|
</CodeInline>
|
|
</H3>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
const Section = (props: YStackProps) => (
|
|
<YStack
|
|
width="33%"
|
|
$sm={{ width: 'auto', maxW: 500, mx: 'auto' }}
|
|
shrink={1}
|
|
{...props}
|
|
/>
|
|
)
|