Feature Comparison Table

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