website/homepage/theme/templates/index.html

{% extends "page.html" %}

{% block content %}
  <div class="w-100 mt5-ns cclr-mid-yellow">
    <div class="mw8 center" id="bg-intro">
      <div class="flex justify-center pt5 ph4">
        <div class="dn db-ns w-20 tr pr3 pb3">
          <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="58" height="63">
        </div>
        <div class="w-100 w-80-ns">
          <div class="flex">
            <div class="db dn-ns intro-margin-a mb2 mr2">
              <img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="40" height="43">
            </div>
            <h1 class="f1-ns f2 normal lh-solid ma0 mb1 intro-margin-b white">
              Offen
            </h1>
          </div>
          <h1 class="f1-ns f2 normal lh-solid ma0 mb3">
            Transparent <span>web analytics</span>
          </h1>
          <p class="ma0 mb4">
            Offen is a fair alternative to common web analytic tools. <span>Pay respect to your users while gaining insight into their behavior. </span>Self hosted, open source and free.
          </p>
          <div class="pb5 mb2">
            <a class="b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="/get-started/" rel="noopener">Start now</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="w-100" id="bg-feature">
      <div class="center">
          <div class="flex flex-wrap justify-center w-100">
            <div class="flex justify-center w55-container" id="bg-feature-1">
              <div class="w56 tc pa3">
                <h2 class="f25 normal lh-solid mt5 mb3">
                  <em class="em-mint-bright">
                    Free & Open
                  </em>
                </h2>
                <p class="ma0 mb5">
                  Our open source code can be fully audited by the community. It will always be available for free. Seriously.
                </p>
              </div>
            </div>
            <div class="flex justify-center w55-container" id="bg-feature-3">
              <div class="w56 tc pa3">
                <h2 class="f25 normal lh-solid mt6 mb3">
                  <em class="em-mint-bright">
                    Self hosted
                  </em>
                </h2>
                <p class="ma0">
                  Comply with GDPR guidelines. Don't share data with third parties. Your users have full access to their data.
                </p>
              </div>
            </div>
            <div class="flex justify-center w55-container" id="bg-feature-2">
              <div class=" w56 tc pa3">
                <h2 class="f25 normal lh-solid mt7 mb3">
                  <em class="em-mint-bright">
                    Fair & Secure
                  </em>
                </h2>
                <p class="ma0">
                  Pay respect to your website visitors. Gain valuable insights at the same time. All data is encrypted end-to-end.
                </p>
              </div>
            </div>
          </div>
      </div>
  </div>

  <div class="w-100 cclr-mid-black white">
    <div class="pt3 pb6 ph4" id="bg-cta-top">
      <div class="flex justify-end mw6 center pt5">
        <div class="w55 tr">
          <h2 class="f25 normal lh-solid ma0 mb3">
            In the making
          </h2>
          <p class="ma0 mb4">
            Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
          </p>
          <a class="b link dim ph4 pv2 dib b--solid bw2 b--white white" href="/blog/">Project status</a>
        </div>
      </div>
    </div>
  </div>

  <div class="w-100 bg-white gray">
    <div class="flex flex-wrap justify-center pt5 pb6">
      <div class="mw7 mw8-l center ph5-ns ph3">
        <h2 class="f25 normal lh-solid">Summary</h2>
        <div class="columns mb3">
          {{ page.content }}
          <a class="b link dim ph4 pv2 mt3 dib b--solid bw2 brd-cclr-mid-yellow fnt-cclr-mid-yellow" href="/deep-dive/">Deep dive</a>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block outro %}
<div class="w-100" id="bg-feature">
  <div class="pv5 ph4">
    <div class="mw8 center flex flex-column flex-row-ns mb5 cclr-mid-mint">
      <div class="w-100 w-60-ns">
        <h2 class="f25 normal tc tl-ns ma0 mb3">
          <em>Our alpha release</em>
        </h2>
        <p class="ma0 mb3 tc tl-ns">
          Offen is in active development. Do something brave and test our latest alpha release today. It’s free and always will be.
        </p>
      </div>
      <div class="w-100 w-40-ns ml4-m ml6-l">
        <p class="b tc lh-title tracked-min ma0 mt3 mb2">
          Single binary file <br>for Linux, Windows or MacOS
        </p>
        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
        <p class="b tc lh-title tracked-min ma0 mt4 mb2">
          Your own Offen instance
        </p>
        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb2 fnt-cclr-mid-black" href="{{ HEROKU_DIRECT_URL }}" rel="noopener" target="_blank">Deploy to Heroku</a>
      </div>
    </div>
  </div>
</div>
<div class="w-100" id="bg-outro">
  <div class="pv5 ph4">
    <div class="mw8 center flex flex-column flex-row-ns mb3 mb5 cclr-mid-yellow">
      <div class="w-100 w-60-ns">
        <h2 class="f25 normal tc tl-ns ma0 mb3">
          <em class="em-mint">
            Get started now
          </em>
        </h2>
        <p class="ma0 mb3 tc tl-ns">
          Running a website and need to collect usage statistics? Want to contribute as a developer? Our guides help you kick off.
        </p>
      </div>
      <div class="w-100 w-40-ns ml4-m ml6-l">
        <p class="b tc lh-title tracked-min ma0 mt3 mb2">
          Details on how to <br>run, use and develop Offen
        </p>
        <a class="w-100 tc b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black mb3 fnt-cclr-mid-black" href="https://docs.offen.dev/" rel="noopener" target="_blank">Open guides</a>
      </div>
    </div>
  </div>
</div>
{% endblock %}