feat(home): banner started on final touches

src/Header/Header.css

@@ -4,10 +4,16 @@ header {
 	margin: 1%;
 	margin-top: 1svh;
 	padding-right: 0.5svw;
+	/* width: 100%; */
 
 	align-items: center;
 	justify-content: space-between;
 	background-color: #1f1f1f;
+	/* position: absolute; */
+	z-index: 1;
+	top: 0;
+	left: 0;
+	right: 0;
 }
 
 header a {
@@ -45,13 +51,22 @@ header div {
 
 /* naviagation section */
 
+nav ul {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	list-style: none;
+	margin: 0px;
+	padding: 0px;
+	column-gap: 2svw;
+}
+
 nav a {
 	text-decoration: none;
 	color: inherit;
 	cursor: pointer;
 	background-color: #1f1f1f;
 	color: whitesmoke;
-	padding: 1rem;
 
 	font-size: larger;
 
@@ -62,9 +77,6 @@ nav a {
 nav a:first-child {
 	border-left: none;
 }
-/* #FirstNav {
-	
-} */
 
 nav a li:hover {
 	color: #a80029;
@@ -75,14 +87,6 @@ nav a li:hover {
 	filter: hue-rotate(180deg);
 }
 
-nav ul {
-	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	list-style: none;
-	margin: 0px;
-	padding: 0px;
-}
 /* creates drop downs */
 /* makes it so that the tags look the same whist having removing browser error */
 .DropDownHeader {
@@ -123,16 +127,49 @@ nav ul {
 	width: 100%;
 	display: flex;
 
-	/* bebug border, use margin to advantage, may cause error later */
-	/* border-bottom: solid 1px black; */
+	position: relative;
+	z-index: 0;
+	top: 0;
+	left: 0;
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+
+	/* -webkit-mask-image: linear-gradient(
+		to bottom,
+		black var(--fade-starts-at-bottom),
+		transparent
+	);
+	mask-image: linear-gradient(
+		to bottom,
+		black var(--fade-starts-at-bottom),
+		transparent
+	); */
+}
+
+#BannerHeader::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		to bottom,
+		rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%),
+		whitesmoke 100%
+	);
+	pointer-events: none;
+	z-index: 1;
 }
 
 :root {
-	--fade-starts-at: 80%;
+	--fade-starts-at-bottom: 90%;
+	--fade-starts-at-top: 96%;
+	--banner-text-background: rgba(31, 31, 31, 0.8);
+	--banner-text-padding: 2svh 2svw;
+	--banner-text-rounding: 1rem;
 }
 
-#BannerHeader img {
-	position: absolute;
+/* #BannerHeader img {
+	position: relative;
 	height: 100svh;
 	width: inherit;
 	top: 0;
@@ -141,46 +178,40 @@ nav ul {
 	background-position: center;
 
 	z-index: -2;
-
-	-webkit-mask-image: linear-gradient(
-		to bottom,
-		black var(--fade-starts-at),
-		transparent
-	);
-	mask-image: linear-gradient(
-		to bottom,
-		black var(--fade-starts-at),
-		transparent
-	);
-}
+} */
 
 /* used to postiion title and sub title */
 #BannerHeader div {
-	margin-top: 15%;
+	margin-top: 40svh;
+	padding-left: 60svw;
 }
 
 #BannerHeader h1 {
 	display: flex;
 	width: fit-content;
-
-	margin-left: 15svw;
+	margin: 0px;
 
 	font-size: 80px; /* todo make larger */
 	font-weight: normal;
 
-	background-color: white;
+	color: white;
+	background-color: var(--banner-text-background);
+	padding: var(--banner-text-padding);
+	border-radius: var(--banner-text-rounding);
+	font-weight: bolder;
 }
 
 #BannerHeader h2 {
 	display: flex;
 	width: fit-content;
 
-	margin-left: 3svw;
-
 	font-size: xx-large;
 	font-weight: normal;
 
-	background-color: white;
+	color: white;
+	background-color: var(--banner-text-background);
+	padding: var(--banner-text-padding);
+	border-radius: var(--banner-text-rounding);
 }
 
 /* for dark mode */

