{
  "name": "commerce-pricing-tiers",
  "kind": "block",
  "primary": "section",
  "page": "/apps/user-flow/app/registration/plan/plan.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-reg-form": "",
    "role": "radiogroup",
    "aria-label": "Plan"
  },
  "html": "<section data-reg-form\n  role=\"radiogroup\" aria-label=\"Plan\">\n          <col-ui gap=\"2\">\n            <option-card-ui name=\"plan\" value=\"free\">\n              <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n                <span>Free</span>\n                <text-ui color=\"subtle\" size=\"sm\" grow>Solo or community work</text-ui>\n                <span>$0/mo</span>\n              </row-ui>\n              <span slot=\"description\">Up to 5 members · 10 projects · community support</span>\n            </option-card-ui>\n\n            <option-card-ui name=\"plan\" value=\"pro\" checked>\n              <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n                <span>Pro</span>\n                <text-ui color=\"subtle\" size=\"sm\" grow>Designed for small operations</text-ui>\n                <span>$49/mo</span>\n              </row-ui>\n              <col-ui slot=\"description\" gap=\"2\">\n                <span>Unlimited members · advanced charts · 100 GB storage · email support</span>\n                <row-ui gap=\"2\" align=\"center\">\n                  <badge-ui text=\"Saves 40%\" variant=\"success\"></badge-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">14-day trial period</text-ui>\n                </row-ui>\n              </col-ui>\n            </option-card-ui>\n\n            <option-card-ui name=\"plan\" value=\"team\">\n              <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n                <span>Team</span>\n                <text-ui color=\"subtle\" size=\"sm\" grow>For growing organizations</text-ui>\n                <span>$129/mo</span>\n              </row-ui>\n              <col-ui slot=\"description\" gap=\"2\">\n                <span>Everything in Pro · SSO · audit log · role-based permissions · 1 TB storage</span>\n                <row-ui gap=\"2\" align=\"center\">\n                  <badge-ui text=\"Saves 30%\" variant=\"success\"></badge-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">Pay annually</text-ui>\n                </row-ui>\n              </col-ui>\n            </option-card-ui>\n\n            <option-card-ui name=\"plan\" value=\"enterprise\">\n              <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n                <span>Enterprise</span>\n                <text-ui color=\"subtle\" size=\"sm\" grow>For regulated industries</text-ui>\n                <span>custom</span>\n              </row-ui>\n              <col-ui slot=\"description\" gap=\"2\">\n                <span>Dedicated support · DPA · SCIM · on-prem deployment · talk to sales</span>\n                <row-ui gap=\"2\" align=\"center\">\n                  <badge-ui text=\"Volume pricing\" variant=\"accent\"></badge-ui>\n                  <text-ui size=\"sm\" color=\"subtle\">Custom contract</text-ui>\n                </row-ui>\n              </col-ui>\n            </option-card-ui>\n\n            <option-card-ui name=\"plan\" value=\"custom\">\n              <row-ui slot=\"heading\" gap=\"2\" align=\"baseline\">\n                <span>Something else</span>\n                <text-ui color=\"subtle\" size=\"sm\" grow>Tell us what you need</text-ui>\n                <span>talk to us</span>\n              </row-ui>\n              <span slot=\"description\">None of these fit? Tell us what you need and we'll quote a custom plan within one business day.</span>\n              <textarea-ui\n                name=\"custom-requirements\"\n                rows=\"4\"\n                label=\"Your requirements\"\n                placeholder=\"Volume, compliance needs, integrations, deployment constraints — whatever you'd want a sales engineer to know up front.\"\n              ></textarea-ui>\n            </option-card-ui>\n          </col-ui>\n        </section>",
  "source": "apps/user-flow/app/registration/plan/plan.contents.html",
  "metadata": {
    "domain": "layout",
    "description": "Pricing-plan tier selector — 3 plan cards (free / pro / enterprise) with feature lists + radio-group selection.",
    "keywords": [
      "pricing",
      "tiers",
      "plans",
      "plan",
      "subscription",
      "free",
      "pro",
      "enterprise",
      "billing",
      "commerce",
      "comparison"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "body",
      "textContent": "Free"
    },
    {
      "id": "text-2",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Solo or community work"
    },
    {
      "id": "text-3",
      "component": "Text",
      "variant": "body",
      "textContent": "$0/mo"
    },
    {
      "id": "row",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text",
        "text-2",
        "text-3"
      ]
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "Up to 5 members · 10 projects · community support"
    },
    {
      "id": "plan",
      "component": "OptionCard",
      "name": "plan",
      "value": "free",
      "children": [
        "row",
        "text-4"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "textContent": "Pro"
    },
    {
      "id": "text-6",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Designed for small operations"
    },
    {
      "id": "text-7",
      "component": "Text",
      "variant": "body",
      "textContent": "$49/mo"
    },
    {
      "id": "row-2",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-5",
        "text-6",
        "text-7"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "variant": "body",
      "textContent": "Unlimited members · advanced charts · 100 GB storage · email support"
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "Saves 40%",
      "variant": "success"
    },
    {
      "id": "text-9",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "14-day trial period"
    },
    {
      "id": "row-3",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge",
        "text-9"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-8",
        "row-3"
      ]
    },
    {
      "id": "option-card",
      "component": "OptionCard",
      "checked": true,
      "name": "plan",
      "value": "pro",
      "children": [
        "row-2",
        "column-2"
      ]
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "textContent": "Team"
    },
    {
      "id": "text-11",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "For growing organizations"
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "body",
      "textContent": "$129/mo"
    },
    {
      "id": "row-4",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-10",
        "text-11",
        "text-12"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "variant": "body",
      "textContent": "Everything in Pro · SSO · audit log · role-based permissions · 1 TB storage"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "text": "Saves 30%",
      "variant": "success"
    },
    {
      "id": "text-14",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Pay annually"
    },
    {
      "id": "row-5",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-2",
        "text-14"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-13",
        "row-5"
      ]
    },
    {
      "id": "option-card-2",
      "component": "OptionCard",
      "name": "plan",
      "value": "team",
      "children": [
        "row-4",
        "column-3"
      ]
    },
    {
      "id": "text-15",
      "component": "Text",
      "variant": "body",
      "textContent": "Enterprise"
    },
    {
      "id": "text-16",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "For regulated industries"
    },
    {
      "id": "text-17",
      "component": "Text",
      "variant": "body",
      "textContent": "custom"
    },
    {
      "id": "row-6",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-15",
        "text-16",
        "text-17"
      ]
    },
    {
      "id": "text-18",
      "component": "Text",
      "variant": "body",
      "textContent": "Dedicated support · DPA · SCIM · on-prem deployment · talk to sales"
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "text": "Volume pricing",
      "variant": "accent"
    },
    {
      "id": "text-19",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Custom contract"
    },
    {
      "id": "row-7",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "badge-3",
        "text-19"
      ]
    },
    {
      "id": "column-4",
      "component": "Column",
      "slot": "description",
      "gap": "2",
      "children": [
        "text-18",
        "row-7"
      ]
    },
    {
      "id": "option-card-3",
      "component": "OptionCard",
      "name": "plan",
      "value": "enterprise",
      "children": [
        "row-6",
        "column-4"
      ]
    },
    {
      "id": "text-20",
      "component": "Text",
      "variant": "body",
      "textContent": "Something else"
    },
    {
      "id": "text-21",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Tell us what you need"
    },
    {
      "id": "text-22",
      "component": "Text",
      "variant": "body",
      "textContent": "talk to us"
    },
    {
      "id": "row-8",
      "component": "Row",
      "slot": "heading",
      "align": "baseline",
      "gap": "2",
      "children": [
        "text-20",
        "text-21",
        "text-22"
      ]
    },
    {
      "id": "text-23",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "None of these fit? Tell us what you need and we'll quote a custom plan within one business day."
    },
    {
      "id": "custom-requirements",
      "component": "TextArea",
      "label": "Your requirements",
      "name": "custom-requirements",
      "placeholder": "Volume, compliance needs, integrations, deployment constraints — whatever you'd want a sales engineer to know up front.",
      "rows": "4"
    },
    {
      "id": "option-card-4",
      "component": "OptionCard",
      "name": "plan",
      "value": "custom",
      "children": [
        "row-8",
        "text-23",
        "custom-requirements"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "gap": "2",
      "children": [
        "plan",
        "option-card",
        "option-card-2",
        "option-card-3",
        "option-card-4"
      ]
    },
    {
      "id": "root",
      "component": "Section",
      "data-reg-form": "",
      "children": [
        "column"
      ]
    }
  ]
}