{"$schema":"https://ui.artbloom.tech/schema/registry-item.json","name":"pricing-tiers","type":"registry:block","title":"Pricing Tiers","description":"Three-column pricing with a highlighted Pro plan, per-plan feature lists and a checkmark for each line. One file, no dependencies.","author":"@artbloom","dependencies":[],"registryDependencies":[],"files":[{"path":"components/blocks/pricing-tiers.tsx","target":"components/blocks/pricing-tiers.tsx","content":"function CheckIcon() {\n  return (\n    <svg\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n      className=\"mt-0.5 h-5 w-5 flex-none text-indigo-600\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M16.704 5.29a1 1 0 0 1 .006 1.414l-7.5 7.6a1 1 0 0 1-1.424 0l-3.5-3.548a1 1 0 0 1 1.424-1.404l2.788 2.826 6.788-6.888a1 1 0 0 1 1.418-.006Z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Everything you need to launch your first project.\",\n    price: \"$0\",\n    featured: false,\n    cta: \"Get started\",\n    features: [\n      \"Up to 3 active projects\",\n      \"1 GB of asset storage\",\n      \"Community support\",\n      \"Basic analytics dashboard\",\n      \"Weekly export to CSV\",\n    ],\n  },\n  {\n    name: \"Pro\",\n    description: \"For growing teams that ship on a regular cadence.\",\n    price: \"$29\",\n    featured: true,\n    cta: \"Start free trial\",\n    features: [\n      \"Unlimited active projects\",\n      \"100 GB of asset storage\",\n      \"Priority email support\",\n      \"Advanced analytics and funnels\",\n      \"Custom domains and branding\",\n    ],\n  },\n  {\n    name: \"Team\",\n    description: \"Scale securely with roles, audit logs, and SSO.\",\n    price: \"$79\",\n    featured: false,\n    cta: \"Contact sales\",\n    features: [\n      \"Everything in Pro, plus\",\n      \"Unlimited team members\",\n      \"SAML single sign-on\",\n      \"Audit logs and access controls\",\n      \"Dedicated success manager\",\n    ],\n  },\n];\n\nexport default function PricingTiers() {\n  return (\n    <section className=\"w-full bg-white py-20 sm:py-28\">\n      <div className=\"mx-auto max-w-6xl px-6\">\n        <div className=\"mx-auto max-w-2xl text-center\">\n          <p className=\"text-sm font-semibold text-indigo-600\">Pricing</p>\n          <h2 className=\"mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl\">\n            Simple, transparent pricing\n          </h2>\n          <p className=\"mt-4 text-lg text-slate-500\">\n            Pick the plan that fits today and upgrade anytime — no hidden fees, no surprises.\n          </p>\n        </div>\n\n        <div className=\"mt-16 grid grid-cols-1 items-start gap-8 lg:grid-cols-3\">\n          {plans.map((plan) => (\n            <div\n              key={plan.name}\n              className={\n                plan.featured\n                  ? \"relative rounded-2xl border border-slate-200 bg-white p-6 shadow-sm ring-2 ring-indigo-600 lg:-mt-4\"\n                  : \"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\"\n              }\n            >\n              {plan.featured && (\n                <div className=\"absolute -top-3 left-1/2 -translate-x-1/2\">\n                  <span className=\"inline-flex rounded-full bg-indigo-600 px-3 py-1 text-xs font-semibold text-white\">\n                    Most popular\n                  </span>\n                </div>\n              )}\n\n              <h3 className=\"text-lg font-semibold text-slate-900\">{plan.name}</h3>\n              <p className=\"mt-2 text-sm text-slate-500\">{plan.description}</p>\n\n              <p className=\"mt-6 flex items-baseline gap-x-1\">\n                <span className=\"text-4xl font-bold tracking-tight text-slate-900\">\n                  {plan.price}\n                </span>\n                <span className=\"text-sm font-medium text-slate-500\">/mo</span>\n              </p>\n\n              <a\n                href=\"#\"\n                className={\n                  plan.featured\n                    ? \"mt-6 inline-flex w-full items-center justify-center rounded-lg bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\"\n                    : \"mt-6 inline-flex w-full items-center justify-center rounded-lg border border-slate-300 bg-white px-5 py-2.5 text-sm font-semibold text-slate-900 shadow-sm hover:bg-slate-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600\"\n                }\n              >\n                {plan.cta}\n              </a>\n\n              <ul role=\"list\" className=\"mt-8 space-y-3 border-t border-slate-200 pt-6 text-sm text-slate-600\">\n                {plan.features.map((feature) => (\n                  <li key={feature} className=\"flex gap-x-3\">\n                    <CheckIcon />\n                    <span>{feature}</span>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block"}],"meta":{"kind":"blocks","categories":["pricing"],"docs":"https://ui.artbloom.tech/artbloom/blocks/pricing-tiers"}}