From d870a260e137cf4be7d0f4ee7161360083c0c21e Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 30 Sep 2025 20:53:29 +0300
Subject: [PATCH] feat(website): improve download instructions

---
 apps/website/src/download-helper.ts               | 8 ++++++--
 apps/website/src/pages/GetStarted/get-started.css | 7 +++++++
 apps/website/src/pages/GetStarted/get-started.tsx | 1 +
 apps/website/src/style.css                        | 2 +-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/apps/website/src/download-helper.ts b/apps/website/src/download-helper.ts
index 977a4c458..03676f0d3 100644
--- a/apps/website/src/download-helper.ts
+++ b/apps/website/src/download-helper.ts
@@ -19,6 +19,7 @@ export interface DownloadMatrixEntry {
     description: Record<Architecture, string> | string;
     downloads: Record<string, DownloadInfo>;
     helpUrl?: string;
+    quickStartTitle?: string;
     quickStartCode?: string;
 }
 
@@ -43,6 +44,7 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "Compatible with Intel or AMD devices running Windows 10 and 11.",
                 arm64: "Compatible with ARM devices (e.g. with Qualcomm Snapdragon).",
             },
+            quickStartTitle: "To install via Winget:",
             quickStartCode: "winget install TriliumNext.Notes",
             downloads: {
                 exe: {
@@ -71,14 +73,15 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "For most Linux distributions, compatible with x86_64 architecture.",
                 arm64: "For ARM-based Linux distributions, compatible with aarch64 architecture.",
             },
+            quickStartTitle: "Select an appropriate package format, depending on your distribution:",
             downloads: {
                 deb: {
                     recommended: true,
-                    name: "Download .deb"
+                    name: ".deb"
                 },
                 rpm: {
                     recommended: true,
-                    name: "Download .rpm"
+                    name: ".rpm"
                 },
                 flatpak: {
                     name: ".flatpak"
@@ -105,6 +108,7 @@ export const downloadMatrix: DownloadMatrix = {
                 x64: "For Intel-based Macs running macOS Big Sur or later.",
                 arm64: "For Apple Silicon Macs such as those with M1 and M2 chips.",
             },
+            quickStartTitle: "To install via Homebrew:",
             quickStartCode: "brew install --cask trilium-notes",
             downloads: {
                 dmg: {
diff --git a/apps/website/src/pages/GetStarted/get-started.css b/apps/website/src/pages/GetStarted/get-started.css
index 8b6e3dfe7..89d8bcfd6 100644
--- a/apps/website/src/pages/GetStarted/get-started.css
+++ b/apps/website/src/pages/GetStarted/get-started.css
@@ -32,10 +32,17 @@
         color: var(--accent-color);
     }
 
+    .quick-start-title {
+        margin-bottom: 0;
+        font-size: 0.9em;
+        color: var(--muted-color);
+    }
+
     .quick-start {
         background-color: #ececec;
         padding: 0.75em;
         border-radius: 6px;
+        margin-top: 0.5em;
 
         @media (prefers-color-scheme: dark) {
             background-color: black;
diff --git a/apps/website/src/pages/GetStarted/get-started.tsx b/apps/website/src/pages/GetStarted/get-started.tsx
index 960e9b003..b43eae1de 100644
--- a/apps/website/src/pages/GetStarted/get-started.tsx
+++ b/apps/website/src/pages/GetStarted/get-started.tsx
@@ -72,6 +72,7 @@ export function DownloadCard({ app, arch, entry: [ platform, entry ] }: { app: A
         </>} className="download-card">
             {unwrapText(entry.description)}
 
+            {entry.quickStartTitle && <p class="quick-start-title">{entry.quickStartTitle}</p>}
             {entry.quickStartCode && (
                 <pre className="quick-start">
                     <code>{entry.quickStartCode}</code>
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index 64be436ad..7533cc749 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -15,7 +15,7 @@
     :root {
         --foreground-color: #fff;
         --background-color: #0a0e14;
-        --muted-color: #cacaca;
+        --muted-color: #c5c5c5;
         --header-background-color: rgba(0, 0, 0, 0.75);
         --card-background-color: #ffffff12;
         --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);