hanzo.ai/components/platform/CallToAction.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { Github } from "@/components/brand"
import { View, YStack } from '@hanzo/ui'
import { Action, Lede, Title } from '@hanzo/ui/marketing'

const CallToAction = () => {
  return (
    <YStack
      render="section"
      position="relative"
      overflow="hidden"
      py={96}
      px={16}
      $sm={{ px: 24 }}
      $lg={{ px: 32 }}
      /* `--black` flips with the theme, so a light page keeps a light ground. */
      bg="var(--black)"
    >
      <YStack 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' }}
        >
          {/* The section heading role, not the page-heading one. This wore
              `display` with `text-3xl md:text-5xl` over the top, which is the
              display rule with two of its three rungs overridden at the call
              site — the exact shape `Title` exists to replace. */}
          <Title mb={24}>
            Start building
          </Title>

          <Lede maxW={768} mx="auto" mb={48} mt="$3.5">
            Hanzo Cloud, the open core the platform runs on, is on GitHub. Clone it and run it.
          </Lede>

          <YStack items="center" gap={16} $sm={{ flexDirection: 'row', justify: 'center' }}>
            {/* The link was NESTED INSIDE a Button, which is a control inside a
                control. `Action` is the site's one button shape and it is an
                anchor here, so the href it always carried is now the thing a
                reader clicks. */}
            <Action href="https://github.com/hanzoai/cloud" fill>
              <Github width={20} height={20} />
              Get on GitHub
            </Action>
          </YStack>
        </View>
      </YStack>
    </YStack>
  );
};

export default CallToAction;