From 5700a45c9993d3f45930ce6bedecb38c758ca8c9 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Mon, 27 Feb 2023 11:48:18 +0000
Subject: [PATCH] Update styles

---
 src/components/footer/Footer.astro            |  2 +-
 src/components/homepage/BlogPosts.astro       |  4 +-
 src/components/homepage/HeroBanner.astro      |  4 +-
 src/components/homepage/NewFeatures.astro     | 67 -------------------
 src/components/homepage/ReleaseVideo.astro    |  2 +-
 .../homepage/features/RealTimeEffects.astro   | 35 ++++++++++
 .../homepage/features/ShareToAudio.astro      | 34 ++++++++++
 src/pages/index.astro                         |  7 +-
 8 files changed, 80 insertions(+), 75 deletions(-)
 delete mode 100644 src/components/homepage/NewFeatures.astro
 create mode 100644 src/components/homepage/features/RealTimeEffects.astro
 create mode 100644 src/components/homepage/features/ShareToAudio.astro

diff --git a/src/components/footer/Footer.astro b/src/components/footer/Footer.astro
index bafd31c..8342219 100644
--- a/src/components/footer/Footer.astro
+++ b/src/components/footer/Footer.astro
@@ -2,7 +2,7 @@
 import SocialLinks from "./SocialLinks.astro";
 ---
 
-<footer class="bg-gray-100">
+<footer class="">
   <div
     class="max-w-md sm:max-w-xl md:max-w-4xl lg:max-w-4xl xl:max-w-6xl grid sm:grid-cols-8 gap-x-10 mx-auto pt-12 lg:pt-24 pb-8 px-3"
   >
