import Link from 'next/link' import { Button } from '@/components/ui/button' import { Card } from '@/components/ui/card' import { Check, Minus } from 'lucide-react' import { cn } from '@/lib/utils' const plans = [ { name: 'Starter', price: '$0', period: '/month', description: 'For individuals and small projects', cta: 'Get Started', features: { integrations: '3', apiCalls: '1,000/mo', support: 'Community', analytics: false, webhooks: false, sso: false, }, }, { name: 'Pro', price: '$29', period: '/month', description: 'For growing teams', cta: 'Start Free Trial', highlighted: true, features: { integrations: 'Unlimited', apiCalls: '100,000/mo', support: 'Priority', analytics: true, webhooks: true, sso: false, }, }, { name: 'Enterprise', price: 'Custom', period: '', description: 'For large organizations', cta: 'Contact Sales', features: { integrations: 'Unlimited', apiCalls: 'Unlimited', support: 'Dedicated', analytics: true, webhooks: true, sso: true, }, }, ] const featureLabels = { integrations: 'Integrations', apiCalls: 'API Calls', support: 'Support', analytics: 'Analytics', webhooks: 'Custom Webhooks', sso: 'SSO / SAML', } const FeatureRow = ({ label, value }: { label: string; value: boolean | string }) => (

{label} {typeof value === 'boolean' ? ( value ? ( ) : ( ) ) : ( {value} )}

) export default function Comparator() { return (

Choose Your Plan

Start free and scale as you grow.

{plans.map((plan) => (

{plan.name}

{plan.description}

{plan.price} {plan.period && {plan.period}}

{Object.entries(plan.features).map(([key, value]) => ( ))}

))}

) }

Comparator 3

Instalação

Registry dependencies