Fixed Learn button continuous loop animation

src/components/Navbar.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useSpring, animated } from "react-spring";
 import { useLocation, Link } from "react-router-dom";
 import {
@@ -197,16 +197,38 @@ function Navbar() {
   const screens = useBreakpoint();
   const location = useLocation();
 
-  const props = useSpring({
-    loop: true,
-    from: { opacity: 0.5, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
-    to: [
-      { opacity: 1, boxShadow: "0px 0px 5px rgba(255, 255, 255, 1)" },
-      { opacity: 0.9, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
-    ],
-    config: { duration: 1000 },
-  });
+  const [props, api] = useSpring(() => ({
+    opacity: 0.9,
+    boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)",
+  }));
+
+  useEffect(() => {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    const pulseIterations = prefersReducedMotion ? 1 : 3;
+    let animationStopped = false;
+
+    const animation = api.start({
+      from: { opacity: 0.5, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)" },
+      to: async (next) => {
+        for (let i = 0; i < pulseIterations; i += 1) {
+          if (animationStopped) {
+            return;
+          }
 
+          await next({ opacity: 1, boxShadow: "0px 0px 5px rgba(255, 255, 255, 1)", config: { duration: 500 } });
+          await next({ opacity: 0.9, boxShadow: "0px 0px 0px rgba(255, 255, 255, 0)", config: { duration: 500 } });
+        }
+      },
+      reset: true,
+    });
+
+    void animation;
+
+    return () => {
+      api.stop();
+      animationStopped = true;
+    };
+  }, [api]);
   const mobileMenu = (
     <Menu>
       <MenuItem to="/">
@@ -323,8 +345,12 @@ function Navbar() {
 
         {!isLearnPage && (
           <div
-            className={`h-10 flex justify-center items-center cursor-pointer rounded-md ${
-              hovered === "join" ? "shadow-[0_0_10px_10px_rgba(255,255,255,0.1)]" : ""
+            className={`h-16 flex items-center justify-center cursor-pointer rounded-md ${
+              screens.md
+                ? "px-5 border-l border-white border-opacity-10 pl-4 pr-4"
+                : "px-2.5 pl-1.5 pr-1.5"
+            } ${
+              hovered === "join" ? "bg-white bg-opacity-10" : "bg-transparent"
             }`}
             onMouseEnter={() => setHovered("join")}
             onMouseLeave={() => setHovered(null)}