feat(header): updated so header works with and without banner image, started Vehicles page

src/Header/Header.css

@@ -9,7 +9,7 @@ header {
 	align-items: center;
 	justify-content: space-between;
 	background-color: #1f1f1f;
-	position: absolute;
+	/* position: absolute; */
 	z-index: 1;
 	top: 0;
 	left: 0;
@@ -163,7 +163,6 @@ nav a li:hover {
 :root {
 	--fade-starts-at-bottom: 90%;
 	--fade-starts-at-top: 96%;
-	--banner-text-pos-left: 15svw;
 	--banner-text-background: white;
 }
 
@@ -181,14 +180,14 @@ nav a li:hover {
 
 /* used to postiion title and sub title */
 #BannerHeader div {
-	margin-top: 25%;
+	margin-top: 30svh;
+	padding-left: 15svw;
 }
 
 #BannerHeader h1 {
 	display: flex;
 	width: fit-content;
 	margin: 0px;
-	margin-left: var(--banner-text-pos-left);
 
 	font-size: 80px; /* todo make larger */
 	font-weight: normal;
@@ -200,8 +199,6 @@ nav a li:hover {
 	display: flex;
 	width: fit-content;
 
-	margin-left: var(--banner-text-pos-left);
-
 	font-size: xx-large;
 	font-weight: normal;
 

src/Header/Header.js

@@ -17,6 +17,7 @@ export default function Header() {
 		titleText: "UCalgary Baja",
 		subtitleText: "Hello",
 		imgUrl: "https://picsum.photos/200",
+		headerPostion: "absolute",
 	});
 
 	/**
@@ -50,7 +51,13 @@ export default function Header() {
 
 	return (
 		<>
-			<header>
+			<header
+				style={{
+					position:
+						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
+							? "relative"
+							: "absolute",
+				}}>
 				<Link to={"/"}>
 					<img
 						id="logo"
@@ -66,8 +73,8 @@ export default function Header() {
 						<Link to={"/About"}>
 							<li>ABOUT</li>
 						</Link>
-						<Link to={"/Teams"}>
-							<li>TEAM</li>
+						<Link to={"/Vehicles"}>
+							<li>OUR VEHICLES</li>
 						</Link>
 						<Link to={"/"}>
 							<li>HISTORY</li>

src/Vehicles/Vehicles.jsx

@@ -0,0 +1,15 @@
+import UpdateBanner from "../Header/UpdateBanner";
+import "./Vehicles.css";
+
+export default function Vehicles() {
+	return (
+		<>
+			<UpdateBanner
+				updatedTitleText=""
+				updatedSubtitleText=""
+				updatedImgUrl=""
+				updatetdImgAlt=""
+			/>
+		</>
+	);
+}

src/index.js

@@ -12,6 +12,7 @@ import Gallery from "./Gallery/Gallery";
 import "./index.css";
 import MockPage from "./MockDB/MockPage";
 import Home from "./Home/Home";
+import Vehicles from "./Vehicles/Vehicles";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -27,8 +28,8 @@ root.render(
 						path="/About"
 						element={<AboutUs />}></Route>
 					<Route
-						path="/Teams"
-						element={<SubTeams />}></Route>
+						path="/Vehicles"
+						element={<Vehicles />}></Route>
 					<Route
 						path="/OurSponsors"
 						element={<OurSponsors />}></Route>