From 1782a64b30c38f365fc2f39fa1b7dff133496edf Mon Sep 17 00:00:00 2001
From: Pedro Goncalves <pedromvprg@gmail.com>
Date: Fri, 7 Aug 2020 23:59:28 -0400
Subject: [PATCH] Minimal design tweaks (#382)

* Reduce the amount of visual details and make design flatter

* Move link to outside of detected OS

* Havier type on hero copy

* Add video module on the bottom of home

* Match letter spacing between light/dark modes

* Add transparent border to prevent movement of type on hover

* Remove arrow from languages

* Remove download dropdown and add all downloads link

* Add download arrow for all os

* Make getting-started link direct

Because it's not translated yet, so lingual_link()
won't resolve for non-English languages.

* Update arrow image filename
---
 _data/de.yml               |   2 +-
 _data/en.yml               |   2 +-
 _data/es.yml               |   2 +-
 _data/fr.yml               |   2 +-
 _data/ja.yml               |   2 +-
 _data/pt-PT.yml            |   2 +-
 _data/ru.yml               |   2 +-
 _data/zh-CN.yml            |   2 +-
 _includes/main_nav.html    |   4 +-
 _layouts/page_home.html    | 106 ++++++++++++++++++++----------
 css/styles.scss            | 130 ++++++++++++++++++++++++++-----------
 images/arrow-down-b.svg    |   7 ++
 images/arrow-down-w.svg    |   7 ++
 images/arrow-right-w.svg   |   7 ++
 images/icon-android-b.svg  |  19 ++++++
 images/icon-apple-b.svg    |  12 ++++
 images/icon-download-b.svg |  10 +++
 17 files changed, 233 insertions(+), 85 deletions(-)
 create mode 100644 images/arrow-down-b.svg
 create mode 100644 images/arrow-down-w.svg
 create mode 100644 images/arrow-right-w.svg
 create mode 100644 images/icon-android-b.svg
 create mode 100644 images/icon-apple-b.svg
 create mode 100644 images/icon-download-b.svg

diff --git a/_data/de.yml b/_data/de.yml
index 76a0a58b..9305c5d4 100644
--- a/_data/de.yml
+++ b/_data/de.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Downloads
   androidNotificationsApp: Benachrichtigungs-App Android
   iosNotificationApp: Benachrichtigungs-App iOS
-  getStarted: Erste Schritte »
+  getStarted: Erste Schritte
   runningWindows: Sie scheinen Windows zu benutzen
   runningMac: Sie scheinen einen Mac zu benutzen
   runnigDebian: Sie scheinen Debian/Ubuntu zu benutzen
diff --git a/_data/en.yml b/_data/en.yml
index bc4ccbe0..edcb41c4 100644
--- a/_data/en.yml
+++ b/_data/en.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Downloads
   androidNotificationsApp: Get Android Notifications App
   iosNotificationApp: Get iOS Notification app
-  getStarted: Get Started »
+  getStarted: Get Started
   runningWindows: You appear to be running Windows
   runningMac: You appear to be using a Mac
   runnigDebian: You appear to be using Debian/Ubuntu
diff --git a/_data/es.yml b/_data/es.yml
index e97fbf9b..61f7c9f1 100644
--- a/_data/es.yml
+++ b/_data/es.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Descargas
   androidNotificationsApp: App de Notificaciones Android
   iosNotificationApp: App de Notificaciones iOS
-  getStarted: Comenzar »
+  getStarted: Comenzar
   runningWindows: Parece que está ejecutando Windows
   runningMac: Parece que está ejecutando Mac
   runnigDebian: Parece que está usando Debian/Ubuntu
diff --git a/_data/fr.yml b/_data/fr.yml
index 2076c9ea..70235a83 100644
--- a/_data/fr.yml
+++ b/_data/fr.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Téléchargements
   androidNotificationsApp: App de notifications Android
   iosNotificationApp: App de notifications iOS
-  getStarted: Commencer »
+  getStarted: Commencer
   runningWindows: Vous semblez utiliser Windows
   runningMac: vous semblez utiliser un Mac
   runnigDebian: vous semblez utiliser Debian/Ubuntu
diff --git a/_data/ja.yml b/_data/ja.yml
index 4ed1ea33..a884aed7 100644
--- a/_data/ja.yml
+++ b/_data/ja.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: ダウンロード
   androidNotificationsApp: Android通知アプリを入手
   iosNotificationApp: iOS通知アプリを入手
-  getStarted: 始める »
+  getStarted: 始める
   runningWindows: Windowsを実行しているようです。
   runningMac: Macを実行しているようです。
   runnigDebian: Debian/Ubuntuを実行しているようです。
diff --git a/_data/pt-PT.yml b/_data/pt-PT.yml
index 939c9d55..6f56fd93 100644
--- a/_data/pt-PT.yml
+++ b/_data/pt-PT.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Downloads
   androidNotificationsApp: App de Notificação Android
   iosNotificationApp: App de Notificação iOS
-  getStarted: Começar »
+  getStarted: Começar
   runningWindows: Você parece estar a utilizar Windows
   runningMac: Você parece estar a utilizar Mac
   runnigDebian: Você parece estar a utilizar Debian/Ubuntu
diff --git a/_data/ru.yml b/_data/ru.yml
index a9fddf5c..a3f7480a 100644
--- a/_data/ru.yml
+++ b/_data/ru.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: Загрузить
   androidNotificationsApp: Скачать приложение для Android
   iosNotificationApp: Скачать приложение для iOS
-  getStarted: Узнать больше »
+  getStarted: Узнать больше
   runningWindows: "Похоже, вы используете Windows"
   runningMac: "Похоже, вы используете Mac"
   runnigDebian: "Похоже, вы используете Debian/Ubuntu"
diff --git a/_data/zh-CN.yml b/_data/zh-CN.yml
index 05733067..85b55eff 100644
--- a/_data/zh-CN.yml
+++ b/_data/zh-CN.yml
@@ -48,7 +48,7 @@ homepage_content:
   downloads: 下载
   androidNotificationsApp: 下载 Android 通知应用程序
   iosNotificationApp: 下载 iOS 通知应用程序
-  getStarted: 现在开始 »
+  getStarted: 现在开始
   runningWindows: 你似乎在使用 Windows
   runningMac: 你似乎在使用 Mac
   runnigDebian: 你似乎在使用 Debian/Ubuntu
diff --git a/_includes/main_nav.html b/_includes/main_nav.html
index 2cbbc086..dcc0f548 100644
--- a/_includes/main_nav.html
+++ b/_includes/main_nav.html
@@ -8,7 +8,7 @@
     <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{ page.lang_display }}
     </button>
