Merge pull request #579 from CougarCS/master

Release

public/sitemap.xml

@@ -11,7 +11,7 @@
 <priority>0.80</priority>
 </url>
 <url>
-<loc>https://cougarcs.com/calendar</loc>
+<loc>https://cougarcs.com/events</loc>
 <lastmod>2021-06-14T04:45:45+00:00</lastmod>
 <priority>0.80</priority>
 </url>

src/App.js

@@ -10,6 +10,7 @@ const Footer = lazy(() => import('./components/Footer/Footer'));
 const ScrollTop = lazy(() => import('./components/ScrollTop/ScrollTop'));
 const About = lazy(() => import('./pages/About/About'));
 const Tutoring = lazy(() => import('./pages/Tutoring/Tutoring'));
+const WebDev = lazy(() => import('./pages/WebDev/WebDev'));
 const ContactUs = lazy(() => import('./pages/ContactUs/ContactUs'));
 const Events = lazy(() => import('./pages/Events/Events'));
 const Home = lazy(() => import('./pages/Home/Home'));
@@ -19,6 +20,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();
 
@@ -34,12 +36,14 @@ const App = () => {
 						<Route path='/' element={<Home />} />
 						<Route path='/about' element={<About />} />
 						<Route path='/join' element={<Join />} />
-						<Route path='/calendar' element={<Events />} />
+						<Route path='/events' element={<Events />} />
 						<Route path='/contactus' element={<ContactUs />} />
 						<Route path='/hackathons' element={<Hackathon />} />
 						<Route path='/privacy-policy' element={<Privacy />} />
 						<Route path='/gallery' element={<Gallery />} />
 						<Route path='/tutoring' element={<Tutoring />} />
+						<Route path='/infoSec' element={<InfoSec />} />
+						<Route path='/webdev' element={<WebDev />} />
 						<Route path='/gallery/:event' element={<GalleryEvent />} />
 						<Route path='/404' element={<NotFound />} />
 						<Route path='*' element={<FourOFour />} />

src/components/Navbar/Navbar.js

@@ -31,12 +31,15 @@ const NavBar = () => {
 			>
 				<Nav>
 					<ActiveListItem url='/about' name='About' />
-					<ActiveListItem url='/calendar' name='Events' />
+					<ActiveListItem url='/events' name='Events' />
 					<ActiveListItem url='/gallery' name='Gallery' />
 					<ActiveListItem url='/tutoring' name='Tutoring' />
+					<ActiveListItem url='/webdev' name='WebDev' />
 					{/* when hackathon will return to active it again no need to delete */}
 					{/* <ActiveListItem url='/hackathons' name='Hackathons' /> */}
+					<ActiveListItem url='/infosec' name='InfoSec' />
 					<ActiveListItem url='/contactus' name='Contact Us' />
+
 					<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/Events/Events.js

@@ -45,9 +45,9 @@ const formatDates = (date) => {
 };
 
 const meta = {
-	title: 'Calendar',
+	title: 'Events',
 	desc: 'Checkout our events.',
-	url: 'https://cougarcs.com/calendar',
+	url: 'https://cougarcs.com/events',
 	img: 'https://i.ibb.co/NTLFrdj/cougarcs-background11.jpg',
 };
 

src/pages/InfoSec/InfoSec.css

@@ -0,0 +1,51 @@
+.discord-button {
+	background-color: #7289da;
+	padding: 13px 25px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
+	border: 0;
+	border-radius: 7px;
+	font-weight: 600;
+	outline: 0px;
+	box-shadow: none !important;
+}
+
+.discord-button:hover,
+.discord-button:active,
+.discord-button:focus {
+	background-color: #627ee2 !important;
+}
+
+.discord-button-wrapper small {
+	color: #777;
+	font-size: 11px;
+}
+
+
+.info-cta {
+	margin-top: 60px;
+}
+
+.info-cta p {
+	font-size: 18px;
+	margin-bottom: 30px;
+}
+.ghost-button {
+	background-color: transparent;
+	border: 2px solid;
+	color: var(--color-on-labelAndHeaders);
+	padding: 13px 25px;
+	border-radius: 7px;
+	font-weight: 600;
+	outline: none;
+	box-shadow: none !important;
+}
+
+.ghost-button:hover,
+.ghost-button:active,
+.ghost-button:focus {
+	background-color: var(--color-on-labelAndHeaders) !important;
+	border-color: var(--color-on-labelAndHeaders) !important;
+	color: #fff !important;
+}

src/pages/InfoSec/InfoSec.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import { Col, Container, Row, Button } from 'react-bootstrap';
+import webgif from '../../assets/CougarCS_Banner.png';
+import { MetaData } from '../../components/Meta/MetaData';
+import discordIcon from '../../assets/icons/discord-icon.webp';
+import './InfoSec.css';
+
+const meta = {
+	title: 'Info-Sec',
+	desc: 'Learn more about CougarCS InfoSec',
+	url: 'https://cougarcs.com/infosec',
+	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'>
+								Have you ever wanted to learn how to hack into computers or
+								phish someone through email ? Perhaps you’d like to learn about
+								best information security practices to protect yourself and
+								others? Or maybe you are down for competitive hacking in a
+								controlled environment against external clubs!
+							</p>
+							<div className='hero-ctas'>
+								<div className='discord-button-wrapper'>
+									<Button
+										className='discord-button'
+										href='https://discord.gg/wdxqgErhKF'
+										target='_blank'
+										rel='nofollow noopener'
+									>
+										<img src={discordIcon} alt='discord button logo' />
+										Join Discord
+									</Button>
+									<p>
+										<small>More Information is provided via Discord</small>
+									</p>
+								</div>
+							</div>
+						</div>
+					</Col>
+				</Row>
+			</Container>
+			<Container fluid className='contained sub-section'>
+				<h2 className='heading'>Interested in InfoSec at CougarCS?</h2>
+				<div className='info-cta text-center col-md-8 mx-auto'>
+					<p>
+						Develop Soft &amp; Technical Skills - Learn Linux - Protect yourself
+						on the Internet - Partticapte in Security Challenenges - Earn
+						CougarCS Member Points
+					</p>
+					<Button
+						className='ghost-button'
+						href='mailto:tutoring@cougarcs.com?subject=CougarCS Tutor Application'
+					>
+						Become a Hacker
+					</Button>
+				</div>
+			</Container>
+		</>
+	);
+};
+
+export default InfoSec;

src/pages/Tutoring/Tutoring.js

@@ -1,7 +1,6 @@
-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';
@@ -15,11 +14,15 @@ const meta = {
 	img: 'https://i.ibb.co/NTLFrdj/cougarcs-background11.jpg',
 };
 
-const url = `${process.env.REACT_APP_API_URL}/api/tutors`;
+const url =
+	process.env.NODE_ENV === 'development'
+		? 'http://localhost:3000'
+		: 'https://api.cougarcs.com';
 
 const fetchTutors = async () => {
-	const res = await axios.get(url);
-	return res.data.tutors;
+	const res = await fetch(url + '/v1/tutors/names');
+	const { data } = await res.json();
+	return data;
 };
 
 const Tutoring = () => {
@@ -28,7 +31,6 @@ const Tutoring = () => {
 		initialData: () => queryClient.getQueryData('tutors'),
 		staleTime: 300000,
 	});
-
 	const displayTutors = () => {
 		return isFetching ? (
 			<Loading />
@@ -45,7 +47,7 @@ const Tutoring = () => {
 						</a>
 					</div>
 				) : (
-					<div key={i}>{val.name}</div>
+					<div key={i}>{val.first_name + ' ' + val.last_name}</div>
 				)
 			)
 		);
@@ -57,7 +59,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'>

src/pages/WebDev/WebDev.css

@@ -0,0 +1,95 @@
+.hero.hero-webdev {
+	padding-bottom: 200px;
+}
+
+.hero-webdev .row {
+	align-items: center;
+}
+
+.ghost-button {
+	background-color: transparent;
+	border: 2px solid;
+	color: var(--color-on-labelAndHeaders);
+	padding: 13px 25px;
+	border-radius: 7px;
+	font-weight: 600;
+	outline: none;
+	box-shadow: none !important;
+}
+
+.ghost-button:hover,
+.ghost-button:active,
+.ghost-button:focus {
+	background-color: var(--color-on-labelAndHeaders) !important;
+	border-color: var(--color-on-labelAndHeaders) !important;
+	color: #fff !important;
+}
+
+.classes-wrapper {
+	max-width: 840px;
+	margin: auto;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 200px));
+	justify-content: center;
+	gap: 30px;
+}
+
+.classes-wrapper .class-number {
+	text-align: center;
+	border: 0px;
+	border-radius: 7px;
+	background: var(--color-secondary);
+	color: var(--color-on-secondary);
+	padding: 20px 30px;
+	font-weight: 600;
+	font-size: 18px;
+}
+
+/*.tutors-wrapper {
+	max-width: 750px;
+	margin: auto;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	justify-content: center;
+	column-gap: 60px;
+	row-gap: 15px;
+}
+
+.tutors-wrapper a,
+.tutors-wrapper a:hover {
+	color: var(--color-on-background);
+}*/
+
+.webdev-cta {
+	margin-top: 60px;
+}
+
+.webdev-cta p {
+	font-size: 18px;
+	margin-bottom: 30px;
+}
+
+/*.fetching {
+	display: grid;
+	justify-content: center;
+}*/
+
+@media (max-width: 767px) {
+	.hero.hero-webdev {
+		padding-bottom: 100px;
+	}
+
+	.hero-webdev .col-md-6:nth-child(1) {
+		margin-bottom: 75px;
+	}
+
+	.hero-webdev .col-md-6:nth-child(1) img {
+		max-height: 300px;
+		display: block;
+		margin: auto;
+	}
+
+	/*.tutors-wrapper {
+		text-align: center;
+	} */
+}