Create download Musehub button

src/components/button/DownloadMuseHubButton.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import platform from "platform";
+
+function DownloadMuseHubButton(props) {
+  const [browserOS, setBrowserOS] = useState("");
+
+  useEffect(() => {
+    setBrowserOS(platform.os.family);
+  }, []);
+
+  function renderButton(href) {
+    return (
+      <a
+        className="flex h-12 gap-3 px-4 items-center rounded justify-center whitespace-nowrap border border-blue-700 text-blue-700 hover:bg-blue-700 hover:text-white"
+        href={href}
+      >
+        Download with free effects and samples
+      </a>
+    );
+  }
+
+  switch (browserOS) {
+    case "OS X":
+      return renderButton(
+        "https://pub-c7a32e5b5d834ec9aeef400105452a42.r2.dev/Muse_Hub.dmg"
+      );
+      break;
+    case "Windows":
+      return renderButton(
+        "https://pub-c7a32e5b5d834ec9aeef400105452a42.r2.dev/Muse_Hub.exe"
+      );
+      break;
+    case "Linux":
+      return renderButton(
+        "https://pub-c7a32e5b5d834ec9aeef400105452a42.r2.dev/Muse_Hub.deb"
+      );
+      break;
+    default:
+      return renderButton("/downloads", "Download Audacity");
+  }
+}
+
+export default DownloadMuseHubButton;

src/components/homepage/HeroBanner.astro

@@ -1,6 +1,7 @@
 ---
 import DownloadButton from "../button/DownloadButton";
 import Audacity_Logo from "../../assets/img/Audacity_Logo.png";
+import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
 ---
 
 <section>
@@ -18,10 +19,7 @@ import Audacity_Logo from "../../assets/img/Audacity_Logo.png";
       <div class="flex flex-col items-center justify-center space-y-8">
         <div class="flex gap-6">
           <DownloadButton client:only primary />
-          <a
-            class="flex items-center border rounded border-blue-700 px-4 text-blue-700" href="https://www.musehub.com" target="_blank"
-            >Download with free VST effects</a
-          >
+          <DownloadMuseHubButton client:only />
         </div>
         <div class="flex flex-col sm:flex-row sm:divide-x-2">
           <p class="text-gray-600 px-3">Latest version 3.2.4</p><a