From 626ea1b16859406f3ba83b1c43054a5147117ddd Mon Sep 17 00:00:00 2001
From: Keyser H <keyser8x@gmail.com>
Date: Thu, 18 Apr 2019 00:57:06 +0900
Subject: [PATCH] Update docs style.

---
 content/_index.html                           | 152 ++++++++++-
 layouts/_default/list.html                    | 242 ++++++++++++++++++
 layouts/partials/docs-side-nav.html           |  30 +--
 layouts/partials/page-edit.html               |  15 +-
 static/imgs/docs/icon-document-for-note.svg   |   1 +
 static/imgs/docs/icon-document.svg            |   1 +
 static/imgs/docs/icon-search.svg              |  11 +
 .../docs/screen1-background-ground-lower.svg  |   1 +
 .../docs/screen1-background-ground-upper.svg  |   1 +
 9 files changed, 433 insertions(+), 21 deletions(-)
 create mode 100644 static/imgs/docs/icon-document-for-note.svg
 create mode 100644 static/imgs/docs/icon-document.svg
 create mode 100644 static/imgs/docs/icon-search.svg
 create mode 100644 static/imgs/docs/screen1-background-ground-lower.svg
 create mode 100644 static/imgs/docs/screen1-background-ground-upper.svg

diff --git a/content/_index.html b/content/_index.html
index 19a2a3beaa9..3ef9a1c82f9 100644
--- a/content/_index.html
+++ b/content/_index.html
@@ -1,10 +1,158 @@
 ---
 title: "Documentation | Rancher Labs"
-pageHeader: "Rancher Docs"
 description: "Rancher is open source software that combines everything an organization needs to adopt and run containers in production. Built on Kubernetes, Rancher makes it easy for DevOps teams to test, deploy and manage their applications. Operations teams use Rancher to deploy, manage and secure every Kubernetes deployment regardless of where it is running."
-layout: blank
+layout: "no-hero"
 ---
 
