"use client"; import React from "react"; import { Check, Minus, MoveRight, PhoneCall } from "lucide-react"; import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; interface PlanFeature { [key: string]: boolean | string; } interface Plan { name: string; price: string; description: string; cta: string; icon: React.ReactNode; buttonVariant: "default" | "outline"; features: PlanFeature; } interface FeatureCategory { title: string; items: { key: string; label: string }[]; } interface PricingComparisonProps { plans?: Plan[]; categories?: FeatureCategory[]; } const defaultPlans: Plan[] = [ { name: "Startup", price: "$40", description: "Perfect for small teams launching fast.", cta: "Try it", icon: , buttonVariant: "outline", features: { sso: true, twoFA: false, encryption: true, auditLogs: false, ai: false, backups: false, versioning: false, templates: true, integrations: false, members: "5 members", multiplayer: false, roles: false, support: false, orchestration: false, deployment: false, monitoring: false, apiAccess: false, }, }, { name: "Growth", price: "$99", description: "Designed for growing teams scaling features.", cta: "Try it", icon: , buttonVariant: "default", features: { sso: true, twoFA: true, encryption: true, auditLogs: true, ai: true, backups: true, versioning: true, templates: true, integrations: true, members: "25 members", multiplayer: true, roles: true, support: true, orchestration: true, deployment: true, monitoring: true, apiAccess: false, }, }, { name: "Enterprise", price: "$199", description: "Everything you need at scale with full support.", cta: "Contact us", icon: , buttonVariant: "outline", features: { sso: true, twoFA: true, encryption: true, auditLogs: true, ai: true, backups: true, versioning: true, templates: true, integrations: true, members: "100+ members", multiplayer: true, roles: true, support: true, orchestration: true, deployment: true, monitoring: true, apiAccess: true, }, }, ]; const defaultCategories: FeatureCategory[] = [ { title: "Security", items: [ { key: "sso", label: "SSO (Single Sign-On)" }, { key: "twoFA", label: "Two-Factor Authentication" }, { key: "encryption", label: "Data Encryption at Rest" }, { key: "auditLogs", label: "Security Audit Logs" }, ], }, { title: "Productivity", items: [ { key: "ai", label: "AI Assistant" }, { key: "backups", label: "Automatic Backups" }, { key: "versioning", label: "Version Control" }, { key: "templates", label: "Built-in Templates" }, { key: "integrations", label: "3rd-Party Integrations" }, ], }, { title: "Team", items: [ { key: "members", label: "Team Members Limit" }, { key: "multiplayer", label: "Real-time Collaboration" }, { key: "roles", label: "Custom Roles & Permissions" }, { key: "support", label: "Priority Team Support" }, ], }, { title: "DevOps", items: [ { key: "orchestration", label: "Workflow Orchestration" }, { key: "deployment", label: "CI/CD Deployment" }, { key: "monitoring", label: "Performance Monitoring" }, { key: "apiAccess", label: "Developer API Access" }, ], }, ]; export function PricingComparison({ plans = defaultPlans, categories = defaultCategories, }: PricingComparisonProps) { return (

{/* Top Section */}

Pricing

Prices that scale with your ambition

Choose a plan that fits your current needs — and grow into it with advanced features as your team scales.

Note: All plans come with free onboarding, Slack support, and access to monthly product updates.

{/* Pricing Table */}

{/* Empty top-left */}

{/* Plan Cards */} {plans.map((plan, index) => (

{plan.name}

{plan.price}

{plan.description}

/ month

))} {/* Feature Rows */} {categories.map((category, catIdx) => (

{category.title}

{category.items.map((feature, rowIdx) => (

{feature.label}

{plans.map((plan, colIdx) => { const value = plan.features[feature.key as keyof typeof plan.features]; return (

{typeof value === "string" ? ( {value} ) : value ? ( ) : ( )}

); })} ))} ))}

); }

Pricing Comparison

Installation

Usage