Merge pull request #10 from UofCBaja/header

New Banner and Header

src/Header/Header.css

@@ -1,8 +1,13 @@
 header {
 	display: flex;
-	flex-direction: column;
+	flex-direction: row;
 	margin: 1%;
-	margin-top: 0%;
+	margin-top: 1svh;
+	padding-right: 0.5svw;
+
+	align-items: center;
+	justify-content: space-between;
+	background-color: antiquewhite;
 }
 
 header a {
@@ -11,18 +16,36 @@ header a {
 	cursor: pointer;
 }
 
-figure {
+header div button {
-	margin: 0px;
+	cursor: pointer;
-	height: 10%;
+	height: 3rem;
+	width: 3rem;
+	justify-content: end;
+	background-color: inherit;
+	border: solid 2px gray;
+	border-radius: 1rem;
 }
 
-header figure {
+header div button img {
-	cursor: pointer;
+	height: 2rem;
+}
+
+header div {
+	display: flex;
+	justify-content: flex-end;
+	align-items: center;
 }
 
 #logo {
-	height: 5rem;
+	height: 10svh;
-	background-color: white;
+	padding: 0.15rem;
+}
+
+/* naviagation section */
+
+/* determines spacing and total amount of page it takes up*/
+nav {
+	width: 50%;
 }
 
 nav a {
@@ -34,7 +57,12 @@ nav a {
 nav a li {
 	background-color: white;
 	padding: 0.5rem;
-	border: solid 1px gray;
+	/* border-left: solid 2px gray; */
+}
+/* removes first divider */
+/* can be removed if no borders from above */
+#FirstNav {
+	border-left: none;
 }
 
 nav a li:hover {
@@ -44,10 +72,13 @@ nav a li:hover {
 nav ul {
 	display: flex;
 	flex-direction: row;
+	justify-content: space-between;
 	list-style: none;
 	margin: 0px;
 	padding: 0px;
 }
+creates dwon downs
+/*  */
 /* makes it so that the tags look the same whist having removing browser error */
 .DropDownHeader {
 	display: inline-block;
@@ -80,25 +111,56 @@ nav ul {
 	text-align: center;
 }
 
-header div {
+/* For Banner */
+
+#BannerHeader {
+	height: 100svh;
+	width: 100%;
 	display: flex;
-	flex-direction: row;
+
-	justify-content: space-between;
+	/* bebug border, use margin to advantage, may cause error later */
-	align-items: center;
+	/* border-bottom: solid 1px black; */
-}
-header div button {
-	border: none;
-	cursor: pointer;
-	height: 4rem;
-	width: 4rem;
-	align-items: center;
-	background-color: inherit;
-	border: solid 2px gray;
-	border-radius: 1rem;
 }
 
-header div button img {
+#BannerHeader img {
-	width: 100%;
+	position: absolute;
+	height: 100svh;
+	width: inherit;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-position: center;
+
+	z-index: -1;
+}
+
+/* used to postiion title and sub title */
+#BannerHeader div {
+	margin-top: 15%;
+}
+
+#BannerHeader h1 {
+	display: flex;
+	width: fit-content;
+
+	margin-left: 3svw;
+
+	font-size: xx-large;
+	font-weight: normal;
+
+	background-color: white;
+}
+
+#BannerHeader h2 {
+	display: flex;
+	width: fit-content;
+
+	margin-left: 3svw;
+
+	font-size: xx-large;
+	font-weight: normal;
+
+	background-color: white;
 }
 
 /* for dark mode */

src/Header/Header.js

@@ -1,19 +1,31 @@
-import logo from "./logo.webp";
+import logo from "./logo.png";
 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";
 
 /**
- * @param {null} null -  Takes in nothing
+ * @param {null} nothing - Takes in nothing
  * @returns {JSX.Element} JSX - HTML tags and JS functionality
  * @description The top header part of the page includes the naviagtion
  * @author Brock <darkicewolf50@gmail.com>
- * @todo final css add baja but eon (baja leads chat)
+ * @todo add appropriate links
  */
-const Header = () => {
+export default function Header() {
+	const [bannerInfo, setBannerInfo] = useState({
+		titleText: "UCalgary Baja",
+		subtitleText: "Hello",
+		imgUrl: "https://picsum.photos/200",
+		imgAlt: "Lorem picsum",
+	});
+
+	useEffect(() => {
+		HeaderBannerHeight();
+	});
+
 	/**
-	 * @param {null} null -  Takes in nothing
+	 * @param {null} nothing -  Takes in nothing
 	 * @returns {CSSStyleRule} CSS - changes page to darkmode
 	 * @description inverts all of the colors of body without touching the pictures
 	 * @author Brock <darkicewolf50@gmail.com>
@@ -27,7 +39,7 @@ const Header = () => {
 	};
 
 	/**
-	 * @param {null} null -  Takes in nothing
+	 * @param {null} nothing -  Takes in nothing
 	 * @returns {CSSStyleRule} CSS - makes it compliant with bowser preferances
 	 * @description checks for what the browser prefers
 	 * @author Brock <darkicewolf50@gmail.com>
@@ -41,46 +53,66 @@ const 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>
-				<div>
 				<Link to={"/"}>
-						<figure>
 					<img
 						id="logo"
 						src={logo}
 						alt="Schulich Off-Road's logo"
 					/>
-							<figcaption>
-								<h1>Schulich Offroad</h1>
-							</figcaption>
-						</figure>
 				</Link>
-					<button onClick={switchDarkMode}>
-						<img
-							id="darkModeToggle"
-							src={lightDark}
-							alt="Light/Dark Toggle Symbol"
-						/>
-					</button>
-				</div>
 				<nav>
 					<ul>
 						<Link to={"/"}>
-							<li>About Us</li>
+							<li id="FirstNav">Home</li>
+						</Link>
+						<Link to={"/"}>
+							<li>About</li>
 						</Link>
 						<Link to={"/Teams"}>
-							<li>Teams</li>
+							<li>Team</li>
+						</Link>
+						<Link to={"/"}>
+							<li>History</li>
 						</Link>
 						<Link to={"/OurSponsors"}>
-							<li>Our Sponsors</li>
+							<li>Sponsors</li>
 						</Link>
-						<Link to={"/OurSponsors"}>
+						{/* <Link to={"/OurSponsors"}>
 							<li>Become a Sponsor</li>
-						</Link>
+						</Link> */}
-						<li className="DropDown">
+						{/* Removed as no longer needed */}
-							{/* this link and li only exits for styling purposes */}
+						{/* <li className="DropDown">
+							{/* this link and li only exits for styling purposes }
 							<Link className="DropDownHeader">
 								Club Membership & Upcoming Events
 							</Link>
@@ -96,8 +128,8 @@ const Header = () => {
 									<li>Previous Events</li>
 								</Link>
 							</ul>
-						</li>
+						</li> */}
-						<li className="DropDown">
+						{/* <li className="DropDown">
 							<Link className="DropDownHeader">More...</Link>
 							<ul className="Hide">
 								<Link to={"/Gallery"}>
@@ -107,14 +139,48 @@ const Header = () => {
 									<li>Roster</li>
 								</Link>
 							</ul>
-						</li>
+						</li> */}
+						<Link to={"/"}>
+							<li>Contact Us</li>
+						</Link>
 					</ul>
 				</nav>
+				<div>
+					<button onClick={switchDarkMode}>
+						<img
+							id="darkModeToggle"
+							src={lightDark}
+							alt="Light/Dark Toggle Symbol"
+						/>
+					</button>
+				</div>
 			</header>
-			<Outlet />
+			{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>
+				</div>
+			)}
+
+			<Outlet context={{ bannerInfo, setBannerInfo }} />
 			<Ender />
 		</>
 	);
-};
+}
 