-    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <div class="dropdown-menu shadow-lg" aria-labelledby="dropdownMenuButton">
       {% assign pages = site.pages | where:"ref", page.ref | sort: 'lang_display' %}
       {% for page in pages %}
         <div class="dropdown-item btn-icon">
@@ -100,7 +100,7 @@
         <a class="nav-link dropdown-toggle visible-language" href='#' id="languageSelectorDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           {{ page.lang_display }}
         </a>
-        <div class="dropdown-menu" aria-labelledby="languageSelectorDropdown">
+        <div class="dropdown-menu shadow-lg" aria-labelledby="languageSelectorDropdown">
           {% assign pages = site.pages | where:"ref", page.ref | sort: 'lang_display' %}
           {% for page in pages %}
           <div class="dropdown-item btn-icon">
diff --git a/_layouts/page_home.html b/_layouts/page_home.html
index c0d460ff..0fe16086 100644
--- a/_layouts/page_home.html
+++ b/_layouts/page_home.html
@@ -7,7 +7,7 @@
         <main class="bd-masthead" id="content" role="main">
             <div class="row align-items-center">
               <div class="col-md-12 order-md-1 text-md-left px-3 px-md-5">
-                <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.title }}</h1>
+                <h1 class="intro display-1" style="margin-left: -.3rem;">{{ item.title }}</h1>
 
                 <div class="row-block pl-0 pt-4 pt-md-5 pr-0 pr-lg-5">
 
@@ -17,101 +17,98 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
 
                     <div class="d-flex flex-column flex-md-row lead mb-1">
 
