New installer buttons links and for docs (#3638)

2 files changed, 37 insertions, 4 deletions

diff --git a/website/content/terminal/quickstart/installation.md b/website/content/terminal/quickstart/installation.md
index b45bf66fb7a..e7d1245437e 100644
--- a/website/content/terminal/quickstart/installation.md
+++ b/website/content/terminal/quickstart/installation.md
@@ -5,6 +5,7 @@ title: Installation
 
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import InstallerButton from "@site/src/components/General/InstallerButton";
 
 The OpenBB Terminal can be directly installed on your computer via our installation program. Within this section, you are guided through the installation process and how to launch the program. If you struggle with the installation process, please don’t hesitate to reach us on [Discord](https://openbb.co/discord) or visit our [contact page](https://openbb.co/contact).
 
@@ -16,7 +17,9 @@ OpenBB Terminal is available in all major platforms. With MacOS/Windows you can
   <TabItem value="windows" label="Windows">Install on Windows
   <div class="gdoc-page">
 
-</div><p>Download the installer from the website <a href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v1.9.0/Windows10.OpenBB.Terminal.v1.9.0.exe">here</a>.</p>
+</div><p>Download the installer from the button below:</p>
+
+<InstallerButton type="windows" href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v2.0.0/Windows.10.OpenBB.Terminal.v2.0.0.exe" label="Windows Installer" />
 
 <p>When the file is downloaded, use the following steps to run the OpenBB Terminal:</p>
 <div class="gdoc-columns">
@@ -45,12 +48,17 @@ OpenBB Terminal is available in all major platforms. With MacOS/Windows you can
 </div>
 </TabItem>
 
-<TabItem value="mac" label="MacOS">Install on macOS 🍎
+<TabItem value="mac" label="MacOS">Install on macOS
 
 For Mac there are two installers available, one for Intel and one for Apple Silicon (M1). Please download the correct one for your machine.
+
 <ul>
-<li>If you are using Mac Intel click <a href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v1.9.0/x86_64.MacOS.OpenBB.Terminal.v1.9.0.dmg">here</a> to download the installer.</li>
-<li>If you are using Mac Apple Silicon (M1) click <a href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v1.9.0/ARM64.MacOS.OpenBB.Terminal.v1.9.0.dmg">here</a> to download the installer.</li>
+<li>If you are using Mac Intel: <br />
+  <InstallerButton href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v2.0.0/x86_64.MacOS.OpenBB.Terminal.v2.0.0.dmg" label="Mac Intel Installer" />
+</li>
+<li>If you are using Mac Apple Silicon (M1): <br />
+  <InstallerButton href="https://github.com/OpenBB-finance/OpenBBTerminal/releases/download/v2.0.0/ARM64.MacOS.OpenBB.Terminal.v2.0.0.dmg" label="Mac M1 Installer" />
+</li>
 </ul>
 
 <p>When the DMG file is downloaded, use the following steps to run the OpenBB Terminal:</p>
diff --git a/website/src/components/General/InstallerButton.tsx b/website/src/components/General/InstallerButton.tsx
new file mode 100644
index 00000000000..a2bea08ae9a
--- /dev/null
+++ b/website/src/components/General/InstallerButton.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+export default function InstallerButton({
+    href,
+    label,
+    type
+}) {
+    return <a href={href} className="button button--primary !no-underline inline-flex gap-4 h-10 items-center" rel="noreferrer noopener" target="_blank">
+        {type === "windows" ? <svg xmlns="http://www.w3.org/2000/svg" className="w-4" height={88} width={88} viewBox="0 0 88 88">
+            <path
+                d="m0 12.402 35.687-4.86.016 34.423-35.67.203zm35.67 33.529.028 34.453L.028 75.48.026 45.7zm4.326-39.025L87.314 0v41.527l-47.318.376zm47.329 39.349-.011 41.34-47.318-6.678-.066-34.739z"
+                fill="currentColor"
+            />
+        </svg> : <svg
+        className="w-4 -mt-1" 
+            xmlns="http://www.w3.org/2000/svg"
+            xmlSpace="preserve"
+            width={814}
+            height={1000}
+            viewBox="0 0 814 1000"
+        >
+            <path fill="currentColor" d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z" />
+        </svg>}
+        {label}
+    </a>
+}
\ No newline at end of file