hanzo.ai/components/extension/HanzoExtensionCTA.tsx

'use client'

/**
 * The ask at the foot of the page.
 *
 * NO TAILWIND. Type is `Title` and `Lede`, the control is `Action`, and the
 * frame is gui props over @hanzo/design's tokens.
 *
 * The control gives up its `shadow-lg`/`hover:shadow-xl`: `Action` is one
 * shape and its hover is the edge, so a second, shadowed weight is exactly what
 * the role exists to prevent.
 */

import { motion } from "@/components/motion";
import { ArrowRight } from "lucide-react";
import { Box, View, XStack } from '@hanzo/ui'
import { Action, Lede, Title } from '@hanzo/ui/marketing'

const HanzoExtensionCTA = () => {
  return (
    <Box
      render="section"
      position="relative"
      overflow="hidden"
      py={96}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
      bg="var(--black)"
    >
      <Box position="relative" z="var(--z-raised)" width="100%" maxW={1024} mx="auto">
        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-100px" }} transition={{ duration: 0.6 }} />}
          display="block"
          $platform-web={{ textAlign: 'center' }}
        >
          <Title quiet mb={24}>
            Not in a store yet
          </Title>
          <Lede maxW={768} mx="auto" mb={40} mt="$3.5">
            Its builds are not public, so there is nothing to install today. Hanzo Chat works in any browser now.
          </Lede>

          <XStack justify="center">
            <Action href="https://chat.hanzo.ai" fill>
              Open Hanzo Chat
              <ArrowRight width={20} height={20} />
            </Action>
          </XStack>
        </View>
      </Box>
    </Box>
  );
};

export default HanzoExtensionCTA;