+<section class="docs-screen1">
+    <div class="grid-container">
+        <div class="row max-sized">
+            <div class="col-xl-7 texts-container">
+                <div class="texts-wrap">
+                    <h1 class="title-label">Rancher docs</h1>
+
+                    <h3 class="description-label">Rancher is open source software that combines everything an organization needs to adopt and run containers in production. Built on Kubernetes, Rancher makes it easy for DevOps teams to test, deploy and manage their applications. </h3>
+                </div>
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-xl-12 lower-container">
+                <div class="decoration ground">
+                    <img class="ground-lower" src="/imgs/docs/screen1-background-ground-lower.svg">
+                    <img class="ground-upper" src="/imgs/docs/screen1-background-ground-upper.svg">
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="docs-note-item floating">
+    <div class="grid-container contents-container">
+        <div class="row max-sized set-lines contents-wrap">
+            <div class="decoration floating">
+                <img class="document" src="/imgs/docs/icon-document-for-note.svg">
+            </div>
+
+            <div class="col-xl-8"></div>
+            <div class="col-xl-4 texts-container background-white background-white-side-right">
+                <div class="icon-container">
+                    <img class="icon" src="/imgs/docs/icon-document.svg">
+                </div>
+                <div class="texts-wrap">
+                    <div class="label">Featured resource</div>
+                    <p class="description-label">Read about how to migrate from Rancher v1.6 Cattle to v2.x</p>
+                </div>
+
+                <div class="buttons-container">
+                    <button class="button text">
+                        <span>Read the report</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<section class="docs-screen2">
+    <div class="grid-container">
+        <div class="row max-sized set-lines set-ground">
+            <div class="col-4"></div>
+            <div class="col-4"></div>
+            <div class="col-4"></div>
+        </div>
+
+        <div class="row max-sized cards-container">
+            <div class="col-xl-12 cards-wrap">
+                <div class="row card-items-wrap">
+                    <div class="col-xl-6 card-item">
+                        <div class="card-wrap">
+                            <h3 class="title-label">
+                                <span class="background">2.x</span>
+                                Rancher 2.x
+                            </h3>
+        
+                            <hr/>
+        
+                            <p class="description-label">Rancher manages all of your Kubernetes clusters everywhere, unifies them under centralized RBAC, monitors them and lets you easily deploy and manage workloads through an intuitive user interface.</p>
+        
+                            <div class="buttons-container">
+                              <a href="{{< baseurl >}}/rancher/v2.x/en/">
+                                <button class="button text">
+                                    <span>Read the docs</span>
+                                </button>
+                              </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-6 card-item">
+                        <div class="card-wrap">
+                            <h3 class="title-label">
+                                <span class="background">1.6</span>
+                                Rancher 1.6
+                            </h3>
+        
+                            <hr/>
+        
+                            <p class="description-label">If you haven't yet migrated to Rancher 2.x, you can still find documentation for 1.6 here. This is only for legacy users of the 1.6 product.</p>
+        
+                            <div class="buttons-container">
+                              <a href="https://rancher.com/docs/rancher/v1.6/en/">
+                                <button class="button text">
+                                    <span>Read the docs</span>
+                                </button>
+                              </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-6 card-item">
+                        <div class="card-wrap">
+                            <h3 class="title-label">
+                                <span class="background">OS</span>
+                                RancherOS
+                            </h3>
+        
+                            <hr/>
+        
+                            <p class="description-label">RancherOS is the lightest, easiest way to run Docker in production. Engineered from the ground up for security and speed, it runs all system services and user workloads within Docker containers.</p>
+        
+                            <div class="buttons-container">
+                                <a href="{{< baseurl >}}/os/v1.x/en/">
+                                <button class="button text">
+                                    <span>Read the docs</span>
+                                </button>
+                              </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-xl-6 card-item">
+                        <div class="card-wrap">
+                            <h3 class="title-label">
+                                <span class="background">RKE</span>
+                                Rancher Kubernetes Engine 
+                            </h3>
+        
+                            <hr/>
+        
+                            <p class="description-label">Rancher Kubernetes Engine (RKE) is an extremely simple, lightning fast Kubernetes installer that works everywhere.</p>
+        
+                            <div class="buttons-container">
+                              <a href="{{< baseurl >}}/rke/latest/en">
+                                <button class="button text">
+                                    <span>Read the docs</span>
+                                </button>
+                              </a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+
 <section class="wrapper p-v-lg">
   <div class="row center-xs">
     <div class="cards col-md-9">
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index fe85f2c755f..490f3fe87b6 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -6,6 +6,248 @@
 {{ end }}
 
 {{ define "main" }}
