From 2de81701e8fa8b5d730ed2d08028afcd075fdb38 Mon Sep 17 00:00:00 2001
From: Moamal Alaa <moamalalaapro1@gmail.com>
Date: Mon, 27 Apr 2026 11:48:21 +0300
Subject: [PATCH] feat: handle navigation fatigue in components card and
 enhance footer navigation (#445)

Co-authored-by: Copilot <copilot@github.com>
---
 app/(main)/_landing/stats-bento.tsx | 19 ++++++++++---------
 components/site-footer.tsx          | 24 ++++++++++++++++++++++++
 lib/docs.ts                         | 13 +++++++++++++
 3 files changed, 47 insertions(+), 9 deletions(-)
 create mode 100644 lib/docs.ts

diff --git a/app/(main)/_landing/stats-bento.tsx b/app/(main)/_landing/stats-bento.tsx
index ae1980f0..222f23d7 100644
--- a/app/(main)/_landing/stats-bento.tsx
+++ b/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>
diff --git a/components/site-footer.tsx b/components/site-footer.tsx
index 25c6f8a2..c2446d13 100644
--- a/components/site-footer.tsx
+++ b/components/site-footer.tsx
@@ -5,10 +5,16 @@ 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", {
@@ -16,6 +22,24 @@ export function SiteFooter() {
       })}
     >
       <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">
diff --git a/lib/docs.ts b/lib/docs.ts
new file mode 100644
index 00000000..a765547b
--- /dev/null
+++ b/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",
+    }));
+}