hanzo.ai/components/machines/MachinesHero.tsx

'use client'

/**
 * The /machines fold (components/marketing/fold): the promise and the two
 * controls beside a machine priced before it is launched (components/preview/rent,
 * the price list's on-demand GPU rates), then the hardware the product rents
 * out, as three spec cards.
 */

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 } from '@hanzo/ui/marketing'
import { Fold } from '@/components/marketing/fold'
import { Rent } from '@/components/preview/rent'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'

/** 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: phrase('Dedicated GPU instances for AI/ML training'),
    rows: [
      ['VRAM', '80GB HBM3'],
      [phrase('Cores'), '16,896 CUDA'],
      [phrase('Tensor Cores'), '528 TCs'],
    ],
  },
  {
    title: 'AMD EPYC 7763',
    blurb: phrase('High-core count CPU instances'),
    rows: [
      [phrase('Cores'), phrase('64 Cores')],
      [phrase('Threads'), phrase('128 Threads')],
      [phrase('Memory'), phrase('Up to 2TB')],
    ],
  },
  {
    title: phrase('Storage Options'),
    blurb: phrase('Ultra-fast NVMe and persistent storage'),
    rows: [
      [phrase('Local NVMe'), phrase('Up to 8TB')],
      [phrase('Network Storage'), phrase('Unlimited')],
      [phrase('I/O Performance'), '7GB/s'],
    ],
  },
] as const

const MachinesHero = () => {
  const { t } = useI18n()
  return (
    <>
      <Fold
        label={phrase('High-Performance Computing')}
        title="Hanzo Machines"
        lede={phrase('Rent a machine by the hour, metered to your organization.')}
        actions={
          <>
            <Action href="/login" fill>
              {t('Try Hanzo')}
            </Action>
            <Action href={DOCS}>{t('View Documentation')}</Action>
          </>
        }
        preview={<Rent />}
      />
    <Box render="section" position="relative" py={56} $lg={{ py: 80 }}>
      <Box
        position="relative"
        z="var(--z-raised)"
        width="100%"
        maxW={1280}
        mx="auto"
        px={16}
        $sm={{ px: 24 }}
        $lg={{ px: 32 }}
      >
        {/* 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">{t(spec.title)}</Words>
                <Words render="p" mb={12} {...LABEL}>{t(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}>{t(label)}</Words>
                      <Words weight="500">{t(value)}</Words>
                    </XStack>
                  ))}
                </YStack>
              </Box>
            ))}
          </Grid>
        </Box>
      </Box>
    </Box>
    </>
  );
};

export default MachinesHero;