hanzo.ai/components/enterprise/Rack.tsx

'use client'

import { Box, Text, XStack, YStack } from '@hanzo/ui'
import { Action, Line, TextLink, Title } from '@hanzo/ui/marketing'
import { SERVERS, SOURCES } from '@/lib/enterprise'

/**
 * What a Zen 6 Max rack is made of, for /enterprise and /zen/zen6-max alike. Memory, network and storage per server are
 * NVIDIA's own figures (the DGX B300 and B200 user guides); the planning paragraph is Hanzo's, and says that final capacity
 * and performance come from qualifying the customer's own workload.
 */
const PLAN = [
  ['Qualification', 'Four 8-GPU servers is where a qualification starts.'],
  ['Isolated production pools', 'One pool for each specialist, so a busy class of work never takes memory from another.'],
  ['Redundant pools', 'Two independent replicas of those pools across failure domains.'],
] as const

const AROUND = [
  'NVLink and NVSwitch inside each server.',
  '400 or 800 Gb/s RDMA wherever a specialist spans servers.',
  'About 31 TB of NVMe in each server (8 x 3.84 TB).',
  'Separate sandbox workers for coding agents.',
  'A high-availability control cluster.',
] as const

/** `ask` closes with Talk to sales, for a page whose own call it is (/zen/zen6-max); /enterprise asks once, elsewhere. */
export default function Rack({ ask = false }: { ask?: boolean }) {
  return (
    <YStack gap={32} width="100%">
      <Line render="p" display="block" fontSize="$4" lineHeight="1.6" color="var(--foreground)" maxW={760}>
        We recommend at least four 8-GPU NVIDIA Blackwell servers, B300 or B200, for Zen 6 Max on your own premises. Routing
        cuts the average inference work a request needs. It does not cut the memory needed to keep every specialist ready.
      </Line>
      <XStack gap={16} flexWrap="wrap">
        {SERVERS.map((s) => (
          <Box key={s.name} flex={1} minW={280} p={24} rounded="var(--radius-xl)" borderWidth={1} borderColor="var(--border)" bg="var(--card)">
            <Title quiet mb={12}>{s.name}</Title>
            <YStack gap={6}>
              {[
                ['GPUs', s.gpus],
                ['GPU memory', s.memory],
                ['Cluster network', s.network],
                ['Data cache', s.nvme],
              ].map(([k, v]) => (
                <XStack key={k} justify="space-between" gap={16}>
                  <Text color="var(--muted-foreground)" fontSize="$2">{k}</Text>
                  <Text fontSize="$2" $platform-web={{ fontVariantNumeric: 'tabular-nums', textAlign: 'right' }}>{v}</Text>
                </XStack>
              ))}
            </YStack>
            <Text render="p" display="block" mt={12} fontSize="$1" color="var(--muted-foreground)">
              <TextLink href={SOURCES[s.source].url}>{SOURCES[s.source].label}</TextLink>
            </Text>
          </Box>
        ))}
      </XStack>
      <Line render="p" display="block" fontSize="$2" lineHeight="1.5" color="var(--muted-foreground)" maxW={760}>
        Four B300 servers hold 9,216 GB of GPU memory; four B200 servers hold 5,760 GB.
      </Line>
      <XStack gap={16} flexWrap="wrap">
        <YStack flex={1} minW={280} gap={14}>
          <Line render="h3" display="block" fontSize="$5" fontWeight="600" color="var(--foreground)">Planning range</Line>
          {PLAN.map(([k, v]) => (
            <Line key={k} render="p" display="block" fontSize="$3" lineHeight="1.5" color="var(--muted-foreground)">
              <Text fontWeight="600" color="var(--foreground)">{k}. </Text>
              {v}
            </Line>
          ))}
        </YStack>
        <YStack flex={1} minW={280} gap={14}>
          <Line render="h3" display="block" fontSize="$5" fontWeight="600" color="var(--foreground)">Around the servers</Line>
          {AROUND.map((v) => (
            <Line key={v} render="p" display="block" fontSize="$3" lineHeight="1.5" color="var(--muted-foreground)">{v}</Line>
          ))}
        </YStack>
      </XStack>
      <Line render="p" display="block" fontSize="$3" lineHeight="1.6" color="var(--muted-foreground)" maxW={760}>
        Final capacity and performance commitments come from qualifying your workload: context length, concurrency, routing mix,
        latency, and failover.
      </Line>
      {ask ? (
        <XStack>
          <Action href="/contact-sales" fill>
            Talk to sales
          </Action>
        </XStack>
      ) : null}
    </YStack>
  )
}