Add Audacity 4 release landing page

Author: teetow

src/pages/au4.astro

@@ -0,0 +1,164 @@
+---
+import BaseLayout from "../layouts/BaseLayout.astro";
+import SplitDownloadButton from "../components/button/SplitDownloadButton.jsx";
+import FeaturedVideo from "../components/video/FeaturedVideo";
+import "../styles/icons.css";
+
+const pageTitle = "Audacity ® | Audacity 4";
+const pageDescription = "See what's new in Audacity 4 and get ready for the download rollout.";
+
+const launchHighlights = [
+  {
+    title: "A refreshed interface",
+    description:
+      "Updated themes, clip visuals, and navigation make Audacity easier to read and quicker to learn.",
+  },
+  {
+    title: "Layouts that adapt to you",
+    description:
+      "Save Workspaces, rearrange toolbars, and switch setups without digging through menus.",
+  },
+  {
+    title: "Editing that stays out of the way",
+    description:
+      "Move, group, and trim clips with new handles and shortcuts designed to keep edits tidy.",
+  },
+];
+
+const newFromAudacity3 = [
+  "Persistent playhead and updated loop controls help you keep track of where you are.",
+  "You can start recording from anywhere on the timeline without moving other clips.",
+  "Ripple editing shortcuts replace Sync-lock with simpler multi-track adjustments.",
+  "Selection, Draw, and Multi tools sit directly in the main workflow to reduce tool switching.",
+];
+
+const releaseDownloads = {
+  version: "Audacity 4",
+  win: [
+    {
+      name: "Windows 64-bit installer",
+      browser_download_url: "#",
+      type: ".exe",
+    },
+    {
+      name: "Windows 64-bit portable",
+      browser_download_url: "#",
+      type: ".zip",
+    },
+  ],
+  mac: [
+    {
+      name: "macOS universal dmg",
+      browser_download_url: "#",
+      type: ".dmg",
+    },
+  ],
+  lin: [
+    {
+      name: "Linux AppImage",
+      browser_download_url: "#",
+      type: ".AppImage",
+    },
+  ],
+};
+
+const downloadSections = [
+  {
+    id: "windows",
+    title: "Windows",
+    os: "Windows",
+    entries: releaseDownloads.win,
+  },
+  {
+    id: "mac",
+    title: "macOS",
+    os: "macOS",
+    entries: releaseDownloads.mac,
+  },
+  {
+    id: "linux",
+    title: "Linux",
+    os: "Linux",
+    entries: releaseDownloads.lin,
+  },
+].filter((section) => section.entries.length > 0);
+---
+
+<BaseLayout title={pageTitle} description={pageDescription}>
+  <main id="main" class="text-gray-700">
+    <div class="max-w-screen-xl mx-auto px-6 xs:px-12 md:px-16 py-12 space-y-16">
+      <section>
+        <p class="text-sm uppercase tracking-wide text-blue-700 font-semibold">
+          Coming soon
+        </p>
+        <h1 class="mt-2">Audacity 4 is nearly here</h1>
+        <p class="mt-4 text-lg">
+          Audacity 4 brings a visual overhaul, layout tools, and editing updates
+          that respond to the feedback we heard throughout the 3.x releases.
+        </p>
+        <div class="mt-10 grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8">
+          {launchHighlights.map((feature) => (
+            <div class="border border-gray-200 rounded-lg bg-white p-6 shadow-sm">
+              <h3 class="text-lg font-semibold text-gray-900">{feature.title}</h3>
+              <p class="mt-3 text-gray-700">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2 class="text-sm uppercase font-normal text-gray-600">
+          New since Audacity 3
+        </h2>
+        <ul class="mt-6 grid gap-3 list-disc pl-6">
+          {newFromAudacity3.map((item) => (
+            <li>{item}</li>
+          ))}
+        </ul>
+      </section>
+
+      <section>
+        <FeaturedVideo
+          client:load
+          placeholderImage="https://i.ytimg.com/vi/QYM3TWf_G38/maxresdefault.jpg"
+          imageAltText="Video: What is new in Audacity 4"
+          videoURL="https://www.youtube-nocookie.com/embed/QYM3TWf_G38?autoplay=1"
+          title="Watch the Audacity 4 tour"
+          label="Take a guided look at the redesigned interface, workflow upgrades, and the creative tools that define this release."
+          matomoEventName="Audacity 4 feature tour video"
+        />
+      </section>
+
+      <section>
+        <div class="border border-gray-200 bg-white rounded-lg p-6 md:p-8 shadow-sm">
+          <h2 class="text-sm uppercase font-normal text-gray-600">
+            Download Audacity 4
+          </h2>
+          <p class="mt-2 text-sm text-gray-700">
+            Links activate when the release is live. Pick your platform and get
+            ready to install once the builds are published.
+          </p>
+          <div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-6">
+            {downloadSections.map((section) => (
+              <div class="flex flex-col gap-3">
+                <h3 class="text-base font-semibold text-gray-900">
+                  {section.title}
+                </h3>
+                <SplitDownloadButton
+                  OS={section.os}
+                  kind={releaseDownloads.version}
+                  releaseData={section.entries}
+                  client:load
+                />
+              </div>
+            ))}
+          </div>
+          <p class="mt-6 text-xs text-gray-500">
+            Final download URLs and checksums populate automatically when the
+            release binaries become available.
+          </p>
+        </div>
+      </section>
+    </div>
+  </main>
+</BaseLayout>