From 8416dab8705465b73b846fece27521eaaed5feb8 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 27 Sep 2025 14:27:31 +0300
Subject: [PATCH] feat(website): improve hero download buttons on mobile

---
 apps/website/src/components/DownloadButton.css |  6 +-----
 apps/website/src/components/DownloadButton.tsx |  2 +-
 apps/website/src/pages/Home/index.css          | 11 ++++++++---
 apps/website/src/pages/Home/index.tsx          |  3 ++-
 apps/website/src/style.css                     |  9 ++++++++-
 5 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/apps/website/src/components/DownloadButton.css b/apps/website/src/components/DownloadButton.css
index 864088dc6..dca728f39 100644
--- a/apps/website/src/components/DownloadButton.css
+++ b/apps/website/src/components/DownloadButton.css
@@ -1,7 +1,3 @@
-.download-button {
-    display: none;
-}
-
 .download-button .platform {
     font-size: 0.75em;
     opacity: 0.75;
@@ -14,6 +10,6 @@
 
 @media (min-width: 720px) {
     .download-button {
-        display: inline-block;
+        display: inline-block !important;
     }
 }
\ No newline at end of file
diff --git a/apps/website/src/components/DownloadButton.tsx b/apps/website/src/components/DownloadButton.tsx
index 18e150026..c5b1d4d6a 100644
--- a/apps/website/src/components/DownloadButton.tsx
+++ b/apps/website/src/components/DownloadButton.tsx
@@ -12,7 +12,7 @@ const { name, url } = getRecommendedDownload();
 export default function DownloadButton({ big }: DownloadButtonProps) {
     return (
         <Button
-           className={`download-button ${big ? "big" : ""}`}
+           className={`download-button desktop-only ${big ? "big" : ""}`}
            href={url}
            iconSvg={downloadIcon}
            text={<>
diff --git a/apps/website/src/pages/Home/index.css b/apps/website/src/pages/Home/index.css
index baf5c511b..524ad15cf 100644
--- a/apps/website/src/pages/Home/index.css
+++ b/apps/website/src/pages/Home/index.css
@@ -79,9 +79,10 @@ section.hero-section .screenshot {
     margin-bottom: 0;
 }
 
-section.hero-section .download-wrapper {
-    display: inline-flex;
+section.hero-section .download-wrapper {    
+    display: flex;
     flex-direction: column;
+    align-content: center;
 }
 
 section.hero-section .download-button {
@@ -118,7 +119,7 @@ section.hero-section .additional-options a {
 
     section.hero-section .title-section {
         max-width: 90%;
-    }
+    }    
 
     section.hero-section .screenshot {
         margin-top: 2em;
@@ -130,6 +131,10 @@ section.hero-section .additional-options a {
         flex-direction: row;
         padding: 3em;
     }
+
+    section.hero-section .download-wrapper {
+        display: inline-flex;
+    }
 }
 
 section:nth-of-type(2n+1) {
diff --git a/apps/website/src/pages/Home/index.tsx b/apps/website/src/pages/Home/index.tsx
index 565d2c446..80957bbbb 100644
--- a/apps/website/src/pages/Home/index.tsx
+++ b/apps/website/src/pages/Home/index.tsx
@@ -31,7 +31,8 @@ function HeroSection() {
 
                 <div className="download-wrapper">
                     <DownloadButton big />
-                    <a class="more-download-options" href="./download">See all download options</a>
+                    <a class="more-download-options desktop-only" href="./download">See all download options</a>
+                    <Button href="./download" className="mobile-only" text="See download options" />
                     <div className="additional-options">
                         <Button iconSvg={gitHubIcon} outline text="GitHub" href="https://github.com/TriliumNext/Trilium/" openExternally />
                         <Button iconSvg={dockerIcon} outline text="Docker Hub" href="https://hub.docker.com/r/triliumnext/trilium" openExternally />
diff --git a/apps/website/src/style.css b/apps/website/src/style.css
index 5e4e15970..f22b6b667 100644
--- a/apps/website/src/style.css
+++ b/apps/website/src/style.css
@@ -112,12 +112,15 @@ img {
     fill: currentColor;
 }
 
-
 @media (max-width: 719px) {
     .grid-3-cols > *,
     .grid-2-cols > * {
         margin-bottom: 1em;
     }
+
+    .desktop-only {
+        display: none !important;
+    }
 }
 
 @media (min-width: 720px) {
@@ -140,4 +143,8 @@ img {
         grid-template-columns: 1fr 1fr;
         gap: 1em;
     }
+
+    .mobile-only {
+        display: none !important;
+    }
 }
\ No newline at end of file