{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing",
  "type": "registry:block",
  "title": "Pricing Section",
  "description": "Pricing tables and cards with feature comparisons.",
  "registryDependencies": [
    "https://launchuicomponents.com/r/button.json"
  ],
  "files": [
    {
      "path": "components/sections/pricing/default.tsx",
      "content": "import { User, Users } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { PricingColumn, PricingColumnProps } from \"../../ui/pricing-column\";\nimport { Section } from \"../../ui/section\";\n\ninterface PricingProps {\n  title?: string | false;\n  description?: string | false;\n  plans?: PricingColumnProps[] | false;\n  className?: string;\n}\n\nconst DEFAULT_PRICING_PLANS: PricingColumnProps[] = [\n  {\n    name: \"Free\",\n    description: \"For everyone starting out on a website for their big idea\",\n    price: 0,\n    priceNote: \"Free and open-source forever. Get started now.\",\n    cta: {\n      variant: \"glow\",\n      label: \"Get started for free\",\n      href: \"https://www.launchuicomponents.com/\",\n    },\n    features: [\n      \"1 website template\",\n      \"9 blocks and sections\",\n      \"4 custom animations\",\n    ],\n    variant: \"default\",\n    className: \"hidden lg:flex\",\n  },\n  {\n    name: \"Pro\",\n    icon: <User className=\"size-4\" />,\n    description: \"For early-stage founders, solopreneurs and indie devs\",\n    price: 99,\n    priceNote: \"Lifetime access. Free updates. No recurring fees.\",\n    cta: {\n      variant: \"default\",\n      label: \"Get all-access\",\n      href: \"https://www.launchuicomponents.com/\",\n    },\n    features: [\n      `$1000 templates`,\n      `$1000 blocks and sections`,\n      `$1000 illustrations`,\n      `$1000 custom animations`,\n    ],\n    variant: \"glow-brand\",\n  },\n  {\n    name: \"Pro Team\",\n    icon: <Users className=\"size-4\" />,\n    description: \"For teams and agencies working on cool products together\",\n    price: 499,\n    priceNote: \"Lifetime access. Free updates. No recurring fees.\",\n    cta: {\n      variant: \"default\",\n      label: \"Get all-access for your team\",\n      href: \"https://www.launchuicomponents.com/\",\n    },\n    features: [\n      \"All the templates, components and sections available for your entire team\",\n    ],\n    variant: \"glow\",\n  },\n];\n\nexport default function Pricing({\n  title = \"Build your dream landing page, today.\",\n  description = \"Get lifetime access to all the components. No recurring fees. Just simple, transparent pricing.\",\n  plans = DEFAULT_PRICING_PLANS,\n  className = \"\",\n}: PricingProps) {\n  return (\n    <Section className={cn(className)}>\n      <div className=\"mx-auto flex max-w-6xl flex-col items-center gap-12\">\n        {(title || description) && (\n          <div className=\"flex flex-col items-center gap-4 px-4 text-center sm:gap-8\">\n            {title && (\n              <h2 className=\"text-3xl leading-tight font-semibold sm:text-5xl sm:leading-tight\">\n                {title}\n              </h2>\n            )}\n            {description && (\n              <p className=\"text-md text-muted-foreground max-w-[600px] font-medium sm:text-xl\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n        {plans !== false && plans.length > 0 && (\n          <div className=\"max-w-container mx-auto grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3\">\n            {plans.map((plan) => (\n              <PricingColumn\n                key={plan.name}\n                name={plan.name}\n                icon={plan.icon}\n                description={plan.description}\n                price={plan.price}\n                originalPrice={plan.originalPrice}\n                promotionText={plan.promotionText}\n                priceNote={plan.priceNote}\n                cta={plan.cta}\n                features={plan.features}\n                variant={plan.variant}\n                className={plan.className}\n              />\n            ))}\n          </div>\n        )}\n      </div>\n    </Section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/sections/pricing/default.tsx"
    },
    {
      "path": "components/ui/pricing-column.tsx",
      "content": "import { cva, type VariantProps } from \"class-variance-authority\";\nimport { CircleCheckBig } from \"lucide-react\";\nimport Link from \"next/link\";\nimport { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nimport { Button } from \"./button\";\n\nconst pricingColumnVariants = cva(\n  \"max-w-container relative flex flex-col gap-6 overflow-hidden rounded-2xl p-8 shadow-xl\",\n  {\n    variants: {\n      variant: {\n        default: \"glass-1 to-transparent dark:glass-3\",\n        glow: \"glass-2 to-transparent dark:glass-3 after:content-[''] after:absolute after:-top-[128px] after:left-1/2 after:h-[128px] after:w-[100%] after:max-w-[960px] after:-translate-x-1/2 after:rounded-[50%] dark:after:bg-foreground/30 after:blur-[72px]\",\n        \"glow-brand\":\n          \"glass-3 from-card/100 to-card/100 dark:glass-4 after:content-[''] after:absolute after:-top-[128px] after:left-1/2 after:h-[128px] after:w-[100%] after:max-w-[960px] after:-translate-x-1/2 after:rounded-[50%] after:bg-brand-foreground/70 after:blur-[72px]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nexport interface PricingColumnProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof pricingColumnVariants> {\n  name: string;\n  icon?: ReactNode;\n  description: string;\n  price: number;\n  originalPrice?: number;\n  promotionText?: ReactNode;\n  priceNote: string;\n  cta: {\n    variant: \"glow\" | \"default\";\n    label: string;\n    href: string;\n  };\n  features: string[];\n}\n\nexport function PricingColumn({\n  name,\n  icon,\n  description,\n  price,\n  originalPrice,\n  promotionText,\n  priceNote,\n  cta,\n  features,\n  variant,\n  className,\n  ...props\n}: PricingColumnProps) {\n  return (\n    <div\n      className={cn(pricingColumnVariants({ variant, className }))}\n      {...props}\n    >\n      <hr\n        className={cn(\n          \"via-foreground/60 absolute top-0 left-[10%] h-[1px] w-[80%] border-0 bg-linear-to-r from-transparent to-transparent\",\n          variant === \"glow-brand\" && \"via-brand\",\n        )}\n      />\n      <div className=\"flex flex-col gap-7\">\n        <header className=\"flex flex-col gap-2\">\n          <h2 className=\"flex items-center gap-2 font-bold\">\n            {icon && (\n              <div className=\"text-muted-foreground flex items-center gap-2\">\n                {icon}\n              </div>\n            )}\n            {name}\n          </h2>\n          <p className=\"text-muted-foreground max-w-[220px] text-sm\">\n            {description}\n          </p>\n        </header>\n        <section className=\"flex flex-col gap-3\">\n          {originalPrice !== undefined && (\n            <div className=\"flex h-6 items-baseline gap-1\">\n              <span className=\"text-muted-foreground text-lg font-medium line-through\">\n                {originalPrice > 0 && price !== originalPrice\n                  ? `$${originalPrice}`\n                  : \"\"}\n              </span>\n            </div>\n          )}\n          <div className=\"flex items-center gap-3 lg:flex-col lg:items-start xl:flex-row xl:items-center\">\n            <div className=\"flex flex-col gap-1\">\n              <div className=\"flex items-baseline gap-1\">\n                <span className=\"text-muted-foreground text-2xl font-bold\">\n                  $\n                </span>\n                <span className=\"text-6xl font-bold\">{price}</span>\n              </div>\n            </div>\n            <div className=\"flex min-h-[40px] flex-col\">\n              {price > 0 && (\n                <>\n                  <span className=\"text-sm\">one-time payment</span>\n                  <span className=\"text-muted-foreground text-sm\">\n                    plus local taxes\n                  </span>\n                </>\n              )}\n            </div>\n          </div>\n          {promotionText && (\n            <div className=\"text-brand-foreground h-6 text-sm font-medium\">\n              {promotionText}\n            </div>\n          )}\n        </section>\n        <Button variant={cta.variant} size=\"lg\" asChild>\n          <Link href={cta.href}>{cta.label}</Link>\n        </Button>\n        <p className=\"text-muted-foreground min-h-[40px] max-w-[220px] text-sm\">\n          {priceNote}\n        </p>\n        <hr className=\"border-input\" />\n      </div>\n      <div>\n        <ul className=\"flex flex-col gap-2\">\n          {features.map((feature, index) => (\n            <li\n              key={`${feature}-${index}`}\n              className=\"flex items-center gap-2 text-sm\"\n            >\n              <CircleCheckBig className=\"text-muted-foreground size-4 shrink-0\" />\n              {feature}\n            </li>\n          ))}\n        </ul>\n      </div>\n    </div>\n  );\n}\n\nexport { pricingColumnVariants };\n",
      "type": "registry:ui",
      "target": "components/ui/pricing-column.tsx"
    }
  ],
  "dependencies": [
    "@radix-ui/react-slot",
    "lucide-react"
  ]
}