hanzo.ai/components/machines/MachinesEnterprise.tsx

/**
 * NO TAILWIND. `Band` + `Head` carry the frame and the centred heading; the
 * three tiles are gui props, centred on their own axis.
 */

import React from 'react';
import { Shield, Database, Server } from "lucide-react";
import { View, YStack } from '@/components/ui'
import { Grid } from '@hanzo/ui/grid'
import { Band, Head, Words } from '@/components/marketing/band'

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

interface EnterpriseFeatureProps {
  icon: React.ComponentType<{ width?: number; height?: number }>;
  title: string;
  description: string;
}

const EnterpriseFeature = ({ icon: Icon, title, description }: EnterpriseFeatureProps) => {
  return (
    <YStack
      items="center"
      p={24}
      rounded="var(--radius-xl)"
      background="color-mix(in srgb, var(--primary) 5%, transparent)"
      border="1px solid color-mix(in srgb, var(--primary) 20%, transparent)"
      $platform-web={{ textAlign: 'center' }}
    >
      <View mb={16}>
        <Icon width={48} height={48} />
      </View>
      <Words render="h3" mb={8} fontSize="$6" lineHeight="1.4" weight="700" color="var(--foreground)">{title}</Words>
      <Words render="p" color="var(--muted-foreground)">
        {description}
      </Words>
    </YStack>
  );
};

const MachinesEnterprise = () => {
  const features = [
    {
      icon: Shield,
      title: "Scoped to your organization",
      description: "A machine belongs to one org and is named within it. Every read and every terminate is checked against the org on your token, not against the id in the URL."
    },
    {
      icon: Database,
      title: "Bring your own account",
      description: "Link a DigitalOcean, AWS or GCP account and the clusters it holds fold into the same fleet. Your capacity, your contract, one place to see it."
    },
    {
      icon: Server,
      title: "Pick the region deliberately",
      description: "Launches name a region from the list the API returns, so where a workload runs is a decision you made rather than one that was made for you."
    }
  ];

  return (
    <Band rule={false}>
      <Head
        title="Whose machine it is"
        lede="Ownership, region and account are decisions the API makes you state"
      />

      <Grid columns={DECK} gap={32}>
        {features.map((feature, index) => (
          <EnterpriseFeature
            key={index}
            icon={feature.icon}
            title={feature.title}
            description={feature.description}
          />
        ))}
      </Grid>
    </Band>
  );
};

export default MachinesEnterprise;