From e59a3597ebce8595571c09ed63905ae90d9e8cce Mon Sep 17 00:00:00 2001
From: Hendrik Niefeld <hello@niefeld.com>
Date: Thu, 23 Apr 2020 22:09:36 +0200
Subject: [PATCH] compare operator user 03

---
 homepage/theme/static/css/fix.css   |  31 +++-
 homepage/theme/templates/index.html | 228 ++++++++++++++++++++++++----
 2 files changed, 227 insertions(+), 32 deletions(-)

diff --git a/homepage/theme/static/css/fix.css b/homepage/theme/static/css/fix.css
index ed9eee1..65862fa 100644
--- a/homepage/theme/static/css/fix.css
+++ b/homepage/theme/static/css/fix.css
@@ -23,6 +23,17 @@ COLORS NEW
 	 background-color: #DEF0ED;
 }
 
+/* Black */
+.cclr-bg-black-mid {
+	 background-color: #39352A;
+}
+.cclr-fnt-black-mid {
+	 color: #39352A;
+}
+.cclr-brd-black-mid {
+	 color: #39352A;
+}
+
 /* White */
 .cclr-bg-white-fade {
 	background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
@@ -114,16 +125,22 @@ LAYOUT
 }
 
 /* NEW */
-.wx28 {
-	width: 28rem;
+.wx24 {
+	width: 24rem;
 }
 .hx24 {
 	height: 24rem;
 }
+.hx30 {
+	height: 30rem;
+}
+.hx50 {
+	height: 50rem;
+}
 /* Tachyons breakpoints 30 & 60 */
 @media only screen and (max-width: 30em) {
-	.wx28 {
-		width: 100%;
+	.wx24 {
+		width: 86%;
 	}
 }
 
@@ -156,10 +173,14 @@ em {
   background: linear-gradient(transparent 66%, #fde28c 66%);
   font-style: normal;
 }
-.em-mint {
+.em-mint-1 {
   background: linear-gradient(transparent 66%, #E5FDF8 66%);
   font-style: normal;
 }
+.em-mint-2 {
+  background: linear-gradient(transparent 66%, #BBD9D3 66%);
+  font-style: normal;
+}
 hr {
   margin-left: -1rem;
   margin-right: -1rem;
diff --git a/homepage/theme/templates/index.html b/homepage/theme/templates/index.html
index 866633e..e7ae50f 100644
--- a/homepage/theme/templates/index.html
+++ b/homepage/theme/templates/index.html
@@ -36,7 +36,7 @@
             <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">
+                  <em class="em-mint-1">
                     Free & Open
                   </em>
                 </h2>
@@ -48,7 +48,7 @@
             <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">
+                  <em class="em-mint-1">
                     Self hosted
                   </em>
                 </h2>
@@ -60,7 +60,7 @@
             <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">
+                  <em class="em-mint-1">
                     Fair & Secure
                   </em>
                 </h2>
@@ -96,39 +96,40 @@
   <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="wx28 center">
-            <p class="f25 lh-solid ma0 mt6 mb3 mh4">
+          <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="wx28 center">
-            <div class="flex items-center mt4 mh4">
+          <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">
+              <p class="ma0 ml3 mr4-ns">
                 Self host Offen and thereby comply with GDPR guidelines.
               </p>
             </div>
-            <div class="flex items-center mt4 mh4">
+            <div class="flex items-center mt4">
               <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
-              <p class="ma0 ml3">
+              <p class="ma0 ml3 mr4-ns">
                 Integrate the code snippet into pages you want to track.
               </p>
             </div>
-            <div class="flex items-center mt4 mh4">
+            <div class="flex items-center mt4">
               <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
-              <p class="ma0 ml3">
+              <p class="ma0 ml3 mr4-ns">
                 Make your users aware of the access to their data.
               </p>
             </div>
-            <div class="flex items-center mt4 mh4">
+            <div class="flex items-center mt4">
               <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
-              <p class="ma0 ml3">
+              <p class="ma0 ml3 mr4-ns">
                 Improve your services with fair and transparent insights.
               </p>
             </div>
@@ -137,49 +138,221 @@
 
       </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="wx28 center">
-            <p class="f25 lh-solid ma0 mt5 mb3 mh4">
+          <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="wx28 center">
-            <div class="flex items-center mt4 mh4">
+          <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">
+              <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 mh4">
+            <div class="flex items-center mt4 mb2">
               <img src="/theme/images/temp.svg" alt="temp" width="45" height="45">
-              <p class="ma0 ml3">
+              <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 mh4">
+            <div class="flex items-center mt4 mb2">
               <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 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="lh-solid ma0 mb4">
+                Unique users
+              </p>
+              <p class="f25 lh-solid ma0 mb2">
+                2.530
+              </p>
+              <p class="lh-solid ma0 mb4">
+                Unique sessions
+              </p>
+              <p class="lh-solid pt2 ma0 mb3">
+                Top pages
+              </p>
+              <table class="f7 f5-ns collapse dt--fixed mb4">
+                <tbody>
+                  <tr class="striped--near-white">
+                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
+                  </tr>
+                  <tr class="striped--near-white">
+                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</td>
+                  </tr>
+                  <tr class="striped--near-white">
+                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/landing/</td>
+                  </tr>
+                  <tr class="striped--near-white">
+                    <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/otherpage/</td>
+                  </tr>
+                  <tr class="striped--near-white">
+                    <td class="truncate pv2 pl2 pr1">https://sub.yourpage.xyz/</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="lh-solid ma0 mb4">
+                    Unique websites
+                  </p>
+                  <p class="f25 lh-solid ma0 mb2">
+                    2
+                  </p>
+                  <p class="lh-solid ma0 mb4">
+                    Unique sessions
+                  </p>
+                  <p class="lh-solid pt2 ma0 mb3">
+                    Top pages
+                  </p>
+                  <table class="f7 f5-ns collapse dt--fixed mb4">
+                    <tbody>
+                      <tr class="striped--near-white">
+                        <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/</td>
+                      </tr>
+                      <tr class="striped--near-white">
+                        <td class="truncate pv2 pl2 pr1">https://www.yourpage.xyz/blog/</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 bg-white">
+                      </div>
+                    </div>
+
+
+
+
+
+                  </div>
+
 
     </div>
   </div>
@@ -194,6 +367,7 @@
 
 
 
+
 {% endblock %}
 
 {% block outro %}