> ## Documentation Index
> Fetch the complete documentation index at: https://docs.compozy.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploying

> Deploying AI workflows to production requires careful consideration of infrastructure, scaling, and maintenance. Compozy provides multiple deployment options to ensure your workflows run reliably and efficiently in any environment.

export const Badge = ({children}) => {
  const getColorClass = () => {
    switch (children) {
      case 'Available':
        return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400';
      case 'Beta':
        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400';
      case 'Coming Soon':
        return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400';
      default:
        return 'bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400';
    }
  };
  return <span className={`inline-flex items-center rounded-full px-2 py-1 text-xs font-medium ${getColorClass()}`}>
            {children}
        </span>;
};

export const FeatureCardGroup = ({children, cols = 2}) => {
  const colsClassName = ({
    1: "sm:grid-cols-1",
    2: "sm:grid-cols-2",
    3: "sm:grid-cols-3",
    4: "sm:grid-cols-4"
  })[cols] || "sm:grid-cols-2";
  return <div style={{
    display: 'grid'
  }} className={`${colsClassName} gap-6 my-6`}>
      {children}
    </div>;
};

export const FeatureCard = ({title, description, icon, href}) => <div className="card not-prose font-normal group relative my-2 ring-2 ring-transparent rounded-2xl bg-white dark:bg-background-dark border border-gray-950/10 dark:border-white/10 overflow-hidden">
    <div className="p-6 flex flex-col h-full">
      <div className="flex items-center gap-3 mb-4">
        {icon && <div className="w-8 h-8 flex items-center justify-center rounded-lg bg-primary/10 px-1">
            <Icon icon={icon} iconType="solid" size={18} />
          </div>}
        <h3 className="font-semibold text-lg text-gray-900 dark:text-white">
          {title}
        </h3>
      </div>

      <div className="text-gray-500 dark:text-gray-400 text-base flex-1">
        {description}
      </div>

      {href && <div className="mt-4 flex items-center gap-2 text-sm font-medium text-primary">
          See more
          <Icon icon="chevron-right" iconType="solid" size={12} className="transition-transform group-hover:translate-x-0.5" />
        </div>}
    </div>
    {href && <a href={href} className="absolute inset-0" />}
  </div>;

<FeatureCardGroup cols={1}>
  <FeatureCard title="Compozy Cloud" description="Our fully managed platform that handles infrastructure, scaling, and monitoring. The fastest path to production with zero infrastructure management." icon="cloud" href="/deployment/cloud/getting-started" />

  <FeatureCard title="Self-Hosted" description="Deploy on your own infrastructure using containers, Kubernetes, or directly on bare metal for complete control." icon="server" href="/deployment/self-hosted/overview" />
</FeatureCardGroup>

## Need Help?

Join our [Discord community](https://discord.gg/compozy) for deployment support or check our [Deployment FAQs](/deployment/faqs). Enterprise customers can contact our [dedicated support team](https://compozy.dev/enterprise).