From 1a0b4145cbf8d88543fec4a9283e249a4a4ec913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Lozano?= <sebastianl2.dev@gmail.com>
Date: Thu, 23 Jan 2025 16:07:18 -0500
Subject: [PATCH 1/2] feat: improve HTML semantics and buttons animation

---
 src/components/Button.astro |  17 +++-
 src/components/Footer.astro | 172 ++++++++++++++++++++----------------
 src/components/Hero.astro   |   4 +-
 src/components/NavBar.astro |  49 +++++-----
 src/pages/about.astro       |   4 +-
 src/pages/donate.astro      |   4 +-
 src/pages/download.astro    |  78 ++++++++--------
 7 files changed, 182 insertions(+), 146 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index 8fc241d0..c9f974f5 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,4 +1,7 @@
 ---
+import { motion } from 'motion/react'
+import { getTitleAnimation } from '../animations'
+
 const {
   class: className,
   isPrimary,
@@ -12,7 +15,10 @@ const {
 
 {
   href ? (
-    <a
+    <motion.a
+      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+      client:load
+      {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       href={href}
@@ -29,9 +35,12 @@ const {
       ]}
     >
       <slot />
-    </a>
+    </motion.a>
   ) : (
-    <button
+    <motion.button
+      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+      client:load
+      {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       class:list={[
@@ -47,7 +56,7 @@ const {
       ]}
     >
       <slot />
-    </button>
+    </motion.button>
   )
 }
 <style>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 7e54a4dd..1d15e36f 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -45,99 +45,121 @@ const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
     <div class="flex flex-col gap-10">
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold"> Follow Us </Description>
-        <div class="flex items-center gap-4 opacity-80">
-          <a
-            href="https://github.com/zen-browser"
-            target="_blank"
-            class="font-bold"
-            aria-label="Visit Zen Browser on GitHub"
-          >
-            <Fragment set:html={Github.html} />
-          </a>
-          <a
-            href="https://twitter.com/zen_browser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Twitter"
-          >
-            <Fragment set:html={Twitter.html} />
-          </a>
-          <a
-            href="https://fosstodon.org/@zenbrowser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Mastodon"
-          >
-            <Fragment set:html={Mastodon.html} />
-          </a>
-          <a
-            href="https://bsky.app/profile/zen-browser.app"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Bluesky"
-          >
-            <Fragment set:html={Bluesky.html} />
-          </a>
-          <a
-            href="https://www.reddit.com/r/zen_browser"
-            target="_blank"
-            class="font-normal"
-            aria-label="Visit Zen Browser on Reddit"
-          >
-            <Fragment set:html={Reddit.html} />
-          </a>
-        </div>
+        <ul class="flex items-center gap-4 opacity-80">
+          <li>
+            <a
+              href="https://github.com/zen-browser"
+              target="_blank"
+              class="font-bold"
+              aria-label="Visit Zen Browser on GitHub"
+            >
+              <Fragment set:html={Github.html} />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://twitter.com/zen_browser"
+              target="_blank"
+              class="font-normal"
+              aria-label="Visit Zen Browser on Twitter"
+            >
+              <Fragment set:html={Twitter.html} />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://fosstodon.org/@zenbrowser"
+              target="_blank"
+              class="font-normal"
+              aria-label="Visit Zen Browser on Mastodon"
+            >
+              <Fragment set:html={Mastodon.html} />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://bsky.app/profile/zen-browser.app"
+              target="_blank"
+              class="font-normal"
+              aria-label="Visit Zen Browser on Bluesky"
+            >
+              <Fragment set:html={Bluesky.html} />
+            </a>
+          </li>
+          <li>
+            <a
+              href="https://www.reddit.com/r/zen_browser"
+              target="_blank"
+              class="font-normal"
+              aria-label="Visit Zen Browser on Reddit"
+            >
+              <Fragment set:html={Reddit.html} />
+            </a>
+          </li>
+        </ul>
       </div>
       <div class="flex flex-col gap-2">
         <Description class="!font-semibold"> About Us </Description>
-        <div class="flex flex-col opacity-80">
-          <a href="/about" class="font-normal">About Us</a>
-          <a href="/privacy-policy" class="font-normal">Privacy Policy</a>
-        </div>
+        <ul class="flex flex-col opacity-80">
+          <li><a href="/about" class="font-normal">About Us</a></li>
+          <li>
+            <a href="/privacy-policy" class="font-normal">Privacy Policy</a>
+          </li>
+        </ul>
       </div>
     </div>
     <div class="flex flex-col gap-2">
       <Description class="!font-semibold"> Get Started </Description>
-      <div class="flex flex-col opacity-80">
-        <a href="/download" class="font-normal">Download</a>
-        <a href="/mods" class="font-normal">Zen Mods</a>
-        <a href="/release-notes" class="font-normal">Release Notes</a>
-        <a href="/download?twilight" class="font-normal">Twilight</a>
-      </div>
+      <ul class="flex flex-col opacity-80">
+        <li><a href="/download" class="font-normal">Download</a></li>
+        <li><a href="/mods" class="font-normal">Zen Mods</a></li>
+        <li><a href="/release-notes" class="font-normal">Release Notes</a></li>
+        <li><a href="/download?twilight" class="font-normal">Twilight</a></li>
+      </ul>
     </div>
     <div class="flex flex-col gap-2">
       <Description class="!font-semibold"> Get Help </Description>
-      <div class="flex flex-col opacity-80">
-        <a href="https://discord.gg/zen-browser" class="font-normal">Discord</a>
-        <div class="flex items-center">
-          <div class="absolute">
-            <img
-              src="https://uptime.zen-browser.app/embed-badges/pulse?"
-              loading="lazy"
-              alt="Phare badge"
-              class="relative right-5 h-5 w-5 lg:right-6"
-            />
+      <ul class="flex flex-col opacity-80">
+        <li>
+          <a href="https://discord.gg/zen-browser" class="font-normal"
+            >Discord</a
+          >
+        </li>
+        <li>
+          <div class="flex items-center">
+            <div class="absolute">
+              <img
+                src="https://uptime.zen-browser.app/embed-badges/pulse?"
+                loading="lazy"
+                alt="Phare badge"
+                class="relative right-5 h-5 w-5 lg:right-6"
+              />
+            </div>
+            <a href="https://uptime.zen-browser.app/" class="font-normal"
+              >Uptime Status</a
+            >
           </div>
-          <a href="https://uptime.zen-browser.app/" class="font-normal"
-            >Uptime Status</a
+        </li>
+        <li>
+          <a
+            href="https://github.com/zen-browser/desktop/issues/new/choose"
+            class="font-normal">Report an Issue</a
           >
-        </div>
-        <a
-          href="https://github.com/zen-browser/desktop/issues/new/choose"
-          class="font-normal">Report an Issue</a
-        >
-        <a href="mailto:hello@zen-browser.app" class="font-normal"
-          >hello@zen-browser.app</a
-        >
-      </div>
+        </li>
+        <li>
+          <a href="mailto:hello@zen-browser.app" class="font-normal"
+            >hello@zen-browser.app</a
+          >
+        </li>
+      </ul>
     </div>
   </div>
   <div class="flex h-32 w-full items-center">
-    <div class="flex">
+    <span class="flex">
       Made with ❤️ by the <a href="/about" class="ml-2 inline-block font-bold"
         >Zen Browser Team</a
       >
-    </div>
+    </span>
     <Circles
       white
       multiplier={0.7}
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 951947d9..00126ded 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -27,11 +27,11 @@ function getHeroTitleAnimation() {
   <div class="flex h-full flex-col items-center justify-center">
     <motion.a
       href="/download"
-      className="transition-bg mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-0 py-1 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+      className="transition-bg mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(1.8)}
     >
-      <div>Beta is now available!</div>
+      <span>Beta is now available!</span>
       <ArrowRight class="size-4" />
     </motion.a>
     <Title
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index d937a933..f3e88234 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -39,10 +39,15 @@ import { ThemeSwitch } from 'free-astro-components'
             <div
               class="navbar-dropdown left-0 right-1/4 top-16 w-full lg:w-fit"
             >
-              <a class="dropdown-item bg-dark/5 row-span-2" href="/mods">
-                <div class="dropdown-title">Zen Mods</div>
-                <div class="dropdown-description">
-                  Customize your browsing experience with Zen Mods.
+              <a
+                class="dropdown-item bg-dark/5 row-span-2 justify-between"
+                href="/mods"
+              >
+                <div class="flex flex-col gap-1">
+                  <span class="dropdown-title">Zen Mods</span>
+                  <p class="dropdown-description">
+                    Customize your browsing experience with Zen Mods.
+                  </p>
                 </div>
                 <Button isPrimary class="mt-auto">
                   Try Zen Mods
@@ -50,16 +55,16 @@ import { ThemeSwitch } from 'free-astro-components'
                 </Button>
               </a>
               <a class="dropdown-item" href="/release-notes">
-                <div class="dropdown-title">Release Notes</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">Release Notes</span>
+                <p class="dropdown-description">
                   Stay up to date with the latest features and improvements.
-                </div>
+                </p>
               </a>
               <a class="dropdown-item" href="https://discord.gg/zen-browser">
-                <div class="dropdown-title">Discord</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">Discord</span>
+                <p class="dropdown-description">
                   Join our community on Discord to chat with other Zen users!
-                </div>
+                </p>
               </a>
             </div>
           </DropdownItems>
@@ -76,32 +81,32 @@ import { ThemeSwitch } from 'free-astro-components'
               class="navbar-dropdown left-0 top-16 w-full !grid-cols-1 gap-1 lg:left-1/3 lg:right-1/4 lg:w-fit"
             >
               <a class="dropdown-item" href="/donate">
-                <div class="dropdown-title">Donate ❤️</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">Donate ❤️</span>
+                <p class="dropdown-description">
                   Support the development of Zen Browser with a donation.
-                </div>
+                </p>
               </a>
               <a class="dropdown-item" href="/about">
-                <div class="dropdown-title">About Us 🌟</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">About Us 🌟</span>
+                <p class="dropdown-description">
                   Learn more about the team behind Zen Browser.
-                </div>
+                </p>
               </a>
               <a class="dropdown-item" href="https://docs.zen-browser.app">
-                <div class="dropdown-title">Documentation</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">Documentation</span>
+                <p class="dropdown-description">
                   Learn how to use Zen Browser with our documentation.
-                </div>
+                </p>
               </a>
               <a
                 class="dropdown-item"
                 href="https://github.com/zen-browser"
                 target="_blank"
               >
-                <div class="dropdown-title">GitHub</div>
-                <div class="dropdown-description">
+                <span class="dropdown-title">GitHub</span>
+                <p class="dropdown-description">
                   Contribute to the development of Zen Browser on GitHub.
-                </div>
+                </p>
               </a>
             </div>
           </DropdownItems>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 400e8815..a222f2fc 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -25,7 +25,7 @@ import Layout from '../layouts/Layout.astro'
       class="relative flex w-full flex-col items-center justify-center lg:flex-row"
     >
       <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
-        <div class="text-4xl font-bold lg:text-6xl">Main Team</div>
+        <span class="text-4xl font-bold lg:text-6xl">Main Team</span>
         <Description>
           This list shows the main team members who are working hard to bring
           you the best browsing experience.
@@ -112,7 +112,7 @@ import Layout from '../layouts/Layout.astro'
       <div class="absolute hidden h-full w-[1px] bg-dark opacity-15 lg:block">
       </div>
       <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
-        <div class="text-4xl font-bold lg:text-6xl">Contributors</div>
+        <span class="text-4xl font-bold lg:text-6xl">Contributors</span>
         <Description>
           Here are all the wonderful people that decided to contribute to the
           project! The first set of images are from the desktop repository, and
diff --git a/src/pages/donate.astro b/src/pages/donate.astro
index 4bd1ed8b..664fc365 100644
--- a/src/pages/donate.astro
+++ b/src/pages/donate.astro
@@ -20,7 +20,7 @@ import Layout from '../layouts/Layout.astro'
       class="relative flex w-full flex-col items-center justify-center lg:flex-row"
     >
       <div class="flex flex-col p-8 lg:w-1/3 lg:pr-24">
-        <div class="text-6xl font-bold">Patreon</div>
+        <span class="text-6xl font-bold">Patreon</span>
         <Description>
           Patreon allows you to support us with a monthly donation. You can
           choose the level of support that works best for you.
@@ -38,7 +38,7 @@ import Layout from '../layouts/Layout.astro'
       </div>
       <div class="hidden h-72 w-[1px] bg-dark opacity-15 lg:block"></div>
       <div class="flex flex-col p-8 lg:w-1/3 lg:pl-24">
-        <div class="text-6xl font-bold">Ko-fi</div>
+        <span class="text-6xl font-bold">Ko-fi</span>
         <Description>
           Ko-fi allows you to support us with a one-time donation. You can
           choose the amount that works best for you. Monthly donations are also
diff --git a/src/pages/download.astro b/src/pages/download.astro
index f1cace26..90dee965 100644
--- a/src/pages/download.astro
+++ b/src/pages/download.astro
@@ -41,13 +41,13 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
         </div>
         <div id="download-form">
           <div id="form-os-select" class="form-item">
-            <div class="form-title">
+            <span class="form-title">
               Before downloading, we need to know your system info!
-            </div>
-            <div class="form-description">
+            </span>
+            <p class="form-description">
               Please select your operating system below, we already
               auto-detected it for you!
-            </div>
+            </p>
             <form class="form-select flex flex-col gap-2" id="os-select">
               <input
                 type="radio"
@@ -61,7 +61,7 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 for="os-select-windows"
               >
                 <Fragment set:html={windowsIcon.html} />
-                <div>Windows</div>
+                <span>Windows</span>
               </label>
               <input
                 type="radio"
@@ -75,7 +75,7 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 for="os-select-linux"
               >
                 <Fragment set:html={linuxIcon.html} />
-                <div>Linux</div>
+                <span>Linux</span>
               </label>
               <input
                 type="radio"
@@ -89,39 +89,39 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 for="os-select-macos"
               >
                 <Fragment set:html={appleIcon.html} />
-                <div>MacOS</div>
+                <span>MacOS</span>
               </label>
             </form>
           </div>
           <div id="form-macos-download" class="form-item hidden">
-            <div class="form-title">Download Zen for MacOS!</div>
-            <div class="form-description">
+            <span class="form-title">Download Zen for MacOS!</span>
+            <p class="form-description">
               You can choose between the Intel or ARM version of Zen Browser,
               select the one that fits your system.
-            </div>
+            </p>
             <div class="form-select flex flex-col gap-4">
-              <div
+              <span
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="macos-arm-download"
               >
                 Download ARM Version
                 <HardDriveDownload class="size-4" />
-              </div>
-              <div
+              </span>
+              <span
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="macos-intel-download"
               >
                 Download Intel Version
                 <HardDriveDownload class="size-4" />
-              </div>
+              </span>
             </div>
           </div>
           <div id="linux-target-download" class="form-item hidden">
-            <div class="form-title">Choose your Linux target system</div>
-            <div class="form-description">
+            <span class="form-title">Choose your Linux target system</span>
+            <p class="form-description">
               We have a few options for Linux, please select the one that fits
               your system.
-            </div>
+            </p>
             <form class="form-select flex flex-col gap-2">
               <input
                 type="radio"
@@ -135,7 +135,7 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 class="flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-dark p-2 px-4"
                 for="linux-target-x86_64"
               >
-                <div>x86_64</div>
+                <span>x86_64</span>
               </label>
               <input
                 type="radio"
@@ -148,46 +148,46 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 class="flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-dark p-2 px-4"
                 for="linux-target-aarch64"
               >
-                <div>aarch64</div>
+                <span>aarch64</span>
               </label>
             </form>
           </div>
           <div id="form-linux-download" class="form-item hidden">
-            <div class="form-title">Download Zen for Linux!</div>
-            <div class="form-description">
+            <span class="form-title">Download Zen for Linux!</span>
+            <p class="form-description">
               You can choose between different download formats for Linux,
               select the one that fits you best.
-            </div>
+            </p>
             <div class="form-select flex flex-col gap-4">
-              <div
+              <span
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="linux-tar-download"
               >
                 Download Tarball
                 <HardDriveDownload class="size-4" />
-              </div>
-              <div
+              </span>
+              <span
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="linux-appimage-download"
               >
                 Download AppImage
                 <HardDriveDownload class="size-4" />
-              </div>
-              <div
+              </span>
+              <span
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="linux-flathub-download"
               >
                 Download from Flathub
                 <HardDriveDownload class="size-4" />
-              </div>
+              </span>
             </div>
           </div>
           <div id="windows-target-download" class="form-item hidden">
-            <div class="form-title">Choose your Windows target system</div>
-            <div class="form-description">
+            <span class="form-title">Choose your Windows target system</span>
+            <p class="form-description">
               We have a few options for Windows, please select the one that fits
               your system.
-            </div>
+            </p>
             <form class="form-select flex flex-col gap-2">
               <input
                 type="radio"
@@ -201,7 +201,7 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 class="flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-dark p-2 px-4"
                 for="windows-target-x86_64"
               >
-                <div>x86_64</div>
+                <span>x86_64</span>
               </label>
               <input
                 type="radio"
@@ -214,26 +214,26 @@ const appleIcon = icon({ prefix: 'fab', iconName: 'apple' })
                 class="flex w-full cursor-pointer items-center gap-2 rounded-md border-2 border-dark p-2 px-4"
                 for="windows-target-arm64"
               >
-                <div>ARM64</div>
+                <span>ARM64</span>
               </label>
             </form>
           </div>
           <div id="windows-download" class="form-item hidden">
-            <div class="form-title">Download Zen for Windows!</div>
-            <div class="form-description">
+            <span class="form-title">Download Zen for Windows!</span>
+            <p class="form-description">
               You can choose between different download formats for Windows,
               select the one that fits you best.
-            </div>
+            </p>
             <div class="form-select flex flex-col gap-4">
-              <div
+              <button
                 class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="windows-installer-download"
               >
                 Download Installer
                 <HardDriveDownload class="size-4" />
-              </div>
+              </button>
               <div
-                class="flex cursor-not-allowed cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark opacity-50 shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
+                class="flex cursor-pointer items-center justify-between rounded-md border-2 border-dark p-2 px-4 text-dark opacity-50 shadow-sm transition-all duration-100 hover:bg-dark hover:text-paper"
                 id="windows-zip-download"
               >
                 Download Zip

From 78fbbfa52bf05f89d421a3754908be9f15d2efe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebasti=C3=A1n=20Lozano?= <sebastianl2.dev@gmail.com>
Date: Mon, 27 Jan 2025 13:58:22 -0500
Subject: [PATCH 2/2] fix: improve buttons animations

---
 src/components/Button.astro | 19 +++++++++----------
 src/components/Hero.astro   |  2 +-
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index c9f974f5..e16111d4 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -1,5 +1,4 @@
 ---
-import { motion } from 'motion/react'
 import { getTitleAnimation } from '../animations'
 
 const {
@@ -15,15 +14,15 @@ const {
 
 {
   href ? (
-    <motion.a
-      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+    <a
+      className="transition-all h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       href={href}
       class:list={[
-        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-all duration-200',
         className,
         isPrimary
           ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
@@ -35,19 +34,19 @@ const {
       ]}
     >
       <slot />
-    </motion.a>
+    </a>
   ) : (
-    <motion.button
-      className="transition-bg h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+    <button
+      className="transition-all h-fit flex items-center justify-center gap-2 rounded-full border-2 border-dark bg-dark p-2 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(0.2)}
       id={id}
       {...extra}
       class:list={[
-        'flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-transform duration-200',
+        'transition-bg flex items-center justify-center gap-2 rounded-full px-6 py-2 transition-all duration-200',
         className,
         isPrimary
-          ? 'bg-dark text-paper'
+          ? 'border-2 border-dark bg-dark text-paper hover:bg-paper hover:text-dark'
           : isAlert
             ? 'bg-red-300 text-dark'
             : !isBordered
@@ -56,7 +55,7 @@ const {
       ]}
     >
       <slot />
-    </motion.button>
+    </button>
   )
 }
 <style>
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index 00126ded..603c9bb7 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -27,7 +27,7 @@ function getHeroTitleAnimation() {
   <div class="flex h-full flex-col items-center justify-center">
     <motion.a
       href="/download"
-      className="transition-bg mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
+      className="mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm transition-all duration-200 ease-in-out hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
       client:load
       {...getTitleAnimation(1.8)}
     >