diff --git a/src/App.js b/src/App.js index d5614424..57fe9b12 100644 --- a/src/App.js +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/assets/webdev.svg b/src/assets/webdev.svg new file mode 100644 index 00000000..7c4e9e88 --- /dev/null +++ b/src/assets/webdev.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Navbar/Navbar.js b/src/components/Navbar/Navbar.js index e31caeb8..aa350958 100644 --- a/src/components/Navbar/Navbar.js +++ b/src/components/Navbar/Navbar.js @@ -34,6 +34,7 @@ const NavBar = () => { + {/* when hackathon will return to active it again no need to delete */} {/* */} diff --git a/src/pages/WebDev/WebDev.css b/src/pages/WebDev/WebDev.css new file mode 100644 index 00000000..b426f4b0 --- /dev/null +++ b/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; + } +} diff --git a/src/pages/WebDev/WebDev.js b/src/pages/WebDev/WebDev.js new file mode 100644 index 00000000..f2c18cf6 --- /dev/null +++ b/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 ? ( + + ) : ( + data?.map((val, i) => + val?.linkedin ? ( + + ) : ( +
{val.name}
+ ) + ) + ); + };*/ + + return ( + <> + + + + + undraw svg + + +
+

Web Development Committee at CougarCS

+

+ Our dedicated team is responsible for maintaining the CougarCS{' '} + website and Discord bot. If you'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're + interested in joining our team or have any website suggestions, + feel free to reach out to us via email at{' '} + webdev@cougarcs.com, + or simply contact any member with the web development tag on + Discord! +

+
+ + + + + +

Special Thanks to Our Web Developers

+ {/*
+ {displayTutors()} +
*/} + + + +
+ +
+ + + ); +}; + +export default WebDev;