feat: handle navigation fatigue in components card and enhance footer navigation

app/(main)/_landing/stats-bento.tsx

@@ -240,20 +240,22 @@ export default function StatsBento() {
                 </span>
               </div>
               {/* Category marquees */}
-              <div className="-mx-4 mt-3 mb-2 space-y-0.5 sm:-mx-5 sm:mb-0 lg:-mx-6">
+              <div
+                className="-mx-4 mt-3 mb-2 space-y-0.5 sm:-mx-5 sm:mb-0 lg:-mx-6"
+                aria-hidden="true"
+              >
                 <Marquee
                   pauseOnHover
                   applyMask={false}
                   className="[--duration:50s] [--gap:0.15rem]"
                 >
                   {categories.map((cat, i) => (
-                    <Link
+                    <div
                       key={`fwd-${i}`}
-                      href={cat.href}
-                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors hover:border-foreground/30 sm:px-2.5 sm:py-1 sm:text-[11px]"
+                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors sm:px-2.5 sm:py-1 sm:text-[11px]"
                     >
                       {cat.label}
-                    </Link>
+                    </div>
                   ))}
                 </Marquee>
                 <Marquee
@@ -263,13 +265,12 @@ export default function StatsBento() {
                   className="[--duration:55s] [--gap:0.15rem]"
                 >
                   {[...categories].reverse().map((cat, i) => (
-                    <Link
+                    <div
                       key={`rev-${i}`}
-                      href={cat.href}
-                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors hover:border-foreground/30 sm:px-2.5 sm:py-1 sm:text-[11px]"
+                      className="rounded-full border border-border bg-foreground/5 px-2 py-0.5 text-[10px] font-semibold text-foreground transition-colors sm:px-2.5 sm:py-1 sm:text-[11px]"
                     >
                       {cat.label}
-                    </Link>
+                    </div>
                   ))}
                 </Marquee>
               </div>

components/site-footer.tsx

@@ -5,17 +5,41 @@ import { usePathname } from "next/navigation";
 
 import NewsletterSection from "@/app/(main)/_landing/newsletter";
 import { Icons } from "@/components/icons";
+import { docsConfig } from "@/config/docs";
+import { getFooterCategories } from "@/lib/docs";
 import { cn } from "@/lib/utils";
 
 export function SiteFooter() {
+  const footerCategories: { title: string; href: string }[] = getFooterCategories(
+    docsConfig.sidebarNav,
+  );
   const pathname = usePathname();
+
   return (
     <footer
       className={cn("container flex flex-col justify-between pb-12 pt-4 md:pb-16 md:pt-6", {
         "border-t border-t-border": pathname === "/",
       })}
     >
       <NewsletterSection />
+
+      <nav aria-label="Footer Navigation" className="mx-auto mt-16 w-full max-w-6xl">
+        <div className="grid grid-cols-2 gap-x-4 gap-y-2 md:grid-cols-4 lg:grid-cols-5">
+          {footerCategories.map(({ href, title }) => (
+            <Link
+              href={href}
+              key={title}
+              className={cn(
+                "text-sm text-muted-foreground",
+                "hover:text-foreground focus:text-foreground px-4 py-2",
+              )}
+            >
+              {title}
+            </Link>
+          ))}
+        </div>
+      </nav>
+
       <div className="group mx-auto mt-16 w-fit">
         <div className="flex gap-1">
           <div className="flex gap-1">

lib/docs.ts

@@ -0,0 +1,13 @@
+import type { SidebarNavItem } from "@/types";
+
+export function getFooterCategories(
+  navItems: SidebarNavItem[],
+  excludedTitles: string[] = ["Getting Started", "Contributing"],
+) {
+  return navItems
+    .filter((nav) => !excludedTitles.includes(nav.title))
+    .map((cat) => ({
+      title: cat.title,
+      href: cat.items?.[0]?.href ?? "/docs",
+    }));
+}