{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-comparison-block-shadcnui",
  "type": "registry:block",
  "title": "Feature Comparison Table",
  "description": "Interactive pricing comparison table with animated checkmarks and plan highlights",
  "registryDependencies": [
    "button"
  ],
  "dependencies": [
    "framer-motion",
    "react"
  ],
  "files": [
    {
      "path": "@uitripled/react-shadcn/src/components/sections/feature-comparison-block.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card } from \"@/components/ui/card\";\nimport { motion } from \"framer-motion\";\nimport { Check, Crown, Rocket, Sparkles, Star, X, Zap } from \"lucide-react\";\nimport { useState } from \"react\";\n\nconst plans = [\n  {\n    name: \"Free\",\n    popular: false,\n    price: \"$0\",\n    period: \"/month\",\n    description: \"Perfect for getting started\",\n    icon: Rocket,\n    gradient: \"from-slate-500/10 via-slate-500/5 to-transparent\",\n    iconColor: \"text-slate-500\",\n    features: [\"5 Projects\", \"Basic Components\", \"Community Support\"],\n  },\n  {\n    name: \"Pro\",\n    popular: true,\n    price: \"$29\",\n    period: \"/month\",\n    description: \"Most popular for professionals\",\n    icon: Star,\n    gradient: \"from-primary/20 via-primary/10 to-transparent\",\n    iconColor: \"text-primary\",\n    features: [\n      \"Unlimited Projects\",\n      \"Advanced Animations\",\n      \"Priority Support\",\n      \"API Access\",\n    ],\n  },\n  {\n    name: \"Enterprise\",\n    popular: false,\n    price: \"$99\",\n    period: \"/month\",\n    description: \"For large teams and organizations\",\n    icon: Crown,\n    gradient: \"from-purple-500/20 via-purple-500/10 to-transparent\",\n    iconColor: \"text-purple-500\",\n    features: [\n      \"Everything in Pro\",\n      \"Custom Integrations\",\n      \"Dedicated Manager\",\n      \"SLA Support\",\n    ],\n  },\n];\n\nconst features = [\n  {\n    category: \"Core Features\",\n    items: [\n      { name: \"Basic Components\", free: true, pro: true, enterprise: true },\n      { name: \"Advanced Animations\", free: false, pro: true, enterprise: true },\n      { name: \"Custom Themes\", free: false, pro: true, enterprise: true },\n      { name: \"Priority Support\", free: false, pro: false, enterprise: true },\n    ],\n  },\n  {\n    category: \"Integrations\",\n    items: [\n      { name: \"API Access\", free: false, pro: true, enterprise: true },\n      { name: \"Webhooks\", free: false, pro: false, enterprise: true },\n      {\n        name: \"Custom Integrations\",\n        free: false,\n        pro: false,\n        enterprise: true,\n      },\n    ],\n  },\n  {\n    category: \"Support & Limits\",\n    items: [\n      { name: \"5 Projects\", free: true, pro: false, enterprise: false },\n      { name: \"Unlimited Projects\", free: false, pro: true, enterprise: true },\n      { name: \"Team Collaboration\", free: false, pro: true, enterprise: true },\n      { name: \"Dedicated Manager\", free: false, pro: false, enterprise: true },\n    ],\n  },\n];\n\nexport function FeatureComparisonBlock() {\n  const [hoveredPlan, setHoveredPlan] = useState<number | null>(null);\n\n  return (\n    <section className=\"w-full bg-background px-4 py-16\">\n      <div className=\"mx-auto max-w-7xl\">\n        <motion.div\n          initial={{ opacity: 0, y: -20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"mb-12 text-center\"\n        >\n          <Badge className=\"mb-4\" variant=\"secondary\">\n            <Zap className=\"mr-1 h-3 w-3\" />\n            Compare Plans\n          </Badge>\n          <h2 className=\"mb-4 text-4xl font-bold tracking-tight\">\n            Choose the right plan for you\n          </h2>\n          <p className=\"mx-auto max-w-2xl text-muted-foreground\">\n            Compare features across all our plans and find the perfect fit for\n            your needs\n          </p>\n        </motion.div>\n\n        {/* Pricing Cards - No horizontal scroll */}\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6, delay: 0.2 }}\n          className=\"mb-12\"\n        >\n          <div className=\"grid grid-cols-1 gap-6 lg:grid-cols-3 space-y-6\">\n            {plans.map((plan, index) => {\n              const Icon = plan.icon;\n              const isHovered = hoveredPlan === index;\n\n              return (\n                <motion.div\n                  key={plan.name}\n                  initial={{ opacity: 0, y: 20, scale: 0.95 }}\n                  animate={{ opacity: 1, y: 0, scale: 1 }}\n                  transition={{ delay: 0.1 * index, duration: 0.5 }}\n                  onHoverStart={() => setHoveredPlan(index)}\n                  onHoverEnd={() => setHoveredPlan(null)}\n                  className=\"relative\"\n                >\n                  {/* Popular badge glow effect */}\n                  {plan.popular && (\n                    <motion.div\n                      className=\"absolute -inset-1 rounded-2xl bg-gradient-to-r from-primary via-primary/50 to-primary opacity-20 blur-xl\"\n                      animate={{\n                        opacity: [0.2, 0.4, 0.2],\n                        scale: [1, 1.02, 1],\n                      }}\n                      transition={{\n                        duration: 3,\n                        repeat: Infinity,\n                        ease: \"easeInOut\",\n                      }}\n                    />\n                  )}\n\n                  <Card\n                    className={`group relative overflow-hidden border-border/50 bg-gradient-to-br from-card via-card to-card/80 backdrop-blur-sm transition-all duration-500 ${\n                      plan.popular\n                        ? \"border-primary/50 shadow-2xl shadow-primary/10\"\n                        : \"hover:border-primary/30 hover:shadow-xl\"\n                    } ${isHovered && !plan.popular ? \"scale-[1.02]\" : \"\"} ${\n                      plan.popular ? \"scale-[1.05] lg:scale-110\" : \"\"\n                    }`}\n                  >\n                    {/* Gradient overlay */}\n                    <motion.div\n                      className={`absolute inset-0 bg-gradient-to-br ${plan.gradient} opacity-0 transition-opacity duration-500`}\n                      animate={isHovered ? { opacity: 1 } : { opacity: 0 }}\n                    />\n\n                    {/* Shimmer effect */}\n                    {isHovered && (\n                      <motion.div\n                        className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent\"\n                        animate={{ x: [\"-200%\", \"200%\"] }}\n                        transition={{\n                          duration: 1.5,\n                          repeat: Infinity,\n                          ease: \"linear\",\n                        }}\n                      />\n                    )}\n\n                    {/* Popular badge */}\n                    {plan.popular && (\n                      <motion.div\n                        initial={{ scale: 0, rotate: -180 }}\n                        animate={{ scale: 1, rotate: 0 }}\n                        transition={{\n                          delay: 0.3 + index * 0.1,\n                          type: \"spring\",\n                        }}\n                        className=\"absolute -right-1 -top-1\"\n                      >\n                        <Badge className=\"gap-1 rounded-bl-lg rounded-tr-xl border-primary/20 bg-primary px-3 py-1 shadow-lg\">\n                          <Sparkles className=\"h-3 w-3\" />\n                          Most Popular\n                        </Badge>\n                      </motion.div>\n                    )}\n\n                    <div className=\"relative z-10 p-6 md:p-8\">\n                      {/* Icon */}\n                      <motion.div\n                        className=\"mb-4 flex justify-center\"\n                        whileHover={{ rotate: 360, scale: 1.1 }}\n                        transition={{ duration: 0.6 }}\n                      >\n                        <div\n                          className={`rounded-2xl bg-gradient-to-br ${plan.gradient} p-3 shadow-lg`}\n                        >\n                          <Icon className={`h-8 w-8 ${plan.iconColor}`} />\n                        </div>\n                      </motion.div>\n\n                      {/* Plan name and description */}\n                      <div className=\"mb-6 text-center\">\n                        <h3 className=\"mb-2 text-2xl font-bold tracking-tight\">\n                          {plan.name}\n                        </h3>\n                        <p className=\"text-sm text-muted-foreground\">\n                          {plan.description}\n                        </p>\n                      </div>\n\n                      {/* Price */}\n                      <div className=\"mb-6 text-center\">\n                        <motion.div\n                          animate={isHovered ? { scale: 1.05 } : { scale: 1 }}\n                          transition={{ duration: 0.2 }}\n                        >\n                          <span className=\"text-5xl font-bold tracking-tight\">\n                            {plan.price}\n                          </span>\n                          <span className=\"ml-1 text-base text-muted-foreground\">\n                            {plan.period}\n                          </span>\n                        </motion.div>\n                      </div>\n\n                      {/* Features list */}\n                      <motion.ul className=\"mb-6 space-y-3\">\n                        {plan.features.map((feature, idx) => (\n                          <motion.li\n                            key={feature}\n                            initial={{ opacity: 0, x: -10 }}\n                            animate={{ opacity: 1, x: 0 }}\n                            transition={{ delay: 0.4 + idx * 0.1 }}\n                            className=\"flex items-start gap-2\"\n                          >\n                            <motion.div\n                              whileHover={{ scale: 1.2, rotate: 360 }}\n                              transition={{ duration: 0.3 }}\n                            >\n                              <Check\n                                className={`mt-0.5 h-5 w-5 flex-shrink-0 ${plan.iconColor}`}\n                              />\n                            </motion.div>\n                            <span className=\"text-sm text-foreground/90\">\n                              {feature}\n                            </span>\n                          </motion.li>\n                        ))}\n                      </motion.ul>\n\n                      {/* CTA Button */}\n                      <Button\n                        className={`group relative w-full overflow-hidden ${\n                          plan.popular ? \"shadow-lg shadow-primary/20\" : \"\"\n                        }`}\n                        variant={plan.popular ? \"default\" : \"outline\"}\n                        size=\"lg\"\n                      >\n                        <motion.span\n                          className=\"absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent\"\n                          animate={\n                            isHovered\n                              ? { x: [\"-200%\", \"200%\"] }\n                              : { x: \"-200%\" }\n                          }\n                          transition={{\n                            duration: 0.8,\n                            ease: \"easeInOut\",\n                          }}\n                        />\n                        <span className=\"relative\">\n                          {plan.popular ? \"Get Started Now\" : \"Choose Plan\"}\n                        </span>\n                        <motion.span\n                          className=\"relative ml-2\"\n                          animate={isHovered ? { x: [0, 5, 0] } : { x: 0 }}\n                          transition={{\n                            duration: 0.5,\n                            repeat: isHovered ? Infinity : 0,\n                          }}\n                        >\n                          →\n                        </motion.span>\n                      </Button>\n\n                      {/* Popular plan extra info */}\n                      {plan.popular && (\n                        <motion.p\n                          initial={{ opacity: 0 }}\n                          animate={{ opacity: 1 }}\n                          transition={{ delay: 0.6 }}\n                          className=\"mt-3 text-center text-xs text-muted-foreground\"\n                        >\n                          ✨ Best value for money\n                        </motion.p>\n                      )}\n                    </div>\n                  </Card>\n                </motion.div>\n              );\n            })}\n          </div>\n        </motion.div>\n\n        {/* Feature Comparison Table - Horizontal scroll only for table */}\n        <div className=\"overflow-x-auto\">\n          <motion.div\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.6, delay: 0.4 }}\n            className=\"min-w-[640px]\"\n          >\n            <div className=\"space-y-6\">\n              {features.map((category, categoryIndex) => (\n                <motion.div\n                  key={category.category}\n                  initial={{ opacity: 0, x: -20 }}\n                  animate={{ opacity: 1, x: 0 }}\n                  transition={{ delay: 0.1 * categoryIndex }}\n                >\n                  <h4 className=\"mb-4 text-lg font-semibold\">\n                    {category.category}\n                  </h4>\n                  <Card className=\"overflow-hidden border-border\">\n                    {category.items.map((feature, featureIndex) => (\n                      <motion.div\n                        key={feature.name}\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        transition={{ delay: 0.05 * featureIndex }}\n                        className={`grid grid-cols-4 gap-4 border-b border-border p-4 last:border-b-0 ${\n                          featureIndex % 2 === 0 ? \"bg-muted/30\" : \"\"\n                        }`}\n                      >\n                        <div className=\"col-span-1 flex items-center\">\n                          <span className=\"text-sm font-medium\">\n                            {feature.name}\n                          </span>\n                        </div>\n\n                        {/* Free */}\n                        <div className=\"flex items-center justify-center\">\n                          <motion.div\n                            whileHover={{ scale: 1.2 }}\n                            transition={{ type: \"spring\", stiffness: 400 }}\n                          >\n                            {feature.free ? (\n                              <Check className=\"h-5 w-5 text-primary\" />\n                            ) : (\n                              <X className=\"h-5 w-5 text-muted-foreground/30\" />\n                            )}\n                          </motion.div>\n                        </div>\n\n                        {/* Pro */}\n                        <div className=\"flex items-center justify-center\">\n                          <motion.div\n                            whileHover={{ scale: 1.2 }}\n                            transition={{ type: \"spring\", stiffness: 400 }}\n                          >\n                            {feature.pro ? (\n                              <Check className=\"h-5 w-5 text-primary\" />\n                            ) : (\n                              <X className=\"h-5 w-5 text-muted-foreground/30\" />\n                            )}\n                          </motion.div>\n                        </div>\n\n                        {/* Enterprise */}\n                        <div className=\"flex items-center justify-center\">\n                          <motion.div\n                            whileHover={{ scale: 1.2 }}\n                            transition={{ type: \"spring\", stiffness: 400 }}\n                          >\n                            {feature.enterprise ? (\n                              <Check className=\"h-5 w-5 text-primary\" />\n                            ) : (\n                              <X className=\"h-5 w-5 text-muted-foreground/30\" />\n                            )}\n                          </motion.div>\n                        </div>\n                      </motion.div>\n                    ))}\n                  </Card>\n                </motion.div>\n              ))}\n            </div>\n\n            {/* Bottom CTA */}\n            <motion.div\n              initial={{ opacity: 0, y: 20 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ delay: 0.8 }}\n              className=\"mt-12 text-center\"\n            >\n              <p className=\"mb-4 text-sm text-muted-foreground\">\n                Need a custom plan?\n              </p>\n              <Button variant=\"outline\" size=\"lg\">\n                Contact Sales\n              </Button>\n            </motion.div>\n          </motion.div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/uitripled/feature-comparison-block-shadcnui.tsx"
    }
  ]
}