+  <section class="docs-container">
+    <div class="grid-container">
+      <div class="row max-sized set-lines set-ground">
+        <div class="col-4"></div>
+        <div class="col-4"></div>
+        <div class="col-4"></div>
+      </div>
+
+      <div class="head-blank"></div>
+
+      <div class="row max-sized contents-container background-base-gray-side">
+        <div class="
+        col-xl-3 
+        col-lg-3 
+        col-md-4 
+        col-sm-12 
+        col-xs-12 
+        col-12 
+        side-menus">
+        <div class="search-container">
+          <input class="search input" placeholder="SEARCH" />
+        </div>
+
+        <div class="side-menus-wrap jquery-accordion-menu">
+          {{ partial "docs-side-nav.html" . }}
+        </div>
+      </div>
+      <div class="
+        col-xl-9 
+        col-lg-9 
+        col-md-8 
+        col-sm-12 
+        col-xs-12 
+        col-12 
+        texts-container">
+        <div class="docs-wrap">
+            {{ with .Params.Title }}
+            <h1 class="m-t-0">{{ . }}</h1>
+            <hr/>
+          {{end}}
+    
+          {{ if .Params.ctaBanner }}
+            {{ with index .Site.Data.cta .Params.ctaBanner }}
+              <div class="row center-xs middle-xs bg-info shadow rounded-corners">
+                <h3 class="m-v-sm m-r-sm text-white">{{ .header }}</h3>
+                <a href="{{ .link }}" target="_blank" class="btn border-btn">{{ .button }}</a>
+              </div>
+            {{ end }}
+          {{ end }}
+    
+          <div class="main-content docs-body">
+            <!-- this is a test -->
+            <!-- {{ partial "page-nav.html" . }} -->
+            <!-- end test -->
+            {{ .Content }}
+    
+            {{ $paginator := .Scratch.Get "paginator" }}
+            {{ range $paginator.Pages }}
+              <div class="box m-b-md">
+                <div class="p-a-sm">
+                  <h3><a href="{{.URL}}">{{.Title}}</a></h3>
+    
+                  {{ if .Params.Image }}
+                    <div class="thumbnail"><img src="{{ .Params.Image }}" alt="{{ .Params.Title }}"></div>
+                  {{end}}
+    
+                  <p>{{ .Summary | safeHTML }}</p>
+                  {{ if .Truncated }}
+                  <div>
+                    <a href="{{ .RelPermalink }}">Read More…</a>
+                  </div>
+                  {{ end }}
+                </div>
+                <div class="bg-default">
+                  <div class="row">
+    
+                    {{ with .Params.Author }}
+                      <div class="p-h-sm p-v-xs"><i class="material-icons">person_outline</i> By: {{ . }}</div>
+                    {{end}}
+    
+                    {{ if eq .Section "events" }}
+                      {{ with .Params.EventDate }}
+                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ . }}</div>
+                      {{end}}
+    
+                    {{ else }}
+    
+                      {{ with .Params.Date }}
+                        <div class="p-h-sm p-v-xs"><i class="material-icons">event</i> {{ .Format "January 2, 2006" }}</div>
+                      {{end}}
+                    {{end}}
+    
+                    {{ if eq .Section "blog" }}
+                      <div class="p-h-sm p-v-xs"><i class="material-icons">timer</i> Read Time: {{.ReadingTime}} minutes</div>
+                    {{end}}
+    
+                    {{ with .Params.Location }}
+                      <div class="p-h-sm p-v-xs"><i class="material-icons">location_on</i> {{ . }}</div>
+                      {{end}}
+    
+                  </div>
+                </div>
+              </div>
+              {{ end }}
+            </div>
+            {{ template "_internal/pagination.html" . }}
+    
+            <div class="p-v-xs">{{ partial "page-edit.html" . }}</div>
+          </article>
+          <!-- {{ with .TableOfContents }}
+            <div class="offset-watch invisible"></div>
+            <aside class="col-sm-2 col-xs-12 unstyled toc-container hidden-md">
+              <h4 class="m-b-0">On this page</h4>
+              {{ . }}
+            </aside>
+          {{ end }} -->
+        </div>
+      </div>
+    </div>
+  </section>
+
+
+  <script>
+      $(document).ready(function() {
+          // Side menu script
+          ;(function ( $, window, document, undefined ) {
+              var pluginName = "jqueryAccordionMenu";
+              var defaults = {
+                      speed: 300,
+                      showDelay: 0,
+                      hideDelay: 0,
+                      singleOpen: true,
+                      clickEffect: true
+                  };
+  
+              function Plugin ( element, options ) {
+                  this.element = element;
+                  this.settings = $.extend( {}, defaults, options );
+                  this._defaults = defaults;
+                  this._name = pluginName;
+                  this.init();
+              };
+              
+              $.extend(Plugin.prototype, {
+                  
+                  init: function () {
+                      this.openSubmenu();
+                      this.submenuIndicators();
+                      if(this.settings.clickEffect){
+                          this.addClickEffect();
+                      }
+                  },
+                  
+                  openSubmenu: function () {
+                      var opts = this.settings; //to differ from local variable "this"
+                      $(this.element).children("ul").find("li").bind("click touchstart", function(e){
+                          e.stopPropagation(); 
+                          e.preventDefault();
+  
+                          if ($(this).attr('class') === 'back-to-the-top') {
+                              $('.mobile-header-container').scrollTop(0);
+                          }
+  
+                          if($(this).children(".submenu").length > 0){
+                              if($(this).children(".submenu").css("display") == "none"){
+                                  $(this).children(".submenu").delay(opts.showDelay).slideDown(opts.speed);
+                                  $(this).children(".submenu").siblings("a").addClass("submenu-indicator-minus");
+                                  $(this).addClass("activate");
+                                  if(opts.singleOpen){
+                                      $(this).siblings().children(".submenu").slideUp(opts.speed);
+                                      $(this).siblings().children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
+                                  }
+                                  return false;
+                              }
+                              else{
+                                  $(this).children(".submenu").delay(opts.hideDelay).slideUp(opts.speed);
+                              }
+                              if($(this).children(".submenu").siblings("a").hasClass("submenu-indicator-minus")){
+                                  $(this).children(".submenu").siblings("a").removeClass("submenu-indicator-minus");
+                                  $(this).removeClass("activate");
+                              }
+                          }
+                          window.location.href = $(this).children("a").attr("href");
+                      });
+                  },
+                  
+                  submenuIndicators: function () {
+                      if($(this.element).find(".submenu").length > 0){
+                          $(this.element).find(".submenu").siblings("a").append("<span class='submenu-indicator'><span class='object1'></span><span class='object2'></span><span class='object3'></span></span>");
+                      }
+                  },
+                  
+                  addClickEffect: function () {
+                      var ink, d, x, y;
+                      $(this.element).find("a").bind("click touchstart", function(e){
+                          
+                          $(".ink").remove();
+                          
+                          if($(this).children(".ink").length === 0){
+                              $(this).prepend("<span class='ink'></span>");
+                          }
+                          
+                          ink = $(this).find(".ink");
+                          ink.removeClass("animate-ink");
+                          
+                          if(!ink.height() && !ink.width()){
+                              d = Math.max($(this).outerWidth(), $(this).outerHeight());
+                              ink.css({height: d, width: d});
+                          }
+                          
+                          x = e.pageX - $(this).offset().left - ink.width()/2;
+                          y = e.pageY - $(this).offset().top - ink.height()/2;
+              
+                          ink.css({top: y+'px', left: x+'px'}).addClass("animate-ink");
+                      });
+                  }
+                  
+              });
+  
+              $.fn[ pluginName ] = function ( options ) {
+                  this.each(function() {
+                      if ( !$.data( this, "plugin_" + pluginName ) ) {
+                          $.data( this, "plugin_" + pluginName, new Plugin( this, options ) );
+                      }
+                  });
+                  return this;
+              };
+          })( jQuery, window, document );
+  
+          var sideNavMenus = $('.side-menus-wrap');
+  
+          sideNavMenus.jqueryAccordionMenu();
+      });
+  </script>
+
+
+
+
+
+
+
+
   <div class="wrapper">
 
     <div class="row m-t-sm">
