{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-plans",
  "type": "registry:ui",
  "title": "Pricing Plans",
  "description": "A comprehensive pricing plans component with multiple tiers and features.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "card"
  ],
  "files": [
    {
      "path": "registry/ruixenui/pricing-plans.tsx",
      "content": "\"use client\";\n\nimport { CheckIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { motion } from \"motion/react\";\n\nexport default function Pricing_Plans() {\n  const [billing, setBilling] = useState<\"monthly\" | \"yearly\">(\"monthly\");\n\n  const plans = [\n    {\n      label: \"SPRINT\",\n      labelColor: \"bg-yellow-100 text-yellow-700\",\n      title: \"One-Time Setup\",\n      price: \"$1,999\",\n      type: \"one-time\",\n      button: \"Send Proposal\",\n      description:\n        \"Ideal for validating your core product idea with essential design and development—fast.\",\n      features: [\n        \"2-3 core features implemented\",\n        \"Built using Ruixen Open Source Starter Kit\",\n        \"Basic UI/UX customization\",\n        \"Fully responsive components\",\n        \"Timeline: 2–4 weeks\",\n      ],\n    },\n    {\n      label: \"PRO\",\n      labelColor: \"bg-indigo-100 text-indigo-700\",\n      title: \"Monthly Subscription\",\n      price: billing === \"monthly\" ? \"$499\" : \"$4999\",\n      type: billing,\n      popular: true,\n      button: billing === \"monthly\" ? \"Start Monthly\" : \"Start Yearly\",\n      description:\n        \"Best for scaling teams needing consistent design & dev with premium Ruixen UI components.\",\n      features: [\n        \"Full access to Ruixen UI library\",\n        \"Unlimited website components\",\n        \"Priority support & updates\",\n        \"Integration help (Next.js, Remix, etc.)\",\n        \"SEO-optimized templates\",\n        \"Ongoing performance improvements\",\n      ],\n    },\n    {\n      label: \"ENTERPRISE\",\n      labelColor: \"bg-emerald-100 text-emerald-700\",\n      title: \"Custom Solutions\",\n      price: \"Custom\",\n      type: \"\",\n      button: \"Contact Us\",\n      description:\n        \"Tailored for large teams needing full-stack design, dev, & deployment support using Ruixen stack.\",\n      features: [\n        \"Dedicated solution architect\",\n        \"Design + Dev + Hosting consultation\",\n        \"Custom workflows & dashboards\",\n        \"Migration from legacy UIs\",\n        \"AI-powered UI integrations\",\n        \"Training + Onboarding\",\n      ],\n    },\n  ];\n\n  const [period, setPeriod] = useState(0);\n  const handleChangePeriod = (index: number) => {\n    setPeriod(index);\n    if (index === 0) {\n      setBilling(\"monthly\");\n    } else {\n      setBilling(\"yearly\");\n    }\n  };\n\n  return (\n    <section className=\"py-20 bg-background text-foreground px-4\">\n      <div className=\"max-w-5xl mx-auto text-center mb-10\">\n        <h2 className=\"text-3xl sm:text-4xl font-bold text-black dark:text-white\">\n          Pricing Plans for Every Stage\n        </h2>\n        <p className=\"mt-4 text-muted-foreground max-w-2xl mx-auto text-base\">\n          Whether you&#39;re launching or scaling, Ruixen UI supports your\n          journey with expertly crafted UI &amp; services.\n        </p>\n\n        <div className=\"rounded-full relative w-52 mx-auto my-5 border p-1.5 flex items-center\">\n          <button\n            className=\"font-semibold rounded-full w-full p-1.5 text-slate-800 dark:text-gray-100 z-20\"\n            onClick={() => handleChangePeriod(0)}\n          >\n            Monthly\n          </button>\n          <button\n            className=\"font-semibold rounded-full w-full p-1.5 text-slate-800 dark:text-gray-100 z-20\"\n            onClick={() => handleChangePeriod(1)}\n          >\n            Yearly\n          </button>\n          <div\n            className=\"p-1.5 flex items-center justify-center absolute inset-0 w-1/2 z-10\"\n            style={{\n              transform: `translateX(${period * 100}%)`,\n              transition: \"transform 0.3s\",\n            }}\n          >\n            <div className=\"bg-white dark:bg-zinc-900 border border-gray-500 shadow-sm rounded-full w-full h-full\"></div>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto\">\n        {plans.map((plan, i) => (\n          <motion.div\n            key={i}\n            initial={{ opacity: 0, y: 20 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.4, delay: i * 0.1 }}\n            className={`rounded-xl border border-muted bg-white dark:bg-zinc-900 text-black dark:text-white p-4 sm:p-6 flex flex-col ${\n              plan.popular ? \"ring-2 ring-primary shadow-md\" : \"\"\n            }`}\n          >\n            <div className=\"mb-4\">\n              <span\n                className={`text-xs uppercase font-semibold px-2 py-1 rounded ${plan.labelColor}`}\n              >\n                {plan.label}\n              </span>\n            </div>\n\n            <div className=\"text-3xl font-bold\">\n              {plan.price}\n              {plan.type && (\n                <span className=\"text-sm font-medium text-muted-foreground ml-1\">\n                  /{plan.type}\n                </span>\n              )}\n            </div>\n            <p className=\"mt-3 text-sm text-muted-foreground leading-relaxed\">\n              {plan.description}\n            </p>\n\n            <button className=\"mt-6 bg-primary text-primary-foreground py-2 rounded-md font-medium text-sm hover:bg-primary/90 transition border border-gray-600 dark:border-gray-700\">\n              {plan.button}\n            </button>\n\n            <div className=\"mt-6\">\n              <p className=\"text-sm font-semibold mb-4\">What&#39;s included:</p>\n              <ul className=\"space-y-3 text-sm\">\n                {plan.features.map((feature, idx) => (\n                  <li key={idx} className=\"flex items-start gap-2\">\n                    <CheckIcon className=\"w-4 h-4 mt-1 text-green-500 dark:text-green-400\" />\n                    <span>{feature}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          </motion.div>\n        ))}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ruixen/pricing-plans.tsx"
    }
  ]
}