From bfd607a9df375b91f3d4a3969cfe3edb2d495a71 Mon Sep 17 00:00:00 2001
From: Janvi Singh <janvisingh6211@gmail.com>
Date: Sun, 14 Sep 2025 11:34:38 +0530
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8=20Enhance=20Navbar=20Styling=20wi?=
 =?UTF-8?q?th=20Better=20Headings=20and=20Hover=20Effects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c6cc86d..ffcd4ff 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,62 +1,68 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import { Moon, Sun } from 'lucide-react';
-
+import { Moon, Sun } from "lucide-react";
 
 const Navbar: React.FC = () => {
-
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const themeContext = useContext(ThemeContext);
+  const location = useLocation();
 
-  if (!themeContext)
-    return null;
+  if (!themeContext) return null;
 
   const { toggleTheme, mode } = themeContext;
 
+  const navLinks = [
+    { to: "/", label: "Home" },
+    { to: "/track", label: "Tracker" },
+    { to: "/contributors", label: "Contributors" },
+    { to: "/login", label: "Login" },
+  ];
+
   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">
+    <nav className="sticky top-0 z-50 bg-white/70 dark:bg-gray-900/70 backdrop-blur-lg text-black dark:text-white border-b border-gray-200 dark:border-gray-800 shadow-md 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"
+          className="text-2xl font-extrabold tracking-wide flex items-center group"
         >
-          <img src="/crl-icon.png" alt="CRL Icon" className="h-8 mr-2" />
-          GitHub Tracker
+          <img src="/crl-icon.png" alt="CRL Icon" className="h-9 mr-2" />
+          <span className="relative">
+            GitHub Tracker
+            <span className="absolute -bottom-1 left-0 w-0 h-[3px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-500 group-hover:w-full rounded"></span>
+          </span>
         </Link>
 
         {/* 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>
+          {navLinks.map((link) => (
+            <Link
+              key={link.to}
+              to={link.to}
+              className={`relative text-lg font-medium px-3 py-2 rounded-lg transition-all duration-300 group
+                ${
+                  location.pathname === link.to
+                    ? "text-indigo-500 dark:text-indigo-400 font-semibold bg-indigo-50 dark:bg-indigo-900"
+                    : "hover:text-indigo-400 dark:hover:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-gray-800"
+                }`}
+            >
+              {link.label}
+              {/* Gradient underline hover */}
+              <span className="absolute bottom-0 left-0 w-0 h-[2px] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-500 group-hover:w-full"></span>
+            </Link>
+          ))}
+
+          {/* Theme Toggle */}
           <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"
+            className="ml-4 p-2 rounded-full border border-gray-400 dark:border-gray-600 hover:scale-110 hover:border-indigo-400 transition-all duration-500 transform hover:rotate-12"
           >
-            {mode === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
+            {mode === "dark" ? (
+              <Sun className="h-5 w-5 text-yellow-400 drop-shadow-glow" />
+            ) : (
+              <Moon className="h-5 w-5 text-indigo-500 drop-shadow-glow" />
+            )}
           </button>
         </div>
 
@@ -86,56 +92,38 @@ const Navbar: React.FC = () => {
       </div>
 
       {/* 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)}
-            >
-              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)}
-            >
-              Contributors
-            </Link>
+      <div
+        className={`md:hidden overflow-hidden transition-all duration-500 ${
+          isOpen ? "max-h-96 opacity-100" : "max-h-0 opacity-0"
+        }`}
+      >
+        <div className="bg-white/90 dark:bg-gray-800/90 backdrop-blur-md text-black dark:text-white border-t border-gray-200 dark:border-gray-700 px-6 py-4 space-y-4">
+          {navLinks.map((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"
+              key={link.to}
+              to={link.to}
               onClick={() => setIsOpen(false)}
+              className={`block text-lg font-medium px-3 py-2 rounded-lg transition-all duration-300
+                ${
+                  location.pathname === link.to
+                    ? "text-indigo-500 dark:text-indigo-400 font-semibold bg-indigo-50 dark:bg-indigo-900"
+                    : "hover:text-indigo-400 dark:hover:text-indigo-300 hover:bg-indigo-100 dark:hover:bg-gray-800"
+                }`}
             >
-              Login
+              {link.label}
             </Link>
-            <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"
-            >
-              {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
-            </button>
-          </div>
+          ))}
+          <button
+            onClick={() => {
+              toggleTheme();
+              setIsOpen(false);
+            }}
+            className="w-full text-left text-sm font-semibold px-3 py-2 rounded-lg border border-gray-500 hover:border-indigo-400 hover:text-indigo-400 dark:hover:text-indigo-300 transition duration-300"
+          >
+            {mode === "dark" ? "🌞 Light Mode" : "🌙 Dark Mode"}
+          </button>
         </div>
-      )}
+      </div>
     </nav>
   );
 };

From bee72067f80225fd485b5dde627e9fa51c70ab38 Mon Sep 17 00:00:00 2001
From: Janvi Singh <janvisingh6211@gmail.com>
Date: Sun, 14 Sep 2025 17:15:29 +0530
Subject: [PATCH 2/2]  updated Tailwind config

---
 tailwind.config.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 4cdd0f6..44da79b 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,13 +1,16 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: 'class',
-    content: [
-      "./index.html",                      // For any HTML files in the root
-      "./src/**/*.{js,jsx,ts,tsx}",         // For all JS/JSX/TS/TSX files inside src folder
-    ],
-    theme: {
-      extend: {},
+  content: [
+    "./index.html",
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      dropShadow: {
+        glow: "0 0 8px rgba(255, 255, 255, 0.6)", // white glow
+      },
     },
-    plugins: [],
-  }
-  
\ No newline at end of file
+  },
+  plugins: [],
+}