feat(website): add /download, and put the product in the h1

Three findings from an external SEO audit, all reproduced before acting on
them.

/download returned 404 and was absent from the sitemap, so the highest-intent
query in this category had no landing page at all — the only download path was
the navbar CTA jumping straight out to GitHub Releases, which sends the traffic
somewhere we do not control and drops a first-time visitor onto a list of six
version-stamped binaries with no guidance. The new page gives each platform a
card with its artifact, its caveats, and one button, plus the Gatekeeper and
Nix one-liners. SoftwareApplication.downloadUrl now points at it, with the
Releases list demoted to installUrl.

Its buttons target /releases/latest rather than deep links. Every asset carries
its version in the filename (Openscreen-Mac-arm64-1.7.0.dmg), so there is no
stable per-asset URL, and resolving one at build time would go stale silently:
the docs workflow only fires on website/** changes, so shipping a new app
release would not rebuild this page and it would keep advertising the previous
version. GitHub resolves /releases/latest on every click instead.

The landing page's only h1 was the bare wordmark "OpenScreen" — a heading with
no subject. The descriptor moves into it as a block-level second line at the
old tagline's size, so the rendered hero is unchanged: verified in a browser,
68px wordmark, 19px descriptor, and a 0px gap to the following line, which is
exactly what the <br> it replaces produced.

The navbar CTA becomes a router link now that it points somewhere internal,
which gets it SPA navigation and route prefetch that a raw <a> in an html item
never had. A link item takes a plain string label, so the download glyph moves
to a CSS mask on .navbar-download-cta.

Unrelated bug found while cross-checking the audit against the actual release
assets: both the installation guide and the landing page told users to run
`apt install ./Openscreen-Linux-latest.deb` and `pacman -U
Openscreen-Linux-latest.pacman`. No "-latest" asset has ever been published —
the real names are version-stamped — so both commands failed verbatim. They now
glob, like the AppImage lines two paragraphs down already did.

Verified against a production build: 11 sitemap URLs including /download/,
every page still carrying exactly one meta description at 149 characters or
fewer, one h1 per page, and the three platform cards resolving to equal height.
Checked in a browser at 1265px and 375px — cards stack on mobile, no page-level
horizontal scroll, and the long xattr command scrolls inside its own pre.

Author: EtienneLescot

website/docs/installation.md

@@ -15,7 +15,7 @@ keywords:
 
 # Installation
 
-Download the latest installer for your platform from [GitHub Releases](https://github.com/getopenscreen/openscreen/releases).
+Download the latest installer for your platform from the [download page](/download), or straight from [GitHub Releases](https://github.com/getopenscreen/openscreen/releases).
 
 ## macOS
 
@@ -45,12 +45,12 @@ Three packages are published per release — pick the one matching your distro.
 
 **Debian / Ubuntu / Pop!_OS**
 ```bash
-sudo apt install ./Openscreen-Linux-latest.deb
+sudo apt install ./Openscreen-Linux-*.deb
 ```
 
 **Arch / Manjaro**
 ```bash
-sudo pacman -U Openscreen-Linux-latest.pacman
+sudo pacman -U Openscreen-Linux-*.pacman
 ```
 
 **Any distro (AppImage)**

website/docusaurus.config.ts

@@ -222,12 +222,15 @@ export default async function createConfig(): Promise<Config> {
 							`GitHub${starBadge}</a>`,
 					},
 					{
-						type: "html",
+						// Points at our own page now, not straight out to Releases, which
+						// means it can be a real router link: SPA navigation plus route
+						// prefetch, neither of which a raw <a> in an html item gets. A
+						// link item only takes a string label, so the download glyph moves
+						// to a CSS mask on .navbar-download-cta.
+						to: "/download",
+						label: "Download",
+						className: "navbar-download-cta",
 						position: "right",
-						value:
-							`<a class="navbar-download-cta" href="${REPO_URL}/releases" target="_blank" rel="noopener noreferrer">` +
-							'<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3"/><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="m7 10 5 5 5-5"/></svg>' +
-							"Download</a>",
 					},
 				],
 			},

website/src/css/custom.css

@@ -244,6 +244,12 @@ body {
 	font-size: 11px;
 }
 
+/* Lucide "download", inlined as a data URI so it costs no extra request and
+   stays theme-independent (the mask below recolors it from currentColor). */
+:root {
+	--os-icon-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3'/%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
+}
+
 .navbar-download-cta {
 	display: inline-flex;
 	align-items: center;
@@ -256,6 +262,19 @@ body {
 	font-weight: 600;
 }
 
+/* The CTA is a router link, whose label is a plain string, so the download
+   glyph is painted here instead of inlined as markup. A mask rather than a
+   background image keeps it on currentColor like the other navbar icons. */
+.navbar-download-cta::before {
+	content: "";
+	width: 14px;
+	height: 14px;
+	flex: none;
+	background-color: currentColor;
+	-webkit-mask: var(--os-icon-download) center / contain no-repeat;
+	mask: var(--os-icon-download) center / contain no-repeat;
+}
+
 .navbar-download-cta:hover {
 	background: var(--os-brand-lo);
 }

website/src/pages/download.module.css

@@ -0,0 +1,280 @@
+/**
+ * /download — same tokens and rhythm as the landing page hero and install grid
+ * (src/pages/index.module.css), so the two pages read as one site rather than a
+ * marketing page plus a bolted-on download page.
+ */
+
+.hero,
+.platforms {
+	background: var(--os-bg);
+	color: var(--os-fg);
+}
+
+.hero {
+	padding: 88px 28px 0;
+	text-align: center;
+	background: radial-gradient(ellipse 60% 40% at 50% 0%, var(--os-accent-wash), transparent 60%), var(--os-bg);
+}
+
+.heroInner {
+	max-width: 720px;
+	margin: 0 auto;
+}
+
+.badge {
+	display: inline-flex;
+	align-items: center;
+	padding: 0.3rem 0.85rem;
+	border-radius: 999px;
+	background: var(--os-accent-soft);
+	border: 1px solid var(--os-accent-border);
+	color: var(--os-accent);
+	font-size: 0.8rem;
+	font-weight: 600;
+	margin-bottom: 22px;
+}
+
+.title {
+	margin: 20px 0 0 !important;
+	font-size: clamp(38px, 5.2vw, 58px);
+	font-weight: 700 !important;
+	letter-spacing: -0.03em;
+	line-height: 1.05;
+	color: var(--os-fg-emphasis) !important;
+}
+
+.tagline {
+	font-size: 19px;
+	line-height: 1.55;
+	color: var(--os-fg-2);
+	margin: 20px auto 0;
+	max-width: 560px;
+}
+
+.actions {
+	display: flex;
+	gap: 12px;
+	justify-content: center;
+	flex-wrap: wrap;
+	margin: 30px 0 0;
+}
+
+.primaryCta,
+.secondaryCta {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding: 0.65rem 1.35rem;
+	border-radius: 9px;
+	font-weight: 600;
+	font-size: 0.95rem;
+	text-decoration: none;
+	transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.primaryCta {
+	background: var(--os-accent);
+	color: #fff;
+	box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
+}
+
+.primaryCta:hover {
+	transform: translateY(-2px);
+	color: #fff;
+	text-decoration: none;
+}
+
+.secondaryCta {
+	background: transparent;
+	color: var(--os-fg-2);
+	border: 1px solid var(--os-border);
+}
+
+.secondaryCta:hover {
+	transform: translateY(-2px);
+	border-color: var(--os-fg-2);
+	color: var(--os-fg-2);
+	text-decoration: none;
+}
+
+.note {
+	margin: 22px auto 0;
+	max-width: 460px;
+	font-size: 12.5px;
+	color: var(--os-meta);
+	line-height: 1.5;
+}
+
+.note strong {
+	color: var(--os-muted);
+}
+
+/* ---- platform cards ---- */
+
+.platforms {
+	padding: 56px 28px 100px;
+	display: flex;
+	justify-content: center;
+}
+
+.platformsInner {
+	width: 100%;
+	max-width: 1040px;
+}
+
+.grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	gap: 0.875rem;
+}
+
+@media (max-width: 860px) {
+	.grid {
+		grid-template-columns: 1fr;
+	}
+}
+
+/* Flex column so .cardBody absorbs the slack and the CTA sits flush at the
+   bottom of all three cards, whose blurbs differ in length. */
+.card {
+	display: flex;
+	flex-direction: column;
+	border-radius: 14px;
+	border: 1px solid var(--os-border);
+	background: var(--os-surface-1);
+	box-shadow: var(--os-elev-card);
+	overflow: hidden;
+}
+
+.cardHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--os-border-soft);
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--os-fg-2);
+}
+
+.artifactChip {
+	margin-left: auto;
+	padding: 1px 7px;
+	border-radius: 999px;
+	border: 1px solid var(--os-border-soft);
+	font-family: var(--ifm-font-family-monospace);
+	font-size: 10.5px;
+	color: var(--os-meta);
+}
+
+.cardBody {
+	flex: 1;
+	padding: 16px;
+}
+
+.cardBlurb {
+	margin: 0;
+	font-size: 13px;
+	line-height: 1.6;
+	color: var(--os-muted);
+}
+
+.noteList {
+	margin: 12px 0 0;
+	padding-left: 16px;
+	font-size: 12.5px;
+	line-height: 1.75;
+	color: var(--os-meta);
+}
+
+.noteList li::marker {
+	color: var(--os-accent);
+}
+
+.cardCta {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 7px;
+	margin: 0 16px 16px;
+	padding: 9px 14px;
+	border-radius: 9px;
+	background: var(--os-accent);
+	color: #fff;
+	font-size: 13px;
+	font-weight: 600;
+	text-decoration: none;
+}
+
+.cardCta:hover {
+	background: var(--os-brand-lo);
+	color: #fff;
+	text-decoration: none;
+}
+
+/* ---- side panels ---- */
+
+.panels {
+	margin-top: 0.875rem;
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	gap: 0.875rem;
+}
+
+@media (max-width: 860px) {
+	.panels {
+		grid-template-columns: 1fr;
+	}
+}
+
+.panel {
+	border-radius: 14px;
+	border: 1px solid var(--os-border);
+	background: var(--os-surface-1);
+	overflow: hidden;
+}
+
+.panelHeader {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 10px 16px;
+	border-bottom: 1px solid var(--os-border-soft);
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--os-fg-2);
+}
+
+.code {
+	margin: 0;
+	padding: 1rem;
+	font-size: 12.5px;
+	line-height: 1.7;
+	color: var(--os-fg-2);
+	background: transparent;
+	overflow-x: auto;
+}
+
+.accentText {
+	color: var(--os-accent);
+}
+
+.meta {
+	color: var(--os-meta);
+}
+
+.panelFoot {
+	margin: 0;
+	padding: 0 16px 14px;
+	font-size: 12px;
+	line-height: 1.55;
+	color: var(--os-meta);
+}
+
+.footNote {
+	margin: 26px 0 0;
+	text-align: center;
+	font-size: 12.5px;
+	line-height: 1.6;
+	color: var(--os-meta);
+}