feat(homePage): banner mostly complete and 2 hour challenge complete, most of page sort of done

src/Home/Home.css

@@ -0,0 +1,45 @@
+#HomeTop {
+	display: flex;
+	position: relative;
+
+	justify-content: end;
+	align-items: center;
+}
+
+#HomeTop img {
+	height: 76svh;
+	width: 100%;
+	background-image: url(https://picsum.photos/200);
+	background-size: cover;
+	background-position: center;
+
+	position: absolute;
+	z-index: 0;
+}
+
+#HomeTop div {
+	display: flex;
+	flex-direction: column;
+
+	position: absolute;
+	z-index: 1;
+
+	margin-right: 25svw;
+	margin-bottom: 25svh;
+}
+
+#HomeTop div h1 {
+	margin: 0px;
+}
+
+#HomeTop div h2 {
+}
+
+#HomePageLayout div {
+	display: flex;
+}
+
+#HomePageLayout div div {
+	display: flex;
+	flex-direction: column;
+}

src/Home/Home.jsx

@@ -0,0 +1,119 @@
+import { Link } from "react-router-dom";
+import "./Home.css";
+import { useEffect } from "react";
+
+/**
+ * @param {null} nothing - This takes in nothing
+ * @returns {JSX.Element} Page - This returns the page
+ * @description The Home page
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function Home() {
+	useEffect(() => {
+		HeaderBannerHeight();
+	});
+
+	/**
+	 * @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 = () => {
+		const headerTop = document.getElementsByTagName("header")[0];
+		const headerTopStyle = getComputedStyle(headerTop);
+		const headerTopInnerHeight = headerTop.offsetHeight;
+		// const headerTopMarginTop = parseFloat(headerTop.marginTop);
+		const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
+
+		const headerTopTotalHeight = headerTopInnerHeight + headerTopMarginHeight;
+
+		const HomeBannerTop = document.getElementById("HomeBannerTop");
+
+		HomeBannerTop.style.height = `calc(100svh - ${headerTopTotalHeight}px)`;
+	};
+	return (
+		<>
+			<div id="HomeTop">
+				<img id="HomeBannerTop" />
+				<div>
+					<h1>UCalgary Baja</h1>
+					<h2>Catchphase goes here</h2>
+				</div>
+			</div>
+			<div id="HomePageLayout">
+				<div>
+					<img src="https://picsum.photos/200" />
+					<div>
+						<h2>Who We Are</h2>
+						<p>
+							UCalgary Baja is a student organization which designs, builds, and
+							racing an off-road vehicle in the Baja SAE intercollegiate
+							competition organized by the Society of Automotive Engineers (SAE)
+							every year. Schulich Off-Road's cars are tough, dependable,
+							competitive, and extremely fun to drive.
+						</p>
+						<p>
+							UCalgary Baja is a team consisting of talented and determined
+							competitive individuals in engineering who strive to expand their
+							horizons, earn experience, and network with leading companies in
+							their respective fields. Our members achieve this by being a part
+							of one of our 6 sub-teams: Drivetrain, Logistics and Software,
+							Suspension, Chassis and Ergonomics, Steering, and Electrical and
+							Testing.
+						</p>
+						<Link to={"AboutUs"}>Learn More</Link>
+					</div>
+				</div>
+				<div>
+					<div>
+						<h2>Join the Team</h2>
+						<p>
+							Students involved in UCalgary Baja gain practical experience in
+							design and manufacturing by constructing various car components.
+							They learn to balance cost, manufacturing limitations, and
+							performance to develop optimal parts, budgets, and processes. This
+							involves using CAD technology like SolidWorks and FEA simulations.
+						</p>
+						<p>
+							Additionally, members acquire hands-on skills such as welding and
+							operating metal cutting machines. Each team member handles a
+							specific component, collaborating, researching, and
+							troubleshooting throughout the design and execution process. After
+							building the vehicle, students can attend competitions worldwide,
+							where they must address issues promptly and work as a team to
+							replace broken parts to stay competitive.
+						</p>
+						<Link to={"/"}>Learn More</Link>
+						{/* Replace with Join later*/}
+					</div>
+					<img src="https://picsum.photos/200" />
+				</div>
+				<div>
+					Sponsor Section
+					<div>
+						<Link to={"/OurSponsors"}>See All</Link>
+						<Link to={"/OurSponsors"}>Support Us</Link>
+					</div>
+				</div>
+				<div>
+					<img src="https://picsum.photos/200" />
+					<div>
+						<h2>Sponsor Us</h2>
+						<p>
+							UCalgary Baja is a student organization responsible for designing,
+							building, and racing an off-road vehicle in the Baja SAE
+							intercollegiate competition organized by the Society of Automotive
+							Engineers (SAE) every year. Schulich Off-Road's cars are tough,
+							dependable, competitive, and extremely fun to drive.
+						</p>
+						<Link to={"/OurSponsors"}>Learn More</Link>
+					</div>
+				</div>
+				<div>
+					<img src="https://picsum.photos/200" />
+				</div>
+			</div>
+		</>
+	);
+}

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,10 @@ root.render(
 				<Route element={<Header />}>
 					<Route
 						path="/"
+						element={<Home />}
+					/>
+					<Route
+						path="/AboutUs"
 						element={<AboutUs />}></Route>
 					<Route
 						path="/Teams"