pricing

              <div class="max-w-xl mx-auto text-center">
  <h1
    class="text-2xl md:text-3xl lg:text-4xl font-medium tracking-tight text-zinc-900 text-balance"
  >
    Give your team tools that don't suck
  </h1>
  <p class="text-base mt-2 font-medium text-zinc-600 text-balance">
    Start with what you need, skip what you don't. Scale up when spreadsheets
    stop cutting it.
  </p>
  <!-- Pricing Toggle -->
  <div
    aria-labelledby="pricing-toggle"
    class="relative z-0 inline-flex justify-center w-full p-1 mx-auto mt-8 overflow-hidden bg-white shadow ring-1 ring-zinc-200 ring-offset-2 gap-4 lg:mx-0 rounded-md max-w-52"
  >
    <div
      class="absolute inset-0 bg-zinc-50 rounded-md transition-transform duration-200 ease-in-out"
      :class="duration === 'monthly' ? 'w-1/2 translate-x-0' : 'w-1/2 translate-x-full'"
    ></div>
    <button
      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"
      :class="duration === 'monthly' ? 'text-zinc-600' : 'focus:text-zinc-900 hover:text-zinc-900'"
      @click="duration = 'monthly'"
      type="button"
      :aria-pressed="duration === 'monthly'"
    >
      Monthly
    </button>
    <button
      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"
      :class="duration === 'annual' ? 'text-zinc-600' : 'focus:text-zinc-900 hover:text-zinc-900'"
      @click="duration = 'annual'"
      type="button"
      :aria-pressed="duration === 'annual'"
    >
      Annual
    </button>
  </div>
