InfoSec Page and Replacement of undraw images

src/App.js

@@ -19,6 +19,7 @@ const Hackathon = lazy(() => import('./pages/Hackathon/Hackathon'));
 const Privacy = lazy(() => import('./pages/Policy/Privacy'));
 const Gallery = lazy(() => import('./pages/Gallery/Gallery'));
 const GalleryEvent = lazy(() => import('./pages/Gallery/GalleryEvent'));
+const InfoSec = lazy(() => import('./pages/InfoSec/InfoSec'));
 
 const queryClient = new QueryClient();
 
@@ -43,6 +44,7 @@ const App = () => {
 						<Route path='/gallery/:event' element={<GalleryEvent />} />
 						<Route path='/404' element={<NotFound />} />
 						<Route path='*' element={<FourOFour />} />
+						<Route path='/InfoSec' element={<InfoSec />} />
 					</Routes>
 					<Footer />
 				</Suspense>

src/components/Navbar/Navbar.js

@@ -37,6 +37,7 @@ const NavBar = () => {
 					{/* when hackathon will return to active it again no need to delete */}
 					{/* <ActiveListItem url='/hackathons' name='Hackathons' /> */}
 					<ActiveListItem url='/contactus' name='Contact Us' />
+					<ActiveListItem url='/InfoSec' name='InfoSec' />
 					<Nav.Link href='https://uhcode.red/' target='_blank' rel='noreferrer'>
 						CodeRED <i className='fas fa-external-link-alt'></i>
 					</Nav.Link>

src/pages/About/About.js

@@ -1,6 +1,6 @@
 import React, { lazy, Suspense } from 'react';
 import { Col, Container, Row } from 'react-bootstrap';
-import gif from '../../assets/about.svg';
+import aboutpic from '../../assets/gallery/aboutuspic.svg';
 import { officersFall2023 } from '../../data/officers';
 import cougarettesLogo from '../../assets/partner-logos/cougarettes.webp';
 import csgirlsLogo from '../../assets/partner-logos/csgirls.webp';
@@ -28,7 +28,7 @@ const About = () => {
 			<Container fluid className='contained hero hero-about'>
 				<Row>
 					<Col md='6' className='order-md-2'>
-						<img src={gif} alt='undraw svg' className='img-fluid'></img>
+						<img src={aboutpic} alt='undraw svg' className='img-fluid'></img>
 					</Col>
 					<Col md='6' className='order-md-0'>
 						<div className='about-us'>

src/pages/InfoSec/InfoSec.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Col, Container, Row } from 'react-bootstrap';
+import webgif from '../../assets/CougarCS_Banner.png';
+import { MetaData } from '../../components/Meta/MetaData';
+import './InfoSec.css';
+
+const meta = {
+	title: 'Info-Sec',
+	desc: 'Learn more about CougarCS Web-Dev',
+	url: 'https://cougarcs.com/web-dev',
+	img: 'https://i.ibb.co/NTLFrdj/cougarcs-background11.jpg',
+};
+const InfoSec = () => {
+	return (
+		<>
+			<MetaData {...meta} />
+			<Container fluid className='contained hero hero-web'>
+				<Row className='pb-5'>
+					<Col md='6' className='order-md-2'>
+						<img
+							src={webgif}
+							alt='banner svg'
+							className='img-fluid'
+							style={{ borderRadius: '10px' }}
+						></img>
+					</Col>
+					<Col md='6' className='order-md-0'>
+						<div className='about-us'>
+							<h1>InfoSec at CougarCS</h1>
+							<p className='lead-text'>
+								Information Security something maybe put team members below not
+								to sure what the vision is here
+							</p>
+						</div>
+					</Col>
+				</Row>
+			</Container>
+		</>
+	);
+};
+
+export default InfoSec;

src/pages/Tutoring/Tutoring.js

@@ -1,7 +1,7 @@
 import axios from 'axios';
 import React from 'react';
 import { Col, Container, Row, Button } from 'react-bootstrap';
-import headerImage from '../../assets/tutoring.svg';
+import headerImage from '../../assets//gallery/linuxw1.webp';
 import discordIcon from '../../assets/icons/discord-icon.webp';
 import { MetaData } from '../../components/Meta/MetaData';
 import { useQuery, useQueryClient } from 'react-query';
@@ -57,7 +57,12 @@ const Tutoring = () => {
 			<Container fluid className='contained hero hero-tutoring'>
 				<Row className='pb-5'>
 					<Col md='6' className='order-md-2'>
-						<img src={headerImage} alt='undraw svg' className='img-fluid'></img>
+						<img
+							src={headerImage}
+							alt='Cougar Cs member tutoring'
+							className='img-fluid'
+							style={{ borderRadius: '10px' }}
+						></img>
 					</Col>
 					<Col md='6' className='order-md-0'>
 						<div className='about-us'>