-                      <div class="downloads-desktop btn-group os-selector-home col-sm-12 col-md-12 col-lg-5 px-0">
+                      <div class="downloads-desktop btn-group os-selector-home col-sm-12 col-md-12 col-lg-5 px-0 hero-btn">
 
                           <!-- This what displays on the dropdown in collapsed state -->
                           <button class="btn btn-outline-secondary btn-lg selected-os-download btn-icon shadow-btn" type="button" data-bisq-version="{{ site.client_version }}" data-site-url="">
                               <div class="id-win64 hidden">
+                                <a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">
                                   <div class="float-left">
                                       <img src="/images/icon-windows-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Windows" loading="lazy">
                                       <img src="/images/icon-windows-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Windows" loading="lazy">
-                                      <a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">{{ item.buttonWindows }}</a>
+                                      {{ item.buttonWindows }}
                                   </div>
                                   <div class="float-right">
-                                      <a class="dl-win64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.exe">.exe</a>
+                                      .exe <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
                                   </div>
+                                </a>
                               </div>
 
                               <div class="id-mac hidden">
+                                <a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">
                                   <div class="float-left">
                                       <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Mac" loading="lazy">
                                       <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Mac" loading="lazy">
-                                      <a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">{{ item.buttonMac }}</a>
+                                      {{ item.buttonMac }}
                                   </div>
                                   <div class="float-right">
-                                      <a class="dl-mac" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-{{ site.client_version }}.dmg">.dmg</a>
+                                      .dmg <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
                                   </div>
+                                </a>
                               </div>
 
                               <div class="id-deb64 hidden">
+                                <a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">
                                   <div class="float-left">
                                       <img src="/images/icon-ubuntu-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Ubuntu/Debian" loading="lazy">
                                       <img src="/images/icon-ubuntu-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Ubuntu/Debian" loading="lazy">
-                                      <a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">{{ item.buttonDebian }}</a>
+                                      {{ item.buttonDebian }}
                                   </div>
                                   <div class="float-right">
-                                      <a class="dl-deb64" href="https://bisq.network/downloads/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.deb">.deb</a>
+                                      .deb <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
                                   </div>
+                                </a>
                               </div>
 
                               <div class="id-rpm64 hidden">
+                                <a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">
                                   <div class="float-left">
                                       <img src="/images/icon-fedora-g.svg" class="os-icon os-icon-g" alt="Download Bisq for Red Hat/Fedora" loading="lazy">
                                       <img src="/images/icon-fedora-w.svg" class="os-icon os-icon-w" alt="Download Bisq for Red Hat/Fedora" loading="lazy">
-                                      <a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">{{ item.buttonRedHat }}</a>
+                                      {{ item.buttonRedHat }}
                                   </div>
                                   <div class="float-right">
-                                      <a class="dl-rpm64" href="https://github.com/bisq-network/bisq/releases/download/v{{ site.client_version }}/Bisq-64bit-{{ site.client_version }}.rpm">.rpm</a>
+                                      .rpm <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
                                   </div>
+                                </a>
                               </div>
 
                               <div class="id-all hidden">
+                                <a href="{% lingual_link downloads %}">
                                   <div class="float-left">
                                       <img src="/images/icon-download-g.svg" class="os-icon os-icon-g" alt="Download Bisq" loading="lazy">
                                       <img src="/images/icon-download-w.svg" class="os-icon os-icon-w" alt="Download Bisq" loading="lazy">
                                       {{ item.buttonDownloads }}
                                   </div>
                                   <div class="float-right">
-                                      <a href="{% lingual_link downloads %}">{{ item.buttonGetBisq }}</a>
+                                      {{ item.buttonGetBisq }} <img class="btn-icon-img" src="/images/arrow-down-w.svg" />
                                   </div>
+                                </a>
                               </div>
                           </button>
 
-                          <button type="button" class="btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split hero-btn shadow-btn " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                              <span class="sr-only">{{ item.buttonToggle }}</span>
-                          </button>
 
-                          <div class="dropdown-menu dropdown-menu-right shadow-lg">
-                              {% include os_selector_options.html %}
-                          </div>
 <!-- Need to repeat the function because the if/else function seems to nullify it -->
 {% assign item = site.data[page.lang].homepage_content %}
                       </div>
 
 
                       <a href="{% lingual_link downloads %}" class="downloads-mobile btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn ">