-export default Header;
+// used like this
+// <UpdateBanner
+// 	updatedTitleText="UCalgary Bajaa"
+// 	updatedSubtitleText="HelloDAAAA"
+// 	updatedImgUrl="https://picsum.photos/200"
+// 	updatetdImgAlt="Lorem Picsum"
+// />

src/Header/UpdateBanner.jsx

@@ -0,0 +1,48 @@
+import { useEffect } from "react";
+import { useOutletContext } from "react-router-dom";
+
+/**
+ * @param {String} titleText - The text to dispaly in the banner as a title
+ * @param {String} subtitleText - The text below the banner text you want
+ * @param {String} imgUrl - The url to the image you want as the banner, by default this will be a lorem picsum
+ * @param {String} imgAlt - The alt text for the image banner, this is required for good search results
+ * @param {useOutletContext} dict - List of items to display as the banner, more detals in UpdateBanner.jsx
+ * @description The way to update the banner from the child
+ * @example ```js
+    RouteComponent {
+        return (
+		    <>
+			    <UpdateBanner
+                    updatedTitleText="UCalgary Bajaa"
+                    updatedSubtitleText="HelloDAAAA"
+                    updatedImgUrl="https://picsum.photos/200"
+                    updatetdImgAlt="Lorem Picsum"
+			    />
+    // --snip--
+    ```
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function UpdateBanner({
+	updatedTitleText = "UCalgary Baja",
+	updatedSubtitleText = "Hello",
+	updatedImgUrl = "https://picsum.photos/200",
+	updatedImgAlt = "Lorem picsum",
+}) {
+	const context = useOutletContext();
+	const updateBanner = context.setBannerInfo;
+	useEffect(() => {
+		updateBanner({
+			titleText: updatedTitleText,
+			subtitleText: updatedSubtitleText,
+			imgUrl: updatedImgUrl,
+			imgAlt: updatedImgAlt,
+		});
+	}, [
+		updatedTitleText,
+		updatedSubtitleText,
+		updatedImgUrl,
+		updatedImgAlt,
+		updateBanner,
+	]);
+	return <></>;
+}

src/MockDB/MockPage.jsx

@@ -0,0 +1,233 @@
+// import { useEffect } from "react";
+// import { useOutletContext } from "react-router-dom";
+import UpdateBanner from "../Header/UpdateBanner";
+
+/**
+ * @param {String} imgAlt - This needs nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Dummy Page used for testing the header
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+export default function MockPage() {
+	return (
+		<div>
+			<UpdateBanner
+				updatedTitleText="UCalgary Bajaa"
+				updatedSubtitleText="HelloDAAAAAE"
+				updatedImgUrl="https://picsum.photos/200"
+				updatetdImgAlt="Lorem Picsum"
+			/>
+			<p>
+				Aliquam sed massa rhoncus, tincidunt diam quis, dignissim magna. Sed a
+				nisl sed leo auctor pretium. Class aptent taciti sociosqu ad litora
+				torquent per conubia nostra, per inceptos himenaeos. Integer euismod,
+				arcu id aliquam lacinia, est diam dapibus lectus, non tempor ex mauris
+				et metus. Proin quis sagittis turpis. Ut vel sapien porta, dictum quam
+				ultrices, volutpat urna. Pellentesque nec ullamcorper est. Integer
+				feugiat velit vel sem semper, quis imperdiet odio tristique. Nunc ac
+				elit massa. Sed lobortis feugiat condimentum. Aliquam erat volutpat.
+				Aenean luctus nulla vel velit aliquet hendrerit.
+			</p>
+			<p>
+				Fusce mattis, nulla ut aliquam elementum, neque dui faucibus velit,
+				vitae gravida nisl ante vitae neque. Nulla pulvinar ut ipsum ut porta.
+				Vivamus porttitor elit id turpis pretium, convallis malesuada diam
+				elementum. Suspendisse potenti. Aenean ac euismod urna, vel lobortis
+				nisl. In laoreet metus a semper dignissim. Curabitur eget felis in
+				libero facilisis auctor. Nulla vel viverra turpis, ac aliquet magna.
+				Praesent ultricies turpis nec odio fermentum, sed venenatis enim
+				sodales.
+			</p>
+			<p>
+				Sed consectetur vitae nunc sit amet ullamcorper. Fusce id cursus elit,
+				ac pulvinar massa. Orci varius natoque penatibus et magnis dis
+				parturient montes, nascetur ridiculus mus. Morbi ultricies fermentum
+				fringilla. Maecenas auctor commodo lobortis. Morbi sed ligula eget metus
+				condimentum euismod. Nullam elementum ullamcorper neque, at volutpat
+				eros suscipit sed. Sed metus dui, semper in scelerisque ut, vulputate
+				sed nisi. Fusce rutrum, risus quis gravida aliquam, purus purus
+				efficitur nunc, eu ullamcorper purus nisl id mi.
+			</p>
+			<p>
+				Praesent suscipit orci a mollis finibus. Phasellus tempor elit sit amet
+				diam finibus, id porttitor risus vestibulum. Etiam consequat odio sed mi
+				malesuada tincidunt. Aliquam euismod ultrices velit, quis suscipit massa
+				hendrerit et. Duis ornare maximus ex, eu consequat leo iaculis quis. Sed
+				venenatis leo augue, et dictum mi laoreet sed. Quisque tempus laoreet
+				accumsan.
+			</p>
+			<p>
+				Aliquam in blandit nunc. Suspendisse massa lorem, congue ut dui at,
+				aliquet rutrum lectus. Orci varius natoque penatibus et magnis dis
+				parturient montes, nascetur ridiculus mus. Integer eget porta mauris.
+				Maecenas erat erat, rutrum nec lacus sit amet, vestibulum finibus felis.
+				Cras pretium viverra ultrices. Nam scelerisque vulputate massa, eget
+				tristique dolor gravida eu. Maecenas libero nibh, molestie et diam
+				vitae, rutrum luctus elit. Aenean mattis interdum pretium. Aliquam
+				vestibulum nunc nisi, quis porttitor sem ornare tincidunt.
+			</p>
+			<p>
+				Integer non lacus at purus vulputate semper et gravida libero. Etiam
+				volutpat odio ac odio tincidunt lacinia. Aenean finibus mi nec dignissim
+				dapibus. Sed non enim vitae leo aliquet fringilla eu sit amet risus.
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ut nisi
+				scelerisque mauris viverra malesuada id sed mauris. Nunc quis lobortis
+				felis. Aliquam erat volutpat. Pellentesque fermentum at lorem quis
+				vehicula. Donec blandit purus at pretium ullamcorper. Quisque sit amet
+				enim sodales, pretium diam quis, elementum ex. Nulla eu faucibus dui, et
+				rhoncus libero. Nulla facilisi.
+			</p>
+			<p>
+				Curabitur gravida magna ac diam dapibus mattis. Aenean non erat non nisi
+				porta hendrerit. Duis dictum lectus lorem, vel pellentesque risus
+				interdum ac. Curabitur eu vehicula purus. Vivamus auctor ipsum
+				convallis, vestibulum lectus sed, ullamcorper sem. Duis sit amet elit
+				congue, maximus elit et, lacinia nisi. Aenean at ante dolor. Sed ipsum
+				quam, venenatis id diam eu, hendrerit bibendum dui. Duis nisl felis,
+				lobortis ultrices tellus sed, pharetra semper justo. Maecenas tempus
+				tincidunt augue, sit amet hendrerit felis condimentum eu. Nunc dignissim
+				aliquam metus, vel lobortis risus interdum nec. Orci varius natoque
+				penatibus et magnis dis parturient montes, nascetur ridiculus mus. In
+				rhoncus sem quis magna gravida, posuere convallis nisl gravida. Praesent
+				non sem et est porttitor dignissim.
+			</p>
+			<p>
+				Nam feugiat aliquet facilisis. Praesent hendrerit vulputate justo, eget
+				consectetur nibh elementum a. In lobortis lobortis ex, vitae dictum
+				dolor interdum ut. Vestibulum sed ipsum ac nunc imperdiet interdum et
+				nec sapien. Duis nec gravida orci. Curabitur quis tincidunt nulla.
+				Mauris efficitur nulla id eros feugiat, vitae convallis est dapibus.
+				Maecenas elementum quam sed mattis aliquam. Curabitur ipsum felis,
+				dictum in velit quis, pretium vestibulum augue. Ut eu finibus felis.
+				Integer nec enim nec sapien vulputate pharetra.
+			</p>
+			<p>
+				Quisque at dapibus lacus. Nam et metus leo. Vivamus condimentum
+				pellentesque mauris, nec blandit neque. Duis eu risus erat. Cras velit
+				turpis, aliquet sed nibh at, sagittis venenatis nisl. Aenean erat eros,
+				lobortis a nisl a, auctor pellentesque eros. Proin nec auctor nunc.
+				Integer tristique metus et elit blandit, id suscipit nulla ornare. Donec
+				ac sem purus. Sed mollis arcu sem, quis condimentum lacus lobortis id.
+				Proin tincidunt nibh a varius ultricies. In finibus libero quis enim
+				ultrices tincidunt. Nam leo arcu, facilisis eget blandit sed,
+				consectetur ac arcu. Vestibulum ac eros erat. Nullam eget aliquam est,
+				eget commodo libero.
+			</p>
+			<p>
+				Nulla et urna ligula. Nullam suscipit ultrices dolor, non feugiat est
+				eleifend in. Sed feugiat quis nisi iaculis viverra. Aliquam egestas
+				risus sit amet tortor lobortis, quis efficitur ante hendrerit. Donec
+				sagittis orci turpis, in commodo nunc vehicula eu. Quisque quis quam in
+				ligula tincidunt suscipit a at lacus. Etiam eu lectus volutpat, bibendum
+				ante et, ullamcorper ipsum. Maecenas porttitor accumsan odio eu
+				tincidunt. Aliquam erat volutpat. Mauris sit amet odio sed tortor
+				ultricies congue a eget sem. Vestibulum molestie gravida velit, at
+				auctor sem commodo a.
+			</p>
+			<p>
+				Aliquam fermentum leo at ornare auctor. Vivamus ac faucibus tortor.
+				Nullam pulvinar velit maximus, ornare mauris vitae, hendrerit ante.
+				Praesent et semper metus. Ut faucibus aliquam justo non placerat. Sed
+				quis scelerisque tellus. In vel hendrerit velit. Fusce et urna
+				ultricies, bibendum ligula ac, volutpat erat. Sed quis luctus dolor,
+				vitae iaculis mi. Pellentesque in tellus eu quam consequat venenatis.
+				Etiam a tempus nibh. Fusce eu mi sodales dui finibus tempor blandit
+				pretium metus. Curabitur elit magna, vulputate quis posuere vehicula,
+				faucibus eu ex.
+			</p>
+			<p>
+				Phasellus quis quam nec neque laoreet luctus id vel tortor. Integer
+				dictum euismod quam non eleifend. Vestibulum sit amet velit vel dui
+				eleifend euismod. In hac habitasse platea dictumst. Cras congue nulla et
+				velit tincidunt vestibulum. Maecenas ac imperdiet augue. Donec venenatis
+				enim risus, et rhoncus mauris efficitur vitae. Phasellus vitae leo
+				semper nunc volutpat suscipit non sit amet nulla. Nullam pharetra neque
+				turpis, id facilisis sapien ultricies vitae. Ut ac elit at arcu laoreet
+				fringilla ut tincidunt urna. Proin nibh lacus, porttitor eget nisi
+				congue, rhoncus rhoncus eros. Nunc finibus neque nec erat fringilla
+				eleifend.
+			</p>
+			<p>
+				Cras congue purus in magna posuere, vel varius leo facilisis. Donec a ex
+				volutpat, accumsan odio id, gravida lorem. Vestibulum mauris libero,
+				venenatis nec velit non, consectetur pretium nulla. Vestibulum ante
+				ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
+				Fusce felis velit, bibendum quis pretium quis, sollicitudin nec magna.
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae magna
+				ligula. Donec viverra aliquam lectus, vel mollis metus egestas sit amet.
+				Nam elit velit, convallis et turpis quis, tincidunt euismod elit.
+				Quisque pretium ultrices leo id convallis. Nulla sed dui at nisl
+				imperdiet rhoncus ut sit amet ante. Fusce nisl enim, ornare non tortor
+				eu, interdum gravida lacus.
+			</p>
+			<p>
+				Donec eu aliquam nunc, eget facilisis risus. Maecenas at vehicula odio.
+				Donec pulvinar at nisl in sollicitudin. Donec tincidunt lacus at nisl
+				consequat tempus. Praesent sit amet accumsan dolor, a tristique erat.
+				Fusce at molestie diam. Donec quis nulla urna. Aenean laoreet dolor et
+				neque rhoncus blandit. Duis id mi id mauris rutrum facilisis.
+				Suspendisse potenti. Aliquam sodales quam nec euismod ornare. Nullam
+				laoreet ultricies pretium. Pellentesque eu turpis sagittis, dictum nunc
+				sit amet, dapibus mauris. Quisque congue sit amet libero a rhoncus.
+			</p>
+			<p>
+				Cras non ultricies arcu. Sed dapibus eros ut dapibus elementum.
+				Suspendisse lectus lorem, vestibulum sit amet tincidunt a, mattis a
+				eros. Mauris ut urna sed turpis fermentum maximus non at justo. Ut ut
+				dictum tortor. In egestas sem eget dui efficitur pretium. Mauris vitae
+				massa eu tortor semper finibus.
+			</p>
+			<p>
+				Sed tincidunt, velit ac dictum dictum, dui odio elementum mauris, quis
+				tristique lacus nisl congue nulla. Nunc volutpat nisi ut tortor
+				ultrices, non lobortis lacus gravida. Aliquam tempus dolor at felis
+				dictum, a molestie lacus sagittis. Duis nibh sem, tincidunt eget feugiat
+				in, dapibus ut lacus. Aliquam sed tellus nec lacus ultricies placerat in
+				ut lectus. Sed nec convallis ante. Ut ut lobortis sem. Aliquam ornare
+				rhoncus lacus in dapibus. Donec vel diam ante. Maecenas egestas
+				scelerisque nisl ac scelerisque. Cras sapien nulla, porttitor a varius
+				at, elementum ac metus. Vivamus at ligula urna.
+			</p>
+			<p>
+				Curabitur a semper quam. Sed a fermentum velit. Aenean magna mi,
+				pellentesque et fermentum vitae, pharetra dapibus libero. Vivamus
+				porttitor ultrices dignissim. Donec sodales, purus sed sagittis
+				facilisis, purus ex suscipit libero, eu consectetur dui velit ultrices
+				erat. Etiam eu pellentesque est. Pellentesque vehicula dui ac mauris
+				egestas pharetra. Maecenas eget tristique sem. Nullam tincidunt lectus
+				sit amet odio ornare, vitae pretium nisi feugiat.
+			</p>
+			<p>
+				Pellentesque fringilla ante et metus sollicitudin, vel blandit nisi
+				sagittis. In semper nisi nec sapien congue eleifend. Nam faucibus elit
+				leo, quis dignissim ex sagittis nec. Aliquam in magna commodo massa
+				sollicitudin ornare quis nec purus. Maecenas placerat quis lacus non
+				luctus. Vestibulum ut tellus luctus, congue turpis sed, elementum dolor.
+				Nam nec nunc congue magna ornare congue. Aliquam dignissim finibus dui
+				eu semper. Sed viverra massa sed ipsum dictum, at blandit lorem aliquet.
+				Proin semper, tortor a malesuada finibus, tellus lacus porttitor magna,
+				eu porttitor erat turpis a quam. Nam blandit nisi vitae justo tincidunt,
+				sit amet suscipit tortor ultrices.
+			</p>
+			<p>
+				Nulla facilisi. Etiam eleifend varius nisl a mollis. In non laoreet
+				tellus, sed laoreet purus. Etiam sed erat vitae dui auctor fringilla.
+				Phasellus pretium purus a urna scelerisque dapibus. Phasellus eget enim
+				enim. Fusce ac fringilla nunc. Aliquam tristique mattis diam in
+				placerat. Vestibulum dolor velit, sagittis et dolor non, tempus
+				consectetur justo.
+			</p>
+			<p>
+				Vivamus consequat sapien enim, ac vulputate mi viverra sed. Donec in
+				nunc ac risus tempor mollis. Cras turpis sem, lacinia at turpis sed,
+				malesuada auctor mi. Etiam sed elementum erat, non tincidunt urna.
+				Curabitur congue dolor nisi, at facilisis orci facilisis nec. Etiam
+				cursus, tellus vel varius fermentum, velit ex blandit mauris, id
+				vulputate augue eros at orci. Nullam eu eleifend ipsum. Etiam sed velit
+				lorem. Duis turpis nulla, rhoncus sit amet arcu egestas, facilisis
+				imperdiet dui. Suspendisse facilisis lobortis elit, ut facilisis eros
+				laoreet non. Vestibulum at leo at nunc euismod condimentum.
+			</p>
+		</div>
+	);
+}

src/index.js

@@ -10,6 +10,7 @@ import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinThe
 import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
 import Gallery from "./Gallery/Gallery";
 import "./index.css";
+import MockPage from "./MockDB/MockPage";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -35,6 +36,9 @@ root.render(
 					<Route
 						path="/Gallery"
 						element={<Gallery />}></Route>
+					<Route
+						path="/MockPage"
+						element={<MockPage />}></Route>
 				</Route>
 			</Routes>
 		</BrowserRouter>