hanzo.ai/components/home/Enso.tsx

'use client'

import { Text, YStack } from '@hanzo/ui'
import { GUTTER_X, RHYTHM } from './band'
import Templates from './Templates'
import { Eyebrow, Title } from '@hanzo/ui/marketing'

/**
 * Apps: a finished product to open and edit, straight after the fold has
 * built one. 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>
        <Title mt="$3.5">Start from a product.</Title>
        {/* 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>
  )
}