-                          <img src="/images/icon-download-g.svg" class="os-icon os-icon-g" alt="Download Bisq" loading="lazy">
-                          <img src="/images/icon-download-w.svg" class="os-icon os-icon-w" alt="Download Bisq" loading="lazy">
                           {{ item.downloads }}
+                          <img class="btn-icon-img" src="/images/icon-download-b.svg" alt="Download Bisq">
                       </a>
 
-
                       <a href="https://play.google.com/store/apps/details?id=com.joachimneumann.bisq" target="_blank" rel="noopener" class="downloads-android hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'android-notifications');">
-                          <img src="/images/icon-android-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for Android" loading="lazy">
-                          <img src="/images/icon-android-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for Android" loading="lazy">
-                          {{ item.androidNotificationsApp }}
+                          {{ item.androidNotificationsApp }} <img src="/images/icon-android-b.svg" class="btn-icon-img" alt="Download Bisq Notification App for Android" loading="lazy">
                       </a>
 
 
                       <a href="https://itunes.apple.com/us/app/bisq-mobile/id1424420411" target="_blank" rel="noopener" class="downloads-ios hidden btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn" onclick="ga('send', 'event', 'Jumbotron actions', 'download', 'ios-notifications');">
-                          <img src="/images/icon-apple-g.svg" class="os-icon os-icon-g" alt="Download Bisq Notification App for iOS" loading="lazy">
-                          <img src="/images/icon-apple-w.svg" class="os-icon os-icon-w" alt="Download Bisq Notification App for iOS" loading="lazy">
-                          {{ item.iosNotificationApp }}
+                          {{ item.iosNotificationApp }} <img src="/images/icon-apple-b.svg" class="btn-icon-img" alt="Download Bisq Notification App for iOS" loading="lazy">
                       </a>
 
-
-                      <a href="https://docs.bisq.network/getting-started.html" target="_blank" rel="noopener" class="btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn">
-                          {{ item.getStarted }}
+                      <a href="/getting-started" class="btn btn-lg btn-outline-secondary btn-icon hero-btn col-sm-12 col-md-12 col-lg-3 px-0 shadow-btn">
+                          {{ item.getStarted }} <img class="btn-icon-img" src="/images/arrow-right-w.svg" />
                       </a>
 
 
