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 analytics 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-1">
                    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-1">
                    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-1">
                    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>




<!-- INSIGHTS -->
  <div class="w-100 dib bg-white">
    <div class="mh4">
      <p class="tc f1-ns f2 lh-solid ma0 mt5">
        Gain insights in an ethical way
      </p>
      <div class="mw6 center">
        <p class="tc f5 ma0 mt3 mb5 gray">
          Web analytics is still an unfair and impenetrable business. A proper alternative to common tools is missing. Therefore we develop one. <a class="b link dim gray" href="/deep-dive/">Learn more</a>
        </p>
      </div>
    </div>
  </div>



  <!-- COMPARE -->
  <div class="w-100">
    <div class="mw8 center flex flex-wrap justify-center">

      <!-- COMPARE A -->
      <div class="w-50-l w-100">

        <div class="w-100 dib cclr-bg-yellow-mid">
          <div class="wx24 center">
            <p class="f25 lh-solid ma0 mt6 mb3">
              Your job
            </p>
          </div>
        </div>

        <div class="w-100 hx24 dib cclr-bg-white-fade">
          <div class="wx24 center">
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Self host Offen and thereby comply with GDPR guidelines.
              </p>
            </div>
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Integrate the code snippet into pages you want to track.
              </p>
            </div>
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Make your users aware of the access to their data.
              </p>
            </div>
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Improve your services with fair and transparent insights.
              </p>
            </div>
          </div>
        </div>

      </div>

      <!-- COMPARE B -->
      <div class="w-50-l w-100">

        <div class="w-100 dn db-l h3 bg-white">
        </div>

        <div class="w-100 dib cclr-bg-mint-mid">
          <div class="wx24 center">
            <p class="f25 lh-solid ma0 mt5 mb3">
              Benefits for your users
            </p>
          </div>
        </div>

        <div class="w-100 hx24 dib cclr-bg-white-fade">
          <div class="wx24 center">
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Opt in to data collection or decide to not participate at all.
              </p>
            </div>
            <div class="flex items-center mt4 mb2">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Review own data with detailed explanations of metrics and terms.
              </p>
            </div>
            <div class="flex items-center mt4 mb2">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3 mr4-ns">
                Only delete usage data or opt out completly at any time.
              </p>
            </div>
          </div>
        </div>

      </div>

      <!-- COMPARE C -->
      <div class="w-50-l w-100">

        <div class="w-100 hx50 dib cclr-bg-white-fade">
          <div class="wx24 center">
            <p class="f25 lh-solid ma0 mt5 mb4">
              <em>
                What you see
              </em>
            </p>
            <p class="ma0 mb2 mr6-ns gray">
              Data of all pages where your Offen installation is active.
            </p>
            <p class="ma0 mb4 gray">
              For example:
            </p>

            <!-- BOX -->
            <div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
              <p class="f25 lh-solid ma0 mb2">
                478
              </p>
              <p class="f7 lh-solid ma0 mb4">
                Unique users
              </p>
              <p class="f25 lh-solid ma0 mb2">
                2.530
              </p>
              <p class="f7 lh-solid ma0 mb4">
                Unique sessions
              </p>
              <p class="f7 lh-solid pt2 ma0 mb3">
                Top pages
              </p>
              <table class="f7 collapse dt--fixed mb4">
                <tbody>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/landing/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://sub.yourpage.org/</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>

      </div>

      <!-- COMPARE D -->
      <div class="w-50-l w-100">

        <div class="w-100 hx50 dib cclr-bg-white-fade">
          <div class="wx24 center">
            <p class="f25 lh-solid ma0 mt5 mb4">
              <em class="em-mint-2">
                What your users see
              </em>
            </p>
            <p class="ma0 mb2 mr5-ns gray">
              Data of all pages a user has visited where your Offen installation is active.
            </p>
            <p class="ma0 mb4 gray">
              For example:
            </p>

            <!-- BOX -->
            <div class="w-100 dib br2 pa4 shadow-4 cclr-fnt-black-mid bg-white">
              <p class="f25 lh-solid ma0 mb2">
                1
              </p>
              <p class="f7 lh-solid ma0 mb4">
                Unique websites
              </p>
              <p class="f25 lh-solid ma0 mb2">
                5
              </p>
              <p class="f7 lh-solid ma0 mb4">
                Unique sessions
              </p>
              <p class="f7 lh-solid pt2 ma0 mb3">
                Top pages
              </p>
              <table class="f7 collapse dt--fixed mb4">
                <tbody>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/blog/</td>
                  </tr>
                  <tr class="striped--near-white">
                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.org/otherpage/</td>
                  </tr>
                </tbody>
              </table>
            </div>

          </div>
        </div>

      </div>

      <!-- COMPARE E -->
      <div class="w-50-l w-100">

        <div class="w-100 hx30 dib cclr-bg-yellow-mid">
          <div class="wx24 center">

            <p class="f25 lh-solid ma0 mt5">
              More features
            </p>

            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3">
                Accounts can be shared within a team.
              </p>
            </div>
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3">
                User data is only stored for 6 months.
              </p>
            </div>
            <div class="flex items-center mt4">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3">
                In-browser screen for an intuitive setup.
              </p>
            </div>
            <div class="flex items-center mt4 mb5">
              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
              <p class="ma0 ml3">
                Detailed documentation is available.
              </p>
            </div>

          </div>
        </div>

      </div>

      <!-- COMPARE F -->
      <div class="w-50-l w-100">

        <div class="w-100 hx30 dib cclr-bg-mint-mid">
          <div class="wx24 center">
            <p class="f25 lh-solid ma0 mt5">
              Try as user
            </p>
            <p class="ma0 mt4 mr0 mr4-ns">
              Offen is installed on this website. Access your actual usage data now.
            </p>
            <div class="mt4 mb6">
              <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/deep-dive/" rel="noopener">Open Auditorium</a>
            </div>
          </div>
          <div class="w-100 dn db-l h4 bg-light-gray">
          </div>
        </div>

      </div>

      <!-- METRICS -->
      <div class="w-100 hx200 dib cclr-bg-white-fade">


        <div class="wx24-metrics center">
          <p class="f25 lh-solid ma0 ml0 ml5-l mt5 mb4">
            <em>
              Essential metrics
            </em>
          </p>
          <p class="ma0 ml0 ml5-l w-100 w-33-l gray">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
          </p>
        </div>

        <!-- BOX 1 Bars -->
        <div class="relative">
          <div class="relative absolute-m absolute-l stackbox-1 center">
            <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
              <p class="f7 lh-solid ma0 mb3">
                Page views and users
              </p>
              <img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px">
            </div>
          </div>
        </div>

        <!-- BOX 2 Pages -->
        <div class="relative">
          <div class="relative absolute-m absolute-l stackbox-2 center">
            <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
              <p class="f7 lh-solid ma0 mb3">
                Top pages
              </p>
              <img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px">
            </div>
          </div>
        </div>

        <!-- BOX 3 -->
        <div class="relative">
          <div class="relative absolute-m absolute-l stackbox-3 center">
            <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
              <p class="f7 lh-solid ma0 mb3">
                Temp
              </p>
              <img src="/theme/images/gfx-metrics-pages.svg" alt="temp" width="320px">
            </div>
          </div>
        </div>

        <!-- BOX 4 -->
        <div class="relative">
          <div class="relative absolute-m absolute-l stackbox-4 center">
            <div class="w-100 dib br2 pa4 shadow-4 mt4 mt0-ns cclr-fnt-black-mid bg-white">
              <p class="f7 lh-solid ma0 mb3">
                Temp
              </p>
              <img src="/theme/images/gfx-metrics-bars.svg" alt="temp" width="320px">
            </div>
          </div>
        </div>


      </div>

    </div>
  </div>












{% endblock %}

{% block outro %}
{% endblock %}