diff --git a/src/components/homepage/BlogPosts.astro b/src/components/homepage/BlogPosts.astro
index aaccf61..8b28444 100644
--- a/src/components/homepage/BlogPosts.astro
+++ b/src/components/homepage/BlogPosts.astro
@@ -13,8 +13,8 @@ interface Frontmatter {
 const posts = await Astro.glob<Frontmatter>("../../pages/posts/*.md");
 ---
 
-<section class="grid-background">
-  <div class="mx-auto max-w-6xl px-3 lg:px-0 pt-40 pb-44 space-y-12">
+<section class="bg-gray-50">
+  <div class="mx-auto max-w-6xl px-3 lg:px-0 pt-24 pb-32 space-y-12">
     <div class="flex justify-between items-center">
       <h2 class="text-2xl xl:text-3xl font-bold text-gray-900">
         Latest blog posts
diff --git a/src/components/homepage/HeroBanner.astro b/src/components/homepage/HeroBanner.astro
index 7a598b2..3503400 100644
--- a/src/components/homepage/HeroBanner.astro
+++ b/src/components/homepage/HeroBanner.astro
@@ -4,11 +4,11 @@ import Audacity_Logo from "../../assets/img/Audacity_Logo.png";
 ---
 
 <section>
-  <div class="mt-12 mx-auto max-w-sm xl:max-w-xl px-3 lg:px-0">
+  <div class="mt-12 mx-auto max-w-md xl:max-w-xl px-3 lg:px-0">
     <div class="pt-32 pb-24 xl:pt-24 xl:pb-24 flex flex-col space-y-16">
       <div class="flex flex-col items-center text-center space-y-4">
         <img class="w-24 xl:w-24" src={Audacity_Logo} />
-        <h1 class="text-2xl xl:text-4xl xl:leading-snug font-bold text-gray-800">
+        <h1 class="text-3xl xl:text-4xl leading-snug font-bold text-gray-800">
           Free, open source, cross-platform audio software
         </h1>
   
diff --git a/src/components/homepage/NewFeatures.astro b/src/components/homepage/NewFeatures.astro
deleted file mode 100644
index 7e6544c..0000000
--- a/src/components/homepage/NewFeatures.astro
+++ /dev/null
@@ -1,67 +0,0 @@
----
-import Badge from "../badge/Badge.astro";
-import RealTimeEffects from "../../assets/img/features/Spectrogram.png";
-import ShareAudio from '../../assets/img/features/ShareAudio.png'
----
-
-<section>
-  <div class="mx-auto max-w-6xl px-3 lg:px-0 pt-16 pb-12">
-    <div class="grid grid-cols-2">
-      <div class="flex flex-col justify-center p-16">
-        <Badge badgeText="New in v3.2" />
-        <h1 class="text-5xl font-bold mt-2">Real-time effects</h1>
-        <p class="mt-6">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-        <a
-          class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-12"
-            href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
-            target="_blank"
-          >Find out more<svg
-            class="fill-blue-700 w-4"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 448 512"
-          >
-            <path
-              d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
-            ></path></svg
-          ></a
-        >
-      </div>
-      <div class="p-16"><img class="object-cover rounded-md" src={RealTimeEffects} /></div>
-    </div>
-
-    <div class="grid grid-cols-2 mt-16">
-        <div class="p-16 "><img class="object-cover rounded-md" src={ShareAudio} /></div>
-        <div class="flex flex-col justify-center p-16">
-          <Badge badgeText="New in v3.2" />
-          <h1 class="text-5xl font-bold mt-2">Share audio</h1>
-          <p class="mt-6">
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-            minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat.
-          </p>
-          <a
-            class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-12"
-            href="https://support.audacityteam.org/basics/sharing-audio-online"
-            target="_blank"
-            >Find out more<svg
-              class="fill-blue-700 w-4"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 448 512"
-            >
-              <path
-                d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
-              ></path></svg
-            ></a
-          >
-        </div>
-      </div>
-
-   
-  </div>
-</section>
diff --git a/src/components/homepage/ReleaseVideo.astro b/src/components/homepage/ReleaseVideo.astro
index 20be2ca..ddbfe97 100644
--- a/src/components/homepage/ReleaseVideo.astro
+++ b/src/components/homepage/ReleaseVideo.astro
@@ -3,7 +3,7 @@
     class="gap-12 max-w-4xl mx-auto pt-24 pb-32 xl:px-0 px-3 space-y-8 "
   >
     <div class="space-y-4 text-center text-white">
-      <h2 class="text-2xl xl:text-3xl font-bold">New in Audacity 3.2</h2>
+      <h2 class="text-2xl font-bold">New in Audacity 3.2</h2>
     </div>
     <iframe
       class="w-full aspect-video rounded-md shadow-xl col-span-6"
diff --git a/src/components/homepage/features/RealTimeEffects.astro b/src/components/homepage/features/RealTimeEffects.astro
new file mode 100644
index 0000000..419d2b1
--- /dev/null
+++ b/src/components/homepage/features/RealTimeEffects.astro
@@ -0,0 +1,35 @@
+---
+import Badge from "../../badge/Badge.astro";
+import RealTimeEffects from "../../../assets/img/features/Spectrogram.png";
+---
+
+<section class="bg-gray-100">
+  <div class="grid grid-cols-2 mx-auto max-w-6xl">
+    <div class="flex flex-col justify-center pr-16">
+      <Badge badgeText="New in v3.2" />
+      <h1 class="text-4xl font-bold mt-2">Real-time effects</h1>
+      <p class="text-lg mt-6">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+      <a
+        class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-12"
+        href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
+        target="_blank"
+        >Find out more<svg
+          class="fill-blue-700 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+        >
+          <path
+            d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
+          ></path></svg
+        ></a
+      >
+    </div>
+
+   <div class=""><img class="object-cover w-full" src={RealTimeEffects} /></div>
+  </div>
+</section>
diff --git a/src/components/homepage/features/ShareToAudio.astro b/src/components/homepage/features/ShareToAudio.astro
new file mode 100644
index 0000000..a4c6fd6
--- /dev/null
+++ b/src/components/homepage/features/ShareToAudio.astro
@@ -0,0 +1,34 @@
+---
+import Badge from "../../badge/Badge.astro";
+import ShareAudio from "../../../assets/img/features/ShareAudio.png";
+---
+
+<section class="">
+  <div class="grid grid-cols-2 mx-auto max-w-6xl">
+    <div class=""><img class="object-cover w-full" src={ShareAudio} /></div>
+    <div class="flex flex-col justify-center pl-16">
+      <Badge badgeText="New in v3.2" />
+      <h1 class="text-4xl font-bold mt-2">Share to Audio.com</h1>
+      <p class="text-lg mt-6">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat.
+      </p>
+      <a
+        class="font-lg font-bold inline-flex gap-x-2 hover:underline text-blue-700 items-center mt-12"
+        href="https://support.audacityteam.org/audio-editing/using-realtime-effects"
+        target="_blank"
+        >Find out more<svg
+          class="fill-blue-700 w-4"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 448 512"
+        >
+          <path
+            d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"
+          ></path></svg
+        ></a
+      >
+    </div>
+  </div>
+</section>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 679b372..b36a2dd 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -6,15 +6,18 @@ import NewFeatures from "../components/homepage/NewFeatures.astro";
 import ReleaseVideo from "../components/homepage/ReleaseVideo.astro";
 import VanityMetrics from "../components/homepage/VanityMetrics.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
+import RealTimeEffects from "../components/homepage/features/RealTimeEffects.astro";
+import ShareToAudio from "../components/homepage/features/ShareToAudio.astro";
 
 ---
 
 <BaseLayout title="Audacity | Home">
   <HeroBanner/>
   <ReleaseVideo/>
-  <NewFeatures/>
-  <BlogPosts />
+  <RealTimeEffects />
+  <ShareToAudio />
   <DownloadBanner/>
+  <BlogPosts />
 </BaseLayout>