fix landing page (#92)

Signed-off-by: Srinivasan Parthasarathy <[email protected]>

Author: sriumcp

docs/images/iter8-intro-dark.png

@@ -4,7 +4,6 @@
 
 .mdx-container {
   padding-top: 2rem;
-  background: linear-gradient(to bottom, #cd0404, #430195);
   min-height: 44.2rem;
 }
 

docs/images/iter8-intro-light.png

@@ -11,6 +11,21 @@
     position: initial;
   }
 
+  /* gray out roadmap items */
+  .roadmap {
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  /* background fill for container in home page */
+  .md-container {
+  background:
+    linear-gradient(
+      to bottom,
+      hsla(0, 96%, 41%),
+      rgb(67, 1, 149)
+    );
+  }
+
   /* Remove spacing, as we cannot hide it completely */
   .md-main__inner {
     margin: 0;
@@ -67,10 +82,32 @@ <h3>
         </a>
 
       </div>
+    </div>
+
+    <div class="mdx-hero">
+      <div class="mdx-hero__content">
+        <h1>
+          <strong>Use-cases</strong>
+        </h1>
+
+        <h3>
+          <ul>
+            <li>
+              Reliable and automated traffic engineering: blue-green, canary, and mirroring
+            </li>
+            <li>
+              Metrics-driven validation: A/B/n testing, performance testing
+            </li>
+            <li class="roadmap">
+              Metrics-driven validation (roadmap): drift detection, golden testing
+            </li>
+          </ul>  
+        </h3>
+      </div>
 
       <!-- Hero image -->
       <div class="mdx-hero__image">
-        <img src="{{ base_url }}/images/iter8-intro-light.png" alt="Iter8 experiment" draggable="false">
+        <img src="{{ base_url }}/images/iter8-intro-dark.png" alt="Iter8 experiment" draggable="false">
       </div>
 
     </div>

docs/images/src/iter8-intro-dark.excalidraw

@@ -5,12 +5,6 @@
 // Landing page container
 .mdx-container {
   padding-top: px2rem(40px);
-  background:
-    linear-gradient(
-      to bottom,
-      hsla(0, 96%, 41%),
-      rgb(67, 1, 149)
-    );
   min-height: px2rem(884px);
 }
 

docs/images/src/iter8-intro.excalidraw

@@ -52,7 +52,7 @@
 @function px2em($size, $base: 16px) {
   @if unit($size) == px {
     @if unit($base) == px {
-      @return ($size / $base) * 1em;
+      @return (calc($size / $base)) * 1em;
     } @else {
       @error "Invalid base: #{$base} - unit must be 'px'";
     }
@@ -67,7 +67,7 @@
 @function px2rem($size, $base: 20px) {
   @if unit($size) == px {
     @if unit($base) == px {
-      @return ($size / $base) * 1rem;
+      @return (calc($size / $base)) * 1rem;
     } @else {
       @error "Invalid base: #{$base} - unit must be 'px'";
     }