wip create page bse

code/frontend/src/App.css

@@ -4,40 +4,40 @@
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 footer {
-  vertical-align: baseline;
+	vertical-align: baseline;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
 }

code/frontend/src/pages/AboutUs.tsx

@@ -3,8 +3,8 @@
 function AboutUs() {
 
     return (
-        <div className="body mainbox">
-            <div className="test"> <img style={{height: "200vh"}} src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
+        <div className="mainbox test">
+            <img style={{height: "200px", position: "relative"}} src='/assets/icons/feather_black.svg' alt="featherIcon" />
         </div>
     );
 }

code/frontend/src/pages/aboutUs.css

@@ -1,15 +1,15 @@
 .mainbox {
-	height: (100vh - var(--Header-height));
+	padding-block-start: 1000px;
+	min-height: 100vh;
 }
 
 @media screen and (min-width: 768px) {
 	.mainbox {
-		height: (100vh - var(--Header-height));
+		margin-top: 1000px;
+		min-height: 100vh;
 	}
 }
-
 .test {
-	flex-grow: 1;
 	height: 100vh;
 	width: 100vw;
 	color: aqua;