Merge pull request #195 from offen/development

add landing page

homepage/content/pages/lp-matomo.md

@@ -0,0 +1,5 @@
+title: A truly privacy focused Matomo alternative | Offen
+description: There is room for improvement with Matomos decisions regarding privacy.
+slug: matomo-alternative
+template: lp-matomo
+sitemap_priority: 0.1

homepage/pelicanconf.py

@@ -110,5 +110,7 @@ DOCS_GETSTARTED_URL = 'https://docs.offen.dev/running-offen/'
 DOCS_GETSTARTED_URL_CAMPAIGN = 'https://docs.offen.dev/running-offen/?utm_campaign=get-started'
 DOCS_TRYDEMO_URL = 'https://docs.offen.dev/running-offen/test-drive/'
 DOCS_TRYDEMO_URL_CAMPAIGN = 'https://docs.offen.dev/running-offen/test-drive/?utm_campaign=try-demo'
+LP_MATOMO_URL_TRY = ''
+LP_MATOMO_URL_DOWNLOAD = ''
 
 OFFEN_ACCOUNT_ID = os.environ.get('OFFEN_ACCOUNT_ID', None)

homepage/theme/static/css/fix.css

@@ -56,6 +56,9 @@ COLORS
 .cclr-bg-white-dark {
 	background-color: #f9f7f2;
 }
+.cclr-bg-white-semi-dark {
+	background-color: #fffdf9;
+}
 .cclr-bg-white-fade {
 	background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F3F0E7;
 }

homepage/theme/templates/archives.html

@@ -10,7 +10,7 @@
 {% block content %}
   <div class="mw8 center cclr-bg-white-responsive mt5-ns">
     <div class="dib gray bg-white ph3 ph5-ns pt5">
-      <h1 class="f2 normal lh-title ma0 mt3 mb3">
+      <h1 class="f2 normal lh-title ma0 mb3">
         Fair Analytics Blog
       </h1>
       <div class="w-75-l">

homepage/theme/templates/getstarted.html

@@ -7,7 +7,7 @@
 
     <div class="w-100 center tc">
 
-      <h1 class="f2 normal ma0 mt3 mb4">
+      <h1 class="f2 normal ma0 mb4">
         Get started
       </h1>
       <div class="gray tl">

homepage/theme/templates/lp-matomo.html

@@ -0,0 +1,170 @@
+{% 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 %}

homepage/theme/templates/trydemo.html

@@ -7,7 +7,7 @@
 
     <div class="w-100 center">
 
-      <h1 class="f2 normal tc ma0 mt3 mb4">
+      <h1 class="f2 normal tc ma0 mb4">
         Try demo
       </h1>
       <div class="gray">