diff --git a/README.MD b/README.MD
index 9f3b2f6..b39f326 100644
--- a/README.MD
+++ b/README.MD
@@ -3,6 +3,7 @@
## Tech Stack
FERN
+
- Firebase
- Express
- React
@@ -12,14 +13,14 @@ FERN
1. install node v21.6.2 (or >= v14.17.3)
2. install yarn
-3. in ./api run yarn, then yarn build, then yarn dev (local host backend)
+3. in ./api run yarn, then yarn build, then yarn dev (local host backend)
4. in ./web run yarn, then yarn build, then yarn dev (local host frontend)
## Branch convensions
+
1. One Branch per Task
2. Name branch VOL-<task_number>/what-is-being-done, e.g. VLT-001/add-user-authentication
-
## Setup Runbook
1. Create a new repository with UoAWDCC as owner
diff --git a/web/src/App.tsx b/web/src/App.tsx
index e97286c..d5eb3e3 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -2,12 +2,17 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { useState } from 'react';
import Home from '@pages/Home';
+import MainMenu from '@pages/MainMenu';
const router = createBrowserRouter([
{
path: '/:name',
element: <Home />,
},
+ {
+ path: '/',
+ element: <MainMenu />,
+ },
]);
export default function App() {
@@ -17,4 +22,4 @@ export default function App() {
<RouterProvider router={router} />
</QueryClientProvider>
);
-}
+}
\ No newline at end of file
diff --git a/web/src/components/NavBar.tsx b/web/src/components/NavBar.tsx
new file mode 100644
index 0000000..638c94a
--- /dev/null
+++ b/web/src/components/NavBar.tsx
@@ -0,0 +1,19 @@
+// NavBar.js
+import '../styles/componentStyles/NavBar.css';
+
+function NavBar() {
+ return (
+ <nav className="nav-bar">
+ <div className="nav-content">
+ <h1 className="site-title">Temp NavBar</h1>
+ <ul className="nav-links">
+ <li>Home</li>
+ <li>About</li>
+ <li>Contact</li>
+ </ul>
+ </div>
+ </nav>
+ );
+}
+
+export default NavBar;
diff --git a/web/src/index.css b/web/src/index.css
deleted file mode 100644
index f576e08..0000000
--- a/web/src/index.css
+++ /dev/null
@@ -1,11 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:wdth,wght@75..100,300..800&display=swap');
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- min-width: 0;
-}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 93db379..637b72e 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.tsx';
-import './index.css';
+import './styles/index.css';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
diff --git a/web/src/pages/MainMenu.tsx b/web/src/pages/MainMenu.tsx
new file mode 100644
index 0000000..06c80b5
--- /dev/null
+++ b/web/src/pages/MainMenu.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+import NavBar from '../components/NavBar'
+
+import '../styles/pageStyles/MainMenu.css';
+
+
+function MainMenu() {
+ return (
+ <NavBar />
+ );
+}
+
+export default MainMenu;
diff --git a/web/src/styles/componentStyles/NavBar.css b/web/src/styles/componentStyles/NavBar.css
new file mode 100644
index 0000000..88a330d
--- /dev/null
+++ b/web/src/styles/componentStyles/NavBar.css
@@ -0,0 +1,35 @@
+/* NavBar.css */
+
+/* Navigation Bar */
+.nav-bar {
+ background-color: #333;
+ padding: 1rem;
+ }
+
+ .nav-content {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .site-title {
+ color: #fff;
+ font-size: 1.5rem;
+ }
+
+ .nav-links {
+ display: flex;
+ gap: 1rem;
+ list-style-type: none;
+ }
+
+ .nav-links li {
+ color: #fff;
+ font-size: 1rem;
+ cursor: pointer;
+ }
+
+ .nav-links li:hover {
+ text-decoration: underline;
+ }
+
\ No newline at end of file
diff --git a/web/src/styles/index.css b/web/src/styles/index.css
new file mode 100644
index 0000000..944ea7a
--- /dev/null
+++ b/web/src/styles/index.css
@@ -0,0 +1,85 @@
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:wdth,wght@75..100,300..800&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/* global.css */
+
+/* Reset */
+body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, button, input {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+/* Typography */
+body {
+ font-family: 'Helvetica Neue', Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.6;
+}
+
+h1 {
+ font-size: 2.5rem;
+ font-weight: 700;
+ line-height: 1.2;
+ margin-bottom: 1rem;
+}
+
+h2 {
+ font-size: 2rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+}
+
+h3 {
+ font-size: 1.75rem;
+ font-weight: 600;
+ margin-bottom: 1rem;
+}
+
+p {
+ font-size: 1rem;
+ margin-bottom: 1rem;
+}
+
+/* Links */
+a {
+ color: #007bff;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+/* Buttons */
+button {
+ cursor: pointer;
+ background-color: #007bff;
+ color: #fff;
+ border: none;
+ border-radius: 4px;
+ padding: 0.5rem 1rem;
+ font-size: 1rem;
+}
+
+button:hover {
+ background-color: #0056b3;
+}
+
+/* Containers */
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 20px;
+}
+
+/* Flexbox Utilities */
+.flex {
+ display: flex;
+}
+
+.flex-center {
+ justify-content: center;
+ align-items: center;
+}
diff --git a/web/src/styles/pageStyles/MainMenu.css b/web/src/styles/pageStyles/MainMenu.css
new file mode 100644
index 0000000..e69de29