Merge pull request #31 from audacity/post-download

Implement post-download page

src/components/button/DownloadButton.jsx

@@ -20,6 +20,10 @@ function DownloadButton() {
         ]);
       }
     }
+
+    setTimeout(() => {
+      window.location.href = "download-success";
+    }, 2000);
   }
 
   function renderButton(href) {
@@ -44,7 +48,7 @@ function DownloadButton() {
     case "Debian":
     case "Red Hat":
     case "SuSE":
-      return; //primary button is Linux downlaod already 
+      return; //primary button is Linux download already
     default:
       return renderButton("/download");
   }

src/components/button/DownloadMuseHubButton.jsx

@@ -20,7 +20,7 @@ function DownloadMuseHubButton() {
           "trackEvent",
           "Download Button",
           "Download Muse Hub",
-          `Download Muse Hub button ${platform.os.family}`,
+          `Download Muse Hub button ${browserOS}`,
         ]);
       }
     } else if (href === audacityReleases.lin[0].browser_download_url) {
@@ -28,9 +28,13 @@ function DownloadMuseHubButton() {
         "trackEvent",
         "Download Button",
         "Download Audacity",
-        `Download Audacity button ${platform.os.family}`,
+        `Download Audacity button ${browserOS}`,
       ]);
     }
+
+    setTimeout(() => {
+      window.location.href = "post-download";
+    }, 2000);
   }
 
   function renderButton(href) {

src/components/button/JoinAudioDotComButton.jsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+function handleButtonClick() {
+  if (typeof _paq !== "undefined") {
+    _paq.push([
+      "trackEvent",
+      "CTA Button",
+      "audio.com CTA",
+      "audio.com block CTA",
+    ]);
+  }
+}
+
+function JoinAudioDotComButton() {
+  return (
+    <a
+      onClick={() => {
+        handleButtonClick();
+      }}
+      href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Block_button"
+      className="px-6 py-4 bg-blue-700 w-fit text-white rounded hover:bg-blue-600"
+    >
+      Join for free
+    </a>
+  );
+}
+
+export default JoinAudioDotComButton;

src/components/button/PlatformDownloadMuseHubButton.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+function PlatformDownloadMuseHubButton(props) {
+  const { museHubReleaseData } = props;
+
+  function onClickButtonHandler() {
+    if (typeof _paq !== "undefined") {
+      _paq.push([
+        "trackEvent",
+        "Download Button",
+        "Download Muse Hub",
+        `Download Muse Hub button ${OS}`,
+      ]);
+    }
+
+    setTimeout(() => {
+      window.location.href = "/post-download";
+    }, 2000);
+  }
+
+  return (
+    <a
+      onClick={onClickButtonHandler}
+      href={museHubReleaseData[0].browser_download_url}
+      className="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-blue-700 hover:bg-blue-600 text-base text-white rounded"
+    >
+      Download
+    </a>
+  );
+}
+
+export default PlatformDownloadMuseHubButton;

src/components/card/AudioDotComCard.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+function AudioDotComCard(props) {
+  const { title, icon, body, img } = props;
+  return (
+    <div
+      className="p-4 rounded-lg flex flex-col text-left justify-between border"
+    >
+      <span className={`icon icon-medium ${icon} text-blue-600`}></span>
+      <div>
+        <small>{title}</small>
+        <p>{body}</p>
+      </div>
+    </div>
+  );
+}
+
+export default AudioDotComCard;

src/components/card/DownloadCard.jsx

@@ -3,7 +3,7 @@ import React from "react";
 function DownloadCard(props) {
   const { OS, title, downloadURL, downloadType, checksum } = props;
 
-  function handleButtonClick() {
+  function handleDownloadButtonClick() {
     if (typeof _paq !== "undefined") {
       _paq.push([
         "trackEvent",
@@ -12,6 +12,10 @@ function DownloadCard(props) {
         `${OS + " " + title + " " + downloadType}`,
       ]);
     }
+
+    setTimeout(() => {
+      window.location.href = "/post-download";
+    }, 2000);
   }
 
   return (
@@ -20,7 +24,7 @@ function DownloadCard(props) {
         <h2 className="text-xl font-semibold">{title}</h2>
         <a
           onClick={() => {
-            handleButtonClick();
+            handleDownloadButtonClick();
           }}
           href={downloadURL}
           className="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-slate-200 hover:bg-slate-300 text-base text-black rounded"

src/components/card/FeatureCard.jsx

@@ -1,11 +1,10 @@
-import React from "react";
 import '../../styles/icons.css'
 
 function FeatureCard(props) {
   const { icon, title, description } = props;
 
   return (
-    <div className="h-full col-span-12 sm:col-span-6 xl:col-span-3 p-4 md:p-6 border drop-shadow-sm md:drop-shadow-lg bg-white rounded-lg flex flex-col md:gap-2">
+    <div className="h-full col-span-6 xl:col-span-3 p-4 md:p-6 border drop-shadow-sm md:drop-shadow-lg bg-white rounded-lg flex flex-col md:gap-2">
       <span className={`icon icon-medium text-blue-700 ${icon}`}></span>
       <p className="text-lg font-semibold">{title}</p>
       <p className="">{description}</p>

src/layouts/DownloadPageLayout.astro

@@ -2,6 +2,7 @@
 import BaseLayout from "./BaseLayout.astro";
 import DownloadCard from "../components/card/DownloadCard";
 import IconLinkCard from "../components/card/IconLinkCard";
+import PlatformDownloadMuseHubButton from "../components/button/PlatformDownloadMuseHubButton";
 import { Icon } from "astro-icon";
 import "../styles/icons.css";
 import {
@@ -68,12 +69,11 @@ const {
                 <p>via Muse Hub</p>
               </div>
 
-              <a
-                href={museHubReleaseData[0].browser_download_url}
-                class="flex justify-center text-center items-center px-4 h-12 w-full sm:w-fit bg-blue-700 hover:bg-blue-600 text-base text-white rounded"
-              >
-                Download
-              </a>
+              <PlatformDownloadMuseHubButton
+                client:load
+                museHubReleaseData={museHubReleaseData}
+                OS={OS}
+              />
             </div>
           </div>
         </section>

src/pages/post-download.astro

@@ -0,0 +1,49 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import JoinAudioDotComButton from "../components/button/JoinAudioDotComButton";
+import "../styles/icons.css";
+import FeatureCard from "../components/card/FeatureCard";
+---
+
+<BaseLayout title="Audacity ® | post-download">
+  <section>
+    <div class="text-center bg-blue-700 py-4">
+      <p class="text-lg text-white">Thank you for downloading Audacity!</p>
+    </div>
+  </section>
+
+  <section class="mx-8 max-w-screen-md xl:max-w-screen-lg md:mx-auto">
+    <div class="py-8 sm:py-12 flex flex-col items-center">
+      <div class="text-center">
+        <h1>
+          Sign up to Audacity's cloud saving platform and access your
+          projects from anywhere!
+        </h1>
+        <div class="mt-12"><JoinAudioDotComButton /></div>
+      </div>
+
+      <div class="grid grid-cols-6 sm:grid-cols-12 w-full gap-4 m-16">
+        <FeatureCard
+        icon="icon-cloud"
+        title="Secure cloud storage"
+        description="Keep your projects safe and accessible with cloud storage. Access your work anywhere and never lose a file."
+      />
+      <FeatureCard
+        icon="icon-note"
+        title="Share your creations"
+        description="Upload and share your audio from Audacity with just a few clicks. Quick, easy, and built for creators."
+      />
+      <FeatureCard
+        icon="icon-pen"
+        title="Transcribe your audio"
+        description="Free AI-powered transcription for your podcasts or voice overs, delivering fast and precise text for effortless editing."
+      />
+      <FeatureCard
+        icon="icon-globe"
+        title="Explore new sounds"
+        description="Collaborate with other creators, find new inspiration, and discover sounds to enhance and elevate your projects."
+      />
+      </div>
+    </div>
+  </section>
+</BaseLayout>

src/styles/icons.css

@@ -27,6 +27,10 @@
     content: "\F359"
 }
 
+.icon-cloud:before {
+    content: "\F435"
+}
+
 .icon-export:before {
     content: "\EF24"
 }
@@ -89,4 +93,16 @@
 
 .icon-times:before {
     content: "\EF14"
+}
+
+.icon-pen:before {
+    content: "\EF63"
+}
+
+.icon-note:before {
+    content: "\F360"
+}
+
+.icon-globe:before {
+    content: "\F3B6"
 }

src/styles/input.css

@@ -4,7 +4,7 @@
 
 @layer base {
     h1 {
-        @apply text-2xl lg:text-4xl text-gray-900 font-semibold leading-tight
+        @apply text-2xl lg:text-4xl text-gray-900 font-semibold leading-tight mt-4
     }
 
     h2 {