add cloud saving page

Author: LWinterberg

src/components/footer/Footer.astro

@@ -26,6 +26,7 @@ import "../../styles/fonts.css";
         </li>
         <li><a href="/FAQ" aria-label="Link to FAQ">FAQ</a></li>
         <li><a href="/blog" aria-label="Link to Blog">Blog</a></li>
+        <li><a href="/cloud-saving" aria-label="Link to Cloud Saving">Cloud Saving</a></li>
         <li>
           <a
             href="https://forum.audacityteam.org/"

src/components/navigation/NavigationReact.jsx

@@ -85,7 +85,7 @@ function NavigationReact(props) {
         </div>
 
         <div className="hidden lg:flex flex-1 justify-end items-center gap-3">
-          <p className="text-base">Audacity Cloud saving</p>
+          <p className="text-base hover:text-blue-700"><a href="/cloud-saving">Audacity Cloud saving</a></p>
           <a href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=Nav_button" target="_blank">
             <button
               onClick={() => {

src/pages/cloud-saving.astro

@@ -0,0 +1,52 @@
+---
+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 Cloud Saving Platform"
+  description="Never lose your work in Audacity with seamless sync to Cloud Storage"
+>
+  <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
+            client:load
+            href="https://audio.com/auth/sign-up?mtm_campaign=audacityteamorg&mtm_content=cloudsaving"
+            matomoEventName="Cloudsaving page"
+            large
+          />
+        </div>
+      </div>
+    </div>
+  </section>
+  <div class="grid grid-cols-6 sm:grid-cols-12 w-full gap-4 p-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>
+</BaseLayout>