From ef253a595ff2f029787da1b9e7a3176d15626125 Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Mon, 9 Sep 2024 14:06:45 +1000 Subject: [PATCH 1/8] Init commit --- .../button/AudacityInstallerButton.jsx | 22 ++++++++ src/components/button/DownloadButton.jsx | 6 ++- .../button/DownloadMuseHubButton.jsx | 4 ++ .../button/JoinAudioDotComButton.jsx | 28 ++++++++++ src/components/card/AudioDotComCard.jsx | 18 +++++++ src/components/card/DownloadCard.jsx | 4 ++ src/components/card/FeatureCard.jsx | 3 +- src/layouts/DownloadPageLayout.astro | 8 +-- src/pages/post-download.astro | 53 +++++++++++++++++++ src/styles/icons.css | 16 ++++++ src/styles/input.css | 2 +- 11 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 src/components/button/AudacityInstallerButton.jsx create mode 100644 src/components/button/JoinAudioDotComButton.jsx create mode 100644 src/components/card/AudioDotComCard.jsx create mode 100644 src/pages/post-download.astro diff --git a/src/components/button/AudacityInstallerButton.jsx b/src/components/button/AudacityInstallerButton.jsx new file mode 100644 index 0000000..2204e02 --- /dev/null +++ b/src/components/button/AudacityInstallerButton.jsx @@ -0,0 +1,22 @@ +import React from "react"; + +function AudacityInstallerButton(props) { + const { museHubReleaseData } = props; + function onClickButtonHandler() { + setTimeout(() => { + window.location.href = "/post-download"; + }, 2000); + } + + return ( + + Download + + ); +} + +export default AudacityInstallerButton; diff --git a/src/components/button/DownloadButton.jsx b/src/components/button/DownloadButton.jsx index 336a793..07c66ad 100644 --- a/src/components/button/DownloadButton.jsx +++ b/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"); } diff --git a/src/components/button/DownloadMuseHubButton.jsx b/src/components/button/DownloadMuseHubButton.jsx index 54b36e7..9aecbb3 100644 --- a/src/components/button/DownloadMuseHubButton.jsx +++ b/src/components/button/DownloadMuseHubButton.jsx @@ -31,6 +31,10 @@ function DownloadMuseHubButton() { `Download Audacity button ${platform.os.family}`, ]); } + + setTimeout(() => { + window.location.href = "post-download"; + }, 2000); } function renderButton(href) { diff --git a/src/components/button/JoinAudioDotComButton.jsx b/src/components/button/JoinAudioDotComButton.jsx new file mode 100644 index 0000000..9e6462e --- /dev/null +++ b/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 ( + { + handleButtonClick(); + }} + href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Block_button" + className="px-4 py-2 bg-blue-700 w-fit text-white rounded hover:bg-blue-600" + > + Join for free + + ) +} + +export default JoinAudioDotComButton \ No newline at end of file diff --git a/src/components/card/AudioDotComCard.jsx b/src/components/card/AudioDotComCard.jsx new file mode 100644 index 0000000..5789e1c --- /dev/null +++ b/src/components/card/AudioDotComCard.jsx @@ -0,0 +1,18 @@ +import React from "react"; + +function AudioDotComCard(props) { + const { title, icon, body, img } = props; + return ( +
+ +
+ {title} +

{body}

+
+
+ ); +} + +export default AudioDotComCard; diff --git a/src/components/card/DownloadCard.jsx b/src/components/card/DownloadCard.jsx index d830c2c..f742ccd 100644 --- a/src/components/card/DownloadCard.jsx +++ b/src/components/card/DownloadCard.jsx @@ -12,6 +12,10 @@ function DownloadCard(props) { `${OS + " " + title + " " + downloadType}`, ]); } + + setTimeout(() => { + window.location.href = "/post-download"; + }, 2000); } return ( diff --git a/src/components/card/FeatureCard.jsx b/src/components/card/FeatureCard.jsx index 453f444..2aa7b64 100644 --- a/src/components/card/FeatureCard.jsx +++ b/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 ( -
+

{title}

{description}

diff --git a/src/layouts/DownloadPageLayout.astro b/src/layouts/DownloadPageLayout.astro index a6e928c..7ec149f 100644 --- a/src/layouts/DownloadPageLayout.astro +++ b/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 AudacityInstallerButton from "../components/button/AudacityInstallerButton"; import { Icon } from "astro-icon"; import "../styles/icons.css"; import { @@ -68,12 +69,7 @@ const {

via Muse Hub

- - Download - +
diff --git a/src/pages/post-download.astro b/src/pages/post-download.astro new file mode 100644 index 0000000..a41939d --- /dev/null +++ b/src/pages/post-download.astro @@ -0,0 +1,53 @@ +--- +import BaseLayout from "../layouts/BaseLayout.astro"; +import JoinAudioDotComButton from "../components/button/JoinAudioDotComButton"; +import AudioDotComCard from "../components/card/AudioDotComCard"; +import "../styles/icons.css"; +import recordMemos from "../assets/img/record-memos.webp"; +import recordPodcast from "../assets/img/record-podcast.webp"; +import voiceOver from "../assets/img/voice-over.webp"; +import FeatureCard from "../components/card/FeatureCard"; +--- + + +
+
+

Thank you for downloading Audacity!

+
+
+ +
+
+
+

+ Sign up to Audacity's cloud saving platform and access your + projects from anywhere! +

+
+
+ +
+ + + + +
+
+
+ diff --git a/src/styles/icons.css b/src/styles/icons.css index 6beb3be..d878f5f 100644 --- a/src/styles/icons.css +++ b/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" } \ No newline at end of file diff --git a/src/styles/input.css b/src/styles/input.css index 6604520..1df668e 100644 --- a/src/styles/input.css +++ b/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 { From 9451f9c03a2b78eac58e9533c2b239fe5a02a5de Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Tue, 10 Sep 2024 13:15:19 +1000 Subject: [PATCH 2/8] Increase 'Join now' button size --- src/components/button/JoinAudioDotComButton.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/button/JoinAudioDotComButton.jsx b/src/components/button/JoinAudioDotComButton.jsx index 9e6462e..3989bff 100644 --- a/src/components/button/JoinAudioDotComButton.jsx +++ b/src/components/button/JoinAudioDotComButton.jsx @@ -18,7 +18,7 @@ function JoinAudioDotComButton() { handleButtonClick(); }} href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Block_button" - className="px-4 py-2 bg-blue-700 w-fit text-white rounded hover:bg-blue-600" + className="px-6 py-4 bg-blue-700 w-fit text-white rounded hover:bg-blue-600" > Join for free From 12106a4cbc8b9036a17c1ecd9d40c6470f1d7ca7 Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Tue, 10 Sep 2024 13:15:46 +1000 Subject: [PATCH 3/8] Update card descriptive text --- src/pages/post-download.astro | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/pages/post-download.astro b/src/pages/post-download.astro index a41939d..0f02048 100644 --- a/src/pages/post-download.astro +++ b/src/pages/post-download.astro @@ -1,11 +1,7 @@ --- import BaseLayout from "../layouts/BaseLayout.astro"; import JoinAudioDotComButton from "../components/button/JoinAudioDotComButton"; -import AudioDotComCard from "../components/card/AudioDotComCard"; import "../styles/icons.css"; -import recordMemos from "../assets/img/record-memos.webp"; -import recordPodcast from "../assets/img/record-podcast.webp"; -import voiceOver from "../assets/img/voice-over.webp"; import FeatureCard from "../components/card/FeatureCard"; --- @@ -17,13 +13,13 @@ import FeatureCard from "../components/card/FeatureCard";
-
+

Sign up to Audacity's cloud saving platform and access your projects from anywhere!

-
+
@@ -40,7 +36,7 @@ import FeatureCard from "../components/card/FeatureCard"; Date: Wed, 11 Sep 2024 10:46:47 +1000 Subject: [PATCH 4/8] Rename MuseHub download button --- ....jsx => PlatformDownloadMuseHubButton.jsx} | 20 ++++++++++++++----- src/layouts/DownloadPageLayout.astro | 8 ++++++-- 2 files changed, 21 insertions(+), 7 deletions(-) rename src/components/button/{AudacityInstallerButton.jsx => PlatformDownloadMuseHubButton.jsx} (54%) diff --git a/src/components/button/AudacityInstallerButton.jsx b/src/components/button/PlatformDownloadMuseHubButton.jsx similarity index 54% rename from src/components/button/AudacityInstallerButton.jsx rename to src/components/button/PlatformDownloadMuseHubButton.jsx index 2204e02..9eca691 100644 --- a/src/components/button/AudacityInstallerButton.jsx +++ b/src/components/button/PlatformDownloadMuseHubButton.jsx @@ -1,13 +1,23 @@ import React from "react"; -function AudacityInstallerButton(props) { +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); + window.location.href = "/post-download"; + }, 2000); } - + return ( via Muse Hub

- +
From af84ef1fd0826622fcae23d6fedf11b9675436da Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Wed, 11 Sep 2024 10:47:17 +1000 Subject: [PATCH 5/8] Utilise component state --- src/components/button/DownloadMuseHubButton.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/button/DownloadMuseHubButton.jsx b/src/components/button/DownloadMuseHubButton.jsx index 9aecbb3..f06027e 100644 --- a/src/components/button/DownloadMuseHubButton.jsx +++ b/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,7 +28,7 @@ function DownloadMuseHubButton() { "trackEvent", "Download Button", "Download Audacity", - `Download Audacity button ${platform.os.family}`, + `Download Audacity button ${browserOS}`, ]); } From ff7fe44f84202c4cbdf49c7a02612f020a1b136a Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Wed, 11 Sep 2024 10:47:26 +1000 Subject: [PATCH 6/8] Improve function name --- src/components/card/DownloadCard.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/card/DownloadCard.jsx b/src/components/card/DownloadCard.jsx index f742ccd..45eb3b9 100644 --- a/src/components/card/DownloadCard.jsx +++ b/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", @@ -24,7 +24,7 @@ function DownloadCard(props) {

