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..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,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) { diff --git a/src/components/button/JoinAudioDotComButton.jsx b/src/components/button/JoinAudioDotComButton.jsx new file mode 100644 index 0000000..73a17b0 --- /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-6 py-4 bg-blue-700 w-fit text-white rounded hover:bg-blue-600" + > + Join for free + + ); +} + +export default JoinAudioDotComButton; diff --git a/src/components/button/PlatformDownloadMuseHubButton.jsx b/src/components/button/PlatformDownloadMuseHubButton.jsx new file mode 100644 index 0000000..9eca691 --- /dev/null +++ b/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 ( + + Download + + ); +} + +export default PlatformDownloadMuseHubButton; 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..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", @@ -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) {

{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" 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..1297c01 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 PlatformDownloadMuseHubButton from "../components/button/PlatformDownloadMuseHubButton"; import { Icon } from "astro-icon"; import "../styles/icons.css"; import { @@ -68,12 +69,11 @@ 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..e202100 --- /dev/null +++ b/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"; +--- + + +
+
+

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 {