From 03d9104808a94e0259c3d00e3289dfa43894a209 Mon Sep 17 00:00:00 2001
From: Joe Bellus <joe@5sigma.io>
Date: Thu, 30 Jul 2020 10:38:13 -0400
Subject: [PATCH] Redesigned downlaod buttons

---
 themes/5Sigma/layouts/index.html | 77 +++++++++++++++++++++++++++++---
 1 file changed, 70 insertions(+), 7 deletions(-)

diff --git a/themes/5Sigma/layouts/index.html b/themes/5Sigma/layouts/index.html
index 8034817..c4ff6d4 100644
--- a/themes/5Sigma/layouts/index.html
+++ b/themes/5Sigma/layouts/index.html
@@ -19,25 +19,68 @@
       </div>
     </div>
     <div class="ui segment basic center aligned">
-      <div class="ui huge basic buttons inverted">
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-windows.zip">
+      <div class="ui huge red buttons inverted" id="download-buttons">
+        <div class="ui button" data-tab="windows-download">
           <i class="ui life windows icon"></i>
           Windows
-        </a>
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-linux.tar.gz">
+        </div>
+        <div class="ui button" data-tab="linux-download">
           <i class="ui linux icon"></i>
           Linux
-        </a>
-        <a class="ui button" href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-darwin.zip">
+        </div>
+        <div class="ui button" data-tab="macos-download">
           <i class="ui apple icon"></i>
           MacOS
-        </a>
+        </div>
         <a class="ui button" href="http://github.com/5Sigma/conductor">
           <i class="ui icon github"></i>
           Source Code
         </a>
       </div>
     </div>
+    <div class="ui tab basic segment center aligned" data-tab="windows-download">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-windows.zip">
+        <i class="ui life windows icon"></i> Download
+      </a>
+    </div>
+    <div class="ui tab basic segment center aligned" data-tab="linux-download">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-linux.tar.gz">
+        <i class="ui linux icon"></i>
+        Donwload
+      </a>
+    </div>
+    <div class="ui tab basic segment center aligned" data-tab="macos-download" style="margin: auto; width: 800px;">
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Hombrew Installation
+      </div>
+      <div style="width: 500px; margin: auto; text-align: left;">
+        <div class="ui inverted segment">
+          <pre style="font-size: 16px; font-weight: bold;">
+            brew tap 5sigma/tap
+            brew install conductor</pre>
+        </div>
+      </div>
+      <div class="ui horizontal divider" style="color: white;">
+        Or
+      </div>
+      <div class="ui inverted huge header" style="font-weight: bold;">
+        Binary Download
+      </div>
+      <div class="ui hidden divider"></div>
+      <a class="ui basic huge inverted button"
+        href="https://github.com/5Sigma/conductor/releases/latest/download/conductor-darwin.zip">
+        <i class="ui apple icon"></i>
+        Download
+      </a>
+    </div>
     <div class="ui hidden section divider"></div>
   </div>
   <div class="ui grid two columns">
@@ -73,6 +116,26 @@
     </div>
   </div>
   {{ partial "footer" . }}
+  <script>
+    $('#download-buttons div.button').tab();
+    $(function () {
+      var OSName = "Unknown OS";
+      if (navigator.appVersion.indexOf("Win") != -1) OSName = "Windows";
+      if (navigator.appVersion.indexOf("Mac") != -1) OSName = "MacOS";
+      if (navigator.appVersion.indexOf("Linux") != -1) OSName = "Linux";
+      switch (OSName) {
+        case "Windows":
+          $('[data-tab=windows-download]').addClass('active');
+          break;
+        case "MacOS":
+          $('[data-tab=macos-download]').addClass('active');
+          break;
+        case "Linux":
+          $('[data-tab=linux-download]').addClass('active');
+          break;
+      }
+    });
+  </script>
 </body>
 
 </html>
\ No newline at end of file