fix(landing): address PR #487 review feedback

- Preserve canonical camelCase platform aliases (macArm, macIntel) in the
  /download/[platform] redirect so those URLs don't lose their platform param.
- Add accessible title + role="img" to the inline Windows SVG so it passes
  Biome's a11y rule and announces to screen readers.
- On /api/releases fetch failure, show an explicit error state with a single
  intentional link to GitHub releases — no more silent GitHub fallback or
  disabled-button UX lie. Keeps normies off GitHub unless they opt in.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>

landing/src/app/download/[platform]/route.ts

@@ -9,7 +9,9 @@ export const dynamic = 'force-dynamic';
 // to GitHub or direct asset URLs.
 const PLATFORM_ALIAS: Record<string, string> = {
   'mac-arm': 'macArm',
+  macArm: 'macArm',
   'mac-intel': 'macIntel',
+  macIntel: 'macIntel',
   windows: 'windows',
 };
 

landing/src/app/download/page.tsx

@@ -13,7 +13,7 @@ import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
 import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
 import { Button } from '@/components/ui/button';
-import { DONATE_URL, GITHUB_REPO } from '@/lib/constants';
+import { DONATE_URL, GITHUB_RELEASES_PAGE, GITHUB_REPO } from '@/lib/constants';
 import type { DownloadLinks } from '@/lib/releases';
 
 type Platform = keyof DownloadLinks;
@@ -168,11 +168,11 @@ export default function DownloadPage() {
             ) : (
               <>
                 <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-foreground mb-4">
-                  Download Voicebox
+                  {linksError ? "We couldn't load the latest release." : 'Download Voicebox'}
                 </h1>
                 <p className="text-lg text-muted-foreground">
                   {linksError
-                    ? "We couldn't reach the release server. Pick your platform manually below."
+                    ? 'Our release server is temporarily unreachable. Please try again in a moment.'
                     : 'Pick your platform to get started.'}
                 </p>
               </>
@@ -181,42 +181,59 @@ export default function DownloadPage() {
         </div>
 
         {/* Platform buttons — always visible as a fallback */}
-        <div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6">
+        {linksError ? (
-          <h2 className="text-sm font-medium text-foreground mb-4">
+          <div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 text-center">
-            {triggered ? 'Download not working?' : 'Choose your platform'}
+            <p className="text-sm text-muted-foreground mb-4">
-          </h2>
+              If this keeps happening, you can{' '}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <a
-            {PLATFORMS.map((meta) => {
+                href={`${GITHUB_RELEASES_PAGE}/latest`}
-              const isLinux = meta.key === 'linux';
+                target="_blank"
-              const url = isLinux ? '/linux-install' : links?.[meta.key];
+                rel="noopener noreferrer"
-              const isActive = meta.key === platform;
+                className="text-accent underline underline-offset-2 hover:text-accent/80"
-              const disabled = !isLinux && !url;
+              >
-              return (
+                browse releases on GitHub
-                <a
+              </a>
-                  key={meta.key}
+              {' '}and grab the build for your platform manually.
-                  href={url ?? '#'}
+            </p>
-                  {...(isLinux ? {} : { download: true })}
-                  aria-disabled={disabled}
-                  onClick={(e) => {
-                    if (disabled) e.preventDefault();
-                  }}
-                  className={`flex items-center rounded-xl border px-5 py-4 transition-all group ${
-                    isActive
-                      ? 'border-accent/40 bg-accent/5 hover:border-accent/60'
-                      : 'border-border bg-card/40 hover:border-accent/30 hover:bg-card'
-                  } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
-                >
-                  <meta.icon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
-                  <div className="ml-4 flex-1">
-                    <div className="text-sm font-medium text-foreground">{meta.label}</div>
-                    <div className="text-xs text-muted-foreground">{meta.description}</div>
-                  </div>
-                  <DownloadIcon className="h-4 w-4 text-muted-foreground/60 group-hover:text-accent transition-colors" />
-                </a>
-              );
-            })}
           </div>
-        </div>
+        ) : (
+          <div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6">
+            <h2 className="text-sm font-medium text-foreground mb-4">
+              {triggered ? 'Download not working?' : 'Choose your platform'}
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              {PLATFORMS.map((meta) => {
+                const isLinux = meta.key === 'linux';
+                const url = isLinux ? '/linux-install' : links?.[meta.key];
+                const isActive = meta.key === platform;
+                const disabled = !isLinux && !url;
+                return (
+                  <a
+                    key={meta.key}
+                    href={url ?? '#'}
+                    {...(isLinux ? {} : { download: true })}
+                    aria-disabled={disabled}
+                    onClick={(e) => {
+                      if (disabled) e.preventDefault();
+                    }}
+                    className={`flex items-center rounded-xl border px-5 py-4 transition-all group ${
+                      isActive
+                        ? 'border-accent/40 bg-accent/5 hover:border-accent/60'
+                        : 'border-border bg-card/40 hover:border-accent/30 hover:bg-card'
+                    } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  >
+                    <meta.icon className="h-6 w-6 shrink-0 text-muted-foreground group-hover:text-foreground transition-colors" />
+                    <div className="ml-4 flex-1">
+                      <div className="text-sm font-medium text-foreground">{meta.label}</div>
+                      <div className="text-xs text-muted-foreground">{meta.description}</div>
+                    </div>
+                    <DownloadIcon className="h-4 w-4 text-muted-foreground/60 group-hover:text-accent transition-colors" />
+                  </a>
+                );
+              })}
+            </div>
+          </div>
+        )}
 
         {/* Donate — prominent, heartfelt, post-click context */}
         <div className="mt-16 rounded-2xl border border-border bg-gradient-to-br from-card via-card/80 to-background backdrop-blur-sm p-8 md:p-10 overflow-hidden relative">

landing/src/components/PlatformIcons.tsx

@@ -19,7 +19,10 @@ export function WindowsIcon({ className }: { className?: string }) {
       viewBox="0 0 24 24"
       fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
+      role="img"
+      aria-label="Windows"
     >
+      <title>Windows</title>
       <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4l-13.051.149M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
     </svg>
   );