hanzo.ai/components/payments/HeroSection.tsx

'use client'

import React from "react";
import { motion } from "@/components/motion";
import { CreditCard, Lock, Globe, Zap } from "lucide-react";
import { Disc, FADE } from '@/components/marketing/band'
import { Body, Heading, Tile } from './kit'
import { Box, View, XStack } from '@hanzo/ui'
import { Grid } from '@hanzo/ui/grid'
import { DOCS } from '@/components/home/nav-data'
import { Action, Chip, Display, Lede } from '@hanzo/ui/marketing'

/**
 * The white-to-transparent fill the page's primary button wears. A gradient is
 * the one thing no style prop says, so it is written as the CSS it is and rides
 * `Action`'s shape rather than replacing it.
 */
const FILL = { backgroundImage: "linear-gradient(to right, var(--pure-white), var(--white-10))", bg: "transparent", color: "var(--pure-black)", borderWidth: 0 } as const

const CARDS = [
  { icon: CreditCard, title: "One integration", text: "Cards, wallets, bank debits, buy-now-pay-later and crypto through the same API" },
  { icon: Lock, title: "No card data", text: "Numbers are tokenized in the vault, so this service never holds one" },
  { icon: Globe, title: "Route on outcome", text: "Send each payment to the processor most likely to approve it" },
  { icon: Zap, title: "Retry elsewhere", text: "A decline cascades to a backup rather than to your customer" },
]

const HeroSection = () => {
  return (
    <Box
      render="section"
      pt="$14"
      pb="$11"
      px="$4"
      $sm={{ px: '$5' }}
      $lg={{ px: '$6' }}
      background={FADE}
    >
      <Box width="100%" maxW={1152} mx="auto">
        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5 }} />}
          display="block"
          mb={32}
          $platform-web={{ textAlign: 'center' }}
        >
          <Chip
            mb={16}
            py={4}
            px={16}
            borderColor="var(--white-30)"
            bg="color-mix(in oklab, var(--primary) 10%, transparent)"
            fontWeight="500"
            color="color-mix(in oklab, var(--foreground) 70%, transparent)"
          >
            Payment orchestration
          </Chip>
          <Display mb={24}>
            Hanzo Payments
          </Display>
          <Lede mx="auto" mb={32} maxW={768}>
            One integration, and the processor becomes a routing decision.
          </Lede>
          <Body mx="auto" mb={40} maxW={768} color="color-mix(in oklab, var(--foreground) 80%, transparent)">
            A switch that sits between your checkout and the companies that actually move the
            money. You integrate once; it speaks to each processor in that processor&rsquo;s own
            language. When one declines a payment another would have taken, it retries there
            instead of handing your customer an error — and changing processors stops being a
            project.
          </Body>
          <XStack flexWrap="wrap" justify="center" gap="$4">
            <Action href="/login" {...FILL}>
              Try Hanzo
            </Action>
            <Action href={`${DOCS}/docs/openapi`}>
              Explore APIs
            </Action>
          </XStack>
        </View>

        <View
          render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} />}
          display="block"
          mt={64}
        >
          <Grid columns={{ min: 260, max: 4 }} gap={24}>
            {CARDS.map((item, index) => (
              <XStack
                key={item.title}
                render={<motion.div initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.3 + index * 0.1 }} />}
              >
                <Tile flex={1} bg="$panel">
                  <Disc>
                    <item.icon size={24} />
                  </Disc>
                  <Heading mb={8} fontSize="$4" lineHeight="var(--leading-lg)">
                    {item.title}
                  </Heading>
                  <Body>{item.text}</Body>
                </Tile>
              </XStack>
            ))}
          </Grid>
        </View>
      </Box>
    </Box>
  );
};

export default HeroSection;