{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-03",
  "title": "Pricing 03",
  "description": "A simple pricing block",
  "dependencies": [
    "lucide-react",
    "@number-flow/react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "separator",
    "tabs",
    "tooltip"
  ],
  "files": [
    {
      "path": "src/registry/blocks/radix/pricing-03/components/pricing.tsx",
      "content": "\"use client\";\n\nimport NumberFlow from \"@number-flow/react\";\nimport { CircleCheck, CircleHelp } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport { Separator } from \"@/registry/bases/radix/ui/separator\";\nimport { Tabs, TabsList, TabsTrigger } from \"@/registry/bases/radix/ui/tabs\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/bases/radix/ui/tooltip\";\n\nconst tooltipContent = {\n  styles: \"Choose from a variety of styles to suit your preferences.\",\n  filters: \"Choose from a variety of filters to enhance your portraits.\",\n  credits: \"Use these credits to retouch your portraits.\",\n};\n\nconst YEARLY_DISCOUNT = 20;\nconst plans = [\n  {\n    name: \"Starter\",\n    price: 20,\n    description:\n      \"Get 20 AI-generated portraits with 2 unique styles and filters.\",\n    features: [\n      { title: \"5 hours turnaround time\" },\n      { title: \"20 AI portraits\" },\n      { title: \"Choice of 2 styles\", tooltip: tooltipContent.styles },\n      { title: \"Choice of 2 filters\", tooltip: tooltipContent.filters },\n      { title: \"2 retouch credits\", tooltip: tooltipContent.credits },\n    ],\n    buttonText: \"Get 20 portraits in 5 hours\",\n  },\n  {\n    name: \"Advanced\",\n    price: 40,\n    isRecommended: true,\n    description:\n      \"Get 50 AI-generated portraits with 5 unique styles and filters.\",\n    features: [\n      { title: \"3 hours turnaround time\" },\n      { title: \"50 AI portraits\" },\n      { title: \"Choice of 5 styles\", tooltip: tooltipContent.styles },\n      { title: \"Choice of 5 filters\", tooltip: tooltipContent.filters },\n      { title: \"5 retouch credits\", tooltip: tooltipContent.credits },\n    ],\n    buttonText: \"Get 50 portraits in 3 hours\",\n    isPopular: true,\n  },\n  {\n    name: \"Premium\",\n    price: 80,\n    description:\n      \"Get 100 AI-generated portraits with 10 unique styles and filters.\",\n    features: [\n      { title: \"1-hour turnaround time\" },\n      { title: \"100 AI portraits\" },\n      { title: \"Choice of 10 styles\", tooltip: tooltipContent.styles },\n      { title: \"Choice of 10 filters\", tooltip: tooltipContent.filters },\n      { title: \"10 retouch credits\", tooltip: tooltipContent.credits },\n    ],\n    buttonText: \"Get 100 portraits in 1 hour\",\n  },\n];\n\nconst Pricing = () => {\n  const [selectedBillingPeriod, setSelectedBillingPeriod] = useState(\"monthly\");\n\n  return (\n    <div className=\"px-6 py-20\">\n      <h2 className=\"text-center font-medium text-4xl tracking-[-0.04em] sm:text-[2.75rem]\">\n        Our Plans\n      </h2>\n      <p className=\"mt-3 text-center text-muted-foreground text-xl -tracking-[0.01em] md:text-2xl\">\n        Choose the plan that fits your needs\n      </p>\n\n      <Tabs\n        className=\"mx-auto mt-8 max-w-max\"\n        onValueChange={setSelectedBillingPeriod}\n        value={selectedBillingPeriod}\n      >\n        <TabsList className=\"h-11 rounded-full\">\n          <TabsTrigger\n            className=\"rounded-full px-4 data-[state=active]:shadow-none\"\n            value=\"monthly\"\n          >\n            Monthly\n          </TabsTrigger>\n          <TabsTrigger\n            className=\"rounded-full px-4 data-[state=active]:shadow-none\"\n            value=\"yearly\"\n          >\n            Yearly (Save {YEARLY_DISCOUNT}%)\n          </TabsTrigger>\n        </TabsList>\n      </Tabs>\n      <div className=\"mx-auto mt-12 grid max-w-(--breakpoint-lg) grid-cols-1 items-center gap-8 lg:grid-cols-3\">\n        {plans.map((plan) => (\n          <div\n            className={cn(\"relative rounded-xl border p-6\", {\n              \"border-2 border-primary py-10\": plan.isPopular,\n            })}\n            key={plan.name}\n          >\n            {plan.isPopular && (\n              <Badge className=\"absolute top-0 right-1/2 translate-x-1/2 -translate-y-1/2\">\n                Most Popular\n              </Badge>\n            )}\n            <h3 className=\"font-medium text-lg\">{plan.name}</h3>\n            <p className=\"mt-4 font-semibold text-4xl\">\n              <NumberFlow\n                className=\"font-satoshi\"\n                prefix=\"$\"\n                value={\n                  selectedBillingPeriod === \"monthly\"\n                    ? plan.price\n                    : plan.price * ((100 - YEARLY_DISCOUNT) / 100)\n                }\n              />\n              <span className=\"ml-1.5 font-normal text-muted-foreground text-sm\">\n                /month\n              </span>\n            </p>\n            <p className=\"mt-4 text-muted-foreground text-sm\">\n              {plan.description}\n            </p>\n\n            <Button\n              className=\"mt-6 w-full\"\n              size=\"lg\"\n              variant={plan.isPopular ? \"default\" : \"outline\"}\n            >\n              {plan.buttonText}\n            </Button>\n            <Separator className=\"my-8\" />\n            <ul className=\"space-y-2\">\n              {plan.features.map((feature) => (\n                <li className=\"flex items-start gap-1.5\" key={feature.title}>\n                  <CircleCheck className=\"mt-1 h-4 w-4 text-green-600\" />\n                  {feature.title}\n                  {feature.tooltip && (\n                    <Tooltip>\n                      <TooltipTrigger className=\"cursor-help\">\n                        <CircleHelp className=\"mt-1 h-4 w-4 text-gray-500\" />\n                      </TooltipTrigger>\n                      <TooltipContent>{feature.tooltip}</TooltipContent>\n                    </Tooltip>\n                  )}\n                </li>\n              ))}\n            </ul>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n};\n\nexport default Pricing;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}