From 8474f6c1e57e0ba586f7e1727334ede26c47fc9a Mon Sep 17 00:00:00 2001
From: Rajveer* <rajveer.24bcs10404@sst.scaler.com>
Date: Sun, 29 Jun 2025 22:28:57 +0530
Subject: [PATCH] feat: add hover effects to download buttons for improved UX

---
 components/DownloadButton.vue             |  1 +
 components/LandingPageDownload.client.vue | 18 +++++++++---------
 pages/index.vue                           |  8 ++++----
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/DownloadButton.vue b/components/DownloadButton.vue
index 3ce8cde40..a2e54d3db 100644
--- a/components/DownloadButton.vue
+++ b/components/DownloadButton.vue
@@ -3,6 +3,7 @@
     type="primary"
     size="large"
     style="height: 3.2em"
+    class="transition duration-200 hover:opacity-90 hover:shadow-lg hover:-translate-y-0.5"
   >
     <template #icon>
       <n-icon v-if="showIcon">
diff --git a/components/LandingPageDownload.client.vue b/components/LandingPageDownload.client.vue
index b6459bcd7..1d099a034 100644
--- a/components/LandingPageDownload.client.vue
+++ b/components/LandingPageDownload.client.vue
@@ -48,14 +48,14 @@
         <div class="text-center pt-8 text-sm">
           <span v-if="isWindows()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underlin"
               href="/download/win_zip"
               >Windows Portable</t-nuxtlink
             >
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underlin"
               href="https://github.com/JabRef/jabref/releases/latest"
               >mac OS X and Linux</t-nuxtlink
             >
@@ -63,13 +63,13 @@
           </span>
           <span v-if="isMac()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underline"
               href="/download/mac_arm64_dmg"
               >Apple Silicon Portable (.dmg)</t-nuxtlink
             >
             or
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underline"
               href="/download/mac_x86_64_dmg"
               >macOS Intel Portable (.dmg)</t-nuxtlink
             >
@@ -82,7 +82,7 @@
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underline"
               href="https://github.com/JabRef/jabref/releases/latest"
               >Windows and Linux</t-nuxtlink
             >
@@ -90,14 +90,14 @@
           </span>
           <span v-if="isLinux()">
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underline"
               href="/download/linux_tar_gz"
               >Linux Portable</t-nuxtlink
             >
             <br />
             Also available for
             <t-nuxtlink
-              class="text-primary-500"
+              class="text-primary-500 hover:underline"
               href="https://github.com/JabRef/jabref/releases/latest"
             >
               mac OS X and Windows
@@ -105,14 +105,14 @@
             <br />
           </span>
           <a
-            class="text-primary-500"
+            class="text-primary-500 hover:underline"
             href="https://github.com/JabRef/jabref/blob/main/CHANGELOG.md"
           >
             Change Log
           </a>
           and
           <a
-            class="text-primary-500"
+            class="text-primary-500 hover:underline"
             href="https://builds.jabref.org/main/"
             >Development Builds</a
           >
diff --git a/pages/index.vue b/pages/index.vue
index 0372c7d23..5d44a9306 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -77,27 +77,27 @@
                 <ClientOnly>
                   <a
                     v-if="isWindows()"
-                    class="text-2xl"
+                    class="text-2xl hover:underline"
                     href="/download/win_msi"
                     >Download for Windows</a
                   >
                   <a
                     v-if="isLinux()"
-                    class="text-2xl"
+                    class="text-2xl hover:underline"
                     href="/download/linux_deb"
                     >Download for Linux (Ubuntu, Debian)</a
                   >
                   <a
                     v-if="isMac()"
                     class="text-2xl"
-                    href="/download/mac_arm64_pkg"
+                    href="/download/mac_arm64_pkg hover:underline"
                     >Download for macOS (Apple Silicon)</a
                   >
                 </ClientOnly>
               </n-button>
               <div class="text-center pt-4 text-sm">
                 <a
-                  class="text-primary-500 text-sm"
+                  class="text-primary-500 text-sm hover:underline"
                   href="/#download"
                   >Or see all download options</a
                 >