From a01440bf979477db5efd0394f87ef33dbfb2c894 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Tue, 22 Aug 2023 16:10:15 +1000
Subject: [PATCH] Responsive styling

---
 .../button/DownloadMuseHubButton.jsx          |  2 +-
 src/components/homepage/DownloadBanner.astro  | 27 ++++++++++++-------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/button/DownloadMuseHubButton.jsx b/src/components/button/DownloadMuseHubButton.jsx
index f47325c..ce64b11 100644
--- a/src/components/button/DownloadMuseHubButton.jsx
+++ b/src/components/button/DownloadMuseHubButton.jsx
@@ -17,7 +17,7 @@ function DownloadMuseHubButton(props) {
   function renderButton(href) {
     return (
       <a
-        className="flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center border border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300 text-center"
+        className="flex flex-col flex-1 gap-1 py-3 items-center rounded justify-center border bg-white border-gray-200 text-blue-700 hover:bg-gray-100 hover:border-gray-300 text-center"
         href={href}
         onClick={() => handleDownloadButtonClick()}
       >
diff --git a/src/components/homepage/DownloadBanner.astro b/src/components/homepage/DownloadBanner.astro
index 9b460b8..87e4231 100644
--- a/src/components/homepage/DownloadBanner.astro
+++ b/src/components/homepage/DownloadBanner.astro
@@ -1,16 +1,25 @@
 ---
-import DownloadButton from '../button/DownloadButton.jsx'
+import DownloadButton from "../button/DownloadButton.jsx";
+import DownloadMuseHubButton from "../button/DownloadMuseHubButton";
 ---
 
-<section class="bg-gradient-to-r from-indigo-500 to-indigo-700">
-  <div class="mx-auto max-w-sm sm:max-w-xl md:max-w-4xl xl:max-w-6xl px-3 xl:px-0 pt-16 pb-16 grid md:grid-cols-2">
-    <div class="text-white text-center md:text-left">
-      <h3 class="text-2xl font-bold">Download Audacity free today</h3>
-      <p class="text-lg">The world's most popular audio editing and recording app</p>
+<section class="bg-gray-100 pt-10 pb-12">
+  <div
+    class="max-w-screen-sm md:max-w-screen-lg mx-auto grid grid-cols-12 gap-y-6"
+  >
+    <div class="flex flex-col gap-2 col-start-2 col-span-10 items-center">
+      <h1
+        class="text-center text-2xl md:text-3xl lg:text-3xl leading-snug font-bold text-gray-800"
+      >
+        Audacity is free, forever
+      </h1>
     </div>
-    <div class="flex items-center sm:justify-center md:justify-end flex-col mt-8 md:mt-0 sm:flex-row sm:space-x-4 lg-space-8 space-y-4 sm:space-y-0">
-      <DownloadButton client:load />
-      <a href="/downloads" class="flex items-center h-12 px-4 rounded whitespace-nowrap text-gray-100 border border-white hover:bg-white/25 hover:text-white">View download options</a>
+
+    <div
+      class="flex flex-col md:flex-row gap-4 col-start-2 col-span-10 sm:col-start-4 sm:col-span-6 md:col-start-2 md:col-span-10 lg:col-start-3 lg:col-span-8"
+    >
+      <DownloadButton client:only primary />
+      <DownloadMuseHubButton client:only />
     </div>
   </div>
 </section>