website/homepage/theme/templates/index.html

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

{% block content %}
  <div class="w-100 mt5-ns cclr-bg-yellow-mid">
    <div class="mw8 center">
      <div class="flex justify-center pt3 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">
            Fair Web Analytics
          </h1>
          <p class="f3 lh-title ma0 mb4 pitchMargin">
            Let your users access their data. <span>Gain valuable insights at the same time. </span>Open, lightweight, self hosted and free.
          </p>
          <div class="pb5">
            <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="#bg-explainer" rel="noopener">Learn more</a>
          </div>
        </div>
      </div>
    </div>
  </div>

<!-- FEATURE -->
  <div class="w-100 overflow-hidden cclr-bg-mint-mid">
    <div class="bg-pattern">

      <div class="mw8 flex flex-wrap justify-center center tc">

        <div class="w-100 w-third-l cclr-bg-mint-fade-a">
          <div class="hx-feature">

            <div class="relative">
              <div class="absolute bg-feature-1">
                <img src="/theme/images/gfx-feature-1.png" alt="feature-2" width="640px" height="480px">
              </div>
            </div>

            <h2 class="f2 normal lh-solid ma0 mb3 pt5">
              <em class="em-mint-1">
                Secure & free
              </em>
            </h2>
            <p class="wx18 center ma0">
              <i>Our code is </i>open source.<i> All user data is </i>encrypted end-to-end.<i> Offen Fair Web Analytics will always be available for </i>free.
            </p>

          </div>
        </div>

        <div class="w-100 w-third-l cclr-bg-mint-fade-b">
          <div class="hx-feature bg-feature-2">

            <h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-2">
              <em class="em-mint-1">
                Self hosted
              </em>
            </h2>
            <p class="wx18 center ma0">
              Comply with GDPR<i> guidelines. </i>No ads, no third parties<i> involved. Offen Fair Web Analytics uses </i>first-party cookies only.
            </p>
          </div>

        </div>

        <div class="w-100 w-third-l cclr-bg-mint-fade-a">
          <div class="hx-feature">

            <div class="relative">
              <div class="absolute bg-feature-3">
                <img src="/theme/images/gfx-feature-3.png" alt="feature-3" width="640px" height="480px">
              </div>
            </div>

            <div>
            <h2 class="f2 normal lh-solid ma0 mb3 ptx-feature-3">
              <em class="em-mint-1">
                Fair & by choice
              </em>
            </h2>
            <p class="wx18 center ma0">
              Opt-in only.<i> Users must actively give their </i>consent<i> to data collection. They have full </i>access to<i> their </i>data.
            </p>
            </div>

          </div>
        </div>

      </div>

    </div>
  </div>

  <!-- SUPPORT -->
  <div class="w-100 dib bg-white">
      <div class="wx64 center cclr-bg-yellow-bright-very pv5">
        <div class="tc mh4">
          <div class="mw7 center">
            <div class="flex flex-column flex-row-l mh0 mh3-m mh5-l">
              <div class="tl-l w-100 w-30-l mb3 mb0-l">
                <div class="mt2">
                  <a class="link dim" href="https://nlnet.nl/" target="_blank" rel="noopener"><img src="/theme/images/nlnet-logo-gray.svg" alt="NLnet logo gray" width="132" height="49"></a>
                </div>
              </div>
              <div class="flex flex-column w-100 w-70-l">
                <p class="f5 tl-l ma0 mb2">
                  In 2019, we started working on the core analytics tool and have added more elements like the <a class="b link dim cclr-fnt-black-mid" href="/blog/offen-protocol/">Offen Protocol</a> and <a class="b link dim cclr-fnt-black-mid" href="/blog/consent-tool/">Offen Consent Tool</a> over the years.
                <p class="f5 tl-l ma0">
                  We were generously supported in this project by <a class="b link dim cclr-fnt-black-mid" href="https://nlnet.nl/" target="_blank" rel="noopener">NLnet Foundation</a> as part of its <a class="b link dim cclr-fnt-black-mid" href="https://nlnet.nl/NGI/" target="_blank" rel="noopener">Next Generation Internet</a> initiative. Now, in summer of 2024, all Offen elements have reached maturity.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

