From 0be9310450bab6ca8fb0dffde3ed78f493195795 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 30 Sep 2025 21:06:19 +0300
Subject: [PATCH] feat(website): highlight which platform to download

---
 .../src/pages/GetStarted/get-started.css      | 16 +++++--
 .../src/pages/GetStarted/get-started.tsx      | 48 ++++++++++++-------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/apps/website/src/pages/GetStarted/get-started.css b/apps/website/src/pages/GetStarted/get-started.css
index 89d8bcfd6..09ddb6217 100644
--- a/apps/website/src/pages/GetStarted/get-started.css
+++ b/apps/website/src/pages/GetStarted/get-started.css
@@ -6,7 +6,7 @@
     grid-column: 1 / 4;
 }
 
-.download-card {
+.download-card {    
     h3 {
         color: var(--accent-color);
         font-size: 1.5em;
@@ -87,9 +87,17 @@
 }
 
 .download-desktop {
-    .download-card:first-of-type { --accent-color: var(--brand-1); }
-    .download-card:nth-of-type(2) { --accent-color: var(--brand-2); }
-    .download-card:last-of-type { --accent-color: var(--brand-3); }
+    .download-card {
+        transform: scale(0.9);
+    
+        &.recommended {
+            transform: scale(1);
+        }
+
+        &:first-of-type { --accent-color: var(--brand-1); }
+        &:nth-of-type(2) { --accent-color: var(--brand-2); }
+        &:last-of-type { --accent-color: var(--brand-3); }
+    }
 
     .download-footer {
         text-align: center;
diff --git a/apps/website/src/pages/GetStarted/get-started.tsx b/apps/website/src/pages/GetStarted/get-started.tsx
index b43eae1de..2139fe928 100644
--- a/apps/website/src/pages/GetStarted/get-started.tsx
+++ b/apps/website/src/pages/GetStarted/get-started.tsx
@@ -1,7 +1,7 @@
 import { useState } from "preact/hooks";
 import Card from "../../components/Card.js";
 import Section from "../../components/Section.js";
-import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntry, getArchitecture, Platform } from "../../download-helper.js";
+import { App, Architecture, buildDownloadUrl, downloadMatrix, DownloadMatrixEntry, getArchitecture, getPlatform, Platform } from "../../download-helper.js";
 import { usePageTitle } from "../../hooks.js";
 import Button, { Link } from "../../components/Button.js";
 import Icon from "../../components/Icon.js";
@@ -11,6 +11,8 @@ import packageJson from "../../../../../package.json" with { type: "json" };
 
 export default function DownloadPage() {
     const [ currentArch, setCurrentArch ] = useState(getArchitecture() ?? "x64");
+    const userPlatform = getPlatform();
+
     usePageTitle("Get started");
 
     return (
@@ -31,7 +33,9 @@ export default function DownloadPage() {
                 </div>
 
                 <div className="grid-3-cols download-desktop">
-                    {Object.entries(downloadMatrix.desktop).map(entry => <DownloadCard app="desktop" arch={currentArch} entry={entry} />)}
+                    {Object.entries(downloadMatrix.desktop).map(entry => (
+                        <DownloadCard app="desktop" arch={currentArch} entry={entry} isRecommended={userPlatform === entry[0]} />
+                    ))}
                 </div>
 
                 <div class="download-footer">
@@ -41,14 +45,21 @@ export default function DownloadPage() {
 
             <Section title="Set up a server for access on multiple devices">
                 <div className="grid-2-cols download-server">
-                    {Object.entries(downloadMatrix.server).map(entry => <DownloadCard app="server" arch={currentArch} entry={entry} />)}
+                    {Object.entries(downloadMatrix.server).map(entry => (
+                        <DownloadCard app="server" arch={currentArch} entry={entry} />
+                    ))}
                 </div>
             </Section>
         </>
     )
 }
 
-export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: App, arch: Architecture, entry: [string, DownloadMatrixEntry] }) {
+export function DownloadCard({ app, arch, entry: [ platform, entry ], isRecommended }: {
+    app: App,
+    arch: Architecture,
+    entry: [string, DownloadMatrixEntry],
+    isRecommended?: boolean;
+}) {
     function unwrapText(text: string | Record<Architecture, string>) {
         return (typeof text === "string" ? text : text[arch]);
     }
@@ -58,18 +69,23 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
     const restDownloads = allDownloads.filter(download => !download[1].recommended);
 
     return (
-        <Card title={<>
-            {unwrapText(entry.title)}
-            {entry.helpUrl && (
-                <Link
-                    className="more-info"
-                    href={entry.helpUrl}
-                    openExternally
-                >
-                    <Icon svg={helpIcon} />
-                </Link>
-            )}
-        </>} className="download-card">
+        <Card
+            title={
+                <>
+                    {unwrapText(entry.title)}
+                    {entry.helpUrl && (
+                        <Link
+                            className="more-info"
+                            href={entry.helpUrl}
+                            openExternally
+                        >
+                            <Icon svg={helpIcon} />
+                        </Link>
+                    )}
+                    </>
+            }
+            className={`download-card ${isRecommended ? "recommended" : ""}`}
+        >
             {unwrapText(entry.description)}
 
             {entry.quickStartTitle && <p class="quick-start-title">{entry.quickStartTitle}</p>}