{% 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 gray bg-white">

    <div class="w-100 center">

      <h1 class="f2 normal tc ma0 mb4">
        Try demo
      </h1>
      <div class="gray">
        {{ page.content }}
      </div>

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

      <p class="lh-title ma0 mb3 gray">
        Open your terminal and type
      </p>
      <div class="flex flex-column items-center">
        <div class="w-100 ph4 pv5 mb5 bg-light-gray">
          <code class="ma0 lh-solid word-wrap" data-clipboard-text="curl https://demo.offen.dev | bash" title="Click to copy">
            curl https://demo.offen.dev | bash
          </code>
        </div>
      </div>

      <p class="lh-title ma0 mb3 gray">
        With Docker use
      </p>
      <div class="flex flex-column items-center">
        <div class="w-100 ph4 pv5 mb5 bg-light-gray">
          <code class="ma0 lh-solid word-wrap" data-clipboard-text="docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876" title="Click to copy">
            docker run --rm -it -p 9876:9876 offen/offen:latest demo -port 9876
          </code>
        </div>
      </div>

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

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

      <div class="flex flex-column items-center">
        <p class="lh-title tc ma0 mb2 gray">
          All you need to use<br>Offen Fair Web Analytics in production
        </p>
        <a class="w-100 w5-ns tc b link dim ph4 pv2 dib b--solid bw2 mb5 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
      </div>

    </div>

  </div>
</div>

{% endblock %}