diff --git a/layouts/partials/docs-side-nav.html b/layouts/partials/docs-side-nav.html
index f506673c6d2..6ac4b4f70d7 100644
--- a/layouts/partials/docs-side-nav.html
+++ b/layouts/partials/docs-side-nav.html
@@ -12,10 +12,10 @@
 {{end}}
 
 <!-- product dropdown -->
-<ul class="dropdown sub-menu unstyled">
-  <li class="m-b-0">
-    <a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="btn bg-link p-a-0">
-      <span class="p-h-xs">
+<ul class="side-menus-wrap">
+  <li class="">
+    <a href="{{ ($.Scratch.Get "topLevel").Permalink }}" class="">
+      <span class="">
         {{ range $product := $.Site.Sections }}
           {{ range $version := .Sections }}
             {{ range $language := .Sections }}
@@ -28,39 +28,35 @@
           {{end}}
         {{end}}
       </span>
-      <i class="material-icons darken p-a-xs">keyboard_arrow_down</i>
     </a>
 
-    <ul class="sub dropdown-menu bg-white unstyled">
+    <ul class="submenu submenus-wrap">
       {{ range $product := $.Site.Sections }}
         {{ range $version := .Sections }}
           {{ range $language := .Sections }}
-            <li class="m-b-0"><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
+            <li><a href="{{ .Permalink }}">{{ .Params.shortTitle }}</a></li>
             {{ if .Params.insertonesix }}
-              <li class="m-b-0"><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
+              <li><a href="https://rancher.com/docs/rancher/v1.6/en/" target="blank">Rancher 1.6</a></li>
             {{end}}
           {{end}}
         {{end}}
       {{end}}
-
     </ul>
   </li>
 </ul>
 
-<div class="tree-nav invisible">
-  <ul>
+<ul class="side-menus-wrap second">
     <!-- {{ template "section-tree-nav" ($.Scratch.Get "secondLevel") }} -->
     {{ template "section-tree-nav" ($.Scratch.Get "topLevel") }}
