Update default download button to Muse Hub

src/components/button/DownloadButton.jsx

@@ -19,23 +19,17 @@ function DownloadButton() {
           `Download Audacity button ${platform.os.family}`,
         ]);
       }
-    } 
+    }
   }
 
   function renderButton(href) {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="flex flex-col justify-center bg-blue-700 hover:bg-blue-600 rounded-md items-center text-center py-3 w-full sm:w-72"
+        className="underline text-blue-700 hover:text-blue-600"
         href={href}
       >
-        <div className="flex gap-2 items-center">
-          <span className="icon icon-import text-white"></span>
-          <p className="button-text font-semibold text-white">
-            Download Audacity {audacityReleases.version}
-          </p>
-        </div>
-        <p className="button-caption text-white">Installs with no extras</p>
+        Download without Muse Hub
       </a>
     );
   }

src/components/button/DownloadMuseHubButton.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import platform from "platform";
+import { audacityReleases } from "../../assets/js/releaseData";
 import { museHubReleases } from "../../assets/js/releaseData";
 
 function DownloadMuseHubButton() {
@@ -26,26 +27,22 @@ function DownloadMuseHubButton() {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="flex flex-col py-3 items-center rounded-md justify-center border-2 bg-white border-gray-300 text-blue-700 hover:bg-gray-100 text-center w-full sm:w-72"
+        className="flex py-3 px-4 gap-3 rounded-md justify-center bg-blue-700 hover:bg-blue-600 w-fit"
         href={href}
       >
-        <p className="text-blue-700 font-semibold">
-          Audacity + free effects & samples
+        <span className="icon icon-import text-white"></span>
+        <p className="text-white font-semibold">
+          Download Audacity {audacityReleases.version}
         </p>
-        <p className="text-gray-700">Requires the Muse Hub installer</p>
       </a>
     );
   }
 
   switch (browserOS) {
     case "OS X":
-      return renderButton(
-        museHubReleases.mac[0].browser_download_url
-      );
+      return renderButton(museHubReleases.mac[0].browser_download_url);
     case "Windows":
-      return renderButton(
-        museHubReleases.win[0].browser_download_url
-      );
+      return renderButton(museHubReleases.win[0].browser_download_url);
     case "Linux":
     case "Ubuntu":
     case "Debian":

src/components/homepage/HeroBanner.astro

@@ -1,23 +1,38 @@
 ---
 import DownloadButton from "../button/DownloadButton";
-import Audacity_Logo from "../../assets/img/Audacity_Logo.svg";
+import AudacityMockUp from "../../assets/img/AudacityLaptop.webp";
 import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
 ---
 
 <section id="main">
-  <div class="flex flex-col items-center py-8 md:pt-10 md:pb-12 lg:pt-16 lg:pb-20 xl:pt-20 xl:pb-24 mx-6">
-    <img alt="A yellow and orange waveform between the ears of a set of blue headphones" class="w-12 md:w-16" src={Audacity_Logo.src} />
-    <h1 class="leading-tight max-w-2xl text-center mt-2">
-      Audacity is the world's most popular audio editing and recording app
-    </h1>
+  <div
+    class="grid grid-cols-12 max-w-screen-sm md:max-w-screen-md lg:max-w-screen-lg mx-2 sm:mx-auto pt-8 pb-2 md:pt-16 md:pb-12 gap-y-8"
+  >
     <div
-      class="flex w-full sm:w-fit flex-col gap-2 sm:flex-row mt-8"
+      class="col-span-12 mx-2 md:mx-0 text-center md:text-left md:col-span-5 flex flex-col gap-4 md:gap-8"
     >
-      <DownloadButton client:load/>
-      <DownloadMuseHubButton client:load />
-      <noscript>
-        <DownloadButton/>
-    </noscript>
+      <h1 class="leading-tight mt-2">
+        Audacity is the world's most popular audio editing and recording app
+      </h1>
+
+      <div class="flex flex-col md:w-fit gap-4 items-center md:items-start">
+        <DownloadMuseHubButton />
+        <noscript>
+          <DownloadMuseHubButton />
+        </noscript>
+        <DownloadButton />
+        <noscript>
+          <DownloadButton />
+        </noscript>
+      </div>
+    </div>
+    <div
+      class="col-span-12 md:col-start-6 md:col-span-7 flex items-center justify-center mx-4"
+    >
+      <img
+        alt="A laptop showing the Audacity application"
+        src={AudacityMockUp.src}
+      />
     </div>
   </div>
-</section>
+</section>