add some very basic routes

frontend/package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "@heroicons/react": "^2.1.5",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router": "^7.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

frontend/src/About/About.module.css

@@ -0,0 +1,28 @@
+.aboutPage {
+  height: 100%;
+  gap: 16px;
+}
+
+.aboutPage,
+.header,
+.main,
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.main {
+  margin-top: 16px;
+  line-height: 1.5;
+  color: #222;
+}
+
+.logo {
+  width: 64px;
+}
+
+.footer code {
+  margin-top: 8px;
+}

frontend/src/About/About.tsx

@@ -0,0 +1,28 @@
+import classes from "./About.module.css";
+import logo from "../assets/pyramidIcon.svg";
+
+export default function AboutPage() {
+  return (
+    <div className={classes.aboutPage}>
+      <header className={classes.header}>
+        <img className={classes.logo} src={logo} alt="Pyramids logo" />
+        <h1>Pyramids</h1>
+      </header>
+      <main className={classes.main}>
+        <h2>Pyramids is by:</h2>
+        <ul>
+          <li>Aaron Fang</li>
+          <li>Isaac Kim</li>
+          <li>Jared Schultz</li>
+          <li>Lachlan Shoesmith</li>
+          <li>Ricky Pham</li>
+          <li>Vincent Tannos</li>
+        </ul>
+      </main>
+      <footer className={classes.footer}>
+        <a href="https://github.com/devsoc-unsw/trainee-fool-24t3">GitHub</a>
+        <code>\o/</code>
+      </footer>
+    </div>
+  );
+}

frontend/src/App.css

@@ -1,7 +1,24 @@
-html {
-  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+html,
+body {
+  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
 .event {
   color: green;
 }
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+.page {
+  height: 90vh;
+  overflow-y: auto;
+}
+
+h1 a {
+  color: inherit;
+  text-decoration: none;
+}

frontend/src/App.tsx

@@ -1,39 +1,20 @@
 import "./App.css";
-import Event from "./Event/Event";
-import { Keyword, KeywordOptions } from "./Keyword/Keyword";
-import bbq from "./assets/bbq.png";
 import NavBar from "./NavBar/NavBar";
-import Button, { ButtonOptions } from "./Button/Button";
-import CreateEvent from "./CreateEvent/CreateEvent";
+import { BrowserRouter, Route, Routes } from "react-router";
+import HomePage from "./HomePage/HomePage";
+import AboutPage from "./About/About";
 
 function App() {
   return (
-    <>
-      <h1>Hi</h1>
-      <Event
-        name="DevSoc BBQ"
-        image={bbq}
-        backgroundPositionY="180px"
-        time="Tomorrow mate"
-      ></Event>
-      <Event
-        name="TikTok rizz party"
-        image="https://pbs.twimg.com/media/F2y8Ehbb0AA-ch9.jpg"
-        backgroundPositionY="150px"
-        time="25th Dec 2024"
-        keywords={["hiii", "another keyword"]}
-      ></Event>
-      <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
-      <Keyword type={KeywordOptions.Add}>Frunk Dwindleward</Keyword>
-      <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
-      <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
-      <Keyword type={KeywordOptions.Delete}>Frunk Dwindleward</Keyword>
-      <Button type={ButtonOptions.Plus}></Button>
-      <Button type={ButtonOptions.Bookmark}></Button>
-      <Button type={ButtonOptions.String}>Log in</Button>
-      <CreateEvent></CreateEvent>
+    <BrowserRouter>
+      <div className="page">
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/about" element={<AboutPage />} />
+        </Routes>
+      </div>
       <NavBar profileImage="https://i.redd.it/white-pharaoh-in-school-textbook-v0-fgr8oliazlkd1.jpg?width=225&format=pjpg&auto=webp&s=04dc4c2c8a0170c4e161091673352cd966591475"></NavBar>
-    </>
+    </BrowserRouter>
   );
 }
 

frontend/src/HomePage/HomePage.module.css

@@ -0,0 +1,22 @@
+.homePage {
+  height: 100%;
+}
+
+.homePage,
+.header,
+.main {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.main {
+  margin-top: 16px;
+  line-height: 1.5;
+  color: #222;
+}
+
+.logo {
+  width: 64px;
+}

frontend/src/HomePage/HomePage.tsx

@@ -0,0 +1,17 @@
+import classes from "./HomePage.module.css";
+import logo from "../assets/pyramidIcon.svg";
+
+export default function HomePage() {
+  return (
+    <div className={classes.homePage}>
+      <header className={classes.header}>
+        <img className={classes.logo} src={logo} alt="Pyramids logo" />
+        <h1>Pyramids</h1>
+      </header>
+      <main className={classes.main}>
+        <h2>Welcome!</h2>
+        <p>Click the icon in the bottom right to log in.</p>
+      </main>
+    </div>
+  );
+}

frontend/src/NavBar/NavBar.module.css

@@ -6,7 +6,7 @@
   align-items: center;
   width: 100%;
   padding: 12px;
-  font-size: 20px;
+  font-size: 1rem;
 }
 
 .pyramids {
@@ -15,26 +15,41 @@
   align-items: center;
   justify-content: space-between;
   width: 12%;
-  font-size: 18px;
+  text-align: left;
+}
+
+.pyramids h1 {
+  font-size: 1.3rem;
 }
 
 .logo {
-  height: 48px;
+  height: 32px;
 }
 
 .pages {
   display: flex;
   width: 35%;
   justify-content: space-between;
   align-items: center;
-  min-width: 300px
+  min-width: 300px;
 }
 
 .profile {
-  border-radius: 16px;
-  height: 48px;
-  width: 48px;
+  border-radius: 12px;
+  height: 32px;
+  width: 32px;
   margin-right: 3%;
   margin-left: 5%;
   background-size: cover;
 }
+
+.container a {
+  text-decoration: none;
+  font-weight: bold;
+  color: black;
+}
+
+.container a.active {
+  margin-top: 1.5px;
+  border-bottom: 2px solid hsl(203, 88%, 27%);
+}