src/Header/Header.js

@@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp";
 import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
 import Ender from "../Footer/Ender";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 /**
  * @param {null} nothing - Takes in nothing
@@ -17,11 +17,7 @@ export default function Header() {
 		titleText: "UCalgary Baja",
 		subtitleText: "Hello",
 		imgUrl: "https://picsum.photos/200",
-		imgAlt: "Lorem picsum",
-	});
-
-	useEffect(() => {
-		HeaderBannerHeight();
+		headerPostion: "absolute",
 	});
 
 	/**
@@ -53,36 +49,15 @@ export default function Header() {
 		}
 	});
 
-	/**
-	 * @param {null} nothing - This takes in nothing
-	 * @returns {null} nothing - This returns nothing
-	 * @description This makes it so that the banner will always be 100% of the page at the top
-	 * @author Brock <darkicewolf50@gmail.com>
-	 */
-	const HeaderBannerHeight = () => {
-		if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") {
-			// return early to avoid error when no banner is desired
-			return;
-		}
-		const headerTop = document.getElementsByTagName("header")[0];
-		const headerTopStyle = getComputedStyle(headerTop);
-		const headerTopInnerHeight = headerTop.offsetHeight;
-		// 2 is used to align bottom of div with img
-		const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
-		const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
-
-		const headerTopTotalHeight =
-			headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
-
-		const HomeBannerTop = document.getElementById("BannerHeader");
-
-		// 1svh is to gget the div close enough to the image
-		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
-	};
-
 	return (
 		<>
-			<header>
+			<header
+				style={{
+					position:
+						bannerInfo.titleText === "" && bannerInfo.imgUrl === ""
+							? "relative"
+							: "absolute",
+				}}>
 				<Link to={"/"}>
 					<img
 						id="logo"
@@ -95,11 +70,11 @@ export default function Header() {
 						<Link to={"/"}>
 							<li id="FirstNav">HOME</li>
 						</Link>
-						<Link to={"/"}>
+						<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>
@@ -158,17 +133,16 @@ export default function Header() {
 			{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
 				<></>
 			) : (
-				<div id="BannerHeader">
-					<img
-						id="BannerBackgound"
-						src={bannerInfo.imgUrl}
-						alt={bannerInfo.imgAlt}
-					/>
-					<div>
-						<h1>{bannerInfo.titleText}</h1>
-						<h2>{bannerInfo.subtitleText}</h2>
+				<>
+					<div
+						id="BannerHeader"
+						style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
+						<div>
+							<h1>{bannerInfo.titleText}</h1>
+							<h2>{bannerInfo.subtitleText}</h2>
+						</div>
 					</div>
-				</div>
+				</>
 			)}
 
 			<Outlet context={{ bannerInfo, setBannerInfo }} />

src/Home/Home.jsx

@@ -6,7 +6,7 @@ export default function AboutsUs() {
 			<UpdateBanner
 				updatedTitleText="UCalgary Baja"
 				updatedSubtitleText=""
-				updatedImgUrl="https://picsum.photos/200"
+				updatedImgUrl="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1748720160/Home_Baja_2025_soty4k.jpg"
 				updatetdImgAlt="Lorem Picsum"
 			/>
 		</>

src/index.js

@@ -11,6 +11,7 @@ import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/Up
 import Gallery from "./Gallery/Gallery";
 import "./index.css";
 import MockPage from "./MockDB/MockPage";
+import Home from "./Home/Home";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -20,6 +21,9 @@ root.render(
 				<Route element={<Header />}>
 					<Route
 						path="/"
+						element={<Home />}></Route>
+					<Route
+						path="/About"
 						element={<AboutUs />}></Route>
 					<Route
 						path="/Teams"