From e689afa75c91eb75150c60fab96ab1fd7ac2ff3c Mon Sep 17 00:00:00 2001
From: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
Date: Fri, 15 May 2026 00:19:13 +0530
Subject: [PATCH 1/3] Improve Navbar UI/UX of the Website

---
 src/components/Navbar.tsx | 252 ++++++++++++++++++++------------------
 1 file changed, 136 insertions(+), 116 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d..18f1e2f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,143 +1,163 @@
-import { Link } from "react-router-dom";
+import { NavLink, Link, useLocation, useNavigate } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun } from 'lucide-react';
-
+import { Moon, Sun, Menu, X, UserPlus } from 'lucide-react';
 
 const Navbar: React.FC = () => {
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const themeContext = useContext(ThemeContext);
+  const location = useLocation();
+  const navigate = useNavigate();
 
-  if (!themeContext)
-    return null;
-
+  if (!themeContext) return null;
   const { toggleTheme, mode } = themeContext;
 
-  return (
-    <nav className="sticky top-0 z-50 bg-white dark:bg-gray-900 text-black dark:text-white border-b border-gray-100 dark:border-gray-800 transition-colors duration-300">
-      <div className="container mx-auto px-6 py-4 flex justify-between items-center">
-        {/* Logo Section */}
-        <Link
-          to="/"
-          className="text-2xl font-bold hover:text-gray-300 cursor-pointer flex items-center"
-        >
-          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
-          GitHub Tracker
-        </Link>
+  // Helper function for smooth scrolling
+  const scrollToFeatures = (e: React.MouseEvent) => {
+    e.preventDefault();
+    
+    // If not on the home page, navigate home first, then scroll
+    if (location.pathname !== "/") {
+      navigate("/");
+      // Small timeout to allow the home page to load before scrolling
+      setTimeout(() => {
+        const element = document.getElementById("features");
+        element?.scrollIntoView({ behavior: "smooth" });
+      }, 100);
+    } else {
+      // If already on home page, just scroll
+      const element = document.getElementById("features");
+      element?.scrollIntoView({ behavior: "smooth" });
+    }
+    setIsOpen(false); // Close mobile menu if open
+  };
 
-        {/* Desktop Links */}
-        <div className="hidden md:flex space-x-6">
-          <Link
-            to="/"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Home
-          </Link>
-          <Link
-            to="/track"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Tracker
-          </Link>
-          <Link
-            to="/contributors"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Contributors
-          </Link>
-          <Link
-            to="/login"
-            className="text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-          >
-            Login
-          </Link>
-          <button
-            onClick={toggleTheme}
-            className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200"
-          >
-            {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
-          </button>
-        </div>
+  const navLinkStyles = ({ isActive }: { isActive: boolean }) => 
+    `px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300 
+    ${isActive 
+      ? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm ring-1 ring-blue-200/50 dark:ring-blue-500/20" 
+      : "text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50"
+    }`;
 
-        {/* Mobile Menu Button */}
-        <div className="md:hidden">
-          <button
-            onClick={() => setIsOpen(!isOpen)}
-            className="relative w-8 h-8 flex flex-col space-y-[5px] items-center group focus:outline-none"
-          >
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "rotate-45 translate-y-2" : ""
-              }`}
-            ></span>
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-opacity duration-300 ${
-                isOpen ? "opacity-0" : ""
-              }`}
-            ></span>
-            <span
-              className={`block h-[3px] w-full bg-black dark:bg-white rounded-lg transition-transform duration-300 ${
-                isOpen ? "-rotate-45 -translate-y-2" : ""
-              }`}
-            ></span>
-          </button>
-        </div>
-      </div>
+  return (
+    <nav className="sticky top-0 z-50 w-full bg-indigo-50/70 dark:bg-gray-900/95 backdrop-blur-xl border-b border-indigo-100/50 dark:border-gray-800 shadow-sm transition-all duration-300">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-20">
+          
+          {/* 1. Logo Section */}
+          <Link to="/" className="flex items-center shrink-0 group transition-all active:scale-95">
+            <div className="relative">
+              <img 
+                src="/crl-icon.png" 
+                alt="CRL Icon" 
+                className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform duration-300" 
+              />
+              <div className="absolute -inset-1 bg-blue-400/20 rounded-full blur opacity-0 group-hover:opacity-100 transition-opacity" />
+            </div>
+            <div className="flex items-center tracking-tight">
+              <span className="text-2xl font-extrabold text-slate-900 dark:text-white">GitHub</span>
+              <span className="text-2xl font-extrabold text-blue-600 ml-1">Tracker</span>
+            </div>
+          </Link>
 
-      {/* Mobile Links */}
-      {isOpen && (
-        <div className="md:hidden bg-white dark:bg-gray-800 text-black dark:text-white">
-          <div className="space-y-4 px-6 py-4">
-            <Link
-              to="/"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              Home
-            </Link>
-            <Link
-              to="/about"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
-            >
-              About
-            </Link>
-            <Link
-              to="/contact"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
+          {/* 2. Centered Navigation */}
+          <div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
+            <NavLink to="/" className={navLinkStyles}>Home</NavLink>
+            
+            {/* Features Link - Trigger Scroll */}
+            <a 
+              href="#features" 
+              onClick={scrollToFeatures} 
+              className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50 transition-all duration-300"
             >
-              Contact
-            </Link>
-            <Link
-              to="/contributors"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
+              Features
+            </a>
+
+            <NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
+            <NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
+          </div>
+
+          {/* 3. Right Side Actions */}
+          <div className="hidden lg:flex items-center space-x-5">
+            <div className="h-8 w-[1.5px] bg-indigo-200/60 dark:bg-gray-700 mx-2 rounded-full" />
+
+            <button
+              onClick={toggleTheme}
+              className="p-2.5 rounded-full text-slate-500 dark:text-gray-400 bg-white/40 dark:bg-gray-800/40 hover:bg-white dark:hover:bg-gray-700 hover:text-blue-600 transition-all shadow-sm ring-1 ring-slate-200/50 dark:ring-transparent"
             >
-              Contributors
+              {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            </button>
+            
+            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 transition-colors px-2">
+              Login
             </Link>
+
             <Link
-              to="/login"
-              className="block text-lg font-medium hover:text-gray-300 transition-all px-2 py-1 border border-transparent hover:border-gray-400 rounded"
-              onClick={() => setIsOpen(false)}
+              to="/signup"
+              className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:bg-blue-700 hover:shadow-[0_0_20px_rgba(37,99,235,0.3)] transition-all active:scale-95"
             >
-              Login
+              <UserPlus className="h-5 w-5" />
+              <span>Sign Up</span>
             </Link>
+          </div>
+
+          {/* Mobile Toggle */}
+          <div className="lg:hidden flex items-center space-x-3">
+            <button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400">
+              {mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
+            </button>
             <button
-              onClick={() => {
-                toggleTheme();
-                setIsOpen(false);
-              }}
-              className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
+              onClick={() => setIsOpen(!isOpen)}
+              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-slate-200"
             >
-              {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
+              {isOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
             </button>
           </div>
         </div>
-      )}
+      </div>
+
+      {/* Mobile Drawer */}
+      <div className={`lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900 ${isOpen ? "max-h-[600px] opacity-100 border-t border-indigo-50" : "max-h-0 opacity-0"}`}>
+        <div className="px-5 py-10 space-y-4">
+          <MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
+          
+          {/* Mobile Features Link */}
+          <button 
+            onClick={scrollToFeatures} 
+            className="block w-full text-left px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800 transition-all"
+          >
+            Features
+          </button>
+
+          <MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
+          <MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>
+          
+          <div className="pt-8 mt-6 border-t border-slate-100 grid grid-cols-2 gap-5">
+            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 rounded-2xl" onClick={() => setIsOpen(false)}>
+              Login
+            </Link>
+            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg" onClick={() => setIsOpen(false)}>
+              Sign Up
+            </Link>
+          </div>
+        </div>
+      </div>
     </nav>
   );
 };
 
-export default Navbar;
+const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
+  <NavLink
+    to={to}
+    onClick={onClick}
+    className={({ isActive }) => 
+      `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${
+        isActive ? "bg-blue-600 text-white shadow-lg" : "text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800"
+      }`
+    }
+  >
+    {children}
+  </NavLink>
+);
+
+export default Navbar;
\ No newline at end of file

From e685cfcc3f16c64e91c590583fee05b56663bd76 Mon Sep 17 00:00:00 2001
From: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
Date: Fri, 15 May 2026 00:44:46 +0530
Subject: [PATCH 2/3] fixed accessibility labels and scrolling

---
 src/components/Navbar.tsx | 117 ++++++++++++--------------------------
 1 file changed, 36 insertions(+), 81 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 18f1e2f..7223dcd 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,36 +1,25 @@
-import { NavLink, Link, useLocation, useNavigate } from "react-router-dom";
-import { useState, useContext } from "react";
+import { NavLink, Link, useLocation } from "react-router-dom";
+import { useState, useContext, useEffect } from "react";
 import { ThemeContext } from "../context/ThemeContext";
 import { Moon, Sun, Menu, X, UserPlus } from 'lucide-react';
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const themeContext = useContext(ThemeContext);
-  const location = useLocation();
-  const navigate = useNavigate();
+  const { hash } = useLocation();
 
-  if (!themeContext) return null;
-  const { toggleTheme, mode } = themeContext;
-
-  // Helper function for smooth scrolling
-  const scrollToFeatures = (e: React.MouseEvent) => {
-    e.preventDefault();
-    
-    // If not on the home page, navigate home first, then scroll
-    if (location.pathname !== "/") {
-      navigate("/");
-      // Small timeout to allow the home page to load before scrolling
-      setTimeout(() => {
-        const element = document.getElementById("features");
-        element?.scrollIntoView({ behavior: "smooth" });
-      }, 100);
-    } else {
-      // If already on home page, just scroll
+  // Fix 1: Bot-demanded "Hash-driven" scroll (replaces the timeout)
+  useEffect(() => {
+    if (hash === "#features") {
       const element = document.getElementById("features");
-      element?.scrollIntoView({ behavior: "smooth" });
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
     }
-    setIsOpen(false); // Close mobile menu if open
-  };
+  }, [hash]);
+
+  if (!themeContext) return null;
+  const { toggleTheme, mode } = themeContext;
 
   const navLinkStyles = ({ isActive }: { isActive: boolean }) => 
     `px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300 
@@ -44,15 +33,10 @@ const Navbar: React.FC = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-20">
           
-          {/* 1. Logo Section */}
+          {/* Logo Section */}
           <Link to="/" className="flex items-center shrink-0 group transition-all active:scale-95">
             <div className="relative">
-              <img 
-                src="/crl-icon.png" 
-                alt="CRL Icon" 
-                className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform duration-300" 
-              />
-              <div className="absolute -inset-1 bg-blue-400/20 rounded-full blur opacity-0 group-hover:opacity-100 transition-opacity" />
+              <img src="/crl-icon.png" alt="CRL Icon" className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform" />
             </div>
             <div className="flex items-center tracking-tight">
               <span className="text-2xl font-extrabold text-slate-900 dark:text-white">GitHub</span>
@@ -60,55 +44,49 @@ const Navbar: React.FC = () => {
             </div>
           </Link>
 
-          {/* 2. Centered Navigation */}
+          {/* Desktop Nav */}
           <div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
             <NavLink to="/" className={navLinkStyles}>Home</NavLink>
-            
-            {/* Features Link - Trigger Scroll */}
-            <a 
-              href="#features" 
-              onClick={scrollToFeatures} 
-              className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50 transition-all duration-300"
-            >
+            {/* Fix 2: Hash link for Features */}
+            <Link to="/#features" className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50 transition-all duration-300">
               Features
-            </a>
-
+            </Link>
             <NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
             <NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
           </div>
 
-          {/* 3. Right Side Actions */}
+          {/* Action Buttons */}
           <div className="hidden lg:flex items-center space-x-5">
             <div className="h-8 w-[1.5px] bg-indigo-200/60 dark:bg-gray-700 mx-2 rounded-full" />
 
+            {/* Fix 3: Accessibility label for Theme Toggle */}
             <button
               onClick={toggleTheme}
               className="p-2.5 rounded-full text-slate-500 dark:text-gray-400 bg-white/40 dark:bg-gray-800/40 hover:bg-white dark:hover:bg-gray-700 hover:text-blue-600 transition-all shadow-sm ring-1 ring-slate-200/50 dark:ring-transparent"
+              aria-label={mode === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
             >
               {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
             </button>
             
-            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 transition-colors px-2">
-              Login
-            </Link>
-
-            <Link
-              to="/signup"
-              className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:bg-blue-700 hover:shadow-[0_0_20px_rgba(37,99,235,0.3)] transition-all active:scale-95"
-            >
+            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 transition-colors px-2">Login</Link>
+            <Link to="/signup" className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:bg-blue-700 hover:shadow-[0_0_20px_rgba(37,99,235,0.3)] transition-all active:scale-95">
               <UserPlus className="h-5 w-5" />
               <span>Sign Up</span>
             </Link>
           </div>
 
-          {/* Mobile Toggle */}
+          {/* Mobile Menu Controls */}
           <div className="lg:hidden flex items-center space-x-3">
-            <button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400">
+            <button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400" aria-label="Toggle light/dark mode">
               {mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
             </button>
+            
+            {/* Fix 4: Accessibility labels and 'expanded' state for Mobile Menu */}
             <button
               onClick={() => setIsOpen(!isOpen)}
-              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-slate-200"
+              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-slate-200 dark:ring-transparent transition-all"
+              aria-label="Toggle navigation menu"
+              aria-expanded={isOpen}
             >
               {isOpen ? <X className="h-7 w-7" /> : <Menu className="h-7 w-7" />}
             </button>
@@ -117,28 +95,15 @@ const Navbar: React.FC = () => {
       </div>
 
       {/* Mobile Drawer */}
-      <div className={`lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900 ${isOpen ? "max-h-[600px] opacity-100 border-t border-indigo-50" : "max-h-0 opacity-0"}`}>
+      <div className={`lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900 ${isOpen ? "max-h-[600px] opacity-100 border-t border-indigo-50 shadow-2xl" : "max-h-0 opacity-0"}`}>
         <div className="px-5 py-10 space-y-4">
           <MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
-          
-          {/* Mobile Features Link */}
-          <button 
-            onClick={scrollToFeatures} 
-            className="block w-full text-left px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800 transition-all"
-          >
-            Features
-          </button>
-
+          <Link to="/#features" className="block px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800" onClick={() => setIsOpen(false)}>Features</Link>
           <MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
           <MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>
-          
           <div className="pt-8 mt-6 border-t border-slate-100 grid grid-cols-2 gap-5">
-            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 rounded-2xl" onClick={() => setIsOpen(false)}>
-              Login
-            </Link>
-            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg" onClick={() => setIsOpen(false)}>
-              Sign Up
-            </Link>
+            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 dark:bg-gray-800 rounded-2xl" onClick={() => setIsOpen(false)}>Login</Link>
+            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg shadow-blue-500/20" onClick={() => setIsOpen(false)}>Sign Up</Link>
           </div>
         </div>
       </div>
@@ -147,17 +112,7 @@ const Navbar: React.FC = () => {
 };
 
 const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
-  <NavLink
-    to={to}
-    onClick={onClick}
-    className={({ isActive }) => 
-      `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${
-        isActive ? "bg-blue-600 text-white shadow-lg" : "text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800"
-      }`
-    }
-  >
-    {children}
-  </NavLink>
+  <NavLink to={to} onClick={onClick} className={({ isActive }) => `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${isActive ? "bg-blue-600 text-white shadow-lg transform translate-x-2" : "text-slate-600 dark:text-gray-400 hover:bg-indigo-50 hover:translate-x-1"}`}>{children}</NavLink>
 );
 
 export default Navbar;
\ No newline at end of file

From 37e7389522b8440001c30ef60837962068a841d8 Mon Sep 17 00:00:00 2001
From: yuvraj-k-singh <yuvrajstudentbussiness@gmail.com>
Date: Fri, 15 May 2026 00:47:34 +0530
Subject: [PATCH 3/3] refactor(navbar): improve accessibility and hash-based
 scroll logic

---
 src/components/Navbar.tsx | 50 ++++++++++++++++++---------------------
 1 file changed, 23 insertions(+), 27 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 7223dcd..8858418 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -8,7 +8,7 @@ const Navbar: React.FC = () => {
   const themeContext = useContext(ThemeContext);
   const { hash } = useLocation();
 
-  // Fix 1: Bot-demanded "Hash-driven" scroll (replaces the timeout)
+  // 1. Bot Fix: Reliable scrolling using URL hash
   useEffect(() => {
     if (hash === "#features") {
       const element = document.getElementById("features");
@@ -24,8 +24,8 @@ const Navbar: React.FC = () => {
   const navLinkStyles = ({ isActive }: { isActive: boolean }) => 
     `px-5 py-2 rounded-full text-lg font-semibold transition-all duration-300 
     ${isActive 
-      ? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm ring-1 ring-blue-200/50 dark:ring-blue-500/20" 
-      : "text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50"
+      ? "text-blue-600 bg-blue-100/60 dark:bg-blue-900/40 shadow-sm ring-1 ring-blue-200/50" 
+      : "text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50"
     }`;
 
   return (
@@ -33,58 +33,48 @@ const Navbar: React.FC = () => {
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between items-center h-20">
           
-          {/* Logo Section */}
           <Link to="/" className="flex items-center shrink-0 group transition-all active:scale-95">
-            <div className="relative">
-              <img src="/crl-icon.png" alt="CRL Icon" className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform" />
-            </div>
+            <img src="/crl-icon.png" alt="CRL Icon" className="h-10 w-10 mr-3 drop-shadow-md group-hover:rotate-6 transition-transform" />
             <div className="flex items-center tracking-tight">
               <span className="text-2xl font-extrabold text-slate-900 dark:text-white">GitHub</span>
               <span className="text-2xl font-extrabold text-blue-600 ml-1">Tracker</span>
             </div>
           </Link>
 
-          {/* Desktop Nav */}
           <div className="hidden lg:flex items-center justify-center flex-1 space-x-1">
             <NavLink to="/" className={navLinkStyles}>Home</NavLink>
-            {/* Fix 2: Hash link for Features */}
-            <Link to="/#features" className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 hover:bg-white/50 dark:hover:bg-gray-800/50 transition-all duration-300">
-              Features
-            </Link>
+            <Link to="/#features" className="px-5 py-2 rounded-full text-lg font-semibold text-slate-600 dark:text-gray-300 hover:text-blue-500 transition-all">Features</Link>
             <NavLink to="/track" className={navLinkStyles}>Tracker</NavLink>
             <NavLink to="/contributors" className={navLinkStyles}>Contributors</NavLink>
           </div>
 
-          {/* Action Buttons */}
           <div className="hidden lg:flex items-center space-x-5">
             <div className="h-8 w-[1.5px] bg-indigo-200/60 dark:bg-gray-700 mx-2 rounded-full" />
 
-            {/* Fix 3: Accessibility label for Theme Toggle */}
+            {/* 2. Bot Fix: Added aria-label for accessibility */}
             <button
               onClick={toggleTheme}
-              className="p-2.5 rounded-full text-slate-500 dark:text-gray-400 bg-white/40 dark:bg-gray-800/40 hover:bg-white dark:hover:bg-gray-700 hover:text-blue-600 transition-all shadow-sm ring-1 ring-slate-200/50 dark:ring-transparent"
+              className="p-2.5 rounded-full text-slate-500 dark:text-gray-400 bg-white/40 dark:bg-gray-800/40 hover:bg-white transition-all shadow-sm"
               aria-label={mode === 'dark' ? "Switch to light mode" : "Switch to dark mode"}
             >
               {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
             </button>
             
-            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 transition-colors px-2">Login</Link>
-            <Link to="/signup" className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:bg-blue-700 hover:shadow-[0_0_20px_rgba(37,99,235,0.3)] transition-all active:scale-95">
+            <Link to="/login" className="text-lg font-bold text-slate-700 dark:text-gray-200 hover:text-blue-600 px-2">Login</Link>
+            <Link to="/signup" className="flex items-center space-x-2 px-7 py-3 text-lg font-bold text-white bg-blue-600 rounded-full hover:shadow-lg transition-all active:scale-95">
               <UserPlus className="h-5 w-5" />
               <span>Sign Up</span>
             </Link>
           </div>
 
-          {/* Mobile Menu Controls */}
           <div className="lg:hidden flex items-center space-x-3">
-            <button onClick={toggleTheme} className="p-2 text-slate-500 dark:text-gray-400" aria-label="Toggle light/dark mode">
+            <button onClick={toggleTheme} className="p-2 text-slate-500" aria-label="Toggle theme">
               {mode === "dark" ? <Sun className="h-6 w-6" /> : <Moon className="h-6 w-6" />}
             </button>
             
-            {/* Fix 4: Accessibility labels and 'expanded' state for Mobile Menu */}
             <button
               onClick={() => setIsOpen(!isOpen)}
-              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white shadow-sm ring-1 ring-slate-200 dark:ring-transparent transition-all"
+              className="p-2.5 rounded-2xl bg-white/80 dark:bg-gray-800 text-slate-900 dark:text-white"
               aria-label="Toggle navigation menu"
               aria-expanded={isOpen}
             >
@@ -94,16 +84,22 @@ const Navbar: React.FC = () => {
         </div>
       </div>
 
-      {/* Mobile Drawer */}
-      <div className={`lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900 ${isOpen ? "max-h-[600px] opacity-100 border-t border-indigo-50 shadow-2xl" : "max-h-0 opacity-0"}`}>
+      {/* 3. Bot Fix: Added 'invisible' and 'lg:visible' to prevent ghost keyboard focus */}
+      <div className={`
+        lg:hidden overflow-hidden transition-all duration-500 ease-in-out bg-white/95 dark:bg-gray-900
+        ${isOpen 
+          ? "max-h-[600px] opacity-100 border-t border-indigo-50 shadow-2xl visible" 
+          : "max-h-0 opacity-0 invisible"
+        }
+      `}>
         <div className="px-5 py-10 space-y-4">
           <MobileNavLink to="/" onClick={() => setIsOpen(false)}>Home</MobileNavLink>
-          <Link to="/#features" className="block px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50 dark:hover:bg-gray-800" onClick={() => setIsOpen(false)}>Features</Link>
+          <Link to="/#features" className="block px-6 py-4 rounded-2xl text-xl font-bold text-slate-600 dark:text-gray-400 hover:bg-indigo-50" onClick={() => setIsOpen(false)}>Features</Link>
           <MobileNavLink to="/track" onClick={() => setIsOpen(false)}>Tracker</MobileNavLink>
           <MobileNavLink to="/contributors" onClick={() => setIsOpen(false)}>Contributors</MobileNavLink>
           <div className="pt-8 mt-6 border-t border-slate-100 grid grid-cols-2 gap-5">
-            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 dark:bg-gray-800 rounded-2xl" onClick={() => setIsOpen(false)}>Login</Link>
-            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg shadow-blue-500/20" onClick={() => setIsOpen(false)}>Sign Up</Link>
+            <Link to="/login" className="flex items-center justify-center py-4 text-lg font-bold text-slate-700 bg-slate-50 rounded-2xl" onClick={() => setIsOpen(false)}>Login</Link>
+            <Link to="/signup" className="flex items-center justify-center py-4 text-lg font-bold text-white bg-blue-600 rounded-2xl shadow-lg" onClick={() => setIsOpen(false)}>Sign Up</Link>
           </div>
         </div>
       </div>
@@ -112,7 +108,7 @@ const Navbar: React.FC = () => {
 };
 
 const MobileNavLink = ({ to, children, onClick }: { to: string, children: React.ReactNode, onClick: () => void }) => (
-  <NavLink to={to} onClick={onClick} className={({ isActive }) => `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${isActive ? "bg-blue-600 text-white shadow-lg transform translate-x-2" : "text-slate-600 dark:text-gray-400 hover:bg-indigo-50 hover:translate-x-1"}`}>{children}</NavLink>
+  <NavLink to={to} onClick={onClick} className={({ isActive }) => `block px-6 py-4 rounded-2xl text-xl font-bold transition-all ${isActive ? "bg-blue-600 text-white shadow-lg translate-x-2" : "text-slate-600 dark:text-gray-400 hover:translate-x-1"}`}>{children}</NavLink>
 );
 
 export default Navbar;
\ No newline at end of file