mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
a1e9f387b2
The page opened on a heading and a line, then said Start from a product a second time over the carousel. The carousel's heading is the page's one h1 now, so the finished products are what a reader meets first.
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import { Text, YStack } from '@hanzo/ui'
|
|
import { GUTTER_X, RHYTHM } from './band'
|
|
import Templates from './Templates'
|
|
import { Display, Eyebrow } from '@hanzo/ui/marketing'
|
|
|
|
/**
|
|
* /templates' first screen: finished products to open and edit, under the
|
|
* page's one heading. The note under the heading says what a card does, once.
|
|
*
|
|
* A slide, like every `Band`: it fills the screen, its content sits at the
|
|
* middle, and the page settles on its top edge.
|
|
*/
|
|
export default function Enso() {
|
|
return (
|
|
<YStack
|
|
render="section"
|
|
id="enso"
|
|
width="100%"
|
|
minH="100svh"
|
|
justify="center"
|
|
py={RHYTHM}
|
|
overflowX="clip"
|
|
$platform-web={{ scrollSnapAlign: 'start', textAlign: 'center' }}
|
|
>
|
|
<YStack width="100%" maxW={760} mx="auto" px={GUTTER_X} gap="$3.5" items="center">
|
|
<Eyebrow>Templates</Eyebrow>
|
|
<Display mt="$3.5">Start from a product.</Display>
|
|
{/* The note under the heading: 16px on a phone, 18px from a tablet up. */}
|
|
<Text
|
|
render="p"
|
|
display="block"
|
|
maxW="min(52ch, 100%)"
|
|
mb="max(32px, min(5vw, 56px))"
|
|
fontSize="1rem"
|
|
lineHeight="1.65rem"
|
|
$md={{ fontSize: '1.125rem', lineHeight: '1.85rem' }}
|
|
color="var(--muted-foreground)"
|
|
>
|
|
Open one. Edit it in Hanzo.
|
|
</Text>
|
|
</YStack>
|
|
<Templates />
|
|
</YStack>
|
|
)
|
|
}
|