{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-3",
  "dependencies": [
    "lucide-react",
    "react-icons"
  ],
  "registryDependencies": [
    "badge",
    "button"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/pricing-3.tsx",
      "content": "import { Button } from \"@/components/ui/button\";\nimport { Badge } from \"@/components/ui/badge\";\nimport {\n  IoPricetag,\n  IoStar,\n  IoCheckmarkCircle,\n  IoArrowForward,\n} from \"react-icons/io5\";\n\ninterface PricingFeature {\n  text: string;\n}\n\ninterface PricingPlan {\n  id: string;\n  name: string;\n  price: string;\n  description: string;\n  isPopular?: boolean;\n  popularBadgeText?: string;\n  features: PricingFeature[];\n  buttonText: string;\n  buttonVariant?:\n    | \"default\"\n    | \"secondary\"\n    | \"outline\"\n    | \"ghost\"\n    | \"link\"\n    | \"destructive\";\n}\n\ninterface EnterprisePlan {\n  title: string;\n  description: string;\n  buttonText: string;\n  footnote: string;\n}\n\ninterface Pricing3Props {\n  badgeText?: string;\n  title: string;\n  subtitle: string;\n  enterprisePlan: EnterprisePlan;\n  plans: PricingPlan[];\n  footerText?: string;\n}\n\nexport function Pricing3({\n  badgeText,\n  title,\n  subtitle,\n  enterprisePlan,\n  plans,\n  footerText,\n}: Pricing3Props) {\n  return (\n    <section className=\"bg-background w-full py-8 md:py-16\">\n      <div className=\"container mx-auto max-w-6xl px-4 md:px-6\">\n        <div className=\"mb-16 flex flex-col items-start justify-between gap-12 lg:flex-row lg:gap-8\">\n          <div className=\"flex max-w-2xl flex-col items-start gap-5\">\n            {badgeText && (\n              <Badge\n                variant=\"outline\"\n                className=\"text-muted-foreground border-border bg-muted/50 flex items-center gap-2 rounded-full px-2 py-1.5 text-sm\"\n              >\n                <IoPricetag className=\"text-foreground h-4 w-4\" />\n                <span className=\"text-foreground font-medium\">{badgeText}</span>\n              </Badge>\n            )}\n            <h2 className=\"text-foreground text-4xl font-bold tracking-tight md:text-5xl\">\n              {title}\n            </h2>\n            <p className=\"text-muted-foreground text-lg leading-relaxed md:text-xl\">\n              {subtitle}\n            </p>\n          </div>\n\n          <div className=\"flex w-full flex-col gap-4 pt-2 lg:w-1/3\">\n            <div className=\"text-muted-foreground flex items-center gap-2 text-sm font-semibold tracking-wider uppercase\">\n              {enterprisePlan.title}\n              <IoStar className=\"text-primary h-4 w-4\" />\n            </div>\n            <p className=\"text-muted-foreground text-base leading-relaxed\">\n              {enterprisePlan.description}\n            </p>\n            <div className=\"mt-2 flex flex-wrap items-center gap-4\">\n              <Button variant=\"outline\" className=\"group rounded-full\">\n                {enterprisePlan.buttonText}\n                <IoArrowForward className=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\" />\n              </Button>\n              <span className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n                <span className=\"bg-muted-foreground/50 h-1 w-1 rounded-full\" />\n                {enterprisePlan.footnote}\n              </span>\n            </div>\n          </div>\n        </div>\n\n        <div className=\"grid grid-cols-1 gap-8 md:gap-10 lg:grid-cols-2\">\n          {plans.map((plan) => (\n            <div\n              key={plan.id}\n              className={`bg-card relative flex flex-col gap-8 rounded-4xl border p-6 transition-all duration-300 sm:flex-row sm:p-8 md:p-10 ${plan.isPopular ? \"border-primary ring-primary/20 ring-1\" : \"border-border\"}`}\n            >\n              {plan.isPopular && plan.popularBadgeText && (\n                <div className=\"bg-primary text-primary-foreground absolute -top-3 left-6 rounded-md px-4 py-1 text-xs font-medium   shadow-sm sm:left-10\">\n                  {plan.popularBadgeText}\n                </div>\n              )}\n\n              <div className=\"border-border flex flex-1 flex-col items-start border-b pb-8 sm:border-r sm:border-b-0 sm:pr-8 sm:pb-0\">\n                <Badge\n                  variant=\"outline\"\n                  className=\"bg-muted/30 mb-4 rounded-full px-3  text-xs font-medium \"\n                >\n                  {plan.name}\n                </Badge>\n                <div className=\"text-foreground mb-4 text-5xl font-extrabold tracking-tight md:text-6xl\">\n                  {plan.price}\n                </div>\n                <p className=\"text-muted-foreground mb-8 text-sm leading-relaxed md:text-base\">\n                  {plan.description}\n                </p>\n                <div className=\"mt-auto w-full\">\n                  <Button\n                    variant={plan.buttonVariant || \"default\"}\n                    className=\"group h-12 w-full rounded-full px-6 sm:w-auto\"\n                  >\n                    {plan.buttonText}\n                    <IoArrowForward className=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\" />\n                  </Button>\n                </div>\n              </div>\n\n              <div className=\"flex flex-1 flex-col justify-center sm:pl-2\">\n                <ul className=\"space-y-4 md:space-y-5\">\n                  {plan.features.map((feature, index) => (\n                    <li key={index} className=\"flex items-start gap-3\">\n                      <IoCheckmarkCircle className=\"text-primary mt-0.5 h-5 w-5 shrink-0\" />\n                      <span className=\"text-foreground text-sm font-medium md:text-base\">\n                        {feature.text}\n                      </span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n          ))}\n        </div>\n\n        {footerText && (\n          <div className=\"mx-auto mt-16 max-w-4xl text-center\">\n            <p className=\"text-muted-foreground text-sm leading-relaxed md:text-base\">\n              {footerText}\n            </p>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-3.tsx"
    }
  ],
  "type": "registry:ui"
}