hanzo.ai/components/machines/MachinesHero.tsx

'use client'

/**
 * The /machines fold: the promise, the two controls, and the hardware the
 * product rents out, as three spec cards.
 *
 * NO TAILWIND. The frame is gui props — 80px of rhythm stepping to 128 at
 * 1024, the site's 16/24/32 gutter, the 1280 measure — the badge is `Chip`,
 * the heading is `Display`, and the two controls are `Action` (the filled
 * one takes `data-fill`). The cards are gui props over @hanzo/design's tokens.
 */

import React from 'react';
import { Box, XStack, YStack } from '@hanzo/ui'
import { Words } from '@/components/marketing/band'
import { Grid } from '@hanzo/ui/grid'
import { DOCS } from '@/components/home/nav-data'
import { Action, Chip, Display, Lede } from '@hanzo/ui/marketing'

/** The one accent this page tints with, at the two strengths it uses. */
const EDGE = '1px solid color-mix(in srgb, var(--primary) 20%, transparent)'
const WASH = 'color-mix(in srgb, var(--primary) 10%, transparent)'

/** How narrow a column may get before the grid drops one. */
const DECK = { min: 260, max: 3 } as const

/** The muted label a spec card sets its blurb and row names in. */
const LABEL = { fontSize: '$2', lineHeight: '1.4286', color: 'var(--muted-foreground)' } as const

/** The three cards, as data — the markup below was the same nine rows thrice. */
const SPECS = [
  {
    title: 'NVIDIA H100',
    blurb: 'Dedicated GPU instances for AI/ML training',
    rows: [
      ['VRAM', '80GB HBM3'],
      ['Cores', '16,896 CUDA'],
      ['Tensor Cores', '528 TCs'],
    ],
  },
  {
    title: 'AMD EPYC 7763',
    blurb: 'High-core count CPU instances',
    rows: [
      ['Cores', '64 Cores'],
      ['Threads', '128 Threads'],
      ['Memory', 'Up to 2TB'],
    ],
  },
  {
    title: 'Storage Options',
    blurb: 'Ultra-fast NVMe and persistent storage',
    rows: [
      ['Local NVMe', 'Up to 8TB'],
      ['Network Storage', 'Unlimited'],
      ['I/O Performance', '7GB/s'],
    ],
  },
] as const

const MachinesHero = () => {
  return (
    <Box
      render="section"
      position="relative"
      py={80}
      $lg={{ py: 128 }}
    >
      <Box
        position="relative"
        z="var(--z-raised)"
        width="100%"
        maxW={1280}
        mx="auto"
        px={16}
        $sm={{ px: 24 }}
        $lg={{ px: 32 }}
      >
        <Box width="100%" maxW={768} mx="auto" mb={64} $platform-web={{ textAlign: 'center' }}>
          <Chip
            mb={16}
            px={16}
            py={4}
            bg={WASH}
            borderColor="color-mix(in srgb, var(--primary) 20%, transparent)"
          >
            <Words weight="500">High-Performance Computing</Words>
          </Chip>
          <Display
            mb={24}
          >
            Hanzo Machines
          </Display>
          <Lede mb={32}>
            Rent a machine by the hour, metered to your organization. Ask what sizes and regions exist, price a launch before you make it, and see it in the same list as the workers you already own.
          </Lede>
          <YStack gap={16} justify="center" $sm={{ flexDirection: 'row' }}>
            <Action href="/login" fill justify="center">
              Try Hanzo
            </Action>
            <Action
              href={DOCS}
              justify="center"
              borderColor="color-mix(in srgb, var(--primary) 30%, transparent)"
            >
              View Documentation
            </Action>
          </YStack>
        </Box>

        {/* Hero Hardware Visualization */}
        <Box
          position="relative"
          overflow="hidden"
          p={32}
          rounded="var(--radius-xl)"
          background={WASH}
          border={EDGE}
        >
          <Grid columns={DECK} gap={24}>
            {SPECS.map((spec) => (
              <Box key={spec.title} p={16} rounded="var(--radius-lg)" border={EDGE} bg="var(--card)">
                <Words render="h3" mb={8} weight="500">{spec.title}</Words>
                <Words render="p" mb={12} {...LABEL}>{spec.blurb}</Words>
                <YStack gap={12}>
                  {spec.rows.map(([label, value]) => (
                    <XStack
                      key={label}
                      justify="space-between"
                      items="center"
                      p={8}
                      rounded="var(--radius-md)"
                      bg="var(--secondary)"
                    >
                      <Words {...LABEL}>{label}</Words>
                      <Words weight="500">{value}</Words>
                    </XStack>
                  ))}
                </YStack>
              </Box>
            ))}
          </Grid>
        </Box>
      </Box>
    </Box>
  );
};

export default MachinesHero;