Add Join Us page with new navbar and footer

frontend/package.json

@@ -33,7 +33,7 @@
     "react-countup": "^6.4.2",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
-    "react-router-dom": "^6.30.1",
+    "react-router-dom": "^6.30.4",
     "react-scripts": "^5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"

frontend/src/App.tsx

@@ -1,43 +1,23 @@
 import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Container } from '@mui/material';
-import ScrollToTop from './utils/scrollToTop';
-import Home from './components/Home/Home';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import NavBar from './components/NavBar/NavBar';
 import Footer from './components/Footer/Footer';
-import About from './components/About/About';
-import Events from './components/NewEvents/Events';
-import Opportunities from './components/Opportunities/Opportunities';
-import Membership from './components/Membership/Membership';
-import Login from './components/Login/Login';
-import EditForm from './components/Login/EditProfile';
-import Initiatives from './components/Initiatives/Initiatives';
-import OpenSource from './components/OpenSource/OpenSource';
-import Sponsorships from './components/Sponsorships/Sponsorships'; // added my mal and line 34
-import OpenSourceCommunity from './components/OpenSourceCommunity/OpenSourceCommunity';
-import DevCommunity from './components/Dev/DevCommunity'
-import InovateCommunity from './components/Inovate/InovateCommunity'
+import Home from './components/Home/Home';
+import Events from './components/Events/Events';
+import Communities from './components/Communities/Communities';
+import JoinUs from './components/JoinUs/JoinUs';
 
 function App() {
   return (
     <BrowserRouter>
-      <ScrollToTop />
       <Container maxWidth={false} style={{ margin: 0, padding: 0 }}>
         <NavBar />
         <Routes>
           <Route path="/" element={<Home />} />
-          <Route path="/about" element={<About />} />
           <Route path="/events" element={<Events />} />
-          <Route path="/opportunities" element={<Opportunities />} />
-          <Route path="/membership" element={<Membership />} />
-          { /* <Route path="/login" element={<Login />} /> */}
-          <Route path="/editprofile" element={<EditForm />} />
-          <Route path="/initiatives" element={<Initiatives />} />
-          <Route path="/opensource" element={<OpenSource />} />
-          <Route path="/sponsorships" element={<Sponsorships />} /> 
-          <Route path="/opensourcecommunity" element={<OpenSourceCommunity />} /> 
-          <Route path="/devcommunity" element={<DevCommunity />} />
-          <Route path="/innovatecommunity" element={<InovateCommunity />} />
+          <Route path="/communities" element={<Communities />} />
+          <Route path="/join-us" element={<JoinUs />} />
         </Routes>
         <Footer />
       </Container>

frontend/src/components/Communities/Communities.css

@@ -0,0 +1,82 @@
+.communities-page {
+  min-height: 100vh;
+  background-color: #0a0e1a;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 140px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+@media (min-width: 900px) {
+  .communities-page {
+    padding-top: 160px;
+  }
+}
+
+.communities-heading {
+  font-family: 'Space Mono', monospace;
+  font-size: 2.5rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+@media (min-width: 900px) {
+  .communities-heading {
+    font-size: 3.5rem;
+  }
+}
+
+.communities-subtext {
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  text-align: center;
+  max-width: 600px;
+  line-height: 1.6;
+  margin-bottom: 48px;
+}
+
+@media (min-width: 900px) {
+  .communities-subtext {
+    font-size: 1.25rem;
+  }
+}
+
+.communities-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 32px;
+  justify-content: center;
+  max-width: 1000px;
+}
+
+.communities-card {
+  box-sizing: border-box;
+  border: 2px solid #725DEF;
+  border-radius: 12px;
+  padding: 32px;
+  width: 280px;
+  min-height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.communities-card-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.4rem;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+
+.communities-card-body {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.95rem;
+  color: rgba(255, 255, 255, 0.75);
+}

frontend/src/components/Communities/Communities.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import './Communities.css';
+
+const communities = [
+  { title: 'Dev', body: 'Placeholder description for the Dev community.' },
+  { title: 'Open Source', body: 'Placeholder description for the Open Source community.' },
+  { title: 'Innovate', body: 'Placeholder description for the Innovate community.' },
+];
+
+const Communities = () => {
+  return (
+    <Box className="communities-page">
+      <Typography className="communities-heading">Communities</Typography>
+      <Typography className="communities-subtext">
+        CSES is made up of several communities, each focused on a different way to build,
+        learn, and grow together. Placeholder copy — real content coming soon.
+      </Typography>
+
+      <Box className="communities-grid">
+        {communities.map((community) => (
+          <Box key={community.title} className="communities-card">
+            <Typography className="communities-card-title">{community.title}</Typography>
+            <Typography className="communities-card-body">{community.body}</Typography>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  );
+};
+
+export default Communities;

frontend/src/components/Events/Events.css

@@ -0,0 +1,102 @@
+.events-page {
+  min-height: 100vh;
+  background-color: #0a0e1a;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 140px;
+  padding-bottom: 64px;
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+@media (min-width: 900px) {
+  .events-page {
+    padding-top: 160px;
+  }
+}
+
+.events-heading {
+  font-family: 'Space Mono', monospace;
+  font-size: 2.5rem;
+  font-weight: 400;
+  text-align: center;
+  margin-bottom: 40px;
+}
+
+@media (min-width: 900px) {
+  .events-heading {
+    font-size: 3.5rem;
+  }
+}
+
+.events-filter-row {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.events-filter-button {
+  border: 2px solid #725DEF;
+  border-radius: 24px;
+  color: white;
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
+  text-transform: none;
+  padding: 8px 24px;
+}
+
+.events-filter-button:hover {
+  background-color: rgba(114, 93, 239, 0.1);
+}
+
+.events-filter-button.active {
+  background-color: #8B5CF6;
+}
+
+.events-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 24px;
+  justify-content: center;
+  max-width: 1000px;
+  margin-bottom: 96px;
+}
+
+.events-card {
+  box-sizing: border-box;
+  border: 2px solid #725DEF;
+  border-radius: 12px;
+  padding: 24px;
+  width: 260px;
+  min-height: 160px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.events-card-title {
+  font-family: 'Space Mono', monospace;
+  font-size: 1.1rem;
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+
+.events-card-body {
+  font-family: 'Space Mono', monospace;
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.events-empty-state {
+  font-family: 'Space Mono', monospace;
+  font-size: 1rem;
+  color: rgba(255, 255, 255, 0.6);
+  text-align: center;
+  margin-bottom: 96px;
+}