From cbe8376bdb9a889ef5de7351c1cd545295488828 Mon Sep 17 00:00:00 2001
From: Yasoob Khalid <hi@yasoob.me>
Date: Tue, 17 May 2022 10:10:14 +0500
Subject: [PATCH] added asciinema demo on homepage

---
 docs/assets/style.css | 568 +++++++++++++++++++++++++++++++-----------
 docs/home.html        |  57 +++++
 2 files changed, 483 insertions(+), 142 deletions(-)

diff --git a/docs/assets/style.css b/docs/assets/style.css
index 86bf038fa..6eeef0c95 100644
--- a/docs/assets/style.css
+++ b/docs/assets/style.css
@@ -16,7 +16,7 @@
   --slate-border: #DADADA;
   --animation-speed: 40s;
   /* Used on the code showcase  */
-  --gradient-shadow: linear-gradient( 45deg, #2A8FBD, #679ab2, #ffffff, #81ccef, #2abbbd, #c9e0eb, #66c1eb, #40809e, #2A8FBD);
+  --gradient-shadow: linear-gradient(45deg, #2A8FBD, #679ab2, #ffffff, #81ccef, #2abbbd, #c9e0eb, #66c1eb, #40809e, #2A8FBD);
 
   --darkmode-light: #11398c;
   --darkmode-button-light: #325fae;
@@ -257,13 +257,15 @@ a.platform:hover {
 
 @keyframes animate {
   0% {
-      background-position: 0 0;
+    background-position: 0 0;
   }
+
   50% {
-      background-position: 300% 0;
+    background-position: 300% 0;
   }
+
   100% {
-      background-position: 0 0;
+    background-position: 0 0;
   }
 }
 
@@ -359,10 +361,123 @@ a.copy-cta-btn:hover {
 }
 
 
+/* Getting started */
+.getting-started {
+  margin-bottom: -20%;
+  z-index: 1;
+}
+
+.getting-started .container {
+  position: relative;
+  z-index: 1;
+}
+
+.getting-started h2 {
+  /* font-weight: 900; */
+  font-size: 2em;
+}
+
+.getting-started::after {
+  position: absolute;
+  content: "";
+  top: 30%;
+  left: 0;
+  right: 0;
+  bottom: 20%;
+  background: linear-gradient(0deg, rgba(52, 52, 87, 0.2) -40.97%, rgba(0, 0, 0, 0) 103.19%), #2781AB;
+  z-index: 0;
+}
+
+.nav-tabs {
+  width: fit-content;
+  margin: 0 auto;
+  padding: 10px;
+  background-color: #4794B8;
+  border-radius: 20px 20px 0px 0px;
+}
+
+.nav-tabs .nav-link {
+  background: rgba(85, 86, 153, 0.72);
+  border-radius: 0px;
+  padding: 0.6em 3em;
+  color: var(--transparent-white);
+  font-weight: bold;
+  border: 0px;
+  position: relative;
+  font-size: 18px;
+}
+
+.nav-tabs .nav-link:hover {
+  color: white;
+}
+
+.nav-tabs .nav-link:hover svg path {
+  fill: white;
+}
+
+.nav-tabs .nav-link svg {
+  margin-right: 10px;
+}
+
+.nav-tabs .nav-link svg path {
+  fill: var(--bs-gray-300);
+  transition: all .2s
+}
+
+.nav-tabs .nav-link.active {
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), #555699;
+  color: white;
+}
+
+.nav-tabs .nav-link.active svg path {
+  fill: white;
+}
+
+.nav-tabs .nav-link.active::after {
+  content: '';
+  position: absolute;
+  margin-left: -10px;
+  left: 50%;
+  bottom: 0px;
+  height: 0;
+  width: 0;
+  border-bottom: 10px solid #4794B8;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+}
+
+.nav-tabs .nav-link:nth-child(1) {
+  border-radius: 15px 0px 0px 0px;
+}
+
+.nav-tabs .nav-link:nth-child(3) {
+  border-radius: 0px 15px 0px 0px;
+}
+
+.tab-content {
+  margin: 0 auto;
+  margin-top: -10px;
+  background: #4794B8;
+  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25);
+  border-radius: 7px;
+  padding: 10px;
+  padding-bottom: 0px;
+}
+
+.tab-pane {
+  margin-top: -20px;
+}
+
+.tab-pane img {
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
 /* Plugins section */
 
 section.plugins {
-  padding-top: 8rem;
+  padding-top: 23%;
   padding-bottom: 8rem;
   background: var(--slate-bg);
   border-width: 2px 2px;
@@ -472,10 +587,11 @@ section.supportus {
 
 @keyframes scroll {
   from {
-      transform: translateX(0%);
+    transform: translateX(0%);
   }
+
   to {
-      transform: translateX(-50%);
+    transform: translateX(-50%);
   }
 }
 
@@ -517,15 +633,16 @@ footer a:hover {
 /* Accessibility */
 
 @media (prefers-reduced-motion) {
+
   g#plugins,
   g#plugins g,
   .avatar-row,
   .quickstart-code:before,
   .quickstart-code:after {
-      -webkit-animation-play-state: paused !important;
-      -moz-animation-play-state: paused !important;
-      -o-animation-play-state: paused !important;
-      animation-play-state: paused !important;
+    -webkit-animation-play-state: paused !important;
+    -moz-animation-play-state: paused !important;
+    -o-animation-play-state: paused !important;
+    animation-play-state: paused !important;
   }
 }
 
@@ -538,19 +655,30 @@ footer a:hover {
   color: #157577;
   transition: all .1s;
 }
+
 a.list-group-item {
   color: #666;
   font-size: 1em;
 }
-a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover{
+
+a.list-group-item:focus,
+a.list-group-item:hover,
+button.list-group-item:focus,
+button.list-group-item:hover {
   color: #555;
   text-decoration: none;
   background-color: #f5f5f5;
 }
-.list-group-item.disabled:first-child, .list-group-item.disabled:first-child:focus, .list-group-item.disabled:first-child:hover {
+
+.list-group-item.disabled:first-child,
+.list-group-item.disabled:first-child:focus,
+.list-group-item.disabled:first-child:hover {
   margin-top: 0;
 }
-.list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover {
+
+.list-group-item.disabled,
+.list-group-item.disabled:focus,
+.list-group-item.disabled:hover {
   background: none;
   color: #bbb;
   cursor: default;
@@ -559,18 +687,22 @@ a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus,
   margin-top: 2em;
   text-transform: uppercase;
 }
+
 .table-of-contents {
   font-size: 1.2em;
   padding: 1em;
   margin: 0 0 0.5em 0.5em;
 }
+
 .table-of-contents ul {
   margin-bottom: 0;
   padding-left: 20px;
 }
+
 .anchorjs-link {
   color: #24cbce;
 }
+
 .markdown-body {
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
@@ -581,6 +713,7 @@ a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus,
   line-height: 1.7;
   text-align: left;
 }
+
 .markdown-body h1 {
   border-bottom: 1px solid #dfdfdf;
   color: #444;
@@ -590,6 +723,7 @@ a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus,
   text-rendering: optimizelegibility;
   font-weight: 900;
 }
+
 .markdown-body h2 {
   font-size: 1.3em;
   font-weight: 700;
@@ -598,24 +732,29 @@ a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus,
   text-transform: uppercase;
   font-weight: 900;
 }
+
 .markdown-body h3 {
   font-size: 1.2em;
   font-weight: 700;
   color: #555;
   margin: 1em 0;
 }
+
 .markdown-body h4 {
   font-size: 1.1em;
   font-weight: 700;
   color: #555;
   margin: 1em 0;
 }
-.markdown-body h1 + h2 {
+
+.markdown-body h1+h2 {
   margin-top: 1em;
 }
+
 .highlight-show-language {
   position: relative;
 }
+
 .highlight-show-language-label {
   color: black;
   background-color: #CFCFCF;
@@ -641,11 +780,13 @@ a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus,
   -o-transform: none;
   transform: none;
 }
+
 .highlight-output pre {
   color: #fff;
   background-color: #000;
   padding: 10px;
 }
+
 code {
   padding: 0;
   padding-top: 0.2em;
@@ -658,18 +799,23 @@ code {
   border-radius: 3px;
   font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
 }
+
 code:before {
   letter-spacing: -0.2em;
   content: "\00a0";
 }
+
 code:after {
   letter-spacing: -0.2em;
   content: "\00a0";
 }
-pre code:before, pre code:after {
+
+pre code:before,
+pre code:after {
   letter-spacing: 0;
   content: "";
 }
+
 pre {
   display: block;
   line-height: 1.428571429;
@@ -684,38 +830,48 @@ pre {
   color: #4d4d4c;
   margin: 2em 0;
 }
+
 blockquote {
   border-left: 4px solid #5bc0de;
   background-color: #f4f8fa;
   padding: 15px 15px 1px;
   margin-bottom: 30px;
 }
+
 .new-as-of {
   border-left: 4px solid #d1f2a5;
   background-color: #effab4;
 }
+
 .not-yet-released {
   border-left: 4px solid #ef5b58;
   background-color: #f9ad76;
 }
+
 .warning {
   border-left: 4px solid #cd2512;
   background-color: #d1675f;
   color: white;
 }
+
 .fa:before {
   -webkit-font-smoothing: antialiased
 }
+
 .clearfix {
   *zoom: 1
 }
-.clearfix:before, .clearfix:after {
+
+.clearfix:before,
+.clearfix:after {
   display: table;
   content: ""
 }
+
 .clearfix:after {
   clear: both
 }
+
 .improve-slideout {
   position: fixed;
   bottom: 66%;
@@ -728,12 +884,15 @@ blockquote {
   padding: 0px 0 3px;
   z-index: 90;
 }
+
 .improve-slideout:hover {
   right: 205px;
 }
+
 .improve-slideout:hover .improve-slideout-inner {
   right: 0;
 }
+
 .improve-slideout-inner {
   position: fixed;
   bottom: 66%;
@@ -746,6 +905,7 @@ blockquote {
   padding: 4px 12px;
   width: 205px;
 }
+
 .improve-slideout-inner h6 {
   color: #363637;
   font-weight: 700;
@@ -753,10 +913,12 @@ blockquote {
   margin: 0;
   font-size: 1em;
 }
+
 .git-improve {
   vertical-align: baseline;
   padding-left: 8px;
 }
+
 .back-to-contents {
   position: fixed;
   bottom: calc(66% - 34px);
@@ -765,31 +927,41 @@ blockquote {
   padding: 5px 0 4px;
   z-index: 90;
 }
+
 .icon-improve {
   color: #bdbdb5;
   padding: 2px 9px 0 10px;
 }
+
 a .fa {
   display: inline-block;
   text-decoration: inherit
 }
+
 li .fa {
   display: inline-block
 }
-li .fa-large:before, li .fa-large:before {
+
+li .fa-large:before,
+li .fa-large:before {
   width: 1.875em
 }
+
 ul.fas {
   list-style-type: none;
   margin-left: 2em;
   text-indent: -0.8em
 }
+
 ul.fas li .fa {
   width: 0.8em
 }
-ul.fas li .fa-large:before, ul.fas li .fa-large:before {
+
+ul.fas li .fa-large:before,
+ul.fas li .fa-large:before {
   vertical-align: baseline
 }
+
 .rst-versions {
   position: fixed;
   bottom: 0;
@@ -801,13 +973,16 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
   z-index: 400
 }
+
 .rst-versions a {
   color: #7c8e98;
   text-decoration: none
 }
+
 .rst-versions .rst-badge-small {
   display: none
 }
+
 .rst-versions .rst-current-version {
   padding: 12px;
   background-color: #2475c3;
@@ -817,31 +992,40 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   color: #d8edf8;
   *zoom: 1
 }
-.rst-versions .rst-current-version:before, .rst-versions .rst-current-version:after {
+
+.rst-versions .rst-current-version:before,
+.rst-versions .rst-current-version:after {
   display: table;
   content: ""
 }
+
 .rst-versions .rst-current-version:after {
   clear: both
 }
+
 .rst-versions .rst-current-version .fa {
   color: #fcfcfc
 }
+
 .rst-versions .rst-current-version .fa-book {
   float: left;
   line-height: 30px
 }
+
 .rst-versions .rst-current-version .icon-book {
   float: left
 }
+
 .rst-versions .rst-current-version.rst-out-of-date {
   background-color: #E74C3C;
   color: #fff
 }
+
 .rst-versions .rst-current-version.rst-active-old-version {
   background-color: #F1C40F;
   color: #000
 }
+
 .rst-versions.rst-badge {
   border: none;
   bottom: 20px;
@@ -853,25 +1037,32 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   right: 20px;
   width: auto;
 }
+
 .rst-versions.rst-badge.shift-up {
   overflow-y: scroll;
   height: calc(100vh - 100px);
 }
+
 .rst-versions.rst-badge .icon-book {
   float: none
 }
+
 .rst-versions.rst-badge .fa-book {
   float: none
 }
+
 .rst-versions.rst-badge.shift-up .rst-current-version {
   text-align: right
 }
+
 .rst-versions.rst-badge.shift-up .rst-current-version .fa-book {
   float: left
 }
+
 .rst-versions.rst-badge.shift-up .rst-current-version .icon-book {
   float: left
 }
+
 .rst-versions.rst-badge .rst-current-version {
   width: auto;
   height: 30px;
@@ -880,17 +1071,21 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   display: block;
   text-align: center
 }
+
 .rst-other-versions {
   display: none;
   padding: 12px;
   text-align: left;
 }
+
 .shift-up .rst-other-versions {
   display: block;
 }
+
 .rst-other-versions a {
   border: 0;
 }
+
 .rst-other-versions hr {
   display: block;
   border: 0;
@@ -898,19 +1093,24 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   padding: 0;
   border-top: solid 1px #d6edf9
 }
+
 .rst-other-versions dl {
   margin: 0;
 }
+
 .rst-other-versions dd {
   display: inline-block;
   margin: 0
 }
+
 .rst-other-versions dd a {
   display: inline-block;
   padding: 6px;
   color: #fcfcfc
 }
-.dev-warning, .outdated-warning {
+
+.dev-warning,
+.outdated-warning {
   position: absolute;
   top: 0;
   width: 100%;
@@ -928,126 +1128,210 @@ ul.fas li .fa-large:before, ul.fas li .fa-large:before {
   text-align: center;
   background-color: #ffe761;
 }
-@media (prefers-color-scheme: dark) {
-    body {
-        background-color: var(--darkmode-dark);
-        color: white;
-    }
-    header, footer {
-        background: #0b1f4c !important;
-    }
-    .hero-section .cta {
-      background-color: var(--darkmode-button-light);
-    }
-    .hero-section .cta:hover {
-      background-color: var(--darkmode-button-light-hover);
-    }
-    .hero-section .explore-cta {
-      color: white;
-    }
-    .hero-section .explore-cta:hover {
-      color: white;
-    }
-    .powered-by_brands {
-      filter: contrast(2);
-    }
-    div.quickstart-code{
-      filter: none;
-    }
-    .quickstart-code .shell {
-      background: #313274;
-    }
-    section.powered-by {
-      background: var(--darkmode-light);
-    }
-    section.plugins {
-      background: var(--darkmode-dark);
-      border-width: 0px;
-    }
-    section.supportus {
-      background: var(--darkmode-light);
-      border-width: 0px;
-    }
-    section.pro-cta {
-        background: var(--darkmode-dark);
-        border-width: 0px;
-    }
-    .avatar-section:before{
-      background: var(--avatar-darkmode-before-gradient);
-    }
-    .avatar-section:after{
-      background: var(--avatar-darkmode-after-gradient);
-    }
-    .blurb {
-        filter: invert(1);
-    }
-    .slack-channel {
-        background-color: #110e09;
-    }
 
-    code {
-        background-color: #052148;
-        color: #bbb;
-    }
-    pre {
-        background-color: #052148;
-        color: #bbb;
-        border: 1px solid #052148;
-        box-shadow: 0 0 0 3px #07387b;
-    }
-    .list-group-item.disabled, .list-group-item.disabled:focus, .list-group-item.disabled:hover {
-      color: var(--bs-gray-100);
-    }
-    a.list-group-item {
-      background-color: var(--darkmode-dark);
-      color: var(--bs-gray-500);
-    }
-    a.list-group-item:focus, a.list-group-item:hover, button.list-group-item:focus, button.list-group-item:hover {
-      color: white;
-      background-color: var(--darkmode-button-light-hover);
-    }
-    blockquote {
-        background-color: rgba(0, 82, 204, 0.18);
-        border-left: 4px solid rgba(108, 169, 255, 0.3);;
-        color: rgb(108, 169, 255);
-    }
-    blockquote.warning {
-        border-left: 4px solid rgba(239, 136, 84, 0.3);
-        background-color: rgba(235, 100, 32, 0.18);
-        color: rgb(239, 136, 84);
-    }
-    blockquote.new-as-of {
-        border-left: 4px solid rgba(11, 216, 73, 0.3);
-        background-color: rgba(9, 171, 60, 0.18);
-        color: rgb(11, 216, 73);
-    }
-    .dev-warning, .outdated-warning {
-        background-color: #4e440d;
-        color: #fff;
-    }
-    .table-striped tbody tr:nth-of-type(odd) {
-      background-color: #080808
-    }
-    .table-hover tbody tr:hover {
-      background-color: #3b3b3b;
-      color: #bbb;
-    }
-    .table td, .table th {
-      border-top: 1px solid #131110;
-    }
-    .table thead th {
-      border-bottom: 2px solid #131110;
-    }
-    .markdown-body {
-      color: var(--bs-gray-400);
-    }
-    .markdown-body h1 {
-      color: white;      
-    }
-    .markdown-body h2, .markdown-body h3, .markdown-body h4 {
-      color: var(--bs-gray-300);
-    }
-    .markdown-body a{
-      color: #ffffff;
-    }
+/*  Large devices (desktops, 992px and up) */
+@media (max-width: 992px) {
+  .nav-item a.cta {
+    width: 100%;
+  }
+
+  .powered-by {
+    padding-bottom: 4rem;
+  }
+
+  .nav-tabs .nav-link {
+    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
+  }
+
+  .nav-tabs .nav-link {
+    padding: 0.5em 0.8em;
+  }
+
+  .nav-tabs .nav-link svg {
+    margin-right: 5px;
+  }
+
+  section.plugins {
+    padding-top: 30%;
+  }
 }
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: var(--darkmode-dark);
+    color: white;
+  }
+
+  header,
+  footer {
+    background: #0b1f4c !important;
+  }
+
+  .hero-section .cta {
+    background-color: var(--darkmode-button-light);
+  }
+
+  .hero-section .cta:hover {
+    background-color: var(--darkmode-button-light-hover);
+  }
+
+  .hero-section .explore-cta {
+    color: white;
+  }
+
+  .hero-section .explore-cta:hover {
+    color: white;
+  }
+
+  .getting-started::after {
+    background: linear-gradient(0deg, rgba(52, 52, 87, 0.2) -40.97%, rgba(0, 0, 0, 0) 103.19%),
+      #043791;
+  }
+
+  .tab-content {
+    background: #043791;
+  }
+
+  .nav-tabs {
+    background: #043791;
+  }
+
+  .powered-by_brands {
+    filter: contrast(2);
+  }
+
+  div.quickstart-code {
+    filter: none;
+  }
+
+  .quickstart-code .shell {
+    background: #313274;
+  }
+
+  section.powered-by {
+    background: var(--darkmode-light);
+  }
+
+  section.plugins {
+    background: var(--darkmode-dark);
+    border-width: 0px;
+  }
+
+  section.supportus {
+    background: var(--darkmode-light);
+    border-width: 0px;
+  }
+
+  section.pro-cta {
+    background: var(--darkmode-dark);
+    border-width: 0px;
+  }
+
+  .avatar-section:before {
+    background: var(--avatar-darkmode-before-gradient);
+  }
+
+  .avatar-section:after {
+    background: var(--avatar-darkmode-after-gradient);
+  }
+
+  .blurb {
+    filter: invert(1);
+  }
+
+  .slack-channel {
+    background-color: #110e09;
+  }
+
+  code {
+    background-color: #052148;
+    color: #bbb;
+  }
+
+  pre {
+    background-color: #052148;
+    color: #bbb;
+    border: 1px solid #052148;
+    box-shadow: 0 0 0 3px #07387b;
+  }
+
+  .list-group-item.disabled,
+  .list-group-item.disabled:focus,
+  .list-group-item.disabled:hover {
+    color: var(--bs-gray-100);
+  }
+
+  a.list-group-item {
+    background-color: var(--darkmode-dark);
+    color: var(--bs-gray-500);
+  }
+
+  a.list-group-item:focus,
+  a.list-group-item:hover,
+  button.list-group-item:focus,
+  button.list-group-item:hover {
+    color: white;
+    background-color: var(--darkmode-button-light-hover);
+  }
+
+  blockquote {
+    background-color: rgba(0, 82, 204, 0.18);
+    border-left: 4px solid rgba(108, 169, 255, 0.3);
+    ;
+    color: rgb(108, 169, 255);
+  }
+
+  blockquote.warning {
+    border-left: 4px solid rgba(239, 136, 84, 0.3);
+    background-color: rgba(235, 100, 32, 0.18);
+    color: rgb(239, 136, 84);
+  }
+
+  blockquote.new-as-of {
+    border-left: 4px solid rgba(11, 216, 73, 0.3);
+    background-color: rgba(9, 171, 60, 0.18);
+    color: rgb(11, 216, 73);
+  }
+
+  .dev-warning,
+  .outdated-warning {
+    background-color: #4e440d;
+    color: #fff;
+  }
+
+  .table-striped tbody tr:nth-of-type(odd) {
+    background-color: #080808
+  }
+
+  .table-hover tbody tr:hover {
+    background-color: #3b3b3b;
+    color: #bbb;
+  }
+
+  .table td,
+  .table th {
+    border-top: 1px solid #131110;
+  }
+
+  .table thead th {
+    border-bottom: 2px solid #131110;
+  }
+
+  .markdown-body {
+    color: var(--bs-gray-400);
+  }
+
+  .markdown-body h1 {
+    color: white;
+  }
+
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4 {
+    color: var(--bs-gray-300);
+  }
+
+  .markdown-body a {
+    color: #ffffff;
+  }
+}
\ No newline at end of file
diff --git a/docs/home.html b/docs/home.html
index 7fc3a4675..c9ccb9e43 100644
--- a/docs/home.html
+++ b/docs/home.html
@@ -203,6 +203,50 @@
         </div>
     </section>
 
+    <section class="getting-started position-relative py-5">
+        <div class="container">
+            <div class="row">
+                <div class="col-12">
+                    <h2 class="text-center fw-bold mb-5">Getting started is extremely easy</h2>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-12 col-lg-8 offset-lg-2">
+                    <div>
+                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
+                          <a class="nav-link active" id="nav-create-tab" data-bs-toggle="tab" href="#nav-create" role="tab" aria-controls="nav-create" aria-selected="true">
+                            <svg width="38" height="29" viewBox="0 0 38 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M7.6 4.50359H30.4V20.4261H34.2V3.50843C34.2 1.86828 32.9175 0.522949 31.35 0.522949H6.65C5.08428 0.522949 3.8 1.86828 3.8 3.50843V20.4261H7.6V4.50359ZM37.05 22.4165H0.95C0.430469 22.4165 0 22.8705 0 23.4116V24.4068C0 26.5992 1.70703 28.3874 3.8 28.3874H34.2C36.293 28.3874 38 26.5992 38 24.4068V23.4116C38 22.8705 37.5725 22.4165 37.05 22.4165ZM21.7253 16.3335C21.9569 16.5761 22.2597 16.6943 22.5625 16.6943C22.8653 16.6943 23.1699 16.5737 23.4021 16.3308L26.2521 13.3453C26.7159 12.8594 26.7159 12.0703 26.2521 11.5845L23.4021 8.59904C22.9382 8.11309 22.1867 8.11309 21.7229 8.59904C21.2591 9.08499 21.2591 9.87409 21.7229 10.3599L23.7334 12.4646L21.7229 14.5694C21.2562 15.0585 21.2562 15.8484 21.7253 16.3335ZM16.2747 8.6024C15.8109 8.11645 15.0593 8.11645 14.5956 8.6024L11.7456 11.5879C11.2817 12.0738 11.2817 12.8629 11.7456 13.3487L14.5956 16.3342C14.8319 16.5761 15.1347 16.6943 15.4375 16.6943C15.7403 16.6943 16.0449 16.5737 16.2771 16.3308C16.7409 15.8449 16.7409 15.0558 16.2771 14.57L14.2678 12.4649L16.2783 10.3601C16.6903 9.87745 16.6903 9.08754 16.2747 8.6024Z" />
+                            </svg>
+                            Create</a>
+                          <a class="nav-link" id="nav-deploy-tab" data-bs-toggle="tab" href="#nav-deploy" role="tab" aria-controls="nav-deploy" aria-selected="false">
+                            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path d="M29.8709 1.40551C29.8591 1.34642 29.8311 1.29205 29.7903 1.24881C29.7495 1.20556 29.6976 1.17524 29.6407 1.16141C25.8466 0.20375 17.082 3.61605 12.3285 8.51812C11.4813 9.38524 10.7088 10.3268 10.0198 11.3321C8.55457 11.1953 7.08939 11.3105 5.84189 11.8721C2.31916 13.4706 1.29423 17.6454 1.00817 19.4376C0.992669 19.5358 0.999288 19.6364 1.02751 19.7315C1.05574 19.8267 1.10481 19.9138 1.17093 19.9862C1.23705 20.0586 1.31844 20.1144 1.40878 20.1491C1.49913 20.1838 1.59601 20.1966 1.69192 20.1865L7.34824 19.5456C7.35215 19.9859 7.37777 20.4257 7.42498 20.8633C7.4545 21.1658 7.58527 21.4482 7.79477 21.6618L9.98487 23.9221C10.1921 24.1384 10.466 24.2734 10.7593 24.3037C11.1808 24.3522 11.6044 24.3786 12.0285 24.3829L11.4082 30.2153C11.3985 30.3141 11.411 30.414 11.4446 30.507C11.4783 30.6001 11.5323 30.684 11.6023 30.7521C11.6724 30.8202 11.7567 30.8708 11.8487 30.9C11.9408 30.9291 12.0381 30.936 12.1331 30.9202C13.8704 30.6322 17.9241 29.5744 19.4639 25.9396C20.0081 24.6508 20.1198 23.1466 19.9942 21.6417C20.9712 20.9312 21.8861 20.134 22.7285 19.2591C27.4994 14.3627 30.7849 5.51625 29.8709 1.40551ZM18.4878 12.9162C18.0711 12.4862 17.7873 11.9384 17.6723 11.3419C17.5573 10.7455 17.6162 10.1273 17.8417 9.56541C18.0672 9.00356 18.449 8.52333 18.939 8.18546C19.4289 7.84759 20.005 7.66725 20.5942 7.66725C21.1835 7.66725 21.7595 7.84759 22.2494 8.18546C22.7394 8.52333 23.1212 9.00356 23.3467 9.56541C23.5722 10.1273 23.6311 10.7455 23.5161 11.3419C23.4011 11.9384 23.1173 12.4862 22.7006 12.9162C22.4242 13.202 22.0959 13.4288 21.7344 13.5835C21.373 13.7383 20.9855 13.8179 20.5942 13.8179C20.2029 13.8179 19.8154 13.7383 19.454 13.5835C19.0926 13.4288 18.7642 13.202 18.4878 12.9162Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M5.29982 22.8765C4.60428 22.9646 3.95721 23.29 3.46136 23.801C2.232 25.074 2.11548 29.7889 2.11548 29.7889C2.11548 29.7889 6.68686 29.6687 7.91692 28.3985C8.41409 27.8876 8.72993 27.2187 8.81347 26.4997" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                            </svg>
+                            Deploy</a>
+                          <a class="nav-link" id="nav-scale-tab" data-bs-toggle="tab" href="#nav-scale" role="tab" aria-controls="nav-scale" aria-selected="false">
+                            <svg width="23" height="24" viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" clip-rule="evenodd" d="M0 0L2.5 0V21H23V23.7364H0V0ZM15.1473 4.08735C15.1473 3.89062 15.2543 3.57401 15.3891 3.4349C15.5239 3.29579 15.7067 3.21764 15.8973 3.21764H21.6473C21.8379 3.21764 22.2313 3.38443 22.3661 3.52353C22.5009 3.66264 22.6529 4.06992 22.6529 4.26665V10.2008C22.6529 10.3975 22.5985 10.5861 22.4637 10.7253C22.3289 10.8644 22.0528 10.9376 21.8622 10.9376C21.6715 10.9376 21.2739 10.8644 21.1391 10.7253C21.0043 10.5861 20.9286 10.3975 20.9286 10.2008V6.34359L15.7349 12.8963C15.6713 12.9764 15.5028 13.1856 15.4132 13.2322C15.3236 13.2788 15.2256 13.3056 15.1254 13.3108C15.0252 13.3159 14.9251 13.2994 14.8314 13.2622C14.7378 13.225 14.6527 13.1681 14.5817 13.0949L10.9086 9.79904L5.65683 16.7063C5.43978 16.9911 4.8927 16.8125 4.47404 16.5042C4.08636 16.2187 3.75998 15.7452 3.99173 15.3696L9.97348 7.33459C10.0345 7.24783 10.113 7.17575 10.2037 7.12332C10.2943 7.0709 10.3948 7.03937 10.4984 7.0309C10.602 7.02244 10.7061 7.03725 10.8036 7.07432C10.9011 7.11138 10.9896 7.16981 11.0631 7.24558L14.8314 10.7253L19.3036 5.07432L15.8973 5.00841C15.7067 5.00841 15.4678 4.92015 15.333 4.78104C15.1982 4.64193 15.1473 4.28407 15.1473 4.08735Z" />
+                            </svg>
+                            Scale</a>
+                        </div>
+                    </div>
+                    <div class="tab-content" id="nav-tabContent">
+                        <div class="tab-pane show active" id="nav-create" role="tabpanel" aria-labelledby="nav-home-tab">
+                            <img onclick="loadAsciinema('14', 'nav-create')" src="https://asciinema.org/a/14.svg" />
+                        </div>
+                        <div class="tab-pane position-relative" id="nav-deploy" role="tabpanel" aria-labelledby="nav-profile-tab">
+                            <img onclick="loadAsciinema('14', 'nav-deploy')" src="https://asciinema.org/a/14.svg" />
+                        </div>
+                        <div class="tab-pane" id="nav-scale" role="tabpanel" aria-labelledby="nav-contact-tab">
+                            <img onclick="loadAsciinema('14', 'nav-scale')" src="https://asciinema.org/a/14.svg" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
     <!-- Plugins section -->
     <section class="plugins px-4 px-lg-5">
         <div class="container">
@@ -673,6 +717,19 @@
             const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
         }
 
+        function loadAsciinema(asciiId, parentId) {
+            const parentDiv = document.getElementById(parentId);
+            var script = document.createElement('script');
+            script.setAttribute('data-autoplay',  true);
+            script.src = 'https://asciinema.org/a/14.js';
+            script.id = "asciicast-14";
+            script.type = 'text/javascript';
+            const imageTag = parentDiv.lastElementChild;
+            parentDiv.style.height = `${parentDiv.clientHeight}px`;
+            parentDiv.removeChild(imageTag);
+            parentDiv.appendChild(script);
+        }
+
         window.addEventListener('load', (event) => {
             populateSupporterAvatars();
             updateLatestRelease();