{
  "name": "pricing-01",
  "type": "component",
  "description": "Pricing section with two tiers",
  "category": "marketing",
  "section": "pricing",
  "variant": 1,
  "aliases": [
    "pricing",
    "pricing 1",
    "pricing 01"
  ],
  "files": [
    {
      "name": "01.astro",
      "path": "oxbow/marketing/pricing/01.astro",
      "content": "---\nexport const description = \"Pricing section with two tiers\";\nexport const freeComponent = true;\nexport const excludeFromObfuscation = [\n  \"w-1/2\",\n  \"translate-x-0\",\n  \"translate-x-full\",\n  \"text-muted-foreground\",\n  \"text-foreground\",\n  \"focus:text-foreground\",\n  \"hover:text-foreground\",\n];\n// Components\nimport Text from \"@/components/fundations/typography/Text.astro\";\nimport Button from \"@/components/fundations/buttons/Button.astro\";\n// Icons\nimport Plus from \"@/components/fundations/icons/Plus.astro\";\nimport Lock from \"@/components/fundations/icons/Lock.astro\";\nimport Bulb from \"@/components/fundations/icons/Bulb.astro\";\nimport CircleCheck from \"@/components/fundations/icons/CircleCheck.astro\";\nimport ApiApp from \"@/components/fundations/icons/ApiApp.astro\";\nimport UserPlus from \"@/components/fundations/icons/UserPlus.astro\";\nimport UsersGroup from \"@/components/fundations/icons/UsersGroup.astro\";\nimport SettingsExclamation from \"@/components/fundations/icons/SettingsExclamation.astro\";\n// Pricing array with direct icon components\nconst pricingOptions = [\n  {\n    id: \"core\",\n    title: \"Core\",\n    monthly: \"$29.00\",\n    annual: \"$19.00\",\n    description:\n      \"For solo builders, side project warriors, and anyone who just wants the essentials without the enterprise bloat.\",\n    button: {\n      text: \"Get Started\",\n      variant: \"alternative\",\n    },\n    features: [\n      { icon: UsersGroup, text: \"1 Teams\" },\n      { icon: SettingsExclamation, text: \"50 issues\" },\n      { icon: UserPlus, text: \"Unlimited members\" },\n      { icon: ApiApp, text: \"Slack, GitHub, and API access\" },\n    ],\n  },\n  {\n    id: \"momentum\",\n    title: \"Momentum\",\n    monthly: \"$49.00\",\n    annual: \"$39.00\",\n    description:\n      \"Perfect for growing teams that need more power, more flexibility, and fewer excuses to miss a deadline.\",\n    button: {\n      text: \"Get Started\",\n      variant: \"oxbowDefault\",\n    },\n    features: [\n      { icon: Plus, text: \"All Core plan features\" },\n      { icon: Bulb, text: \"Insights\" },\n      { icon: UserPlus, text: \"Unlimited teams\" },\n      { icon: Lock, text: \"Private teams and guest\" },\n    ],\n  },\n];\n---\n\n<section x-data=\"{ duration: 'monthly' }\" class=\"bg-background\">\n  <div class=\"px-8 py-24 mx-auto max-w-7xl md:px-12 lg:px-20\">\n    <div class=\"max-w-md mx-auto text-center\">\n      <Text\n        tag=\"h1\"\n        variant=\"displayMD\"\n        class=\"font-semibold tracking-tight text-foreground text-balance\"\n      >\n        Give your team tools that don't suck\n      </Text>\n      <Text\n        tag=\"p\"\n        variant=\"textBase\"\n        class=\"mt-2 font-medium text-muted-foreground text-balance\"\n      >\n        Start with what you need, skip what you don't. Scale up when\n        spreadsheets stop cutting it.\n      </Text>\n      <!-- Pricing Toggle -->\n      <div\n        aria-labelledby=\"pricing-toggle\"\n        class=\"relative z-0 inline-flex justify-center w-full p-1 mx-auto mt-8 overflow-hidden bg-background shadow ring-1 ring-border ring-offset-2 gap-4 lg:mx-0 rounded-md max-w-52 ring-offset-background\"\n      >\n        <div\n          class=\"absolute inset-0 bg-muted rounded-md ring-1 ring-border/60 shadow-sm transition-transform duration-200 ease-in-out\"\n          :class=\"duration === 'monthly' ? 'w-1/2 translate-x-0' : 'w-1/2 translate-x-full'\"\n        >\n        </div>\n        <button\n          class=\"relative z-10 flex items-center justify-center w-full h-6 px-2 text-xs font-medium focus:outline-none transition-colors duration-300\"\n          :class=\"duration === 'monthly' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground focus:text-foreground'\"\n          @click=\"duration = 'monthly'\"\n          type=\"button\"\n          :aria-pressed=\"duration === 'monthly'\"\n        >\n          Monthly\n        </button>\n        <button\n          class=\"relative z-10 flex items-center justify-center w-full h-6 px-2 text-xs font-medium focus:outline-none transition-colors duration-300\"\n          :class=\"duration === 'annual' ? 'text-foreground' : 'text-muted-foreground hover:text-foreground focus:text-foreground'\"\n          @click=\"duration = 'annual'\"\n          type=\"button\"\n          :aria-pressed=\"duration === 'annual'\"\n        >\n          Annual\n        </button>\n      </div>\n    </div>\n    <!-- Pricing Cards -->\n    <div class=\"max-w-2xl mx-auto mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n      {\n        pricingOptions.map((tier) => (\n          <div class=\"flex flex-col justify-between h-full p-8 shadow bg-background outline outline-border rounded-xl\">\n            <div>\n              <div class=\"flex flex-col\">\n                <Text\n                  tag=\"h3\"\n                  variant=\"textBase\"\n                  class=\"font-medium text-foreground\"\n                >\n                  {tier.title}\n                </Text>\n                <Text\n                  variant=\"displaySM\"\n                  class=\"flex items-baseline mt-4 font-medium tracking-tighter text-foreground\"\n                >\n                  <span\n                    data-monthly={tier.monthly}\n                    data-annual={tier.annual}\n                    x-text=\"$el.dataset[duration]\"\n                  />\n                  <span class=\"text-sm font-normal tracking-normal text-muted-foreground\">\n                    <span x-show=\"duration === 'monthly'\">/month</span>\n                    <span x-show=\"duration === 'annual'\" style=\"display: none;\">\n                      /annually\n                    </span>\n                  </span>\n                </Text>\n                <Text\n                  tag=\"p\"\n                  variant=\"textSM\"\n                  class=\"mt-2 text-muted-foreground\"\n                >\n                  {tier.description}\n                </Text>\n                <div class=\"w-full mt-4\">\n                  <Button\n                    class=\"w-full\"\n                    variant={\n                      tier.button.variant as\n                        | \"alternative\"\n                        | \"accent\"\n                        | \"default\"\n                        | \"link\"\n                        | \"oxbowDefault\"\n                        | \"oxbowMuted\"\n                        | \"oxbowAccent\"\n                        | \"oxbowOutline\"\n                        | \"accentDark\"\n                        | \"muted\"\n                        | \"text\"\n                        | \"outline\"\n                        | \"ghost\"\n                    }\n                    size=\"sm\"\n                  >\n                    {tier.button.text}\n                  </Button>\n                </div>\n              </div>\n              <div class=\"mt-8\">\n                <Text\n                  tag=\"p\"\n                  variant=\"textXS\"\n                  class=\"font-medium uppercase text-muted-foreground\"\n                >\n                  {tier.title === \"Momentum\"\n                    ? \"Everything in Core plus:\"\n                    : \"Core plan includes:\"}\n                </Text>\n                <ul\n                  class=\"flex flex-col mt-4 text-sm text-muted-foreground gap-y-3\"\n                  role=\"list\"\n                >\n                  {tier.features.map((feature, index) => (\n                    <li class=\"flex items-center gap-2\">\n                      <feature.icon size=\"sm\" />\n                      <span>{feature.text}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n            </div>\n            <div class=\"flex items-center pt-4 mt-4 border-t gap-2 border-border\">\n              <CircleCheck size=\"sm\" class=\"text-muted-foreground\" />\n              <Text\n                tag=\"p\"\n                variant=\"textSM\"\n                class=\"font-medium text-muted-foreground\"\n              >\n                No credit card required\n              </Text>\n            </div>\n          </div>\n        ))\n      }\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": []
}