{% extends "page.html" %}
{% set funnel = True %}

{% block content %}
<div class="w-100 mt5-ns cclr-bg-white-dark">
  <div class="mw7 center pt5 pb5 ph4 bg-white">

    <div class="w-100 center tc">

      <h2 class="f1-ns f2 normal ma0 mb4">
        Get started
      </h2>
      <h3 class="f25 f2-ns normal ma0 mb5 mh6-ns">
        Choose your preferred way to self host Offen
      </h3>

      <div class="flex flex-column items-center">
        <p class="lh-title ma0 mb2 gray">
          Single binary file <br>for Linux, Windows or MacOS
        </p>
        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>

        <p class="lh-title ma0 mb2 gray">
          Offen as a lightweight<br> Docker image
        </p>
        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 white cclr-bg-black-mid" href="{{ DOCKER_DIRECT_URL }}" target="_blank" rel="noopener">Deploy with Docker</a>

        <p class="lh-title ma0 mb2 gray">
          Your own instance on Heroku
        </p>
        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb6 white cclr-bg-black-mid" href="{{ HEROKU_DIRECT_URL }}" target="_blank" rel="noopener">Deploy to Heroku</a>
      </div>

      <hr class="ma0 mb5 b--black-05">

      <h3 class="f25 normal ma0 mb5">
        Read the docs
      </h3>
      <div class="flex flex-column items-center">
        <p class="lh-title ma0 mb2 gray">
          Details on how to<br> install and run Offen
        </p>
        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid mb5 cclr-fnt-black-mid" href="{{ DOCS_GETSTARTED_URL }}" target="_blank" rel="noopener">Open Docs</a>
      </div>

    </div>

  </div>
</div>

{% endblock %}