@@ -132,12 +129,18 @@ <h1 class="intro text-monospace display-1" style="margin-left: -.3rem;">{{ item.
                     </div>
 
 
-                    <p class="text-muted mb-0 mt-1 small" style="opacity: 0.5">
-                      v{{ site.client_version }} — <span class="id-win64 hidden">{{ item.runningWindows }}</span>
-                                                   <span class="id-mac hidden">{{ item.runningMac }}</span>
-                                                   <span class="id-deb64 hidden">{{ item.runnigDebian }}</span>
-                                                   <span class="id-rpm64 hidden">{{ item.runningRedHat }}</span>
-                                                   <span class="id-all hidden">{{ item.currentVersion }}</span> <!-- fallback text if no desktop os recognized -->
+                    <p class="mb-0 mt-1 small" style="opacity: 0.7">
+                      <a href="{% lingual_link downloads %}">
+                        {{ site.data[page.lang].os_selector_options.liAllDownloads }}
+                      </a>
+                      <span class="seperator-version"> | </span>
+                      v{{ site.client_version }}
+                      <span class="seperator-version"> | </span>
+                      <span class="id-win64 hidden">{{ item.runningWindows }}</span>
+                      <span class="id-mac hidden">{{ item.runningMac }}</span>
+                      <span class="id-deb64 hidden">{{ item.runnigDebian }}</span>
+                      <span class="id-rpm64 hidden">{{ item.runningRedHat }}</span>
+                      <span class="id-all hidden">{{ item.currentVersion }}</span> <!-- fallback text if no desktop os recognized -->
                     </p>
 
 
@@ -282,7 +285,38 @@ <h2 id="join-the-community">{{ item.hJoin }}</h2>
   </div>
 </div>
 
-
+<div class="grey-back video">
+  <div class="row-block container" style="padding-bottom: 4em;">
+    <div class="row video-container">
+        <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/og7tqVK8c1E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </div>
+    <style>
+    .grey-back.video {
+      margin: 0 0;
+      padding-bottom: 0;
+      background: #272727;
+    }
+    .dark-mode .grey-back.video {
+      background: #0f0f0f;
+    }
+    .video-container {
+      position: relative;
+      width: 100%;
+      height: 0;
+      padding-bottom: 56.25%;
+      margin: 0;
+    }
+
+    iframe {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+    }
+    </style>
+  </div>
+</div>
 
 {% comment %}
 <!-- future stats section -->
diff --git a/css/styles.scss b/css/styles.scss
index 8d68780d..e1bcf240 100644
--- a/css/styles.scss
+++ b/css/styles.scss
@@ -129,8 +129,7 @@ h6,
 .display-1 {
   font-size: 3.5rem;
   line-height: 1.2;
-  letter-spacing: -0.1rem;
-  font-weight: 200;
+  font-weight: 400;
 }
 
 .display-2 {
@@ -193,9 +192,19 @@ hr {
   font-weight: 200;
 }
 
-.btn-group > .btn:hover, .btn-group-vertical > .btn:hover {
+.btn-group > .btn, .btn-group-vertical > .btn
+.btn-group > .btn a, .btn-group-vertical > .btn a {
     background-color: #25B135;
     color: #fff;
+    border: none;
+}
+.btn-group > .btn:hover a, .btn-group-vertical > .btn:hover a {
+    color: #fff;
+}
+
+.btn-group > .btn:hover, .btn-group-vertical > .btn:hover {
+    background-color: #0cbf0c;
+    color: #fff;
 }
 .btn-group > .btn:hover a, .btn-group-vertical > .btn:hover a {
     color: #fff;
@@ -213,9 +222,9 @@ hr {
 .btn-secondary:not(:disabled):not(.disabled).active,
 .show>.btn-secondary.dropdown-toggle,
 .btn-secondary:hover {
-    background: none;
-    border-color: #d7e4d9;
-    color: #ccc;
+    background: #00b409;
+    border: none;
+    color: #fff;
 }
 
 .btn-secondary:hover {
@@ -223,15 +232,20 @@ hr {
 }
 
 .btn-outline-secondary {
-  color: #25B135;
+  color: #000;
+  background-color: #e3e3e3;
   background-image: none;
-  border-color: #d7e4d9;
+  border: none;
 }
 
 .btn-outline-secondary:hover {
-  background-color: #f9f9f9;
-  border: #e5e5e5 1px solid;
-  color: #26b037;
+    background-color: #c8c8c8;
+    border: none;
+    color: #000;
+}
+
+.btn-icon-img {
+    width: 24px;
 }
 
 .dropdown-menu {
@@ -240,6 +254,7 @@ hr {
   margin-top: 10px;
   left: initial;
   right: 0;
+  border: none;
 }
 
 .responsive-youtube-container {
@@ -269,6 +284,7 @@ hr {
     margin-top: 0;
     max-height: 225px;
     overflow-y: scroll;
+    margin-top: 5px;
 }
 
 
@@ -420,6 +436,9 @@ footer, footer ul li {
     box-shadow: 0 0 0 0.02rem rgba(108, 117, 125, 0.5);
 }
 
+.selected-os-download{
+        padding: 0 13px 0 0;
+}
 
 .os-selector-home .btn-icon a {
   text-decoration: none;
@@ -429,6 +448,12 @@ footer, footer ul li {
   -webkit-transition: .2s;
 }
 
+.os-selector-home .btn-icon .hidden a, .os-selector-home .btn-icon .shown a {
+    display: block;
+    width: 100%;
+    height: 25px;
+    color: #fff;
+}
 .selected-os-download.btn-icon {
     cursor: default;
 }
@@ -459,9 +484,8 @@ footer, footer ul li {
 
 .dropdown-item:hover,
 .dropdown-item:focus {
-  color: #25B135;
   text-decoration: none;
-  background-color: #f5f5f5;
+  background: none;
 }
 
 
@@ -516,11 +540,14 @@ footer, footer ul li {
 }
 
 .btn-icon .os-icon-w, .btn-icon:hover .os-icon-w{
-  opacity:0
+  opacity: 0;
+}
+
+.btn-icon .shown .os-icon-w{
+  opacity: 1;
 }
 
 .navbar {
-  border-bottom: #EBEBEB 1px solid;
   background-color: #fff !important;
   padding: 0 1rem;
   height: 70px;
@@ -536,10 +563,12 @@ footer, footer ul li {
 }
 
 .navbar-light .navbar-nav .nav-item .nav-link {
-    border-bottom: #EBEBEB 1px solid;
-    font-weight: 400;
+    font-weight: 500;
+    font-size: 14px;
     padding-left: 0;
     padding-right: 0;
+    letter-spacing: 0.01em;
+    border-bottom: 1px solid transparent;
 }
 
 .navbar-light .navbar-nav .nav-item.current .nav-link,
@@ -566,9 +595,10 @@ nav .mobile-language-selector {
 }
 
 nav .mobile-language-selector button {
-    background-color: #fff;
+    background: none;
     color: #25B135;
-    border: 1px solid #25B135;
+    border: none;
+    line-height: 1.7em;
 }
 
 .footer {
@@ -747,7 +777,10 @@ td {
 }
 
 
-
+.seperator-version {
+    padding: 0 0.2rem;
+    color: #d0d0d0;
+}
 
 .container h3 {
     font-weight: 200;
@@ -758,12 +791,16 @@ td {
 
 .downloads-desktop.os-selector-home {
   display: inline-flex;
-  min-width: 470px;
+  min-width: 300px;
 }
 
 
 .downloads-mobile {
   display: none;
+  .os-icon {
+        right: 8px;
+        left: auto;
+    }
 }
 
 
@@ -1095,7 +1132,6 @@ getting started page
       background: #fff;
     }
     .navbar {
-      border-bottom: #EBEBEB 1px solid;
       background: #fff !important;
       padding: 0.2rem 1rem;
       height: auto;
@@ -1364,19 +1400,42 @@ body.dark-mode .dropdown-menu {
 }
 
 body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus {
-    color: #25B135;
     text-decoration: none;
-    background-color: #1b1b1b;
+    background: none;
 }
 
 body.dark-mode .btn-outline-secondary {
-    border-color: #313131;
+    border: none;
+    background-color: #1e1e1e;
+    color: #fff;
+}
+
+body.dark-mode .downloads-desktop .btn-outline-secondary {
+    background-color: #009f00;
 }
 
 body.dark-mode .btn-outline-secondary:hover {
-    background-color: #151515;
-    border: #424242 1px solid;
-    color: #2bca3e;
+    border: none;
+    color: #fff;
+    background: #1a1a1a;
+}
+
+body.dark-mode .btn-outline-secondary img {
+    -webkitfilter: invert(1);
+    filter: invert(1);
+}
+
+body.dark-mode .downloads-desktop img, body.dark-mode .btn-outline-secondary .os-icon {
+    -webkitfilter: invert(0);
+    filter: invert(0);
+}
+
+body.dark-mode .downloads-desktop .btn-outline-secondary:hover {
+    background-color: #0ab90a;
+}
+
+body.dark-mode .btn-outline-secondary .os-icon {
+
 }
 
 body.dark-mode .more-info-desktop .dropdown-menu .dropdown-item {
@@ -1385,16 +1444,12 @@ body.dark-mode .more-info-desktop .dropdown-menu .dropdown-item {
 }
 
 body.dark-mode .navbar {
-    border-bottom: #101010 1px solid;
+    border-bottom: none;
     background-color: #101010 !important;
 }
 
-body.dark-mode .navbar-light .navbar-nav .nav-item .nav-link {
-    border-bottom: #101010 1px solid;
-}
-
 body.dark-mode .navbar-light .navbar-nav .nav-link {
-    color: rgba(255,255,255,0.5);
+    color: #fff;
 }
 
 body.dark-mode .navbar-light .navbar-nav .nav-item.current .nav-link {
@@ -1422,8 +1477,8 @@ body.dark-mode .darker-grey {
 
 body.dark-mode nav .mobile-language-selector button {
     background: none;
-    color: #fff;
-    border: 1px solid #2f2f2f;
+    color: #25B135;
+    border: none;
 }
 
 body.dark-mode #tables tr:hover {
@@ -1467,9 +1522,6 @@ body.dark-mode .btn-secondary:not(:disabled):not(.disabled):active,
 body.dark-mode .btn-secondary:not(:disabled):not(.disabled).active,
 body.dark-mode .show>.btn-secondary.dropdown-toggle,
 body.dark-mode .btn-secondary:hover {
-    background: none;
-    border-color: #313131;
-    color: #797979;
 }
 
 
diff --git a/images/arrow-down-b.svg b/images/arrow-down-b.svg
new file mode 100644
index 00000000..877752fe
--- /dev/null
+++ b/images/arrow-down-b.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+  <g id="Group_23818" data-name="Group 23818" transform="translate(-15979 14490)">
+    <rect id="Rectangle_109" data-name="Rectangle 109" width="20" height="16" transform="translate(15979 -14490)" fill="none"/>
+    <path id="Path_23104" data-name="Path 23104" d="M15973.646-14448.287l4.279,4.277,4.279-4.277" transform="translate(11.697 -33.618)" fill="none" stroke="#000" stroke-width="0.5"/>
+    <line id="Line_32" data-name="Line 32" y1="10.213" transform="translate(15989.548 -14488.04)" fill="none" stroke="#000" stroke-width="0.5"/>
+  </g>
+</svg>
diff --git a/images/arrow-down-w.svg b/images/arrow-down-w.svg
new file mode 100644
index 00000000..6c1659a5
--- /dev/null
+++ b/images/arrow-down-w.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+  <g id="Group_23816" data-name="Group 23816" transform="translate(-15979 14490)">
+    <rect id="Rectangle_109" data-name="Rectangle 109" width="20" height="16" transform="translate(15979 -14490)" fill="none"/>
+    <path id="Path_23104" data-name="Path 23104" d="M15973.646-14448.287l4.279,4.277,4.279-4.277" transform="translate(11.697 -33.618)" fill="none" stroke="#fff" stroke-width="1"/>
+    <line id="Line_32" data-name="Line 32" y1="10.213" transform="translate(15989.548 -14488.04)" fill="none" stroke="#fff" stroke-width="1"/>
+  </g>
+</svg>
diff --git a/images/arrow-right-w.svg b/images/arrow-right-w.svg
new file mode 100644
index 00000000..4c123302
--- /dev/null
+++ b/images/arrow-right-w.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+  <g id="Group_23817" data-name="Group 23817" transform="translate(-15979 14490)">
+    <rect id="Rectangle_109" data-name="Rectangle 109" width="20" height="16" transform="translate(15979 -14490)" fill="none"/>
+    <path id="Path_23104" data-name="Path 23104" d="M15973.646-14448.287l4.279,4.277,4.279-4.277" transform="translate(30438.838 1495.091) rotate(-90)" fill="none" stroke="#000" stroke-width="0.5"/>
+    <line id="Line_32" data-name="Line 32" y1="10.213" transform="translate(15984.416 -14482.76) rotate(-90)" fill="none" stroke="#000" stroke-width="0.5"/>
+  </g>
+</svg>
diff --git a/images/icon-android-b.svg b/images/icon-android-b.svg
new file mode 100644
index 00000000..5bf224bb
--- /dev/null
+++ b/images/icon-android-b.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_111" data-name="Rectangle 111" width="20" height="16"/>
+    </clipPath>
+  </defs>
+  <g id="a" clip-path="url(#clip-path)">
+    <g id="icon-android-w" transform="translate(-32.889 0.239)" opacity="0.54">
+      <g id="Group_23822" data-name="Group 23822" transform="translate(37.134 0)">
+        <g id="Group_23821" data-name="Group 23821" transform="translate(0)">
+          <path id="Path_23108" data-name="Path 23108" d="M37.973,164.715h-.035a.807.807,0,0,0-.8.8v3.5a.806.806,0,0,0,.8.8h.035a.807.807,0,0,0,.8-.8v-3.5A.808.808,0,0,0,37.973,164.715Z" transform="translate(-37.134 -160.315)"/>
+          <path id="Path_23109" data-name="Path 23109" d="M113.085,175.055a.74.74,0,0,0,.739.738h.79v1.892a.807.807,0,0,0,.8.805h.035a.807.807,0,0,0,.806-.805v-1.892h1.1v1.892a.808.808,0,0,0,.805.805h.034a.807.807,0,0,0,.8-.805v-1.892h.791a.74.74,0,0,0,.739-.738v-5.53h-7.451Z" transform="translate(-111.056 -164.997)"/>
+          <path id="Path_23110" data-name="Path 23110" d="M117.763,1.175l.627-.969a.133.133,0,0,0-.039-.184.132.132,0,0,0-.184.039l-.651,1a4.3,4.3,0,0,0-3.218,0l-.649-1a.134.134,0,0,0-.225.145l.628.969a3.177,3.177,0,0,0-1.9,2.8c0,.074,0,.146.011.218h7.481c.006-.072.01-.145.01-.218A3.178,3.178,0,0,0,117.763,1.175Zm-3.59,1.734a.359.359,0,1,1,.36-.36A.359.359,0,0,1,114.174,2.909Zm3.468,0a.359.359,0,1,1,.36-.36A.359.359,0,0,1,117.642,2.909Z" transform="translate(-110.153 0)"/>
+          <path id="Path_23111" data-name="Path 23111" d="M407.308,164.715h-.033a.808.808,0,0,0-.805.8v3.5a.807.807,0,0,0,.805.8h.034a.806.806,0,0,0,.8-.8v-3.5A.807.807,0,0,0,407.308,164.715Z" transform="translate(-396.604 -160.315)"/>
+        </g>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/images/icon-apple-b.svg b/images/icon-apple-b.svg
new file mode 100644
index 00000000..4a60ddd0
--- /dev/null
+++ b/images/icon-apple-b.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="16" viewBox="0 0 20 16">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rectangle_110" data-name="Rectangle 110" width="20" height="16"/>
+    </clipPath>
+  </defs>
+  <g id="a" clip-path="url(#clip-path)">
+    <g id="Group_23820" data-name="Group 23820" transform="translate(-42.597 0.471)" opacity="0.537">
+      <path id="Path_23107" data-name="Path 23107" d="M56.16,6.73a2.865,2.865,0,0,1,1.367-2.414,2.962,2.962,0,0,0-2.316-1.252c-.987-.1-1.924.58-2.425.58s-1.269-.566-2.09-.551a3.1,3.1,0,0,0-2.623,1.588c-1.117,1.938-.286,4.81.8,6.381.532.769,1.166,1.634,2,1.6.8-.032,1.105-.519,2.075-.519s1.242.519,2.091.5,1.41-.784,1.938-1.556a6.983,6.983,0,0,0,.877-1.8A2.8,2.8,0,0,1,56.16,6.73Zm-1.6-4.707A2.792,2.792,0,0,0,55.224,0a2.84,2.84,0,0,0-1.862.96,2.655,2.655,0,0,0-.673,1.96,2.349,2.349,0,0,0,1.875-.9Z"/>
+    </g>
+  </g>
+</svg>
diff --git a/images/icon-download-b.svg b/images/icon-download-b.svg
new file mode 100644
index 00000000..853ed4bb
--- /dev/null
+++ b/images/icon-download-b.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
+  <g id="Group_23820" data-name="Group 23820" transform="translate(-15945 14468)">
+    <rect id="Rectangle_109" data-name="Rectangle 109" width="20" height="16" transform="translate(15945 -14468)" fill="none"/>
+    <g id="Group_23819" data-name="Group 23819" transform="translate(0 -1)">
+      <path id="Path_23104" data-name="Path 23104" d="M15973.43-14448.633l3,3,3-3" transform="translate(-20.929 -12.867)" fill="none" stroke="#000" stroke-width="0.5"/>
+      <path id="Path_23106" data-name="Path 23106" d="M0,7V-1.26" transform="translate(15955.5 -14465.5)" fill="none" stroke="#000" stroke-width="0.5"/>
+      <path id="Path_23105" data-name="Path 23105" d="M15983.262-14439h-3.521v8.781h13.556V-14439h-3.335" transform="translate(-31.24 -25.544)" fill="none" stroke="#000" stroke-width="0.5"/>
+    </g>
+  </g>
+</svg>