mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
7f6e7fd17e
Start building on the cloud, realtime and pricing pages, and Log in > API Platform, open platform.hanzo.ai/api-keys, where a key is made. Developers > Resources gains Claude Code, Codex, Cursor (the platform's Accelerate coding tools page) and Learn gains Coding agents (the docs page).
83 lines
3.0 KiB
TypeScript
83 lines
3.0 KiB
TypeScript
'use client'
|
|
|
|
import React from "react";
|
|
import { motion } from "@/components/motion";
|
|
import { Activity, ArrowRight, ChevronRight } from "lucide-react";
|
|
import { YStack, XStack } from '@hanzo/ui'
|
|
import { KEYS } from '@/components/home/nav-data'
|
|
import { Action, Chip, Lede, Title } from '@hanzo/ui/marketing'
|
|
|
|
/**
|
|
* The badge over the ask. `Chip` owns the outline, the radius and the 8px
|
|
* mark-to-label gap; what is left here is this section's own fill and edge, and
|
|
* the `alignSelf` an inline-flex badge needs once its parent is a flex column
|
|
* rather than a `text-align: center` block.
|
|
*/
|
|
const BADGE = { self: "center", mb: 24, px: 12, py: 4, bg: "color-mix(in oklab, var(--primary) 10%, transparent)", borderColor: "color-mix(in oklab, var(--pure-white) 30%, transparent)" } as const
|
|
|
|
/** Stretched on a phone and shrink-wrapped from 640 — the row states both, so
|
|
* a control centres its own label rather than sitting left in a full-width box. */
|
|
const CONTROL = { justify: "center" } as const
|
|
|
|
const CallToAction = () => {
|
|
return (
|
|
<YStack
|
|
render="section"
|
|
py={80}
|
|
px={16}
|
|
$sm={{ px: 24 }}
|
|
$lg={{ px: 32 }}
|
|
>
|
|
<YStack width="100%" maxW={896} mx="auto" $platform-web={{ textAlign: 'center' }}>
|
|
<Chip
|
|
render={<motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} />}
|
|
{...BADGE}
|
|
>
|
|
<Activity width={16} height={16} color="var(--foreground)" />
|
|
<span>Open a stream</span>
|
|
</Chip>
|
|
|
|
<Title
|
|
render={<motion.h2 initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} />}
|
|
quiet
|
|
mb={24}
|
|
>
|
|
Two calls and the page keeps itself current
|
|
</Title>
|
|
|
|
<Lede
|
|
render={<motion.p initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} />}
|
|
mb={32}
|
|
mt="$3.5"
|
|
>
|
|
Mint a grant, open the stream, name a collection. No credit card to start.
|
|
</Lede>
|
|
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: 0.3 }}
|
|
>
|
|
<XStack
|
|
flexDirection="column"
|
|
items="stretch"
|
|
justify="center"
|
|
gap={16}
|
|
$sm={{ flexDirection: 'row', items: 'center' }}
|
|
>
|
|
<Action href={KEYS} fill {...CONTROL}>
|
|
Start Building <ArrowRight width={20} height={20} />
|
|
</Action>
|
|
<Action href="https://docs.hanzo.ai" {...CONTROL}>
|
|
Documentation <ChevronRight width={20} height={20} />
|
|
</Action>
|
|
</XStack>
|
|
</motion.div>
|
|
</YStack>
|
|
</YStack>
|
|
);
|
|
};
|
|
|
|
export default CallToAction;
|