Make the "Become a Mentor" button responsive.

src/components/Home/Home.tsx

@@ -28,7 +28,7 @@ const Home: React.FC = () => (
             <Button className="flex justify-center items-center mr-5 mb-5 bg-blue-500 hover:bg-blue-700 text-white py-1 px-16 rounded w-40 h-9 font-sans font-bold">
               Apply
             </Button>
-            <Button className="flex justify-center items-center mr-5 mb-5 text-black py-1 px-16 rounded w-40 h-9 font-sans font-bold">
+            <Button className="flex justify-center items-center mr-5 mb-5 text-black py-1 px-16 rounded w-40 h-9 font-sans">
               See more
             </Button>
           </div>

src/components/Layout/MenuDrawer/MenuDrawer.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext, useState } from 'react';
 
 import {
   TwitterOutlined,
@@ -8,6 +8,12 @@
 } from '@ant-design/icons';
 import { Avatar, Button, Drawer, Space, Typography } from 'antd';
 
+import {
+  UserContext,
+  type UserContextType,
+} from './../../../contexts/UserContext';
+import { useNavigate } from 'react-router-dom';
+
 import styles from './MenuDrawer.module.css';
 
 const { Text } = Typography;
@@ -18,6 +24,11 @@
 }
 
 const MenuDrawer: React.FC<MenuDrawerProps> = ({ openMenu, setOpenMenu }) => {
+  const [isLoginModalVisible, setIsLoginModalVisible] = useState(false);
+  const navigate = useNavigate();
+
+  const { user } = useContext(UserContext) as UserContextType;
+
   const handleOpenMenu = (): boolean => {
     return openMenu;
   };
@@ -26,6 +37,19 @@
     setOpenMenu(false);
   };
 
+  const handleLoginModalOpen = (): void => {
+    setIsLoginModalVisible(true);
+  };
+
+  const handleMentorRegistration = (): void => {
+    console.log('Clicked');
+    if (user === null) {
+      handleLoginModalOpen();
+    } else {
+      navigate('/mentor-registration');
+    }
+  };
+
   return (
     <Drawer
       open={handleOpenMenu()}
@@ -50,6 +74,12 @@
         <a href="" target="_blank" rel="noreferrer">
           <Text className={styles.antTypography}>Join Us</Text>
         </a>
+        <Button
+          className="mr-5 mb-5 w-40 h-9 font-sans text-black-400 py-1 px-4 rounded"
+          onClick={handleMentorRegistration}
+        >
+          Become a Mentor
+        </Button>
         <Space direction="horizontal" size={20}>
           <a
             href="https://www.facebook.com/sustainableeducationfoundation/"

src/components/Layout/Navbar/Navbar.tsx

@@ -95,13 +95,13 @@ const Navbar: React.FC = () => {
               <a href="" target="_blank" rel="noreferrer">
                 <Text className={styles.antTypography}>Join Us</Text>
               </a>
+              <Button
+                className="mr-5 mb-5 w-40 h-9 font-sans text-black-400 py-1 px-4 rounded"
+                onClick={handleMentorRegistration}
+              >
+                Become a Mentor
+              </Button>
             </div>
-            <Button
-              className={styles.loginButton}
-              onClick={handleMentorRegistration}
-            >
-              Become a Mentor
-            </Button>
           </Space>
         </Col>
         <Col md={4} lg={4} xl={3} className={styles.socialMediaContainer}>