fixes: #255 navbar is responsive and attractive for mobile devices

frontend/src/Components/Pages/Landing-Page/Navbar.jsx

@@ -3,78 +3,104 @@ import logo from '../../../assets/Landing-Page-Assets/CDC.jpg';
 import { Link } from 'react-router-dom';
 import { TiThMenu } from 'react-icons/ti';
 import { MdClose } from 'react-icons/md';
+
 const Navbar = () => {
   const [home, setHome] = useState(1);
   const [about, setAbout] = useState(0);
   const [contact, setContact] = useState(0);
   const [faq, setFaq] = useState(0);
   const [nav, setNav] = useState(false);
+
   const handleNav = () => {
     setNav(!nav);
   };
 
   const setActive = (id) => {
     const funcArray = [setHome, setAbout, setContact, setFaq];
-    funcArray.map((item) => {
+    funcArray.forEach((item) => {
       item(0);
     });
-    funcArray[id](1);
+    switch (id) {
+      case 0:
+        setHome(1);
+        break;
+      case 1:
+        setAbout(1);
+        break;
+      case 2:
+        setContact(1);
+        break;
+      case 3:
+        setFaq(1);
+        break;
+      default:
+        break;
+    }
   };
 
   const selectedClass = 'font-semibold border-b-2 border-b-white pb-1';
 
   return (
     <div className='h-20 flex gap-20 text-white items-center justify-between pt-8 md:px-20 px-2 relative'>
       <div className='flex items-center gap-6'>
-        <img src={logo} className='size-16 rounded-full ' />
+        <img src={logo} className='w-10 h-10 rounded-full' alt='logo' />
         <span className='text-center font-bold'>
           Curious<span className='text-blue-400'> Connect</span>
         </span>
       </div>
-      <div onClick={handleNav} className='block lg:hidden'>
-        {!nav ? <TiThMenu size={20} /> : <MdClose size={20} />}
+      <div onClick={handleNav} className='block lg:hidden z-50'>
+        {!nav ? <TiThMenu size={30} /> : <MdClose size={30} />}
       </div>
       <div
         className={
           nav
-            ? 'fixed left-0 top-0 w-[40%] h-full border-r border-r-gray-900 ease-in-out duration-500 bg-gradient z-50'
-            : 'fixed left-0 top-0 left-[-100%] ease-in-out duration-500'
-        }>
-        <div className=' flex flex-col gap-6 py-12'>
-          <img src={logo} className='size-16 rounded-full mx-auto' />
+            ? 'fixed left-0 top-0 w-full h-full border-r border-r-gray-900 ease-in-out duration-700 bg-gray-900 z-40'
+            : 'fixed left-0 top-0 left-[-100%] ease-in-out duration-700'
+        }
+      >
+        <div className='flex flex-col gap-6 py-12 items-center'>
+          <img src={logo} className='w-16 h-16 rounded-full' alt='logo' />
           <Link to={'/'}>
             <div
-              className='p-4 border-b-slate-500 border-b w-[100%]'
+              className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${home ? selectedClass : ''}`}
               onClick={() => {
                 setActive(0);
-              }}>
+                handleNav(); // Close menu after selection
+              }}
+            >
               Home
             </div>
           </Link>
           <Link to={'/aboutUs'}>
             <div
-              className='p-4 border-b-slate-500 border-b'
+              className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${about ? selectedClass : ''}`}
               onClick={() => {
                 setActive(1);
-              }}>
+                handleNav(); // Close menu after selection
+              }}
+            >
               About
             </div>
           </Link>
           <Link to={'/contactUs'}>
             <div
-              className='p-4 border-b-slate-500 border-b'
+              className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${contact ? selectedClass : ''}`}
               onClick={() => {
                 setActive(2);
-              }}>
+                handleNav(); // Close menu after selection
+              }}
+            >
               Contact
             </div>
           </Link>
           <Link to={'/faq'}>
             <div
-              className='p-4 border-b-slate-500 border-b'
+              className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${faq ? selectedClass : ''}`}
               onClick={() => {
                 setActive(3);
-              }}>
+                handleNav(); // Close menu after selection
+              }}
+            >
               FAQ
             </div>
           </Link>
@@ -83,37 +109,41 @@ const Navbar = () => {
       <div className='hidden lg:flex justify-between gap-28 items-center z-20'>
         <Link to={'/'}>
           <span
-            className={home ? selectedClass : ''}
+            className={`${home ? selectedClass : ''} hover:text-blue-400 transition duration-300`}
             onClick={() => {
               setActive(0);
-            }}>
+            }}
+          >
             Home
           </span>
         </Link>
         <Link to={'/aboutUs'}>
           <span
-            className={about ? selectedClass : ''}
+            className={`${about ? selectedClass : ''} hover:text-blue-400 transition duration-300`}
             onClick={() => {
               setActive(1);
-            }}>
+            }}
+          >
             About
           </span>
         </Link>
         <Link to={'/contactUs'}>
           <span
-            className={contact ? selectedClass : ''}
+            className={`${contact ? selectedClass : ''} hover:text-blue-400 transition duration-300`}
             onClick={() => {
               setActive(2);
-            }}>
+            }}
+          >
             Contact
           </span>
         </Link>
         <Link to={'/faq'}>
           <span
-            className={faq ? selectedClass : ''}
+            className={`${faq ? selectedClass : ''} hover:text-blue-400 transition duration-300`}
             onClick={() => {
               setActive(3);
-            }}>
+            }}
+          >
             FAQ
           </span>
         </Link>

frontend/src/Pages/NotFound.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+const NotFound = () => {
+  return (
+    <div>
+      <h1>404 - Not Found</h1>
+      <p>The page you are looking for does not exist.</p>
+    </div>
+  );
+};
+
+export default NotFound;

package.json

@@ -27,11 +27,13 @@
     "express": "^4.19.2",
     "fa-icons": "^0.2.0",
     "font-awesome-icons": "^1.6.0",
+    "hamburger-react": "^2.5.1",
     "jsonwebtoken": "^9.0.2",
     "mongoose": "^8.3.4",
     "react-datepicker": "^6.9.0",
     "react-icons": "^5.2.1",
-    "react-router-dom": "^6.23.1"
+    "react-router-dom": "^6.23.1",
+    "scroll-lock": "^2.1.5"
   },
   "devDependencies": {
     "prettier": "^3.2.5"