side-by-side download buttons

Author: LWinterberg

src/components/button/DownloadButton.jsx

@@ -28,10 +28,15 @@ function DownloadButton() {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="text-white font-semibold hover:underline"
+        className="flex py-3 px-4 gap-3 rounded-md items-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
         href={href}
       >
-        Download without Muse Hub
+        <div className="flex items-center gap-4">
+        <span className="icon icon-import"></span>
+        <p className="">
+        <span className="font-semibold">Download Audacity {audacityReleases.version}</span><br />
+        <span className="font-light">Installs with no extras</span></p>
+        </div>
       </a>
     );
   }

src/components/button/DownloadMuseHubButton.jsx

@@ -45,16 +45,14 @@ function DownloadMuseHubButton() {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="flex py-3 px-4 gap-3 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
+        className="flex py-3 px-4 gap-3 rounded-md items-center bg-white hover:bg-gray-200 active:bg-yellow-500 w-fit"
         href={href}
       >
         <span className="icon icon-import"></span>
         <p>
-          <span className="font-semibold">
-            Download Audacity {audacityReleases.version}
-          </span>
-          <br />
-          {false && <span className="font-light text-s">via MuseHub</span>}
+        <span className="font-semibold">
+          Audacity + free effects</span><br/>
+         <span className="font-light text-s">via MuseHub Installer</span>
         </p>
       </a>
     );

src/components/homepage/HeroBanner.astro

@@ -9,25 +9,25 @@ import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
     class="grid grid-cols-12 max-w-screen-lg mx-6 sm:mx-16 xl:mx-auto py-8 md:py-16 sm:py-12 gap-6 md:gap-0"
   >
     <div
-      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 justify-center"
+      class="col-span-12 mx-2 md:mx-0 text-center md:text-left md:col-span-7 flex flex-col gap-4 md:gap-8 justify-center"
     >
       <h1 class="leading-tight mt-2 text-white">
         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 client:load />
-        <noscript>
-          <DownloadMuseHubButton client:load />
-        </noscript>
+      <div class="flex  md:w-fit gap-4 items-center md:items-start">
         <DownloadButton client:load />
         <noscript>
           <DownloadButton client:load />
         </noscript>
+        <DownloadMuseHubButton client:load />
+        <noscript>
+          <DownloadMuseHubButton client:load />
+        </noscript>
       </div>
     </div>
     <div
-      class="col-span-12 md:col-start-7 md:col-span-7 flex items-center justify-center mx-4"
+      class="col-span-12 md:col-start-8 md:col-span-6 flex items-center justify-center mx-4"
     >
       <img
         alt="A laptop showing the Audacity application"