feat(website/download): reorganize desktop downloads

apps/website/src/lib/download-helper.ts

@@ -10,10 +10,12 @@ export function buildDesktopDownloadUrl(platform: Platform, format: string, arch
     return `https://github.com/TriliumNext/Notes/releases/download/${version}/TriliumNextNotes-${version}-${platform}-${architecture}.${format}`;
 }
 
+// Keep compatibility info inline with https://github.com/electron/electron/blob/main/README.md#platform-support.
 export const downloadMatrix = {
     desktop: {
         windows: {
             title: "Windows",
+            description: "Compatible with Windows 10 and 11.",
             downloads: {
                 exe: {
                     recommended: true,
@@ -26,15 +28,17 @@ export const downloadMatrix = {
         },
         linux: {
             title: "Linux",
+            description: "Runs on most major distributions.",
             downloads: {
                 deb: {
-                    name: "Debian/Ubuntu (.deb)"
+                    recommended: true,
+                    name: ".deb"
                 },
                 rpm: {
-                    name: "Red Hat-based distributions (.rpm)"
+                    name: ".rpm"
                 },
                 flatpak: {
-                    name: "Flatpak (.flatpak)"
+                    name: ".flatpak"
                 },
                 zip: {
                     name: "Portable (.zip)"
@@ -43,6 +47,7 @@ export const downloadMatrix = {
         },
         macos: {
             title: "macOS",
+            description: "Works on macOS Big Sur and up.",
             downloads: {
                 dmg: {
                     recommended: true,

apps/website/src/routes/+layout.svelte

@@ -8,3 +8,7 @@
 <Header />
 
 {@render children()}
+
+<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
+    &copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/>    &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
+</footer>

apps/website/src/routes/+page.svelte

@@ -142,8 +142,4 @@
             </a>
         </div>
     </div>
-</section>
+</section>
-
-<footer class="container mx-auto bg-white mt-2 py-6 text-sm text-center text-gray-500">
-    &copy; 2024-2025 <a href="https://github.com/eliandoran" class="text-blue-500 hover:underline">Elian Doran</a> and the <a href="https://github.com/TriliumNext/Notes/graphs/contributors" class="text-blue-500 hover:underline">team</a>. <br/>    &copy; 2017-2024 <a href="https://github.com/zadam" class="text-blue-500 hover:underline">Adam Zivner</a>.
-</footer>

apps/website/src/routes/download/+page.svelte

@@ -6,81 +6,88 @@
     let architecture = getArchitecture();
 </script>
 
-<section class="mt-20 max-w-6xl mx-auto px-4">
+<div class="bg-gray-50 py-20">
-    <h2 class="text-3xl font-bold text-center mb-12">Desktop application</h2>
+    <section class="max-w-6xl mx-auto px-4">
-
+        <h2 class="text-4xl font-bold text-center text-gray-900 mb-12">Download the desktop application</h2>
-    <!-- Architecture pill selector -->
+    
-    <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
+        <!-- Architecture pill selector -->
-        <span class="text-gray-600 font-medium mr-2">Architecture:</span>
+        <div class="col-span-3 flex justify-center items-center gap-3 mb-6">
-        <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
+            <span class="text-gray-600 font-medium mr-2">Architecture:</span>
-            {#each architectures as arch}            
+            <div class="inline-flex bg-violet-100 rounded-full shadow p-1">
-                <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
+                {#each architectures as arch}            
-                    text-violet-700 border-violet-700
+                    <button class="py-2 px-6 rounded-full font-semibold focus:outline-none transition
-                    aria-pressed:bg-violet-700 aria-pressed:text-violet-100
+                        text-violet-700 border-violet-700
-                    " aria-pressed={architecture === arch} on:click={() => architecture = arch}>
+                        aria-pressed:bg-violet-700 aria-pressed:text-violet-100
-                    {arch}
+                        " aria-pressed={architecture === arch} on:click={() => architecture = arch}>
-                </button>
+                        {arch}
+                    </button>
+                {/each}
+            </div>
+        </div>
+    
+        <div class="grid md:grid-cols-3 gap-10">
+            {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
+            {@const recommended = Object.entries(platform.downloads).find((e) => e[1].recommended)}
+            {@const textColor = (platformId === "windows" ? "text-blue-600" : platformId === "linux" ? "text-violet-600" : "text-gray-800")}
+            {@const bgColor = (platformId === "windows" ? "bg-blue-600" : platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
+            {@const hoverColor = (platformId === "windows" ? "hover:bg-blue-700" : platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
+            
+            <div class="bg-white border border-gray-200 rounded-2xl shadow-lg p-8 flex flex-col items-start">
+                <h3 class="text-2xl font-semibold {textColor} mb-2">{platform.title} ({architecture})</h3>
+                <p class="text-gray-700 mb-12">{platform.description}</p>                
+                <div class="space-y-2 mt-auto w-full">
+                    {#if recommended}
+                        <a href={buildDesktopDownloadUrl(platformId as Platform, recommended[0], architecture)} class="mt-auto block text-center {bgColor} {hoverColor} text-white font-medium py-2 px-5 rounded-full shadow transition">
+                            Download {recommended[1].name}
+                        </a>
+                    {/if}
+                    <div class="flex justify-center gap-4 text-sm {textColor} mt-2">
+                        {#each Object.entries(platform.downloads).filter((e) => !e[1].recommended) as [format, download]}
+                            <a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class="hover:underline block">
+                                {download.name}
+                            </a>
+                        {/each}
+                    </div>
+                </div>
+            </div>
             {/each}
         </div>
-    </div>
+    </section>
 
-    <div class="grid md:grid-cols-3 gap-10">
+    <section class="mt-20 max-w-5xl mx-auto px-4">
-        {#each Object.entries(downloadMatrix.desktop) as [platformId, platform]}
+        <h2 class="text-3xl font-bold text-center mb-12">Server</h2>
-        <div class="bg-white rounded-xl shadow overflow-hidden">
+        <div class="grid md:grid-cols-2 gap-10 justify-center">
-            <div class="p-6">
+            <div class="bg-white rounded-xl shadow overflow-hidden">
-                <h3 class="text-xl font-semibold mb-2">{platform.title} ({architecture})</h3>
+                <div class="p-6">
-                <div class="flex flex-wrap gap-y-2">
+                    <h3 class="text-xl font-semibold mb-2">Docker (recommended)</h3>
-                    {#each Object.entries(platform.downloads) as [format, download]}                    
+                    <div class="flex flex-wrap gap-2">
-                        <a href={buildDesktopDownloadUrl(platformId as Platform, format, architecture)} class={
+                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                            download.recommended
+                            DockerHub
-                            ? "py-2 px-5 bg-violet-600 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75 grow"
-                            : "py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow"
-                            }>
-                            {download.name}
-                            {#if download.recommended}
-                            <span class="text-sm text-gray-300 ml-2">Recommended</span>
-                            {/if}
                         </a>
-                    {/each}
+
+                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="https://github.com/TriliumNext/Notes/pkgs/container/notes">
+                            ghcr.io
+                        </a>                    
+                    </div>
+
+                    <a href="#" class="block mt-4">See documentation</a>
+                </div>            
+            </div>
+
+            <div class="bg-white rounded-xl shadow overflow-hidden">
+                <div class="p-6">
+                    <h3 class="text-xl font-semibold mb-2">Linux</h3>
+                    <div class="flex flex-wrap gap-y-2">
+                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
+                            Portable for x86 devices (.tar.xz)
+                        </a>
+                        <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
+                            Portable for ARM devices (.tar.xz)
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>
-        {/each}
+    </section>
-    </div>
-</section>
 
-<section class="mt-20 max-w-5xl mx-auto px-4">
+</div>
-    <h2 class="text-3xl font-bold text-center mb-12">Server</h2>
-    <div class="grid md:grid-cols-2 gap-10 justify-center">
-        <div class="bg-white rounded-xl shadow overflow-hidden">
-            <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">Docker (recommended)</h3>
-                <div class="flex flex-wrap gap-2">
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        DockerHub
-                    </a>
-
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="https://github.com/TriliumNext/Notes/pkgs/container/notes">
-                        ghcr.io
-                    </a>                    
-                </div>
-
-                <a href="#" class="block mt-4">See documentation</a>
-            </div>            
-        </div>
-
-        <div class="bg-white rounded-xl shadow overflow-hidden">
-            <div class="p-6">
-                <h3 class="text-xl font-semibold mb-2">Linux</h3>
-                <div class="flex flex-wrap gap-y-2">
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Portable for x86 devices (.tar.xz)
-                    </a>
-                    <a class="py-2 px-5 border-1 border-gray-500 text-gray-500 font-semibold rounded-full shadow-md grow" href="#">
-                        Portable for ARM devices (.tar.xz)
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>

apps/website/src/routes/header.svelte

@@ -2,7 +2,7 @@
     import DownloadNow from "./download-now.svelte";
 
 </script>
-<header class="header bg-white sticky top-0 z-50">
+<header class="header bg-white sticky top-0 z-50 shadow">
     <div class="container mx-auto flex items-center py-5">
         <a href="/" class="flex items-center gap-x-2 w-100">
             <img src="icon-color.svg" alt="Trilium Notes Logo" class="w-10 h-10">
@@ -12,10 +12,9 @@
         <div class="group w-full">
             <nav class="header-nav">
                 <ul class="flex items-center justify-end gap-4">
-                    <li><a href="/">Home</a></li>
+                    <li><a href="/">User Guide</a></li>
-                    <li><a href="/about">About</a></li>
+                    <li><a href="/">Technical Guide</a></li>
-                    <li><a href="/services">Services</a></li>
+                    <li><a href="/" class="text-violet-500">Support us</a></li>
-                    <li><a href="/contact">Contact</a></li>
                     <li><DownloadNow /></li>
                 </ul>                
             </nav>