Feature Comparison Table

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { motion } from "framer-motion";
5import { Check, Crown, Rocket, Sparkles, Star, X, Zap } from "lucide-react";
6import { useState } from "react";
7 
8const plans = [
9  {
10    name: "Free",
11    popular: false,
12    price: "$0",
13    period: "/month",
14    description: "Perfect for getting started",
15    icon: Rocket,
16    gradient: "from-slate-500/10 via-slate-500/5 to-transparent",
17    iconColor: "text-slate-500",
18    features: ["5 Projects", "Basic Components", "Community Support"],
19  },
20  {
21    name: "Pro",
22    popular: true,
23    price: "$29",
24    period: "/month",
25    description: "Most popular for professionals",
26    icon: Star,
27    gradient: "from-primary/20 via-primary/10 to-transparent",
28    iconColor: "text-primary",
29    features: [
30      "Unlimited Projects",
31      "Advanced Animations",
32      "Priority Support",
33      "API Access",
34    ],
35  },
36  {
37    name: "Enterprise",
38    popular: false,
39    price: "$99",
40    period: "/month",
41    description: "For large teams and organizations",
42    icon: Crown,
43    gradient: "from-purple-500/20 via-purple-500/10 to-transparent",
44    iconColor: "text-purple-500",
45    features: [
46      "Everything in Pro",
47      "Custom Integrations",
48      "Dedicated Manager",
49      "SLA Support",
50    ],
51  },
52];
53 
54const features = [
55  {
56    category: "Core Features",
57    items: [
58      { name: "Basic Components", free: true, pro: true, enterprise: true },
59      { name: "Advanced Animations", free: false, pro: true, enterprise: true },
60      { name: "Custom Themes", free: false, pro: true, enterprise: true },
61      { name: "Priority Support", free: false, pro: false, enterprise: true },
62    ],
63  },
64  {
65    category: "Integrations",
66    items: [
67      { name: "API Access", free: false, pro: true, enterprise: true },
68      { name: "Webhooks", free: false, pro: false, enterprise: true },
69      {
70        name: "Custom Integrations",
71        free: false,
72        pro: false,
73        enterprise: true,
74      },
75    ],
76  },
77  {
78    category: "Support & Limits",
79    items: [
80      { name: "5 Projects", free: true, pro: false, enterprise: false },
81      { name: "Unlimited Projects", free: false, pro: true, enterprise: true },
82      { name: "Team Collaboration", free: false, pro: true, enterprise: true },
83      { name: "Dedicated Manager", free: false, pro: false, enterprise: true },
84    ],
85  },
86];
87 
88export function FeatureComparisonBlockBaseui() {
89// … truncated