wip basic page

code/frontend/src/App.tsx

@@ -1,55 +1,63 @@
-import './App.css';
-import LoginAndSignUpPage from './pages/LoginAndSignUpPage';
-import PostCreation from './pages/PostCreation';
+import "./App.css";
+import LoginAndSignUpPage from "./pages/LoginAndSignUpPage";
+import PostCreation from "./pages/PostCreation";
 import "./App.css";
 import "./styles/colors.css";
 import "./styles/fonts.css";
 import "./styles/sizes.css";
 import Footer from "./components/footer/Footer";
-import Feed, {UserFeedRoute} from "./pages/feed/Feed";
-import Header from './components/header/Header';
+import Feed, { UserFeedRoute } from "./pages/feed/Feed";
+import Header from "./components/header/Header";
 import Profile from "./pages/Profile";
-import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
+import {
+	BrowserRouter as Router,
+	Routes,
+	Route,
+	Navigate,
+} from "react-router-dom";
 import { Auth } from "./api/Auth";
 import { NotFound } from "./pages/404Page/NotFoundPage";
-
-
-
+import AboutUs from "./pages/AboutUs";
 
 function App() {
-  return (
-    <Auth>
-      <Router>
-        <Header />
-        <div className="App">
-          <Routes>
-            <Route path="*" element={<NotFound />} />
-            <Route
-              path="/login"
-              element={<LoginAndSignUpPage signupProp={false} />}
-            ></Route>
-            <Route
-              path="/register"
-              element={<LoginAndSignUpPage signupProp={true} />}
-            ></Route>
-            <Route path="/profile/:username" element={<Profile />}></Route>
-            <Route path="/createpost" element={<PostCreation />}></Route>
-            <Route path="/profile" element={<Profile />}></Route>
-            <Route path="/feed/:user" element={<UserFeedRoute />}></Route>
-            <Route path="/" element={<Navigate to="/feed" replace />} />
-            <Route path="/feed" element={<Feed />} />
-            <Route path="/feed/:user" element={<UserFeedRoute />} />
-            <Route path="*" element={<NotFound />} />
-            <Route path="/login" element={<LoginAndSignUpPage signupProp={false} />} />
-            <Route path="/register" element={<LoginAndSignUpPage signupProp={true} />} />
-            <Route path="/profile/:username" element={<Profile />} />
-          </Routes>
-          <Footer />
-        </div>
-      </Router>
-    </Auth>
-
-  );
+	return (
+		<Auth>
+			<Router>
+				<Header />
+				<div className="App">
+					<Routes>
+						<Route path="*" element={<NotFound />} />
+						<Route
+							path="/login"
+							element={<LoginAndSignUpPage signupProp={false} />}
+						></Route>
+						<Route
+							path="/register"
+							element={<LoginAndSignUpPage signupProp={true} />}
+						></Route>
+						<Route path="/profile/:username" element={<Profile />}></Route>
+						<Route path="/createpost" element={<PostCreation />}></Route>
+						<Route path="/profile" element={<Profile />}></Route>
+						<Route path="/feed/:user" element={<UserFeedRoute />}></Route>
+						<Route path="/" element={<Navigate to="/feed" replace />} />
+						<Route path="/feed" element={<Feed />} />
+						<Route path="/feed/:user" element={<UserFeedRoute />} />
+						<Route path="*" element={<NotFound />} />
+						<Route
+							path="/login"
+							element={<LoginAndSignUpPage signupProp={false} />}
+						/>
+						<Route
+							path="/register"
+							element={<LoginAndSignUpPage signupProp={true} />}
+						/>
+						<Route path="/profile/:username" element={<Profile />} />
+					</Routes>
+					<Footer />
+				</div>
+			</Router>
+		</Auth>
+	);
 }
 
 export default App;

code/frontend/src/pages/AboutUs.tsx

@@ -0,0 +1,12 @@
+
+
+function AboutUs() {
+
+    return (
+        <div className="body mainbox">
+            <div className="test"> <img style={{height: "200vh"}} src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
+        </div>
+    );
+}
+
+export default AboutUs;

code/frontend/src/pages/aboutUs.css

@@ -0,0 +1,17 @@
+.mainbox {
+	height: (100vh - var(--Header-height));
+}
+
+@media screen and (min-width: 768px) {
+	.mainbox {
+		height: (100vh - var(--Header-height));
+	}
+}
+
+.test {
+	flex-grow: 1;
+	height: 100vh;
+	width: 100vw;
+	color: aqua;
+	background-color: aquamarine;
+}