feat(website/download): section for paid hosting

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

@@ -40,7 +40,7 @@ export const downloadMatrix: DownloadMatrix = {
             downloads: {
                 exe: {
                     recommended: true,
-                    name: "Installer (.exe)"
+                    name: "Download Installer (.exe)"
                 },
                 zip: {
                     name: "Portable (.zip)"
@@ -59,7 +59,7 @@ export const downloadMatrix: DownloadMatrix = {
             downloads: {
                 deb: {
                     recommended: true,
-                    name: ".deb"
+                    name: "Download .deb"
                 },
                 rpm: {
                     name: ".rpm"
@@ -84,7 +84,7 @@ export const downloadMatrix: DownloadMatrix = {
             downloads: {
                 dmg: {
                     recommended: true,
-                    name: "Installer (.dmg)"
+                    name: "Download Installer (.dmg)"
                 },
                 zip: {
                     name: "Portable (.zip)"
@@ -108,6 +108,19 @@ export const downloadMatrix: DownloadMatrix = {
                     name: "ARM (.tar.xz)"
                 },
             }
+        },
+        pikapod: {
+            title: "Paid hosting",
+            description: "Trilium Notes hosted on PikaPods, a paid service for easy access and management.",
+            downloads: {
+                pikapod: {
+                    recommended: true,
+                    name: "Set up on PikaPods"
+                },
+                triliumcc: {
+                    name: "Alternatively see trilium.cc"
+                }
+            }
         }
     }
 };

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

@@ -38,14 +38,14 @@
         </div>
     </section>
 
-    <section class="max-w-6xl mx-auto px-4 mt-10">
+    <section class="max-w-4xl mx-auto px-4 mt-10">
         <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">Set up a server for access on multiple devices</h2>
 
-        <div class="grid md:grid-cols-3 gap-10">
+        <div class="grid md:grid-cols-2 gap-10">
             {#each Object.entries(downloadMatrix.server) as [platformId, platform]}
-                {@const textColor = "text-violet-600"}
-                {@const bgColor = "bg-violet-600"}
-                {@const hoverColor = "hover:bg-violet-700"}
+                {@const textColor = (platformId === "linux" ? "text-violet-600" : "text-gray-800")}
+                {@const bgColor = (platformId === "linux" ? "bg-violet-600" : "bg-gray-800")}
+                {@const hoverColor = (platformId === "linux" ? "hover:bg-violet-700" : "hover:bg-gray-900")}
                 <DownloadCard 
                     {textColor} {bgColor} {hoverColor}
                     {platform} {architecture} platformId={platformId as Platform} />

apps/website/src/routes/download/download-card.svelte

@@ -16,7 +16,7 @@
     <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}
+                {recommended[1].name}
             </a>
         {/if}
         <div class="flex justify-center gap-4 text-sm {textColor} mt-2">