2
0
mirror of https://github.com/offen/website.git synced 2024-12-24 05:40:22 +01:00
website/homepage/theme/templates/index.html

215 lines
7.5 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{% 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 pt6-ns 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 an open source analytics software for websites <span>and web applications. It allows respectful handling of data </span> <span>for operators and users.</span>
</p>
<div class="pb6">
<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">
Free & Open
</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">
Self hosted
</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">
Fair & Secure
</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-mint">
<div class="pt3 pb6 ph3" id="bg-feature">
<div class="mw8 center">
<div class="flex flex-wrap justify-around">
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Free & Open</em>
</h2>
<p class="ma0">
Anyone can audit our open source code to verify it works as intended. Offen will always be available for free.
</p>
</div>
<div class="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Fair & Secure</em>
</h2>
<p class="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="w55 mh3 mt5 tc cclr-mid-mint">
<h2 class="f25 normal lh-solid ma0 mb3">
<em>Easy to use</em>
</h2>
<p class="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="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. Its 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 mb2 fnt-cclr-mid-black" href="{{ RELEASE_DIRECT_URL }}" rel="noopener">Download</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ RELEASE_URL }}" rel="noopener" target="_blank">Open GitHub release page</a>
</div>
<p class="b tc lh-title tracked-min ma0 mt4 mb2">
Your own instance on Heroku
</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</a>
<div class="tc">
<a class="w-100 tracked-min b link dim mb3 fnt-cclr-mint-bright" href="{{ HEROKU_URL }}" rel="noopener" target="_blank">Open GitHub configuration repository</a>
</div>
</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-extra">
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 %}