</div>
<!-- Pricing Cards -->
<div class="max-w-2xl mx-auto mt-12 grid grid-cols-1 gap-4 sm:grid-cols-2">
  <div
    class="flex flex-col justify-between h-full p-8 bg-white shadow outline outline-zinc-200 rounded-xl"
  >
    <div>
      <div class="flex flex-col">
        <h3 class="text-base font-medium text-zinc-900">Core</h3>
        <p
          class="text-xl md:text-2xl lg:text-3xl flex items-baseline mt-4 font-medium tracking-tighter text-zinc-900"
        >
          <span
            data-monthly="$29.00"
            data-annual="$19.00"
            x-text="$el.dataset[duration]"
          ></span>
          <span class="text-sm font-normal tracking-normal text-zinc-500">
            <span x-show="duration === 'monthly'">/month</span>
            <span x-show="duration === 'annual'" style="display: none">
              /annually
            </span>
          </span>
        </p>
        <p class="text-sm mt-2 text-zinc-500">
          For solo builders, side project warriors, and anyone who just wants
          the essentials without the enterprise bloat.
        </p>
        <div class="w-full mt-4">
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-zinc-700 bg-white outline outline-zinc-200 hover:shadow-sm focus:outline-zinc-900 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
          >
            Get Started
          </button>
        </div>
      </div>
      <div class="mt-8">
        <p class="text-xs font-medium uppercase text-zinc-500">
          Core plan includes:
        </p>
        <ul
          class="flex flex-col mt-4 text-sm text-zinc-600 gap-y-3"
          role="list"
        >
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-layout-users-group size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M10 13a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
              <path d="M8 21v-1a2 2 0 0 1 2 -2h4a2 2 0 0 1 2 2v1"></path>
              <path d="M15 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
              <path d="M17 10h2a2 2 0 0 1 2 2v1"></path>
              <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0"></path>
              <path d="M3 13v-1a2 2 0 0 1 2 -2h2"></path>
            </svg>
            <span>1 Teams</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-arrow-settings-exclamation size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M15.004 18.401a1.724 1.724 0 0 0 -1.329 1.282c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.079 .262 1.495 1.305 1.248 2.17"
              ></path>
              <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
              <path d="M19 16v3"></path>
              <path d="M19 22v.01"></path>
            </svg>
            <span>50 issues</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-arrow-user-plus size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
              <path
                d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"
              ></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              <path d="M16 19h6"></path>
              <path d="M19 16v6"></path>
            </svg>
            <span>Unlimited members</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-arrow-alert-api-app size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M12 15h-6.5a2.5 2.5 0 1 1 0 -5h.5"></path>
              <path d="M15 12v6.5a2.5 2.5 0 1 1 -5 0v-.5"></path>
              <path d="M12 9h6.5a2.5 2.5 0 1 1 0 5h-.5"></path>
              <path d="M9 12v-6.5a2.5 2.5 0 0 1 5 0v.5"></path>
            </svg>
            <span>Slack, GitHub, and API access</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex items-center pt-4 mt-4 border-t gap-2 border-zinc-200">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon icon-tabler-circle-check size-4 text-blue-500"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
          stroke-width="0"
          fill="currentColor"
        ></path>
      </svg>
      <p class="text-sm font-medium text-zinc-500">No credit card required</p>
    </div>
  </div>
  <div
    class="flex flex-col justify-between h-full p-8 bg-white shadow outline outline-zinc-200 rounded-xl"
  >
    <div>
      <div class="flex flex-col">
        <h3 class="text-base font-medium text-zinc-900">Momentum</h3>
        <p
          class="text-xl md:text-2xl lg:text-3xl flex items-baseline mt-4 font-medium tracking-tighter text-zinc-900"
        >
          <span
            data-monthly="$49.00"
            data-annual="$39.00"
            x-text="$el.dataset[duration]"
          ></span>
          <span class="text-sm font-normal tracking-normal text-zinc-500">
            <span x-show="duration === 'monthly'">/month</span>
            <span x-show="duration === 'annual'" style="display: none">
              /annually
            </span>
          </span>
        </p>
        <p class="text-sm mt-2 text-zinc-500">
          Perfect for growing teams that need more power, more flexibility, and
          fewer excuses to miss a deadline.
        </p>
        <div class="w-full mt-4">
          <button
            class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-white bg-blue-500 outline outline-blue-500 hover:bg-blue-600 focus:outline-blue-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md w-full"
          >
            Get Started
          </button>
        </div>
      </div>
      <div class="mt-8">
        <p class="text-xs font-medium uppercase text-zinc-500">
          Everything in Core plus:
        </p>
        <ul
          class="flex flex-col mt-4 text-sm text-zinc-600 gap-y-3"
          role="list"
        >
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-plus size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M12 5l0 14"></path>
              <path d="M5 12l14 0"></path>
            </svg>
            <span>All Core plan features</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-bulb size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M3 12h1m8 -9v1m8 8h1m-15.4 -6.4l.7 .7m12.1 -.7l-.7 .7"
              ></path>
              <path
                d="M9 16a5 5 0 1 1 6 0a3.5 3.5 0 0 0 -1 3a2 2 0 0 1 -4 0a3.5 3.5 0 0 0 -1 -3"
              ></path>
              <path d="M9.7 17l4.6 0"></path>
            </svg>
            <span>Insights</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-arrow-user-plus size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path d="M5 7a4 4 0 1 0 8 0a4 4 0 0 0 -8 0"></path>
              <path
                d="M3 21v-2a4 4 0 0 1 4 -4h4c.96 0 1.84 .338 2.53 .901"
              ></path>
              <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
              <path d="M16 19h6"></path>
              <path d="M19 16v6"></path>
            </svg>
            <span>Unlimited teams</span>
          </li>
          <li class="flex items-center gap-2">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="icon icon-tabler-arrow-lock size-4"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
              <path
                d="M5 13a2 2 0 0 1 2 -2h10a2 2 0 0 1 2 2v6a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6z"
              ></path>
              <path d="M11 16a1 1 0 1 0 2 0a1 1 0 0 0 -2 0"></path>
              <path d="M8 11v-4a4 4 0 1 1 8 0v4"></path>
            </svg>
            <span>Private teams and guest</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="flex items-center pt-4 mt-4 border-t gap-2 border-zinc-200">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon icon-tabler-circle-check size-4 text-blue-500"
      >
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path
          d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"
          stroke-width="0"
          fill="currentColor"
        ></path>
      </svg>
      <p class="text-sm font-medium text-zinc-500">No credit card required</p>
    </div>
  </div>
</div>