<!-- INSIGHTS -->
  <div class="w-100 dib bg-white">
    <div class="tc mh4">
      <p class="f1-ns f2 lh-solid ma0 mt6">
        Insights in an ethical way
      </p>
      <div class="mw7 center">
        <p class="f5 ma0 mt3 mb6 mh0 mh3-m mh5-l">
          Web analytics <i>is still an unfair and impenetrable business.</i> A proper alternative to common tools <i>is missing. Therefore we develop one.</i> <a class="b link dim cclr-fnt-black-mid" href="/blog/">Learn more</a>
        </p>
      </div>
    </div>
  </div>

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

      <!-- COMPARE A -->
      <div class="w-50-l w-100 cclr-bg-yellow-mid">

        <div class="w-100 dib">
          <div class="wx24 center">

            <div class="relative">
              <div class="absolute bg-compare-a-pfeil">
                <img src="/theme/images/gfx-compare-a-pfeil.png" alt="arrow" width="40px" height=="120px">
              </div>
            </div>

            <p class="f3 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 flex-wrap justify-center">
              <div class="w-20 mt4">
                <img src="/theme/images/gfx-compare-a.png" alt="numbers" width="75px" height="315px">
              </div>
              <div class="w-80 mt4">
                <p class="ma0 ml3">
                  Self host <i>Offen Fair Web Analytics while protecting your users' data.</i>
                </p>
                <p class="ma0 ml3 mt4">
                  <i>Integrate the</i> code snippet <i>into pages you want to track.</i>
                </p>
                <p class="ma0 ml3 mt4">
                  <i>Make your</i> users aware <i>of the ability to access their data.</i>
                </p>
                <p class="ma0 ml3 mt4 mb5">
                  <i>Improve your service with</i> fair and transparent insights.
                </p>
              </div>
            </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="f3 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="relative">
              <div class="absolute bg-compare-b-smile">
                <img src="/theme/images/gfx-compare-b-smile.png" alt="smile" width="210px" height="140px">
              </div>
            </div>

            <div class="flex flex-wrap justify-center">

              <div class="w-20 mt4">
                <img src="/theme/images/gfx-compare-b.png" alt="ok" width="75px" height="315px">
              </div>
              <div class="w-80 mt4">
                <p class="ma0 ml3">
                  Opt in to data collection <i>or decide to not participate at all.</i>
                </p>
                <p class="ma0 ml3 mt4">
                  Review own data <i>with detailed explanations of metrics and terms.</i>
                </p>
                <p class="ma0 ml3 mt4">
                  <i>Opt out completely at any time or only</i> delete existing usage data.
                </p>

              </div>
            </div>

          </div>
        </div>

      </div>

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

        <div class="w-100 hx-compare-c dib cclr-bg-white-fade">
          <div class="h-100 bg-pattern">


            <div class="wx24 center">
              <p class="f3 lh-solid ma0 mt5 mb4">
                <em>
                  What you see
                </em>
              </p>
              <p class="ma0 mb2 mr6-ns gray">
                Data of all pages where your installation is active.
              </p>
              <p class="ma0 mb4 gray">
                For example
              </p>

              <!-- BOX -->
              <div class="w-100 dib br2 pa4 mb5 mb0-l shadow-4 cclr-fnt-black-mid bg-white">

                <div class="relative">
                  <div class="absolute bg-compare-c-pfeil">
                    <img src="/theme/images/gfx-compare-c-pfeil.png" alt="arrow" width="150px" height="150px">
                  </div>
                </div>

                <p class="f3 lh-solid ma0 mb2">
                  859
                </p>
                <p class="f7 lh-solid ma0 mb4">
                  Unique users
                </p>
                <p class="f3 lh-solid ma0 mb2">
                  3.372
                </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>

      </div>

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

        <div class="w-100 hx-compare-d dib cclr-bg-white-fade">
          <div class="h-100 bg-pattern">

            <div class="wx24 center">
              <p class="f3 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 installation is active.
              </p>
              <p class="ma0 mb4 gray">
                For example
              </p>

              <!-- BOX -->
              <div class="w-100 dib br2 mb5 mb0-l pa4 shadow-4 cclr-fnt-black-mid bg-white">
                <p class="f3 lh-solid ma0 mb2">
                  1
                </p>
                <p class="f7 lh-solid ma0 mb4">
                  Unique website
                </p>
                <p class="f3 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>

      </div>

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

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

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

            <div class="flex flex-wrap justify-center">
              <div class="w-20 mt4">
                <img src="/theme/images/gfx-compare-e.png" alt="plus" width="75px" height="315px">
              </div>
              <div class="w-80 mt4">
                <p class="ma0">
                  <i class="i-on-yellow">Easily analyze</i> multiple websites within one installation.
                </p>
                <p class="ma0 mt4">
                  All website accounts can be shared <i class="i-on-yellow">within teams.</i>
                </p>
                <p class="ma0 mt4">
                  <i class="i-on-yellow">User</i> data is only stored for 6 months <i class="i-on-yellow">and then deleted.</i>
                </p>
                <p class="ma0 mt4 mb5">
                  <i class="i-on-yellow">A</i> detailed documentation <i class="i-on-yellow">on how to run Offen Fair Web Analytics is available.</i>
                </p>
              </div>
            </div>

          </div>
        </div>

      </div>

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

        <div class="w-100 hx-try-user dib cclr-bg-mint-mid">
          <div class="wx24 center">
            <p class="f3 lh-solid ma0 mt5">
              Try as user
            </p>
            <p class="ma0 mt4 mr0 mr4-ns">
              <i>Offen Fair Web Analytics is installed on this website. Access</i> your actual usage data <i>now.</i>
            </p>
            <div class="mt4">
              <a class="b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="{{ OFFEN_AUDITORIUM_URL }}" target="_blank" rel="noopener">Open Auditorium</a>
              <img src="/theme/images/gfx-compare-f-scribble.png" alt="smile" width="300px" height="100px">
            </div>
          </div>
          <div class="w-100 dn db-l h4 bg-white">
          </div>
        </div>

      </div>

      <!-- METRICS -->
      <div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
        <div class="h-100 bg-pattern">

          <div class="wx24-metrics center">

            <div class="relative">
              <div class="absolute bg-metrics-bulb">
                <img src="/theme/images/gfx-metrics-bulb.png" alt="smile" width="170px" height="170px">
              </div>
            </div>

            <p class="f3 lh-solid ma0 ml0 ml5-l mt5 mb4">
              <em>
                Essential metrics
              </em>
            </p>
            <p class="ma0 ml0 ml5-l w-90 w-33-l mb5">
              All important statistics <i>that help you to improve your service.</i> Filter collected data <i>by URL, Location, Referrer, UTM parameters, as well as Landing Pages and Exit Pages.</i>
            </p>
          </div>

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

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

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

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

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

        </div>
      </div>

      <!-- LOCALIZE -->
      <div class="w-100">
        <div class="relative">
          <div class="absolute bg-localize">
            <img src="/theme/images/gfx-localize.png" alt="languages" width="400px">
          </div>
        </div>
      </div>

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

        <div class="w-100 w-50-l hx-localize dib cclr-bg-white-fade">
          <div class="wx24 center pr4-l">
            <p class="f3 lh-solid ma0 mt5 mb4">
              <em>
                Localize
              </em>
            </p>
            <p class="ma0 mb2">
              <i>Offen Fair Web Analytics is available in</i> English, French, German, Portuguese, Spanish <i>and</i> Vietnamese.
            </p>
            <p class="ma0 mb2">
              <i>Our</i> consent banner and the Auditorium <i>for operators as well as users can be displayed</i> in the respective locale.
            </p>
            <p class="ma0 mb5 mb0-l">
              <i>Support fair web analytics by</i> contributing other language versions. <a class="b link dim gray" href="mailto:hioffen@posteo.de">Request an invitation</a> <i>to our translation workflow.</i>
            </p>
          </div>

        </div>
        <div class="w-50 dn db-l h4 cclr-bg-white-fade-end">

        </div>
      </div>

      <!-- CUSTOMIZE -->
      <div class="w-100">
        <div class="relative">
          <div class="absolute bg-customize-a">
            <img class="shadow-4" src="/theme/images/gfx-customize-a.svg" alt="customize-a" width="300px">
          </div>
          <div class="absolute bg-customize-b">
            <img class="shadow-4" src="/theme/images/gfx-customize-b.svg" alt="customize-b" width="300px">
          </div>
          <div class="absolute bg-customize-c">
            <img class="shadow-4" src="/theme/images/gfx-customize-c.svg" alt="customize-c" width="300px">
          </div>
        </div>
      </div>

      <div class="w-100 flex flex-wrap">

        <div class="w-100 w-50-l hx-customize dib cclr-bg-yellow-mid">
          <div class="wx24 center pr6-l">
            <p class="f3 lh-solid ma0 mt5 mb4">
              Customize
            </p>
            <p class="ma0 mx-customize mb0-l">
              <i class="i-on-yellow">Our</i> consent banner is customizable in color, shape and basic font specifications <i class="i-on-yellow">to match your design.</i>
            </p>
          </div>
        </div>

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

  <!-- CTA -->
    <div class="w-100 dib bg-white">

      <div class="tc mh4">

        <div class="relative">
          <div class="absolute bg-cta-pfeil">
            <img src="/theme/images/gfx-cta-pfeil-cta.png" alt="arrow" width="150px" height="150px">
          </div>
        </div>

        <p class="f1-ns f2 lh-solid ma0 mt6 mb5">
          Switch to fair web analytics
        </p>
          <div class="flex flex flex-wrap justify-center">
            <div class="mw5 mb5 mh0 mh4-ns">
              <p class="tc f5 ma0 mb3 gray mh2">
                Test drive Offen Fair Web Analytics on your system today
              </p>
              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 cclr-brd-black-mid cclr-fnt-black-mid" href="/try-demo/" rel="noopener">Try demo</a>
            </div>
            <div class="mw5 mb7 mh0 mh4-ns">
              <p class="tc f5 ma0 mb3 mh2">
                All you need to use Offen Fair Web Analytics in production
              </p>
              <a class="w-100 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>

{% endblock %}

{% block outro %}{% endblock %}