From 138ac05df44846ffbaf274416304334576964a55 Mon Sep 17 00:00:00 2001
From: Dilson's Pickles <a.dawson@mu.se>
Date: Mon, 13 Feb 2023 18:45:50 +0000
Subject: [PATCH] Update index content

---
 src/components/HeroBanner.astro | 65 +++++++++++++++++------------
 src/pages/index.astro           | 74 +++++++++++++++++++++++++++------
 2 files changed, 99 insertions(+), 40 deletions(-)

diff --git a/src/components/HeroBanner.astro b/src/components/HeroBanner.astro
index b91393c..1b873de 100644
--- a/src/components/HeroBanner.astro
+++ b/src/components/HeroBanner.astro
@@ -1,34 +1,45 @@
 ---
-import { useUserAgent } from "astro-useragent";
-
-const uaString = Astro.request.headers.get("user-agent");
-const { source, isMobile } = useUserAgent(uaString);
-
-console.log(source, isMobile);
+import AudacityLight from "../assets/img/AudacityLight.png";
+import AudacityDark from "../assets/img/AudacityDark.png";
 ---
 
-<div class="bg-gradient-to-b from-gray-100 to-gray-300">
-  <div class="container mx-auto sm:grid sm:grid-cols-12 py-16 px-8">
-    <div
-      class="flex flex-col col-start-4 col-span-6 items-center space-y-4 text-center sm:text-left sm:col-start-1 sm:col-span-8 md:col-span-6 sm:items-start mb-4"
-    >
-      <h1 class="text-2xl md:text-5xl lg:text-6xl text-bold">
-        Free, open source, cross-platform audio software
-      </h1>
-      <p class="text-sm md:text-lg">
-        A compelling and well rationalised value proposition statement for music
-        producers that converts them.
-      </p>
-      <div class="flex gap-2">
-        <button
-          class="bg-blue-600 text-white h-10 md:h-12 px-4 rounded-md hover:bg-blue-500 whitespace-nowrap"
-          >Download</button
+<section id="heroBanner">
+    <div class="grid lg:grid-cols-2 lg:max-w-full mx-auto grid-background shadow-xl">
+      <div class="px-8 py-12 lg:px-16 xl:flex flex-col justify-center xl:px-32 max-w-md sm:max-w-xl lg:max-w-full mx-auto">
+        <img
+          src={AudacityDark}
+          alt="Audacity"
+          class="mt-6 sm:mt-8 rounded-lg shadow-xl block lg:hidden"
+        /><h1
+          class="mt-6 sm:mt-8 lg:mt-0 text-2xl sm:text-4xl lg:text-5xl font-bold text-gray-900"
         >
-        <button
-          class="text-blue-600 border-2 border-box border-blue-600 h-10 md:h-12 px-4 rounded-md hover:bg-blue-600 hover:text-white whitespace-nowrap"
-          >Find out more</button
+          <span class="text-blue-500">Free</span>, open source, cross-platform
+          audio software
+        </h1>
+        <p class="mt-2 sm:mt-4 lg:mt-6 sm:text-xl text-gray-600">
+          A compelling and well rationalised value proposition statement for
+          music producers that converts them.
+        </p>
+        <a
+          id="downloadButton"
+          href=""
+          class="mt-4 sm:mt-6 lg:mt-8 text-sm sm:text-base flex h-10 sm:h-11 items-center px-3 bg-blue-700 hover:bg-blue-600 text-white w-fit rounded-sm shadow-xl"
+          >Download</a
         >
       </div>
+      <div class="relative bg-gray-200 shadow-inner overflow-hidden lg:p-48 xl:p-80">
+        <img
+          src={AudacityDark}
+          alt="Audacity"
+          class="hidden lg:block shadow-2xl scale-150 origin-top-left rounded-sm absolute bottom-24 -right-16"
+        />
+        <img
+        src={AudacityLight}
+        alt="Audacity"
+        class="hidden lg:block shadow-2xl scale-150 origin-top-left rounded-sm absolute bottom-8 -right-32"
+      />
+      </div>
     </div>
