{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-01",
  "title": "Pricing",
  "description": "A responsive three-tier pricing section with a highlighted plan.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@rivelle/utils",
    "@rivelle/badge",
    "@rivelle/button"
  ],
  "files": [
    {
      "path": "registry/nova/blocks/pricing-01.tsx",
      "content": "import * as React from \"react\";\nimport { Check, Sparkles } from \"lucide-react\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nconst plans = [\n  {\n    name: \"Starter\",\n    price: \"$0\",\n    description: \"For experiments and personal projects.\",\n    features: [\"3 projects\", \"Community support\", \"Core components\"],\n  },\n  {\n    name: \"Pro\",\n    price: \"$24\",\n    description: \"For makers shipping real products.\",\n    features: [\n      \"Unlimited projects\",\n      \"All blocks and templates\",\n      \"Priority support\",\n    ],\n    featured: true,\n  },\n  {\n    name: \"Studio\",\n    price: \"$79\",\n    description: \"For teams building together.\",\n    features: [\"Everything in Pro\", \"10 team seats\", \"Shared presets\"],\n  },\n];\n\nfunction Pricing01({ className, ...props }: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      className={cn(\n        \"rounded-[2rem] border border-foreground/10 bg-background px-6 py-16 sm:px-10\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"mx-auto max-w-2xl text-center\">\n        <Badge variant=\"outline\">\n          <Sparkles /> Simple pricing\n        </Badge>\n        <h1 className=\"mt-5 text-4xl font-semibold tracking-[-.05em] sm:text-5xl\">\n          Choose room to grow.\n        </h1>\n        <p className=\"mt-4 text-muted-foreground\">\n          Start free. Upgrade when your product and team need more.\n        </p>\n      </div>\n      <div className=\"mx-auto mt-12 grid max-w-5xl gap-5 lg:grid-cols-3\">\n        {plans.map((plan) => (\n          <div\n            className={cn(\n              \"relative flex flex-col rounded-3xl border p-7\",\n              plan.featured\n                ? \"border-primary/35 bg-primary/[.055] shadow-[0_28px_80px_-48px_var(--primary)]\"\n                : \"border-foreground/10 bg-foreground/[.025]\",\n            )}\n            key={plan.name}\n          >\n            {plan.featured && (\n              <Badge className=\"absolute right-5 top-5\">Popular</Badge>\n            )}\n            <p className=\"text-sm font-semibold\">{plan.name}</p>\n            <div className=\"mt-5 flex items-end gap-1\">\n              <span className=\"text-4xl font-semibold tracking-[-.05em]\">\n                {plan.price}\n              </span>\n              <span className=\"pb-1 text-sm text-muted-foreground\">/month</span>\n            </div>\n            <p className=\"mt-3 min-h-12 text-sm leading-relaxed text-muted-foreground\">\n              {plan.description}\n            </p>\n            <Button\n              className=\"mt-6\"\n              variant={plan.featured ? \"default\" : \"outline\"}\n            >\n              Choose {plan.name}\n            </Button>\n            <div className=\"mt-7 space-y-3 border-t border-foreground/8 pt-6\">\n              {plan.features.map((feature) => (\n                <div className=\"flex items-center gap-2 text-sm\" key={feature}>\n                  <Check className=\"size-4 text-primary\" />\n                  {feature}\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}\n\nexport { Pricing01 };\n",
      "type": "registry:block"
    }
  ],
  "type": "registry:block"
}