Rebuild HeroBanner with improved responsive behavior and button styling

**Layout changes:**
- Changed to proper flexbox 40/60 split (text/image)
- 2-column layout starts at lg (1024px) instead of md (768px)
- Prevents image overlap issue between 768-1024px
- Image stacks below text on mobile, sits beside on desktop
- No gap between columns on desktop

**Text styling:**
- Split heading into 3 separate h1 elements with explicit line breaks
- Each line has whitespace-nowrap to prevent wrapping
- Responsive sizing: 32px → 40px → 48px → 56px → 64px
- Added text-40 and text-48 to custom theme

**Button improvements:**
- Primary button: w-fit on mobile, 320px on lg+ screens
- Secondary link: matches 320px width on lg+ for perfect alignment
- Both buttons center-aligned properly
- Added explicit text-16 sizing where needed

**Image sizing:**
- Mobile/tablet: max 400px width
- Desktop (lg+): full 60% column width

src/components/button/DownloadButton.jsx

@@ -28,7 +28,7 @@ function DownloadButton() {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="text-text-primary font-semibold hover:underline text-center w-70 lg:w-80"
+        className="text-text-primary font-semibold hover:underline text-center w-fit lg:w-[320px]"
         href={href}
       >
         Download without Muse Hub

src/components/button/DownloadMuseHubButton.jsx

@@ -45,7 +45,7 @@ function DownloadMuseHubButton() {
     return (
       <a
         onClick={() => handleButtonClick(href)}
-        className="flex items-center justify-center h-12 lg:h-16 w-70 lg:w-80 rounded-full bg-accent text-white font-semibold hover:opacity-90 transition-opacity"
+        className="flex items-center justify-center h-12 lg:h-16 w-fit lg:w-[320px] px-6 lg:px-8 rounded-full bg-accent text-white font-semibold hover:opacity-90 transition-opacity"
         href={href}
       >
         Download Audacity {audacityReleases.version}

src/components/homepage/HeroBanner.astro

@@ -5,16 +5,24 @@ import { Image } from "astro:assets";
 import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
 ---
 
-<section id="main" class="bg-background-light min-h-[320px] lg:h-[560px] overflow-hidden">
-  <div class="mx-auto h-full max-w-screen-2xl relative">
-    <div class="flex flex-col md:flex-row h-full">
+<section id="main" class="bg-background-light py-8 md:py-12 lg:py-16">
+  <div class="mx-auto max-w-screen-lg lg:max-w-screen-xl xl:max-w-screen-xl px-6 md:px-16">
+    <div class="flex flex-col lg:flex-row lg:items-center gap-8 lg:gap-0">
       <!-- Left Column - Text Content -->
-      <div class="flex flex-col justify-center text-center md:text-left w-full px-8 py-16 lg:pl-24 xl:pl-32 lg:py-0 md:pr-8 gap-8 lg:gap-14 z-10">
-        <h1 class="font-harmony lg:text-56 xl:text-64 text-text-primary">
-          Audacity is the world's<br />most popular audio editing<br />and recording app
-        </h1>
+      <div class="flex flex-col text-center lg:text-left lg:w-2/5 gap-6 md:gap-8 lg:gap-10 xl:gap-14">
+        <div class="flex flex-col gap-0">
+          <h1 class="font-harmony text-32 sm:text-40 md:text-48 lg:text-56 xl:text-64 text-text-primary leading-tight whitespace-nowrap">
+            Audacity is the world's
+          </h1>
+          <h1 class="font-harmony text-32 sm:text-40 md:text-48 lg:text-56 xl:text-64 text-text-primary leading-tight whitespace-nowrap">
+            most popular audio editing
+          </h1>
+          <h1 class="font-harmony text-32 sm:text-40 md:text-48 lg:text-56 xl:text-64 text-text-primary leading-tight whitespace-nowrap">
+            and recording app
+          </h1>
+        </div>
 
-        <div class="flex flex-col gap-4 items-center md:items-start">
+        <div class="flex flex-col gap-4 items-center lg:items-start">
           <DownloadMuseHubButton client:load />
           <noscript>
             <DownloadMuseHubButton client:load />
@@ -27,17 +35,15 @@ import AudacityMockUp from "../../assets/img/HeroBannerImage.webp";
       </div>
 
       <!-- Right Column - Image -->
-      <div class="hidden md:flex md:absolute md:right-0 md:top-0 md:h-full md:w-[550px] lg:w-[750px] xl:w-[900px]">
-        <div class="flex items-center justify-center h-full w-full">
-          <Image
-            src={AudacityMockUp}
-            alt="A laptop showing the Audacity application"
-            width={1400}
-            quality={90}
-            loading="eager"
-            class="w-full h-auto max-h-full object-contain"
-          />
-        </div>
+      <div class="lg:w-3/5 flex items-center justify-center">
+        <Image
+          src={AudacityMockUp}
+          alt="A laptop showing the Audacity application"
+          width={1400}
+          quality={90}
+          loading="eager"
+          class="w-full max-w-[400px] lg:max-w-full h-auto"
+        />
       </div>
     </div>
   </div>

src/styles/theme.cjs

@@ -54,6 +54,8 @@ module.exports = {
       20: ['1.25rem', { lineHeight: '1.5' }],       // 20px
       24: ['1.5rem', { lineHeight: '1.5' }],        // 24px
       32: ['2rem', { lineHeight: '1.25' }],          // 32px
+      40: ['2.5rem', { lineHeight: '1.2' }],        // 40px
+      48: ['3rem', { lineHeight: '1.1' }],          // 48px
       56: ['3.5rem', { lineHeight: '1' }],          // 56px
       64: ['4rem', { lineHeight: '1' }],          // 64px
     },