Update 'Record anything' homepage section

src/components/homepage/RecordAnything.astro

@@ -1,45 +1,37 @@
 ---
-import RecordAnything from "../../assets/img/record-anything.jpg";
-import RecordAnything2 from "../../assets/img/record-anything-2.jpg";
-import Waveform from "../../assets/img/waveform.png";
-import TransportTools from "../../assets/img/TransportTools.png";
-import RecordCursor from "../../assets/img/RecordCursor.png";
+import recordMemos from "../../assets/img/record-memos.png";
+import recordPodcast from "../../assets/img/record-podcast.png";
+import voiceOver from "../../assets/img/voice-over.png";
 ---
 
-<section class="bg-slate-50">
-  <div class="grid grid-cols-12 max-w-screen-xl gap-y-4 mx-auto py-12">
-    <div
-      class="flex flex-col justify-center gap-2 md:gap-4 col-start-2 col-span-10 md:col-start-2 md:col-span-4"
-    >
-      <h2>Record anything</h2>
-      <p>
-        Excellent for podcasts, voice-over work or even just recording memos.
-        All you need is a microphone.
-      </p>
+<section class="max-w-screen-xl mx-6 sm:mx-12 md:mx-16 xl:mx-auto py-12">
+  <div class="text-center">
+    <h2>Record anything</h2>
+    <p class="sub-heading">
+      Excellent for podcasts, voice-over work or even just recording memos.
+    </p>
+  </div>
+  <div class="flex flex-col md:flex-row gap-4 xl:gap-8 mt-8 lg:h-56">
+    <div class="h-full basis-1/3">
+      <img
+        class="object-cover w-full h-40 lg:h-full rounded"
+        src={recordPodcast.src}
+        alt="Woman smiling in front of a microphone"
+      />
     </div>
-
-    <div
-      class="col-start-2 md:col-start-7 col-span-10 md:col-span-5 grid grid-cols-6 grid-rows-auto gap-4"
-    >
-      <div class="relative col-span-6 h-48">
-        <div class="absolute -right-7 top-28 md:top-28 h-16 w-64 md:w-72">
-          <img alt="Decorative image of Audacity's transport toolbar" class="object-fit rounded-lg" src={TransportTools.src} />
-        </div>
-        <img
-          alt="Woman sitting at a desk with a microphone in front of her."
-          class="object-cover object-top h-full w-full rounded-lg"
-          src={RecordAnything.src}
-        />
-      </div>
-      <div class="relative row-start-2 col-span-3 hidden xl:block h-48">
-        <div class="absolute -right-3 bottom-0">
-          <img alt="Decorative image of Audacity's record cursor" class="w-full h-52 object-cover" src={RecordCursor.src} />
-        </div>
-        <img alt="Image of an Audacity stereo waveform" class="h-full w-full rounded-lg" src={Waveform.src} />
-      </div>
-      <div class="row-start-2 col-span-3 h-48 hidden xl:block">
-        <img alt="An image of a woman sitting on a bed playing a keyboard whilst also holding a guitar" class="h-full w-full rounded-lg" src={RecordAnything2.src} />
-      </div>
+    <div class="h-full basis-1/3">
+      <img
+        class="object-cover w-full h-40 lg:h-full rounded"
+        src={voiceOver.src}
+        alt="Man recording lines read from a sheet a paper"
+      />
+    </div>
+    <div class="h-full basis-1/3">
+      <img
+        class="object-cover w-full h-40 lg:h-full rounded"
+        src={recordMemos.src}
+        alt="Someone taking notes at a computer with a microphone on their desk"
+      />
     </div>
   </div>
 </section>

src/pages/index.astro

@@ -4,10 +4,10 @@ import DownloadBanner from "../components/homepage/DownloadBanner.astro";
 import HeroBanner from "../components/homepage/HeroBanner.astro";
 import ReleaseVideo from "../components/homepage/ReleaseVideo.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
-import RecordAnything from "../components/homepage/RecordAnything.astro";
 import ShareYourSounds from "../components/homepage/ShareYourSounds.astro"
 import FeatureCards from "../components/homepage/FeatureCards.astro";
 import FAQ from "../components/homepage/FAQ.astro";
+import RecordAnything from "../components/homepage/RecordAnything.astro";
 ---
 
   <BaseLayout title="Audacity | Home">

src/styles/input.css

@@ -51,5 +51,9 @@
     .copyright {
         @apply text-xs text-gray-600
     }
+
+    .sub-heading {
+        @apply text-xl
+    }
     
 }