-  </ul>
-</div>
+</ul>
+
 {{ define "section-tree-nav" }}
   {{ range .Sections}}
-    <li class="tree-nav-item"><a href="{{ .RelPermalink}}">{{ .Title }}</a>
+    <li class=""><a href="{{ .RelPermalink}}">{{ .Title }}</a>
       {{if gt (len .Sections) 0}}
-        <i class="material-icons expand-toggle">add_box</i>
-        <ul class="tree-nav-sublist hide">
+        <ul class="submenu submenus-wrap">
           {{ range .Pages }}
-            <li class="tree-nav-item-child"><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
+            <li class=""><a href="{{ .RelPermalink}}">{{ .Title }}</a></li>
           {{ end }}
           {{ template "section-tree-nav" . }}
         </ul>
diff --git a/layouts/partials/page-edit.html b/layouts/partials/page-edit.html
index ab7b021aab9..7a51474ece9 100755
--- a/layouts/partials/page-edit.html
+++ b/layouts/partials/page-edit.html
@@ -1,2 +1,13 @@
-<a href="{{.Site.Params.ghdocsrepo}}/edit/master/content/{{.File.Path}}" class="btn bg-link">Edit this page <i class="material-icons">
-edit</i></a>
+<div class="buttons-container">
+    <a href="{{.Site.Params.ghdocsrepo}}/edit/master/content/{{.File.Path}}" class="btn bg-link"></a>
+        <button class="button has-icon-right">
+            <span>Edit this page</span>
+            <svg class="icon right" enable-background="new 0 0 34 34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg">
+                <g>
+                    <path class="svg-linear" d="m19.5 12 5 5-5 5"></path>
+                    <path class="svg-linear" d="m24.5 17h-15"></path>
+                </g>
+            </svg>
+        </button>
+    </a>
+</div>
\ No newline at end of file
diff --git a/static/imgs/docs/icon-document-for-note.svg b/static/imgs/docs/icon-document-for-note.svg
new file mode 100644
index 00000000000..df18e009f3b
--- /dev/null
+++ b/static/imgs/docs/icon-document-for-note.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 313.7 265.5" viewBox="0 0 313.7 265.5" xmlns="http://www.w3.org/2000/svg"><path d="m294 240.6c0 4.4-3.5 7.9-7.9 7.9h-262.5c-4.4 0-7.9-3.5-7.9-7.9v-170.6c0-4.3 3.5-7.9 7.9-7.9h262.5c4.3 0 7.9 3.5 7.9 7.9z" fill="#f2c40f"/><path d="m294 240.6c0 4.4-3.5 7.9-7.9 7.9h-262.5c-4.4 0-7.9-3.5-7.9-7.9v-170.6c0-4.3 3.5-7.9 7.9-7.9h262.5c4.3 0 7.9 3.5 7.9 7.9z" fill="#313131" opacity=".25"/><path d="m30.8 258.7h132.3 113.9v-47.5-132.6h-49.1-64.8-132.3z" fill="#d0d4d7"/><path d="m256.4 256.2v-132.3-66.4l-47.5-47.5h-132.6v49.1 64.8 132.3z" fill="#ecf0f1"/><path d="m208.9 57.5h47.5l-47.5-47.5z" fill="#f2f5f5"/><path d="m276.4 246.2v-132.3-66.4-47.5h-180.1v49.1 64.8 132.3z" fill="#fff"/><g fill="#f2f5f5"><path d="m123.6 117h126.9v3.1h-126.9z"/><path d="m123.6 124.5h130.1v3.1h-130.1z"/><path d="m123.6 132h127.4v3.1h-127.4z"/><path d="m123.6 139.5h112.4v3.1h-112.4z"/><path d="m123.6 58.7h126.9v3.1h-126.9z"/><path d="m123.6 66.2h130.1v3.1h-130.1z"/><path d="m123.6 73.7h127.4v3.1h-127.4z"/><path d="m123.6 81.2h77.1v3.1h-77.1z"/><path d="m123.6 94.5h126.9v3.1h-126.9z"/><path d="m123.6 102h130.1v3.1h-130.1z"/><path d="m123.6 109.5h127.4v3.1h-127.4z"/><path d="m123.6 153.3h126.9v3.1h-126.9z"/><path d="m123.6 160.8h130.1v3.1h-130.1z"/><path d="m123.6 168.3h127.4v3.1h-127.4z"/><path d="m123.6 175.7h77.1v3.1h-77.1z"/><path d="m123.6 189.1h126.9v3.1h-126.9z"/><path d="m123.6 196.5h130.1v3.1h-130.1z"/><path d="m123.6 204h41.8v3.1h-41.8z"/></g><path d="m123.4 43.8h60.6v5.1h-60.6z" fill="#0075a8"/><path d="m313.7 127.7c0-4.3-3.5-7.9-7.9-7.9h-133.1l-11.3 18.4h-153.5c-4.3 0-7.9 3.5-7.9 7.9l15.7 111.5c0 4.4 3.5 7.9 7.9 7.9h262.5c4.3 0 7.9-3.5 7.9-7.9z" fill="#f2c40f"/></svg>
\ No newline at end of file
diff --git a/static/imgs/docs/icon-document.svg b/static/imgs/docs/icon-document.svg
new file mode 100644
index 00000000000..8fb8b73fb7c
--- /dev/null
+++ b/static/imgs/docs/icon-document.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 65 90" viewBox="0 0 65 90" xmlns="http://www.w3.org/2000/svg"><g fill="#0b6f9f"><path d="m48 0v17h17z"/><path d="m3 82h59v3h-59z"/><path d="m53.1 36.1h-42.2v-5.5h42.2zm0 8.3h-42.2v-5.5h42.2zm-14.1 8.6h-28.1v-5.6h28.1zm6-33v-20h-45v80h65v-60z"/><path d="m6 87h53v3h-53z"/></g></svg>
\ No newline at end of file
diff --git a/static/imgs/docs/icon-search.svg b/static/imgs/docs/icon-search.svg
new file mode 100644
index 00000000000..f3dcbe55446
--- /dev/null
+++ b/static/imgs/docs/icon-search.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#88BD42;}
+</style>
+<path class="st0" d="M41.7,60.4c-10.4,0-18.8-8.3-18.8-18.8s8.3-18.8,18.8-18.8s18.8,8.3,18.8,18.8C60.4,52.1,52.1,60.4,41.7,60.4z
+	 M85.2,79.4L63.5,57.7c3.3-4.4,5.2-10,5.2-16c0-15-12.1-27.1-27.1-27.1S14.6,26.7,14.6,41.7s12.1,27.1,27.1,27.1
+	c6,0,11.5-1.9,16-5.2l21.7,21.7c0.8,0.8,1.9,1.2,2.9,1.2s2.1-0.4,2.9-1.2C86.9,83.5,86.9,81,85.2,79.4L85.2,79.4z"/>
+</svg>
diff --git a/static/imgs/docs/screen1-background-ground-lower.svg b/static/imgs/docs/screen1-background-ground-lower.svg
new file mode 100644
index 00000000000..e66bef2ffd0
--- /dev/null
+++ b/static/imgs/docs/screen1-background-ground-lower.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 1370.5 236" viewBox="0 0 1370.5 236" xmlns="http://www.w3.org/2000/svg"><path d="m1370.5 236h-1370.5c183.6-137.6 440.4-223.2 724.6-223.2 245.6 0 470.7 63.9 645.9 170.1z" fill="#8dc63f"/><path d="m713.2 41.5c0 22.9 18.6 41.5 41.5 41.5s41.5-18.6 41.5-41.5-18.6-41.5-41.5-41.5c-23 0-41.5 18.6-41.5 41.5z" fill="#6ba939"/><path d="m713.2 41.5c0-22.9 18.6-41.5 41.5-41.5v82.9c-23 0-41.5-18.6-41.5-41.4z" fill="#5c9531"/><g fill="#594a41"><path d="m754.6 107.6c1.1 0 2.1-.9 2.1-2.1v-58.1c0-1.1-.9-2.1-2.1-2.1-1.1 0-2.1.9-2.1 2.1v58.1c.1 1.2 1 2.1 2.1 2.1z"/><path d="m754.6 70.7c.5 0 1.1-.2 1.5-.6.8-.8.8-2.1 0-2.9l-8.6-8.6c-.8-.8-2.1-.8-2.9 0s-.8 2.1 0 2.9l8.6 8.6c.4.4.9.6 1.4.6z"/><path d="m754.6 63.2c.5 0 1.1-.2 1.5-.6l11.5-11.5c.8-.8.8-2.1 0-2.9s-2.1-.8-2.9 0l-11.5 11.5c-.8.8-.8 2.1 0 2.9.4.3.9.6 1.4.6z"/></g><path d="m324.7 82.4c0-26 7.4-56.1 22.4-56.1s22.4 30.1 22.4 56.1c0 9.5-7.4 17.2-22.4 17.2-15.1 0-22.4-7.7-22.4-17.2z" fill="#dbe13a"/><path d="m324.7 82.4c0-26 7.4-56.1 22.4-56.1v73.3c-15.1 0-22.4-7.7-22.4-17.2z" fill="#bbd644"/><path d="m347.1 126.6c1.1 0 2.1-.9 2.1-2.1v-64.1c0-1.1-.9-2.1-2.1-2.1s-2.1.9-2.1 2.1v64.2c0 1.1.9 2 2.1 2z" fill="#594a41"/><path d="m347.1 85.9c.5 0 1.1-.2 1.5-.6l9.5-9.5c.8-.8.8-2.1 0-2.9s-2.1-.8-2.9 0l-9.5 9.5c-.8.8-.8 2.1 0 2.9.3.4.8.6 1.4.6z" fill="#594a41"/><path d="m347.1 77.6c.5 0 1.1-.2 1.5-.6.8-.8.8-2.1 0-2.9l-12.7-12.7c-.8-.8-2.1-.8-2.9 0s-.8 2.1 0 2.9l12.6 12.7c.4.4.9.6 1.5.6z" fill="#594a41"/></svg>
\ No newline at end of file
diff --git a/static/imgs/docs/screen1-background-ground-upper.svg b/static/imgs/docs/screen1-background-ground-upper.svg
new file mode 100644
index 00000000000..eaae3097882
--- /dev/null
+++ b/static/imgs/docs/screen1-background-ground-upper.svg
@@ -0,0 +1 @@
+<svg enable-background="new 0 0 1397.6 422.2" viewBox="0 0 1397.6 422.2" xmlns="http://www.w3.org/2000/svg"><path d="m784.4 422.3h-171.2-613.2v100h613.2 171.2 613.2v-100z" fill="#bbd644"/><path d="m709.4 111.5c-3.5 0-7.1 0-10.6.1-3.5 0-7.1-.1-10.6-.1-301.4.1-562.3 126.6-688.2 310.7h613.2 171.2 613.2c-125.9-184.1-386.8-310.6-688.2-310.7z" fill="#bbd644"/><g fill="#abc53e"><circle cx="357.4" cy="440.8" r="16.3"/><circle cx="524.9" cy="310.4" r="16.3"/><circle cx="872.7" cy="506" r="16.3"/><ellipse cx="1040.2" cy="375.6" rx="16.3" ry="16.3" transform="matrix(.3827 -.9239 .9239 .3827 295.1238 1192.8838)"/><path d="m993.5 359.3h-136.4c-9 0-16.3-7.3-16.3-16.3s7.3-16.3 16.3-16.3h112.6c9 0 16.3-7.3 16.3-16.3s-7.3-16.3-16.3-16.3h-307.9-87.8c-9 0-16.3 7.3-16.3 16.3s7.3 16.3 16.3 16.3h53.9c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-199.9c-9 0-16.3 7.3-16.3 16.3s7.3 16.3 16.3 16.3h64.5c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-88.4c-9 0-16.3 7.3-16.3 16.3s7.3 16.3 16.3 16.3h136.4c9 0 16.3 7.3 16.3 16.3s-7.3 16.3-16.3 16.3h-112.6c-9 0-16.3 7.3-16.3 16.3s7.3 16.3 16.3 16.3h356.5 39.2c9 0 16.3-7.3 16.3-16.3s-7.3-16.3-16.3-16.3h-39.2v-32.6h185.2c9 0 16.3-7.3 16.3-16.3s-7.3-16.3-16.3-16.3h-64.5c-9 0-16.3-7.3-16.3-16.3s7.3-16.3 16.3-16.3h88.4c9 0 16.3-7.3 16.3-16.3s-7.3-16.3-16.3-16.3z"/></g><ellipse cx="267.7" cy="172.1" fill="#8dc63f" rx="60.7" ry="60.7"/><path d="m328.4 172.1c0-33.5-27.2-60.7-60.7-60.7v121.4c33.5 0 60.7-27.2 60.7-60.7z" fill="#6ba939"/><path d="m267.7 268c-1.1 0-2.1-.9-2.1-2.1v-85.1c0-1.1.9-2.1 2.1-2.1 1.1 0 2.1.9 2.1 2.1v85.1c0 1.1-1 2.1-2.1 2.1z" fill="#594a41"/><path d="m267.7 213.9c-.5 0-1.1-.2-1.5-.6-.8-.8-.8-2.1 0-2.9l12.6-12.6c.8-.8 2.1-.8 2.9 0s.8 2.1 0 2.9l-12.7 12.7c-.2.3-.8.5-1.3.5z" fill="#594a41"/><path d="m267.7 202.9c-.5 0-1.1-.2-1.5-.6l-16.8-16.8c-.8-.8-.8-2.1 0-2.9s2.1-.8 2.9 0l16.8 16.8c.8.8.8 2.1 0 2.9-.3.4-.9.6-1.4.6z" fill="#594a41"/><path d="m624 74.4c0-34.5-9.8-74.4-29.7-74.4s-29.7 39.9-29.7 74.4c0 12.6 9.8 22.9 29.7 22.9 19.9-.1 29.7-10.3 29.7-22.9z" fill="#bbd644"/><path d="m624 74.4c0-34.5-9.8-74.4-29.7-74.4v97.2c19.9 0 29.7-10.2 29.7-22.8z" fill="#abc53e"/><path d="m594.3 132.4c-1.1 0-2.1-.9-2.1-2.1v-85.1c0-1.1.9-2.1 2.1-2.1 1.1 0 2.1.9 2.1 2.1v85.1c0 1.2-.9 2.1-2.1 2.1z" fill="#594a41"/><path d="m594.3 78.4c-.5 0-1.1-.2-1.5-.6l-12.7-12.7c-.8-.8-.8-2.1 0-2.9s2.1-.8 2.9 0l12.7 12.7c.8.8.8 2.1 0 2.9-.3.4-.8.6-1.4.6z" fill="#594a41"/><path d="m594.3 67.3c-.5 0-1.1-.2-1.5-.6-.8-.8-.8-2.1 0-2.9l16.9-16.8c.8-.8 2.1-.8 2.9 0s.8 2.1 0 2.9l-16.8 16.8c-.4.4-.9.6-1.5.6z" fill="#594a41"/><path d="m738.5 266.2c0-47.2-14-125.6-31.3-125.6s-31.3 78.4-31.3 125.6c0 17.3 14 31.3 31.3 31.3s31.3-14 31.3-31.3z" fill="#dbe13a"/><path d="m738.5 266.2c0-47.2-14-125.6-31.3-125.6v156.9c17.3 0 31.3-14 31.3-31.3z" fill="#abc53e"/><path d="m707.2 332.7c-1.1 0-2.1-.9-2.1-2.1v-85.1c0-1.1.9-2.1 2.1-2.1 1.1 0 2.1.9 2.1 2.1v85.1c0 1.1-.9 2.1-2.1 2.1z" fill="#594a41"/><path d="m707.2 278.6c-.5 0-1.1-.2-1.5-.6l-12.7-12.7c-.8-.8-.8-2.1 0-2.9s2.1-.8 2.9 0l12.6 12.7c.8.8.8 2.1 0 2.9-.2.4-.7.6-1.3.6z" fill="#594a41"/><path d="m707.2 267.6c-.5 0-1.1-.2-1.5-.6-.8-.8-.8-2.1 0-2.9l16.8-16.8c.8-.8 2.1-.8 2.9 0s.8 2.1 0 2.9l-16.7 16.8c-.4.4-.9.6-1.5.6z" fill="#594a41"/></svg>
\ No newline at end of file