{title}

 { - 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" From e6aeacc6e98887ee9c90d8be4f41bd0ba64a78b3 Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Wed, 11 Sep 2024 10:48:01 +1000 Subject: [PATCH 7/8] Format button --- .../button/JoinAudioDotComButton.jsx | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/components/button/JoinAudioDotComButton.jsx b/src/components/button/JoinAudioDotComButton.jsx index 3989bff..73a17b0 100644 --- a/src/components/button/JoinAudioDotComButton.jsx +++ b/src/components/button/JoinAudioDotComButton.jsx @@ -1,28 +1,28 @@ -import React from 'react' +import React from "react"; function handleButtonClick() { - if (typeof _paq !== "undefined") { - _paq.push([ - "trackEvent", - "CTA Button", - "audio.com CTA", - "audio.com block CTA", - ]); - } + if (typeof _paq !== "undefined") { + _paq.push([ + "trackEvent", + "CTA Button", + "audio.com CTA", + "audio.com block CTA", + ]); } +} function JoinAudioDotComButton() { return ( { - 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 - - ) + 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 + + ); } -export default JoinAudioDotComButton \ No newline at end of file +export default JoinAudioDotComButton; From eb408b69488da427f772ccb42e68ec870860db46 Mon Sep 17 00:00:00 2001 From: Dilson's Pickles Date: Wed, 11 Sep 2024 11:38:25 +1000 Subject: [PATCH 8/8] Update feature card copy --- src/pages/post-download.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/post-download.astro b/src/pages/post-download.astro index 0f02048..e202100 100644 --- a/src/pages/post-download.astro +++ b/src/pages/post-download.astro @@ -36,7 +36,7 @@ import FeatureCard from "../components/card/FeatureCard";