{{!-- Plans  --}}

<div class="relative w-default mb-20 gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5">

  {{!-- Standard --}}

  <div class="bg-white p-10 col-span-1 lg:col-span-3 shadow-xl rounded-xl dark:bg-gray-900 relative ring dark:ring-blue-700">
    <div>
      <h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
        Standard
      </h3>
      <h2 class="font-bold text-4xl mt-5 dark:text-gray-300">
        Free
        <span class="font-medium text-base text-blue-600">£0/mo</span>
      </h2>
      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
        Our free plan is for individuals and small teams
        who want to
        enjoy Speckle without extra hassle, hosted and
        managed by
        us.
      </p>
      {{!-- <ul class="space-y-2 ">
        {{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
      </ul> --}}
      {{!-- <p class="my-4  dark:text-gray-300">Features:</p> --}}
      <ul class="space-y-2 ">
        {{> extras/listItem value="Interoperability Suite (Revit, Rhino, Gh, etc.)"}}
        {{> extras/listItem value="Version control"}}
        {{> extras/listItem value="No limits on data, streams or versions"}}
        {{> extras/listItem value="Web based 3D viewer"}}
        {{> extras/listItem value="API Access"}}
        {{> extras/listItem value="3rd Party App Registration"}}
        {{> extras/listItem value="Community support"}}
      </ul>
    </div>
    {{!-- <div class="h-16 absolute bottom-0 inset-x-0"> --}}
    <div class="self-end mt-10 ">
      <a href="https://speckle.xyz/authn/register">
        <button class="w-full bg-blue-600 font-medium text-base text-white px-4 py-2 shadow-sm border-transparent rounded-md border hover:bg-blue-700 hover:shadow-xl transition">
          Register Now
        </button>
      </a>
    </div>
  </div>


  {{!-- Managed --}}

  <div class="bg-gray-50 dark:bg-gray-900 col-span-1 lg:col-span-2 p-10 flex-wrap rounded-xl flex relative">
    <div class="w-full">
      <h3 class="bg-blue-100 font-semibold text-base text-blue-600 tracking-wide uppercase px-4 py-1 rounded-full inline-flex">
        Managed / On Prem
      </h3>
      <h2 class="font-bold text-4xl mt-5  dark:text-gray-200">
        Enterprise
      </h2>
      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-200">
        Dedicated solutions for enterprises, large
        teams or projects.
      </p>
      <ul class="space-y-2 ">
        {{> extras/listItem value="Everything in the Free Plan"}}
        {{> extras/listItem value="On prem or managed deployments"}}
        {{> extras/listItem value="Custom subdomain"}}
        {{> extras/listItem value="White labelling"}}
        {{> extras/listItem value="SSO (Single sign-on)"}}
        {{> extras/listItem value="SLA (Service Level Agreement)"}}
        {{> extras/listItem value="Dedicated Support"}}
      </ul>
    </div>
    <div class="self-end mt-10 w-full">
      <a href="mailto:office@speckle.systems?subject=Speckle Enterprise Query">
        <button class="w-full font-medium text-base dark:text-gray-50 text-gray-900 px-4 py-2 shadow-sm border-transparent rounded-md border ring-0 hover:ring-2 hover:shadow-xl transition">
          Contact Us
        </button>
      </a>
    </div>
  </div>
</div>

{{!-- Non-plans --}}

{{!-- <div class="relative max-w-prose p-5 mx-auto mb-20 pb-5 grid grid-cols-3 gap-4 bg-white dark:bg-gray-900 rounded-xl transition hover:shadow-xl">
  <div class="col-span-3 md:col-span-2">
    <h2 class="font-bold text-xl mt-5 text-gray-700 dark:text-gray-200">
      Self Hosting
    </h2>
    <p class="mb-5 mt-5 dark:text-gray-200">
      Speckle is open source. You can always deploy it
      on your own.
    </p>
  </div>
  <div class="col-span-3 md:col-span-1 justify-center">
    <a href="https://github.com/specklesystems" class="flex w-full h-full">
      <div class="block self-center w-full text-center">
        <div class="text-xl font-semibold text-blue-600 text-center">
          <svg class="h-6 w-6 inline -mt-2" fill="currentColor"
            viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
              clip-rule="evenodd"></path>
          </svg>
          Github →
        </div>
      </div>
    </a>
  </div>
</div> --}}