cta and layout

homepage/theme/static/css/fix.css

@@ -36,8 +36,12 @@ COLORS NEW
 
 /* White */
 .cclr-bg-white-fade {
-	background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F9F7F2;
+	background: linear-gradient(218.39deg, #FFFFFF 1.47%, rgba(255, 255, 255, 0) 98.24%), #F3F0E7;
 }
+.cclr-bg-white-fade-metrics {
+	background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%), #F3F0E7;
+}
+
 
 
 /* ---------------------------------------------------
@@ -130,14 +134,15 @@ LAYOUT
 .hx24 {
 	height: 24rem;
 }
-.hx30 {
+.hx-features,
+.hx-try-user {
 	height: 30rem;
 }
 .hx50 {
 	height: 50rem;
 }
-.hx150 {
-	height: 150rem;
+.hx-metrics {
+	height: 100%;
 }
 .wx24,
 .wx24-metrics {
@@ -145,11 +150,14 @@ LAYOUT
 }
 /* Tachyons breakpoints 30 & 60 */
 @media only screen and (min-width: 30em) {
+	.hx-try-user {
+		height: 26rem;
+	}
 	.wx24,
 	.wx24-metrics {
 		width: 24rem;
 	}
-	.hx150 {
+	.hx-metrics {
 		height: 118rem;
 	}
 }
@@ -521,14 +529,10 @@ GRAPHICS
 }
 /* --------------------------------------------- */
 #bg-feature {
-  background: url(/theme/images/gfx-pattern-mint-bright.svg) center;
+  background: url(/theme/images/gfx-bg-feature.svg) #BBD9D3 center;
 }
-#bg-cta-top {
-  background: url(/theme/images/gfx-object-white.svg) center;
-}
-#bg-outro {
-  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
-}
-#bg-cta-bottom {
-  background: url(/theme/images/gfx-pattern-yellow-bright.svg) center;
+#bg-explainer {
+  background:
+		url(/theme/images/gfx-bg-explainer.svg) top center repeat-x,
+		url(/theme/images/gfx-bg-explainer.svg) bottom center repeat-x;
 }

homepage/theme/static/images/gfx-bg-explainer.svg

@@ -0,0 +1,3 @@
+<svg width="1440" height="121" viewBox="0 0 1440 121" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="-1" width="1441" height="121" fill="white"/>
+</svg>

homepage/theme/templates/index.html

@@ -78,12 +78,12 @@
 
 <!-- INSIGHTS -->
   <div class="w-100 dib bg-white">
-    <div class="mh4">
-      <p class="tc f1-ns f2 lh-solid ma0 mt5">
+    <div class="tc mh4">
+      <p class="f1-ns f2 lh-solid ma0 mt6">
         Gain insights in an ethical way
       </p>
       <div class="mw6 center">
-        <p class="tc f5 ma0 mt3 mb5 gray">
+        <p class="f5 ma0 mt3 mb6 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>
@@ -93,7 +93,7 @@
 
 
   <!-- COMPARE -->
-  <div class="w-100">
+  <div class="w-100" id="bg-explainer">
     <div class="mw8 center flex flex-wrap justify-center">
 
       <!-- COMPARE A -->
@@ -294,7 +294,7 @@
       <!-- COMPARE E -->
       <div class="w-50-l w-100">
 
-        <div class="w-100 hx30 dib cclr-bg-yellow-mid">
+        <div class="w-100 hx-features dib cclr-bg-yellow-mid">
           <div class="wx24 center">
 
             <p class="f25 lh-solid ma0 mt5">
@@ -334,7 +334,7 @@
       <!-- COMPARE F -->
       <div class="w-50-l w-100">
 
-        <div class="w-100 hx30 dib cclr-bg-mint-mid">
+        <div class="w-100 hx-try-user dib cclr-bg-mint-mid">
           <div class="wx24 center">
             <p class="f25 lh-solid ma0 mt5">
               Try as user
@@ -346,14 +346,14 @@
               <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 h4 bg-light-gray">
+          <div class="w-100 dn db-l h4 bg-white">
           </div>
         </div>
 
       </div>
 
       <!-- METRICS -->
-      <div class="w-100 hx150 dib cclr-bg-white-fade">
+      <div class="w-100 hx-metrics dib cclr-bg-white-fade-metrics">
 
 
         <div class="wx24-metrics center">
@@ -405,7 +405,7 @@
 
         <!-- BOX 4 -->
         <div class="relative">
-          <div class="relative absolute-m absolute-l stackbox-4 center">
+          <div class="relative absolute-m absolute-l stackbox-4 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
@@ -421,7 +421,28 @@
     </div>
   </div>
 
-
+  <!-- CTA -->
+    <div class="w-100 dib bg-white">
+      <div class="tc mh4">
+        <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 gray mb3">
+                Single binary file for Linux, Windows or MacOS
+              </p>
+              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black fnt-cclr-mid-black" href="#" rel="noopener">Download demo</a>
+            </div>
+            <div class="mw5 mb7 mh0 mh4-ns">
+              <p class="tc f5 ma0 gray mb3">
+                All you need to use Offen in production
+              </p>
+              <a class="w-100 b link dim ph4 pv2 dib b--solid bw2 brd-cclr-mid-black white cclr-bg-black-mid" href="/get-started/" rel="noopener">Get started</a>
+            </div>
+          </div>
+      </div>
+    </div>