From 1bf44206c62dec652e4edb1dcd99fb1acae372c8 Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Thu, 23 Apr 2020 13:29:00 +0200
Subject: [PATCH] compare operator user 02

---
 homepage/theme/static/css/fix.css     |  16 ++++
 homepage/theme/static/images/temp.svg |   3 +
 homepage/theme/templates/index.html   | 132 +++++++++++++++++---------
 3 files changed, 106 insertions(+), 45 deletions(-)
 create mode 100644 homepage/theme/static/images/temp.svg

diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index 192c2fd..ed9eee1 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -97,6 +97,7 @@ LAYOUT
   }
 }
 /* Custom Tachyons class */
+/* OLD */
 .w55-container,
 .w55 {
 	width: 20rem;
@@ -112,6 +113,21 @@ LAYOUT
   }
 }
 
+/* NEW */
+.wx28 {
+	width: 28rem;
+}
+.hx24 {
+	height: 24rem;
+}
+/* Tachyons breakpoints 30 & 60 */
+@media only screen and (max-width: 30em) {
+	.wx28 {
+		width: 100%;
+	}
+}
+
+
 /* ---------------------------------------------------
 TYPO AND LAYOUT ELEMENTS
 ----------------------------------------------------*/
diff --git a/homepage/theme/static/images/temp.svg b/homepage/theme/static/images/temp.svg
new file mode 100644
index 0000000..d6a8f58
--- /dev/null
+++ b/homepage/theme/static/images/temp.svg
@@ -0,0 +1,3 @@
+<svg width="45" height="45" viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="22.5" cy="22.5" r="22.5" fill="#C4C4C4"/>
+</svg>
diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html
index 51e0476..866633e 100644
--- a/homepage/theme/templates/index.html
+++ b/homepage/theme/templates/index.html
@@ -78,69 +78,111 @@
 
 <!-- INSIGHTS -->
   <div class="w-100 dib bg-white">
-    <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>
+    <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">
+  <div class="w-100">
+    <div class="mw8 center flex flex-wrap justify-center">
 
+      <div class="w-50-l w-100">
 
-        <div class="w-50-l w-100">
-          <div class="w-100 dib cclr-bg-yellow-mid">
-            <p class="ma0 mt6 mb3 mh4">
-              temp
-            </p>
-          </div>
-          <div class="w-100 dib cclr-bg-white-fade">
-            <p class="ma0 mt4 mb2 mh4">
-              temp
-            </p>
-            <p class="ma0 mt4 mb2 mh4">
-              temp
-            </p>
-            <p class="ma0 mt4 mb2 mh4">
-              temp
-            </p>
-            <p class="ma0 mt4 mb2 mh4">
-              temp
+        <div class="w-100 dib cclr-bg-yellow-mid">
+          <div class="wx28 center">
+            <p class="f25 lh-solid ma0 mt6 mb3 mh4">
+              Your job
             </p>
           </div>
         </div>
 
-
-        <div class="w-50-l w-100">
-          <div class="w-100 dib h3 bg-white">
-          </div>
-          <div class="w-100 dib cclr-bg-mint-mid">
-            <p class="ma0 mt4 mb3 mh4">
-              temp
-            </p>
-          </div>
-          <div class="w-100 dib cclr-bg-white-fade">
-            <p class="ma0 mv4 mh4">
-              temp
-            </p>
+        <div class="w-100 hx24 dib cclr-bg-white-fade">
+          <div class="wx28 center">
+            <div class="flex items-center mt4 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Self host Offen and thereby comply with GDPR guidelines.
+              </p>
+            </div>
+            <div class="flex items-center mt4 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Integrate the code snippet into pages you want to track.
+              </p>
+            </div>
+            <div class="flex items-center mt4 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Make your users aware of the access to their data.
+              </p>
+            </div>
+            <div class="flex items-center mt4 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Improve your services with fair and transparent insights.
+              </p>
+            </div>
           </div>
         </div>
 
-
-
-
-
-
-
       </div>
+
+
+      <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="wx28 center">
+            <p class="f25 lh-solid ma0 mt5 mb3 mh4">
+              Benefits for your users
+            </p>
+          </div>
+
+        </div>
+
+        <div class="w-100 hx24 dib cclr-bg-white-fade">
+          <div class="wx28 center">
+            <div class="flex items-center mt4 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Opt in to data collection or decide to not participate at all.
+              </p>
+            </div>
+            <div class="flex items-center mt4 mb2 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Review own data with detailed explanations of metrics and terms.
+              </p>
+            </div>
+            <div class="flex items-center mt4 mb2 mh4">
+              <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
+              <p class="ma0 ml3">
+                Delete only usage data or opt out completly at any time.
+              </p>
+            </div>
+          </div>
+        </div>
+
+        </div>
+
+      </div>
+
+
     </div>
+  </div>