Merge pull request #576 from derekcfop/WebDev

Web Development Page

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'));
@@ -40,6 +41,7 @@ const App = () => {
 						<Route path='/privacy-policy' element={<Privacy />} />
 						<Route path='/gallery' element={<Gallery />} />
 						<Route path='/tutoring' element={<Tutoring />} />
+						<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

@@ -34,6 +34,7 @@ const NavBar = () => {
 					<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='/contactus' name='Contact Us' />

src/pages/WebDev/WebDev.css

@@ -0,0 +1,118 @@
+.hero.hero-webdev {
+	padding-bottom: 200px;
+}
+
+.hero-webdev .row {
+	align-items: center;
+}
+
+.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;
+}
+
+.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);
+}
+
+.tutor-cta {
+	margin-top: 60px;
+}
+
+.tutor-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;
+	}
+}

src/pages/WebDev/WebDev.js

@@ -0,0 +1,103 @@
+// import axios from 'axios';
+import React from 'react';
+import { Col, Container, Row, Button } from 'react-bootstrap';
+import headerImage from '../../assets/webdev.svg';
+import { MetaData } from '../../components/Meta/MetaData';
+// import { useQuery, useQueryClient } from 'react-query';
+// import Loading from '../../components/Loading/Loading';
+import './WebDev.css';
+
+const meta = {
+	title: 'WebDev',
+	desc: 'Learn more about CougarCS WebDev',
+	url: 'https://cougarcs.com/WebDev',
+	img: 'https://i.ibb.co/NTLFrdj/cougarcs-background11.jpg',
+};
+
+//const url = `${process.env.REACT_APP_API_URL}/api/tutors`;
+
+/*const fetchTutors = async () => {
+	const res = await axios.get(url);
+	return res.data.tutors;
+};*/
+
+const WebDev = () => {
+	// const queryClient = useQueryClient();
+	/*const { data, isFetching } = useQuery('tutors', fetchTutors, {
+		initialData: () => queryClient.getQueryData('tutors'),
+		staleTime: 300000,
+	});*/
+
+	/*const displayTutors = () => {
+		return isFetching ? (
+			<Loading />
+		) : (
+			data?.map((val, i) =>
+				val?.linkedin ? (
+					<div key={i}>
+						<a
+							href={val.linkedin}
+							rel='nofollow noopener noreferrer'
+							target='_blank'
+						>
+							{val.name}
+						</a>
+					</div>
+				) : (
+					<div key={i}>{val.name}</div>
+				)
+			)
+		);
+	};*/
+
+	return (
+		<>
+			<MetaData {...meta} />
+			<Container fluid className='contained hero hero-WebDev'>
+				<Row className='pb-5'>
+					<Col md='6' className='order-md-2'>
+						<img src={headerImage} alt='undraw svg' className='img-fluid'></img>
+					</Col>
+					<Col md='6' className='order-md-0'>
+						<div className='about-us'>
+							<h1>Web Development Committee at CougarCS</h1>
+							<p className='lead-text'>
+								Our dedicated team is responsible for maintaining the CougarCS{' '}
+								website and Discord bot. If you&apos;re passionate about web
+								development and eager to gain hands-on experience while building
+								new connections, this is the perfect opportunity for you. We
+								value a foundational understanding of HTML, CSS, and JavaScript,
+								making this a welcoming space for learners. If you&apos;re
+								interested in joining our team or have any website suggestions,
+								feel free to reach out to us via email at{' '}
+								<a href='mailto:tutoring@cougarcs.com'>webdev@cougarcs.com</a>,
+								or simply contact any member with the web development tag on
+								Discord!
+							</p>
+						</div>
+					</Col>
+				</Row>
+			</Container>
+
+			<Container fluid className='contained sub-section'>
+				<h2 className='heading'>Special Thanks to Our Web Developers</h2>
+				{/* <div className={isFetching ? 'fetching' : 'tutors-wrapper'}>
+					{displayTutors()}
+				</div> */}
+			</Container>
+
+			<Container fluid className='contained sub-section'>
+				<div className='tutor-cta text-center col-md-8 mx-auto'>
+					<Button
+						className='ghost-button'
+						href='mailto:WebDev@cougarcs.com?subject=CougarCS WebDev Application'
+					>
+						Become a Web Developer
+					</Button>
+				</div>
+			</Container>
+		</>
+	);
+};
+
+export default WebDev;