website/homepage/theme/templates/index.html

{% extends "base.html" %}

{% block content %}
  <div class="w100 cclr-mid-yellow mt5 mb0 pa0"> <!--intro-->
    <div class="w100" id="bg-intro">
      <div class="mw6 center">
        <div class="pa0 ma0">
          <img src="/theme/images/offen-logo-white.svg" alt="Offen logo" width="152" height="94">
        </div>
        <h1 class="pa0 ma0">
          <em>Transparent web analytics for operators and users</em>
        </h1>
        <p class="pa0 ma0">
          Offen is a free and open source analytics software for websites and web applications that allows respectful handling of data.
        </p>
        <div class="pa0 ma0">
          <a class="btn btn-color-black" href="{{GITHUB_ORG}}" rel="noopener" target="_blank">Get involved</a>
        </div>
      </div>
    </div>
  </div>

  <div class="w100 cclr-mid-mint"> <!--feature-->
    <div class="w100" id="bg-feature">
      <div class="mw8 center">
        <div class="card-deck">
          <div class="card">
            <h2 class="pa0 ma0">
              <em>Free & Open</em>
            </h2>
            <p class="pa0 ma0">
              Anyone can audit our open source code to verify it works as intended. Offen will always be available free of charge.
            </p>
          </div>
          <div class="card">
            <h2 class="pa0 ma0">
              <em>Fair & Secure</em>
            </h2>
            <p class="pa0 ma0">
              Pay respect to your website visitors and gain insights as a user at the same time. All data is encrypted end-to-end.
            </p>
          </div>
          <div class="card">
            <h2 class="pa0 ma0">
              <em>Easy to use</em>
            </h2>
            <p class="pa0 ma0">
              Simply paste our code into the source of your website. Users can visit the auditorium to access their data.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>


  <div class="w100 cclr-mid-black white"> <!--cta-top-->
    <div class="w100" id="bg-cta-top">
      <div class="mw8 center">
        <div class="mw6 center tr">
          <h2 class="pa0 ma0">
            In the making
          </h2>
          <p class="pa0 ma0">
            Offen is still in alpha. Discover what is already up and running and where we want to go in the coming months.
          </p>
          <div class="pa0 ma0">
            <a class="btn btn-color-white" href="/blog/">Project status</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="w100 bg-white mid-grey"> <!--content-index-->
    <div class="mw6 center">
      {{ page.content }}
    </div>
  </div>
{% endblock %}

{% block outro %}
  <div class="w100 cclr-mid-yellow"> <!--outro-->
    <div class="w100" id="bg-outro">
      <div class="mw8 center">
        <div class="mw6">
          <h2 class="pa0 ma0">
            Ethical internet
          </h2>
          <p class="pa0 ma0">
            We're working hard to ensure that Offen is independent, cutting-edge and can be sustained for years to come.
          </p>
          <div class="pa0 ma0">
            <a class="btn btn-color-black" href="{{PATREON_URL}}" rel="noopener" target="_blank">Support us</a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}