Disable Scrolling Links

components/card.tsx

@@ -11,6 +11,7 @@ interface CardProps {
 export const Card = ({ link, imageUrl, title, description }: CardProps) => (
   <Link
     href={link}
+    scroll={false}
     className="w-full sm:max-w-[300px] h-[156px] xs:h-[168px] sm:h-[200px] flex flex-col justify-start items-start gap-3 sm:gap-4 p-4 sm:p-6 rounded-xl dark:hover:bg-zinc-600/5 border border-gray-200 dark:border-opacity-15 dark:hover:border-opacity-30 hover:shadow-card outline-none transition-all duration-300"
   >
     <Image

components/footer.tsx

@@ -26,6 +26,7 @@ const Links = ({ title, links }: LinksProps) => (
         <li key={i}>
           <Link
             href={href}
+            scroll={false}
             className="block py-2 leading-6 text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-gray-200"
           >
             {label}
@@ -45,7 +46,7 @@ export const Footer = () => (
         </h4>
         <div className="flex items-center gap-8">
           {FOLLOW_US_LINKS.map(({ href, Icon }, i) => (
-            <Link key={i} href={href} className="group">
+            <Link key={i} href={href} scroll={false} className="group">
               <Icon className="fill-neutral-600 group-hover:fill-black dark:fill-neutral-400 dark:hover:fill-white" />
             </Link>
           ))}
@@ -62,7 +63,7 @@ export const Footer = () => (
 
       <div className="flex flex-wrap items-center gap-6 pt-6 pb-10 border-t border-neutral-200 dark:border-zinc-800 md:pb-12 md:pt-8 md:gap-8 border-t-clr-border">
         <div className="flex items-center justify-between grow">
-          <Link href="/">
+          <Link href="/" scroll={false}>
             <Logo className="w-[120px] h-[34px] fill-black dark:fill-white" />
           </Link>
 
@@ -74,6 +75,7 @@ export const Footer = () => (
             <li key={i}>
               <Link
                 href={href}
+                scroll={false}
                 className="text-sm text-neutral-600 hover:text-black dark:text-neutral-400 dark:hover:text-gray-200 hover:underline whitespace-nowrap"
               >
                 {label}

components/header.tsx

@@ -11,7 +11,7 @@ export const Header = () => (
   <header className="w-full h-36 fixed top-0 shadow-header dark:shadow-header-dark px-4 lg:px-6 pt-4 sm:pt-6 bg-white dark:bg-midnight-slate z-10">
     <div className="w-full max-w-[1400px] mx-auto flex flex-col items-center justify-center gap-4 sm:gap-4 md:gap-6">
       <div className="w-full flex items-center justify-between gap-2">
-        <Link href="/">
+        <Link href="/" scroll={false}>
           <Logo className="w-[120px] sm:w-[130px] md:w-[138px] h-[38px] fill-black dark:fill-white" />
         </Link>
 

components/nav-dropdown.tsx

@@ -24,6 +24,7 @@ export const NavDropdown = ({
     <li className="group relative flex items-center justify-center">
       <Link
         href={link}
+        scroll={false}
         className="relative text-black dark:text-gray-200 text-base sm:text-sm font-medium whitespace-nowrap px-2 md:px-3 py-3.5 after:absolute after:bottom-0 after:left-0 after:content-none::after after:w-full after:h-[2px] after:bg-primary dark:after:bg-white after:hidden group-hover:after:block"
       >
         {title}
@@ -39,6 +40,7 @@ export const NavDropdown = ({
           <Link
             key={i}
             href={opLink}
+            scroll={false}
             className="w-full px-2.5 py-2 text-sm text-black dark:text-gray-100 hover:bg-zinc-100 dark:hover:bg-zinc-400/10 rounded-md transition-colors duration-300"
           >
             {label}