diff --git a/src/Header/Header.css b/src/Header/Header.css
index a0c1951..ddd558f 100644
--- a/src/Header/Header.css
+++ b/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 {
- margin: 0px;
- height: 10%;
+header div button {
+ cursor: pointer;
+ height: 3rem;
+ width: 3rem;
+ justify-content: end;
+ background-color: inherit;
+ border: solid 2px gray;
+ border-radius: 1rem;
}
-header figure {
- cursor: pointer;
+header div button img {
+ height: 2rem;
+}
+
+header div {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
}
#logo {
- height: 5rem;
- background-color: white;
+ height: 10svh;
+ 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;
- align-items: center;
-}
-header div button {
- border: none;
- cursor: pointer;
- height: 4rem;
- width: 4rem;
- align-items: center;
- background-color: inherit;
- border: solid 2px gray;
- border-radius: 1rem;
+
+ /* bebug border, use margin to advantage, may cause error later */
+ /* border-bottom: solid 1px black; */
}
-header div button img {
- width: 100%;
+#BannerHeader img {
+ 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 */
diff --git a/src/Header/Header.js b/src/Header/Header.js
index 4e36533..efc1812 100644
--- a/src/Header/Header.js
+++ b/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>
+ <Link to={"/"}>
+ <img
+ id="logo"
+ src={logo}
+ alt="Schulich Off-Road's logo"
+ />
+ </Link>
<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>
- <li className="DropDown">
- {/* this link and li only exits for styling purposes */}
+ </Link> */}
+ {/* Removed as no longer needed */}
+ {/* <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 className="DropDown">
+ </li> */}
+ {/* <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"
+// />
diff --git a/src/Header/UpdateBanner.jsx b/src/Header/UpdateBanner.jsx
new file mode 100644
index 0000000..7825eb3
--- /dev/null
+++ b/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 <></>;
+}
diff --git a/src/Header/logo.png b/src/Header/logo.png
index a150fd5..cddca50 100644
Binary files a/src/Header/logo.png and b/src/Header/logo.png differ
diff --git a/src/MockDB/MockPage.jsx b/src/MockDB/MockPage.jsx
new file mode 100644
index 0000000..3cff33a
--- /dev/null
+++ b/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>
+ );
+}
diff --git a/src/index.js b/src/index.js
index f3835dd..0865c43 100644
--- a/src/index.js
+++ b/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>