{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table",
  "type": "registry:block",
  "title": "Pricing table",
  "description": "Pricing table",
  "files": [
    {
      "path": "components/usages/pricingtableusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { CheckIcon } from \"lucide-react\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<section className=\"py-24 lg:pb-32  overflow-hidden text-secondary dark:text-secondary\">\r\n\t\t\t\t<div className=\"container px-4 mx-auto\">\r\n\t\t\t\t\t<div className=\"max-w-2xl mx-auto text-center mb-20\">\r\n\t\t\t\t\t\t<h2 className=\"mb-4 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\tPricing &amp; Plans\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t\t<p className=\"text-xl tracking-tight\">\r\n\t\t\t\t\t\t\tUse and reuse tons of responsive sections to create the\r\n\t\t\t\t\t\t\tperfect layout. Sections are ready.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex flex-wrap -m-6 *:mx-auto\">\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div className=\"h-full bg-background dark:bg-background border border-neutral-300 dark:border-neutral-600 rounded-2xl transform-gpu hover:-translate-y-2 transition duration-500 \">\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 border-b border-neutral-300 dark:border-neutral-600\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tSolo\r\n\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl font-semibold tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tFrom $29/mo\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tThe ideal plan for larger businesses who\r\n\t\t\t\t\t\t\t\t\t\t\trequire heavy usage.\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t<ul className=\"-m-1.5 mb-11\">\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>50 Users</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Unlimited Projects</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Project Schedule</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>150+ Integrations</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Priority Email Support</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t\t\t\t\t<PricingButton noCardRequired={true}>\r\n\t\t\t\t\t\t\t\t\t\tTry 14 Days Free Trial\r\n\t\t\t\t\t\t\t\t\t</PricingButton>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName=\"p-px overflow-hidden rounded-2xl hover:-translate-y-2 transition duration-500 transform-gpu\"\r\n\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\tbackgroundImage:\r\n\t\t\t\t\t\t\t\t\t\t\"url('/background-image/advanced-gradient.jpg')\",\r\n\t\t\t\t\t\t\t\t\tbackgroundRepeat: \"no-repeat\",\r\n\t\t\t\t\t\t\t\t\tbackgroundSize: \"cover\",\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div className=\"h-full bg-background dark:bg-background rounded-2xl\">\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-12\"\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundImage:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\"url('/background-image/advanced-gradient.jpg')\",\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundRepeat: \"no-repeat\",\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundSize: \"cover\",\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl text-secondary tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tStartup\r\n\t\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl text-secondary font-semibold tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tFrom $99/mo\r\n\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-secondary tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tThe ideal plan for larger businesses who\r\n\t\t\t\t\t\t\t\t\t\t\t\trequire heavy usage.\r\n\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t\t<ul className=\"-m-1.5 mb-11\">\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>50 Users</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>Unlimited Projects</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>Project Schedule</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>150+ Integrations</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\tPriority Email Support\r\n\t\t\t\t\t\t\t\t\t\t\t</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t\t\t\t\t\t<PricingButton noCardRequired={true}>\r\n\t\t\t\t\t\t\t\t\t\t\tTry 14 Days Free Trial\r\n\t\t\t\t\t\t\t\t\t\t</PricingButton>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div className=\"flex flex-col justify-between h-full bg-background dark:bg-background border border-neutral-300 dark:border-neutral-600 rounded-2xl transform-gpu hover:-translate-y-2 transition duration-500\">\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 border-neutral-300 dark:border-neutral-600\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tCustom\r\n\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl font-semibold tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tFrom $399/mo\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tWe can customize a plan that suits the exact\r\n\t\t\t\t\t\t\t\t\t\t\tneeds of your business.\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t<PricingButton>Contact sales</PricingButton>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst FeatureItem = ({ children }: { children: string }) => {\r\n\treturn (\r\n\t\t<li className=\"flex items-center py-1.5\">\r\n\t\t\t<CheckIcon className=\"size-3 mr-3\" />\r\n\t\t\t<span className=\"font-medium tracking-tight\">{children}</span>\r\n\t\t</li>\r\n\t);\r\n};\r\n\r\nconst PricingButton = ({\r\n\tchildren,\r\n\thref,\r\n\r\n\tnoCardRequired,\r\n}: {\r\n\tchildren: string;\r\n\thref?: string;\r\n\tnoCardRequired?: boolean;\r\n}) => {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<a\r\n\t\t\t\tclassName=\"inline-block px-5 py-4 w-full text-center  font-semibold tracking-tight bg-transparent hover:bg-background hover:text-secondary border dark:hover:bg-background dark:hover:text-secondary hover:scale-105 border-neutral-700 rounded-lg transition duration-200\"\r\n\t\t\t\thref={href ?? \"\"}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</a>\r\n\t\t\t{noCardRequired && (\r\n\t\t\t\t<span className=\"text-sm text-secondary tracking-tight\">\r\n\t\t\t\t\tNo credit card required\r\n\t\t\t\t</span>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n};\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/pricingtableusage.tsx",
      "content": "\"use client\";\r\n\r\nimport React from \"react\";\r\n\r\nimport { CheckIcon } from \"lucide-react\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<section className=\"py-24 lg:pb-32  overflow-hidden text-secondary dark:text-secondary\">\r\n\t\t\t\t<div className=\"container px-4 mx-auto\">\r\n\t\t\t\t\t<div className=\"max-w-2xl mx-auto text-center mb-20\">\r\n\t\t\t\t\t\t<h2 className=\"mb-4 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\tPricing &amp; Plans\r\n\t\t\t\t\t\t</h2>\r\n\t\t\t\t\t\t<p className=\"text-xl tracking-tight\">\r\n\t\t\t\t\t\t\tUse and reuse tons of responsive sections to create the\r\n\t\t\t\t\t\t\tperfect layout. Sections are ready.\r\n\t\t\t\t\t\t</p>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<div className=\"flex flex-wrap -m-6 *:mx-auto\">\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div className=\"h-full bg-background dark:bg-background border border-neutral-300 dark:border-neutral-600 rounded-2xl transform-gpu hover:-translate-y-2 transition duration-500 \">\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 border-b border-neutral-300 dark:border-neutral-600\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tSolo\r\n\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl font-semibold tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tFrom $29/mo\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tThe ideal plan for larger businesses who\r\n\t\t\t\t\t\t\t\t\t\t\trequire heavy usage.\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t<ul className=\"-m-1.5 mb-11\">\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>50 Users</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Unlimited Projects</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Project Schedule</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>150+ Integrations</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t<FeatureItem>Priority Email Support</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t\t\t\t\t<PricingButton noCardRequired={true}>\r\n\t\t\t\t\t\t\t\t\t\tTry 14 Days Free Trial\r\n\t\t\t\t\t\t\t\t\t</PricingButton>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName=\"p-px overflow-hidden rounded-2xl hover:-translate-y-2 transition duration-500 transform-gpu\"\r\n\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\tbackgroundImage:\r\n\t\t\t\t\t\t\t\t\t\t\"url('/background-image/advanced-gradient.jpg')\",\r\n\t\t\t\t\t\t\t\t\tbackgroundRepeat: \"no-repeat\",\r\n\t\t\t\t\t\t\t\t\tbackgroundSize: \"cover\",\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<div className=\"h-full bg-background dark:bg-background rounded-2xl\">\r\n\t\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\t\tclassName=\"p-12\"\r\n\t\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundImage:\r\n\t\t\t\t\t\t\t\t\t\t\t\t\"url('/background-image/advanced-gradient.jpg')\",\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundRepeat: \"no-repeat\",\r\n\t\t\t\t\t\t\t\t\t\t\tbackgroundSize: \"cover\",\r\n\t\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl text-secondary tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tStartup\r\n\t\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl text-secondary font-semibold tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tFrom $99/mo\r\n\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t\t<p className=\"text-secondary tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\t\tThe ideal plan for larger businesses who\r\n\t\t\t\t\t\t\t\t\t\t\t\trequire heavy usage.\r\n\t\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t\t<ul className=\"-m-1.5 mb-11\">\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>50 Users</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>Unlimited Projects</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>Project Schedule</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>150+ Integrations</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t<FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t\t\tPriority Email Support\r\n\t\t\t\t\t\t\t\t\t\t\t</FeatureItem>\r\n\t\t\t\t\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t\t\t\t\t\t<PricingButton noCardRequired={true}>\r\n\t\t\t\t\t\t\t\t\t\t\tTry 14 Days Free Trial\r\n\t\t\t\t\t\t\t\t\t\t</PricingButton>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<div className=\"w-full md:w-1/2 lg:w-1/3 p-6\">\r\n\t\t\t\t\t\t\t<div className=\"flex flex-col justify-between h-full bg-background dark:bg-background border border-neutral-300 dark:border-neutral-600 rounded-2xl transform-gpu hover:-translate-y-2 transition duration-500\">\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 border-neutral-300 dark:border-neutral-600\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"pr-9\">\r\n\t\t\t\t\t\t\t\t\t\t<h4 className=\"mb-6 text-6xl tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tCustom\r\n\t\t\t\t\t\t\t\t\t\t</h4>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"mb-2 text-xl font-semibold tracking-tighter\">\r\n\t\t\t\t\t\t\t\t\t\t\tFrom $399/mo\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t\t<p className=\"tracking-tight\">\r\n\t\t\t\t\t\t\t\t\t\t\tWe can customize a plan that suits the exact\r\n\t\t\t\t\t\t\t\t\t\t\tneeds of your business.\r\n\t\t\t\t\t\t\t\t\t\t</p>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"p-12 pb-11\">\r\n\t\t\t\t\t\t\t\t\t<PricingButton>Contact sales</PricingButton>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\t\t</div>\r\n\t);\r\n}\r\n\r\nconst FeatureItem = ({ children }: { children: string }) => {\r\n\treturn (\r\n\t\t<li className=\"flex items-center py-1.5\">\r\n\t\t\t<CheckIcon className=\"size-3 mr-3\" />\r\n\t\t\t<span className=\"font-medium tracking-tight\">{children}</span>\r\n\t\t</li>\r\n\t);\r\n};\r\n\r\nconst PricingButton = ({\r\n\tchildren,\r\n\thref,\r\n\r\n\tnoCardRequired,\r\n}: {\r\n\tchildren: string;\r\n\thref?: string;\r\n\tnoCardRequired?: boolean;\r\n}) => {\r\n\treturn (\r\n\t\t<>\r\n\t\t\t<a\r\n\t\t\t\tclassName=\"inline-block px-5 py-4 w-full text-center  font-semibold tracking-tight bg-transparent hover:bg-background hover:text-secondary border dark:hover:bg-background dark:hover:text-secondary hover:scale-105 border-neutral-700 rounded-lg transition duration-200\"\r\n\t\t\t\thref={href ?? \"\"}\r\n\t\t\t>\r\n\t\t\t\t{children}\r\n\t\t\t</a>\r\n\t\t\t{noCardRequired && (\r\n\t\t\t\t<span className=\"text-sm text-secondary tracking-tight\">\r\n\t\t\t\t\tNo credit card required\r\n\t\t\t\t</span>\r\n\t\t\t)}\r\n\t\t</>\r\n\t);\r\n};\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/pricing-table.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\n\nimport { cn } from \"@/registry/utilities/cn\";\nimport { CheckIcon, EuroIcon } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\n// Credit:\n// https://cuicui.day/marketing-ui/pricing-tables\n\ntype BilledType = \"monthly\" | \"annually\";\n\nconst pricingData: OfferCardProps[] = [\n\t{\n\t\ttitle: \"Starter\",\n\t\tdescription: \"For small teams\",\n\t\tprice: {\n\t\t\tmonthly: 19,\n\t\t\tannually: 9,\n\t\t},\n\t\tfeatures: [\"10 users included\", \"2 GB of storage\", \"Email support\"],\n\t\tinfos: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t},\n\t{\n\t\ttitle: \"Pro\",\n\t\tdescription: \"For medium-sized businesses\",\n\t\tprice: {\n\t\t\tmonthly: 39,\n\t\t\tannually: 29,\n\t\t},\n\t\tfeatures: [\n\t\t\t\"20 users included\",\n\t\t\t\"10 GB of storage\",\n\t\t\t\"Priority email support\",\n\t\t],\n\t\tinfos: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t\tisBestValue: true,\n\t},\n\t{\n\t\ttitle: \"Enterprise\",\n\t\tdescription: \"For large businesses\",\n\t\tprice: {\n\t\t\tmonthly: 59,\n\t\t\tannually: 49,\n\t\t},\n\t\tfeatures: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t\tinfos: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t},\n\t{\n\t\ttitle: \"Custom\",\n\t\tdescription: \"For large businesses\",\n\t\tprice: {\n\t\t\tmonthly: 59,\n\t\t\tannually: 49,\n\t\t},\n\t\tfeatures: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t\tinfos: [\n\t\t\t\"30 users included\",\n\t\t\t\"15 GB of storage\",\n\t\t\t\"Phone and email support\",\n\t\t],\n\t},\n];\n\nexport default function ManyOffersVariant1() {\n\tconst [selectedBilledType, setSelectedBilledType] =\n\t\tuseState<BilledType>(\"monthly\");\n\tfunction handleSwitchTab(tab: BilledType) {\n\t\tsetSelectedBilledType(tab);\n\t}\n\treturn (\n\t\t<div className=\"flex flex-col items-center gap-4\">\n\t\t\t<SelectOfferTab\n\t\t\t\thandleSwitchTab={handleSwitchTab}\n\t\t\t\tselectedBilledType={selectedBilledType}\n\t\t\t/>\n\t\t\t<div className=\"grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4\">\n\t\t\t\t{pricingData.map((offer) => (\n\t\t\t\t\t<OfferCard\n\t\t\t\t\t\tkey={offer.title}\n\t\t\t\t\t\t{...offer}\n\t\t\t\t\t\tselectedBilledType={selectedBilledType}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\ntype OfferCardProps = {\n\ttitle: string;\n\tdescription: string;\n\tprice: {\n\t\tmonthly: number;\n\t\tannually: number;\n\t};\n\tfeatures: string[];\n\tinfos?: string[];\n\tisBestValue?: boolean;\n};\n\nconst OfferCard = ({\n\ttitle,\n\tdescription,\n\tprice,\n\tfeatures,\n\tinfos,\n\tisBestValue,\n\tselectedBilledType,\n}: OfferCardProps & {\n\tselectedBilledType: BilledType;\n}) => {\n\tfunction getAnnualPrice() {\n\t\treturn price.annually * 12;\n\t}\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"hover:-translate-y-1 h-full transform-gpu overflow-hidden rounded-2xl border bg-background/95 transition-[transform,background-color] duration-300 ease-in-out hover:bg-background dark:bg-background/50\",\n\t\t\t\t\"text-foreground dark:text-foreground\",\n\t\t\t\tisBestValue ? \"border-[#ed8445]\" : \"border-neutral-500/50 \"\n\t\t\t)}\n\t\t>\n\t\t\t<div\n\t\t\t\tclassName={cn(\"p-6\")}\n\t\t\t\tstyle={\n\t\t\t\t\tisBestValue\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tbackground:\n\t\t\t\t\t\t\t\t\t\"radial-gradient(58.99% 10.42% at 50% 100.46%, rgba(251, 188, 5, .07) 0, transparent 100%), radial-gradient(135.76% 66.69% at 92.19% -3.15%, rgba(251, 5, 153, .1) 0, transparent 100%), radial-gradient(127.39% 38.15% at 22.81% -2.29%, rgba(239, 145, 84, .4) 0, transparent 100%)\",\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t: {}\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<div className=\"font-semibold text-foreground text-lg\">\n\t\t\t\t\t{title}\n\t\t\t\t</div>\n\t\t\t\t<div className=\"mt-2 text-foreground text-sm\">{description}</div>\n\t\t\t\t<div className=\"mt-4\">\n\t\t\t\t\t<div className=\"font-semibold text-4xl text-foreground\">\n\t\t\t\t\t\t{price[selectedBilledType]}\n\t\t\t\t\t\t<EuroIcon className=\"inline size-5\" />\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"text-foreground text-sm\">\n\t\t\t\t\t\t{selectedBilledType === \"monthly\"\n\t\t\t\t\t\t\t? \"billed monthly\"\n\t\t\t\t\t\t\t: `${getAnnualPrice()}€ billed annually`}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t<button\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"my-12 inline-flex w-full transform-gpu items-center justify-center rounded-full border border-neutral-400/20 px-12 py-2.5 font-semibold text-foreground tracking-tight transition-[background-color,transform] hover:scale-105\",\n\t\t\t\t\t\tisBestValue\n\t\t\t\t\t\t\t? \" bg-linear-to-br from-[#f6d4a1] to-[#ed8445]\"\n\t\t\t\t\t\t\t: \"bg-background \"\n\t\t\t\t\t)}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\tSelect\n\t\t\t\t</button>\n\t\t\t\t<p className={cn(\"mb-4 font-semibold text-sm tracking-tight \")}>\n\t\t\t\t\tThis plan include :\n\t\t\t\t</p>\n\t\t\t\t<ul className=\"space-y-2\">\n\t\t\t\t\t{features.map((feature) => (\n\t\t\t\t\t\t<li className=\"flex items-center gap-2\" key={feature}>\n\t\t\t\t\t\t\t<CheckIcon className=\"size-3.5 rounded-full stroke-neutral-300\" />\n\t\t\t\t\t\t\t<div className=\" text-sm\">{feature}</div>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t))}\n\t\t\t\t</ul>\n\t\t\t\t{infos && (\n\t\t\t\t\t<>\n\t\t\t\t\t\t<div className=\"my-6 h-px bg-background\" />\n\t\t\t\t\t\t<ul className=\"space-y-2\">\n\t\t\t\t\t\t\t{infos.map((feature) => (\n\t\t\t\t\t\t\t\t<li className=\"flex items-center gap-2\" key={feature}>\n\t\t\t\t\t\t\t\t\t<div className=\"size-1.5 rounded-full bg-background\" />\n\t\t\t\t\t\t\t\t\t<div className=\" text-sm\">{feature}</div>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</ul>\n\t\t\t\t\t</>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n};\n\nexport function SelectOfferTab({\n\thandleSwitchTab,\n\tselectedBilledType,\n}: Readonly<{\n\thandleSwitchTab: (tab: BilledType) => void;\n\tselectedBilledType: BilledType;\n}>) {\n\tconst OfferList = [\"monthly\", \"annually\"] as const;\n\treturn (\n\t\t<nav className=\"flex flex-col sm:flex-row\">\n\t\t\t{OfferList.map((button, _index) => (\n\t\t\t\t<button\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\" relative inline-flex w-fit transform-gpu whitespace-nowrap px-6 py-2.5 font-semibold text-lg capitalize tracking-tight transition-colors\",\n\t\t\t\t\t\tselectedBilledType === button\n\t\t\t\t\t\t\t? \"text-foreground dark:text-foreground\"\n\t\t\t\t\t\t\t: \"text-foreground hover:text-foreground dark:text-foreground dark:hover:text-foreground \"\n\t\t\t\t\t)}\n\t\t\t\t\tkey={button}\n\t\t\t\t\tonClick={() => handleSwitchTab(button)}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t>\n\t\t\t\t\t{button}\n\t\t\t\t\t{selectedBilledType === button && (\n\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\tanimate={{ opacity: 1, scale: 1 }}\n\t\t\t\t\t\t\tclassName=\"-z-10 absolute top-0 right-0 bottom-0 left-0 rounded-full bg-background dark:bg-background \"\n\t\t\t\t\t\t\texit={{ opacity: 0, scale: 0.9 }}\n\t\t\t\t\t\t\tinitial={{ opacity: 0, scale: 0.95 }}\n\t\t\t\t\t\t\tlayout={true}\n\t\t\t\t\t\t\tlayoutId=\"pricing-focused-element\"\n\t\t\t\t\t\t\ttransition={{ duration: 0.3, ease: \"easeInOut\" }}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\" size-full rounded-full\" />\n\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t)}\n\t\t\t\t</button>\n\t\t\t))}\n\t\t</nav>\n\t);\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/utilities/cn.ts",
      "content": "import { ClassValue, clsx } from \"clsx\";\r\nimport { twMerge } from \"tailwind-merge\";\r\n\r\nexport function cn(...inputs: ClassValue[]) {\r\n\treturn twMerge(clsx(inputs));\r\n}\r\n",
      "type": "registry:ui"
    }
  ]
}