Fix the positioning issue of the Facebook icon and the Apply button.

README.md

@@ -18,3 +18,14 @@ Frontend dashboard of the scholarX platform
     ```
 
 - Visit your app at http://localhost:5173
+
+
+## Backend Server Setup
+
+In order to run the application locally and connect the backend API, you need to set up the backend server URL. 
+
+1. Open the `constants.ts` file.
+2. You will see a line of code that looks like this: `export const API_URL = 'http://localhost:4000/api';`
+3. Replace `'http://localhost:4000/api'` with the URL of your backend server.
+
+Please note that you should not commit this change to the repository. It's recommended to use environment variables for different environments.

src/components/Home/Home.tsx

@@ -24,14 +24,14 @@ const Home: React.FC = () => (
           Unlock Mentorship Opportunities with ScholarX
         </Text>
         <div style={{ marginTop: '40px' }}>
-          <Button
-            className={styles.homePageMainButton}
-            type={'primary'}
-            style={{ marginRight: '20px', marginBottom: '20px' }}
-          >
-            Apply
-          </Button>
-          <Button className={styles.homePageMainButton}>See more</Button>
+          <div className="flex mt-10">
+            <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">
+              See more
+            </Button>
+          </div>
         </div>
       </Col>
       <Col xs={24} md={24} xl={12} style={{ marginTop: '40px' }}>

src/components/Layout/MenuDrawer/MenuDrawer.tsx

@@ -4,6 +4,7 @@ import {
   TwitterOutlined,
   LinkedinFilled,
   InstagramOutlined,
+  FacebookFilled,
 } from '@ant-design/icons';
 import { Avatar, Button, Drawer, Space, Typography } from 'antd';
 
@@ -55,11 +56,9 @@ const MenuDrawer: React.FC<MenuDrawerProps> = ({ openMenu, setOpenMenu }) => {
             target="_blank"
             rel="noreferrer"
           >
-            <Button
-              className={styles.antButton}
-              shape="circle"
-              icon={<img src="/facebook-icon.png" width={20} />}
-            />
+            <Button className={styles.antButton} shape="circle">
+              <FacebookFilled className={styles.antIcon} />
+            </Button>
           </a>
           <a
             href="https://twitter.com/goasksef"

src/components/Layout/Navbar/Navbar.tsx

@@ -5,6 +5,7 @@ import {
   TwitterOutlined,
   LinkedinFilled,
   InstagramOutlined,
+  FacebookFilled,
 } from '@ant-design/icons';
 import { Button, Col, Row, Space, Typography } from 'antd';
 
@@ -110,11 +111,9 @@ const Navbar: React.FC = () => {
               target="_blank"
               rel="noreferrer"
             >
-              <Button
-                className={styles.antButton}
-                shape="circle"
-                icon={<img src="/facebook-icon.png" width={20} />}
-              />
+              <Button className={styles.antButton} shape="circle">
+                <FacebookFilled className={styles.antIcon} />
+              </Button>
             </a>
             <a
               href="https://twitter.com/goasksef"

src/constants.ts

@@ -1 +1 @@
-export const API_URL = 'http://localhost:3000/api';
+export const API_URL = 'http://localhost:4000/api';