-  </div>
-</div>
+  </section>
+
+ 
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 781c7f7..f5c1df4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,23 +1,71 @@
 ---
-import HeroBanner from "../components/HeroBanner.astro";
 import Layout from "../layouts/Layout.astro";
+
+import ReleaseVideo from "../components/ReleaseVideo.astro";
+import HeroBanner from "../components/HeroBanner.astro";
+
+import AudacityLight from "../assets/img/AudacityLight.png";
+import AudacityDark from "../assets/img/AudacityDark.png";
 ---
 
 <Layout title="Audacity | Home">
   <main>
-    <HeroBanner />
-    <section id="releaseVideo" class="bg-gray-900">
-      <div class="container mx-auto text-center pt-16 md:pt-24 pb-24 md:pb-40">
-        <h2 class="text-3xl font-bold text-white mb-8">
-          Audacity 3.2.1 is here!
-        </h2>
-        <div class="px-16">
-          <iframe
-            class="w-full aspect-video rounded-md"
-            src="https://www.youtube.com/embed/DTRnDNR9LR8"
-            title="YouTube video player"></iframe>
+    <section class="grid-background">
+      <div class="px-8 pt-10 pb-16 max-w-md sm:max-w-xl md:max-w-2xl mx-auto">
+        <div
+          class="lg:hidden relative overflow-hidden shadow-inner bg-gray-200 rounded-md pt-6 pl-6 sm:pt-12 sm:pl-12"
+        >
+          <img
+            src={AudacityLight}
+            alt="Audacity"
+            class="absolute sm:scale-125 sm:origin-top-left -right-12 sm:-right-24 -bottom-10 sm:-bottom-20 z-10"
+          />
+          <img src={AudacityDark} alt="Audacity" class="sm:scale-125 sm:origin-top-left z-0" />
         </div>
+
+        <h1
+          class="mt-6 sm:mt-8 text-2xl sm:text-4xl lg:text-5xl font-bold text-gray-900"
+        >
+          <span class="text-blue-500">Free</span>, open source, cross-platform
+          audio software
+        </h1>
+        <p class="mt-2 sm:mt-4 lg:mt-6 md:text-xl text-gray-600">
+          A compelling and well rationalised value proposition statement for
+          music producers that converts them.
+        </p>
+        <a
+          id="downloadButton"
+          href=""
+          class="mt-4 sm:mt-6 lg:mt-8 text-sm sm:text-base flex h-10 sm:h-11 items-center px-3 bg-blue-700 hover:bg-blue-600 text-white w-fit rounded-sm shadow-xl"
+          >Download</a
+        >
       </div>
     </section>
+    <ReleaseVideo />
   </main>
-</Layout>
\ No newline at end of file
+</Layout>
+
+<!-- Detect OS and provide appropriate download link -->
+
+<script>
+  if (navigator.platform.indexOf("Mac") > -1) {
+    document.getElementById("downloadButton").href =
+      "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-macOS-3.2.4-universal.dmg";
+    document.getElementById("downloadButton").innerHTML = "Download for Mac";
+  } else if (navigator.platform.indexOf("Win") > -1) {
+    document.getElementById("downloadButton").href =
+      "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-win-3.2.4-x64.exe";
+    document.getElementById("downloadButton").innerHTML =
+      "Download for Windows";
+  } else if (navigator.platform.indexOf("Lin") > -1) {
+    document.getElementById("downloadButton").href =
+      "https://github.com/audacity/audacity/releases/download/Audacity-3.2.4/audacity-linux-3.2.4-x64.AppImage";
+    document.getElementById("downloadButton").innerHTML = "Download for Linux";
+  }
+</script>
+
+<style>
+  .grid-background {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.1'%3E%3Cpath opacity='0.8' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+  }
+</style>