ghost-theme/partials/pricing.hbs

{{!-- 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">
        <span class="hidden md:inline-block mr-1">Speckle
          for</span> Teams & Individuals
      </h3>
      <h2 class="font-bold text-4xl mt-5 dark:text-gray-300">
        Standard
        <span class="font-medium text-base text-blue-600">Free</span>
      </h2>
      <p class="mb-5 mt-5 pt-5 border-t dark:border-gray-600 dark:text-gray-300">
        Our standard plan for individuals & teams.
        Enjoy
        Speckle without extra hassle, hosted and managed by
        us.
      </p>
      <p class="mb-2  dark:text-gray-300">Interoperability:</p>
      <ul class="space-y-2 ">
        {{> extras/listItem value="Speckle Revit"}}
        {{> extras/listItem value="Speckle Rhino"}}
        {{> extras/listItem value="Speckle Dynamo"}}
        {{> extras/listItem value="Speckle Grasshopper"}}
        {{> extras/listItem value="And More "}}
      </ul>
      <p class="my-4  dark:text-gray-300">Features:</p>
      <ul class="space-y-2 ">
        {{> extras/listItem value="Unlimited streams"}}
        {{> extras/listItem value="Unlimited versions"}}
        {{> extras/listItem value="Web 3d viewer"}}
        {{> extras/listItem value="API Access"}}
        {{> extras/listItem value="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://forms.gle/oA64wPTjk7FprGf16">
        <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">
          Join the waiting list
        </button>
      </a>
    </div>
  </div>


  {{!-- Managed --}}

  <div class="bg-gray-50 dark:bg-gray-800 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">
        <span class="hidden md:inline-block mr-1">Speckle
          for</span> Enterprises
      </h3>
      <h2 class="font-bold text-4xl mt-5  dark:text-gray-200">
        Managed
      </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="font-bold space-y-2 ">
        {{> extras/listItem value="Everyting in Standard"}}
      </ul>
      <p class="my-4  dark:text-gray-200">Deployment:</p>
      <ul class="space-y-2 ">
        {{> extras/listItem value="On premise, with your cloud infrastructure"}}
        {{> extras/listItem value="On our managed cloud infrastructure"}}
      </ul>
      <p class="my-4  dark:text-gray-200">Extras:</p>
      <ul class="space-y-2 ">
        {{> extras/listItem value="Custom subdomain"}}
        {{> extras/listItem value="Choice of locations"}}
        {{> 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">
      <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">
        Contact Sales
      </button>
    </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>