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

{% block content %}
<div class="w-100 mt5-ns cclr-bg-white-fade-end">

  <div class="mw8 center bg-white">
    <div class="flex justify-center pt0 pt3-m pt3-l ph4">
      <div class="w-100 w-80-m w-60-l">

        <div class="flex flex-column mt3">
          <h1 class="f3 f2-m f2-l normal lh-title ma0 mb3">
            A truly privacy focused <span>Matomo alternative</span>
          </h1>
        </div>

          <ul class="w-100 w-80-l list pa0 ma0 mb2 mb4-m mb4-l">
            <li class="mb2">
              Users actively give their consent <i>to collection of data.</i>
            </li>
            <li class="mb2">
              <i>They can delete it or </i>opt out at any time with full data access.
            </li>
            <li>
              <i>Offen is open source, lightweight, </i>self hosted and free.
            </li >
          </ul>
          <div class="flex flex-wrap justify-between">
            <p class="f3 normal ma0 mt2 mb2 mb0-ns">
              <em>Switch today!</em>
            </p>
            <div class="flex flex-wrap tc">
              <a class="w-100 w-auto-ns b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid mr0 mr2-ns mb2 mb0-ns" href="/try-demo/" rel="noopener">Try demo</a>
              <a class="w-100 w-auto-ns b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
            </div>
          </div>

      </div>
    </div>
  </div>

  <div class="mw8 center bg-white">
    <div class="flex justify-center ph0 pv4 ph4-m ph4-l">
      <div class="w-100 w-80-m w-60-l">

        <div class="flex justify-center">
          <img src="/theme/images/gfx-matomo-lp.png" width="513" alt="Matomo alternative">
        </div>

      </div>
    </div>
  </div>

  <div class="mw8 center cclr-bg-white-dark">
    <div class="flex justify-center pt5 ph4">
      <div class="w-100 w-80-m w-60-l mb3">

        <p class="gray ma0 mb2">
          Why an alternative?
        </p>
        <h2 class="f3 normal lh-title ma0 mb3">
          There is room for improvement with Matomo's decisions regarding privacy.
        </h2>
        <ul class="w-100 w-80-ns pa0 pl3 ma0">
          <li class="mb2">
            Consent is practically a preset. <i>By default, Matomo only offers an opt-out feature.</i>
          </li>
          <li class="mb3">
            <i>Access to usage data is </i>not automated and tedious.
          </li>
        </ul>

        <h2 class="f3 normal lh-title ma0 mb3">
          The installation and daily operation of Matomo is quite complex.
        </h2>
        <ul class="w-100 w-80-ns pa0 pl3 ma0">
          <li class="mb2">
            Many system dependencies <i>have to be pre-installed.</i>
          </li>
          <li class="mb5">
            <i>The tracking script used is very extensive and </i>delays the loading of pages.
          </li>
        </ul>

      </div>
    </div>
  </div>

  <div class="mw8 center cclr-bg-white-semi-dark">
    <div class="flex justify-center pt5 ph4">
      <div class="w-100 w-80-m w-60-l mb3">

        <p class="gray ma0 mb2">
          Balanced between operator and user
        </p>
        <h2 class="f3 normal lh-title ma0 mb3">
          <em>Offen is a web analytics tool that treats operators and users as equal parties.</em>
        </h2>
        <ul class="w-100 w-80-ns pa0 pl3 ma0">
          <li class="mb2">
            <i>Offen's default is to </i>NOT collect any data. <i>Usage data is collected after </i>opt-in only.
          </li>
          <li class="mb2">
            <i>Users have </i>full access to their data. <i>They can delete it any time or opt out completely.</i>
          </li>
          <li class="mb5">
            <i>With all essential metrics you can </i>gain valuable insights in an ethical way.
          </li>
        </ul>

      </div>
    </div>
  </div>

  <div class="mw8 center cclr-bg-white-dark">

    <div class="flex justify-center pt2 ph2 ph4-m ph4-l">
      <img src="/theme/images/gfx-matomo-lp-metrics.png" alt="Offen metrics" class="w-100 dn dib-l">
      <img src="/theme/images/gfx-matomo-lp-metrics-mobile.png" alt="Offen metrics" class="w-100 dib dn-l">
    </div>

    <div class="flex justify-center pt2 ph4">
      <div class="w-100 w-80-m w-60-l mb5">

        <p class="gray ma0 mb2">
          Make a difference
        </p>
        <h2 class="f3 normal lh-title ma0 mb3">
          <em>Run your own free and lightweight web analytics.</em>
        </h2>
        <ul class="w-100 w-80-ns pa0 pl3 ma0">
          <li class="mb2">
            <i>Offen is fully open source and will </i>always be available for free. <i>No “Pro Plans” lurking.</i>
          </li>
          <li class="mb2">
            <i>You self host and </i>don’t transfer any data <i>to third parties.</i>
          </li>
          <li class="mb2">
            The installation is relatively simple <i>and the tracking script is reduced to a minimum.</i>
          </li>
          <li class="ma0">
            Detailed documentation <i>assists with the installation and daily operation.</i>
          </li>
        </ul>

      </div>
    </div>
  </div>

  <div class="mw8 center bg-white">
    <div class="flex justify-center pv5 ph4">
      <div class="w-100 w-80-m w-60-l">

          <div class="flex flex-wrap justify-between mb3">
            <p class="f3 normal ma0 mt2 mb2 mb0-ns">
              Switch today!
            </p>
            <div class="flex flex-wrap tc">
              <a class="w-100 w-auto-ns b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid mr0 mr2-ns mb2 mb0-ns" href="/try-demo/" rel="noopener">Try demo</a>
              <a class="w-100 w-auto-ns b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
            </div>
          </div>

      </div>
    </div>
  </div>

</div>

{% endblock %}