From 0e1b61994929e3063c61d7c71e5d0dabeda6ee9f Mon Sep 17 00:00:00 2001
From: anuragnegi000 <anurag.negi862@gmail.com>
Date: Sat, 1 Jun 2024 13:13:17 +0530
Subject: [PATCH 1/3] added responsives in navbar

---
 .../Components/Pages/Landing-Page/Navbar.jsx  | 63 +++++++++++--------
 frontend/src/Pages/NotFound.jsx               | 12 ++++
 package.json                                  |  4 +-
 3 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 frontend/src/Pages/NotFound.jsx

diff --git a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
index 8975ad5..00304e5 100644
--- a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
+++ b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
@@ -3,22 +3,24 @@ 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);
+    funcArray ;
   };
 
   const selectedClass = 'font-semibold border-b-2 border-b-white pb-1';
@@ -26,55 +28,60 @@ const Navbar = () => {
   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);
-              }}>
+              }}
+            >
               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);
-              }}>
+              }}
+            >
               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);
-              }}>
+              }}
+            >
               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);
-              }}>
+              }}
+            >
               FAQ
             </div>
           </Link>
@@ -83,37 +90,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>
diff --git a/frontend/src/Pages/NotFound.jsx b/frontend/src/Pages/NotFound.jsx
new file mode 100644
index 0000000..ba91585
--- /dev/null
+++ b/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;
diff --git a/package.json b/package.json
index 23c34bf..0920e94 100644
--- a/package.json
+++ b/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"

From ef2485f420560574b78fec5216a6f69b37e82ce7 Mon Sep 17 00:00:00 2001
From: anuragnegi000 <anurag.negi862@gmail.com>
Date: Sat, 1 Jun 2024 13:31:18 +0530
Subject: [PATCH 2/3] fixes in navbar

---
 .../Components/Pages/Landing-Page/Navbar.jsx  | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
index 00304e5..76d973b 100644
--- a/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
+++ b/frontend/src/Components/Pages/Landing-Page/Navbar.jsx
@@ -20,7 +20,22 @@ const Navbar = () => {
     funcArray.forEach((item) => {
       item(0);
     });
-    funcArray ;
+    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';
@@ -50,6 +65,7 @@ const Navbar = () => {
               className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${home ? selectedClass : ''}`}
               onClick={() => {
                 setActive(0);
+                handleNav(); // Close menu after selection
               }}
             >
               Home
@@ -60,6 +76,7 @@ const Navbar = () => {
               className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${about ? selectedClass : ''}`}
               onClick={() => {
                 setActive(1);
+                handleNav(); // Close menu after selection
               }}
             >
               About
@@ -70,6 +87,7 @@ const Navbar = () => {
               className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${contact ? selectedClass : ''}`}
               onClick={() => {
                 setActive(2);
+                handleNav(); // Close menu after selection
               }}
             >
               Contact
@@ -80,6 +98,7 @@ const Navbar = () => {
               className={`p-4 border-b-slate-500 border-b w-[100%] text-center ${faq ? selectedClass : ''}`}
               onClick={() => {
                 setActive(3);
+                handleNav(); // Close menu after selection
               }}
             >
               FAQ

From 3f982d10494c0f1eeeec5f89fde07e987f0cea73 Mon Sep 17 00:00:00 2001
From: anuragnegi000 <anurag.negi862@gmail.com>
Date: Sat, 1 Jun 2024 13:46:24 +0530
Subject: [PATCH 3/3] fix the flicker effect in joinwithcode component

---
 frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx b/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
index 9593fc8..5d215c2 100644
--- a/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
+++ b/frontend/src/Components/Pages/Landing-Page/JoinWithCode.jsx
@@ -10,7 +10,7 @@ const JoinWithCode = () => {
         <input
           className='justify-center lg:mr-20 md:w-fit lg:w-[300px] px-8 py-6 text-md whitespace-nowrap rounded-xl bg-zinc-800 max-md:px-5 '
           placeholder='abc-def-xyz'></input>
-        <div className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl cursor-pointer hover:bg-transparent hover:border-[1px] hover:border-[#077BE7]'>
+        <div className='justify-center self-center p-3 text-md bg-[#077BE7] rounded-xl cursor-pointer hover:bg-transparent hover:border-[#077BE7]'>
           Join Room
         </div>
         <img