chore: polyfill Link with a tags

Author: babblebey

app/(www)/page.tsx

@@ -26,9 +26,9 @@ export default async function IndexPage() {
             I&apos;m a software developer passionate about crafting digital experiences. By day, I&apos;m creating value implementing solutions for businesses at <ItbeyCo />, and by night, I&apos;m diving into the world of open source (OSS).
           </p>
           <div className="flex flex-wrap gap-4">
-            <Link href="/#about" className={cn(buttonVariants({ size: "lg" }))}>
+            <a href="#about" className={cn(buttonVariants({ size: "lg" }))}>
               Learn More
-            </Link>
+            </a>
             <Link
               href={siteConfig.links.openSauced}
               target="_blank"

components/main-nav.tsx

@@ -37,8 +37,7 @@ export function MainNav({ items }: MainNavProps) {
           {items?.length ? (
             <nav className="hidden md:flex gap-6">
               {items?.map((item, index) => (
-                <Link
-                  key={index}
+                <a key={index}
                   href={item.disabled ? "#" : item.href}
                   className={cn(
                     "flex items-center text-lg font-medium transition-colors hover:text-foreground/80 sm:text-sm",
@@ -49,7 +48,7 @@ export function MainNav({ items }: MainNavProps) {
                   )}
                 >
                   {item.title}
-                </Link>
+                </a>
               ))}
             </nav>
           ) : null}

components/mobile-nav.tsx

@@ -25,8 +25,7 @@ export function MobileNav({ items, setShowMobileMenu }: MobileNavProps) {
       <div className="relative z-20 grid gap-6 rounded-md bg-popover p-4 pt-2 text-popover-foreground shadow-md">
         <nav className="grid grid-flow-row auto-rows-max text-sm">
           {items.map((item, index) => (
-            <Link
-              key={index}
+            <a key={index}
               href={item.disabled ? "#" : item.href}
               className={cn(
                 "flex w-full items-center rounded-md py-2 font-medium hover:underline",
@@ -35,7 +34,7 @@ export function MobileNav({ items, setShowMobileMenu }: MobileNavProps) {
               onClick={() => !item.disabled && setShowMobileMenu(false) }
             >
               {item.title}
-            </Link>
+            </a>
           ))}
         </nav>
         <Link href="/" className="flex items-center space-x-2">

config/nav.ts

@@ -13,11 +13,11 @@ export const navConfig: NavConfig = {
     },
     {
       title: "Tools",
-      href: "/#tools"
+      href: "#tools"
     },
     {
       title: "Projects",
-      href: "/#projects"
+      href: "#projects"
     },
   ]
 }