Merge branch 'dev' of github.com:UofCBaja/BajaUofCWebsite into dev

2025-06-16 05:44:17 -06:00 · 2024-03-20 18:32:51 -06:00 · 2024-03-20 18:32:51 -06:00 · e2efa3c358
commit e2efa3c358
parent b5cafacc0c e90d6f3b06
7 changed files with 331 additions and 245 deletions
--- a/src/BecomeASponsor/BecomeASponsor.css
+++ b/src/BecomeASponsor/BecomeASponsor.css
@ -1,3 +0,0 @@
-#BecomeASponsor div {
-	background-color: green;
-}
--- a/src/BecomeASponsor/BecomeASponsor.js
+++ b/src/BecomeASponsor/BecomeASponsor.js
@ -1,55 +0,0 @@
-import "./BecomeASponsor.css";
-
-/**
- * @param {null} null - requires onthing
- * @returns {JSX.Element} JSX - HTML tags and JS functionality
- * @description Our Sponsors Page
- * @author Brock <darkicewolf50@gmail.com>
- * @todo Make and Finish the Page
- */
-const BecomeASponsor = () => {
-	return (
-		<div id="BecomeASponsor">
-			<div>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed
-					justo eget orci sagittis sollicitudin eu eget augue. Phasellus lacus
-					turpis, interdum vitae nibh a, tristique ultricies erat. Integer et
-					sapien congue, facilisis massa id, molestie magna. Maecenas augue
-					nisi, ullamcorper sit amet suscipit non, sodales nec tortor. Aenean
-					imperdiet sit amet velit a lacinia. Vestibulum vel consequat mauris.
-					Proin suscipit lectus id erat malesuada fermentum. Quisque ac dui
-					malesuada, accumsan magna quis, convallis ex. Nulla feugiat fermentum
-					maximus. Pellentesque rutrum malesuada metus ut accumsan. Nullam
-					semper, eros in tempor mollis, lorem magna auctor turpis, a ornare
-					diam metus sit amet odio. Sed aliquam nulla eu dolor commodo
-					efficitur.
-				</p>
-				<img
-					src="https://static.wixstatic.com/media/5824fc_0d66c0d79eae4882ba76d503d0752012~mv2.jpg/v1/crop/x_0,y_531,w_3120,h_2342/fill/w_752,h_564,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/IMG_20230429_164752611.jpg"
-					alt="Student Driving the Green (2019 Car)"
-				/>
-			</div>
-			<div>
-				<img
-					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
-					alt="Sponsorship Package with Benefits"
-				/>
-				<p>
-					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
-					laoreet nulla eget posuere suscipit. Curabitur vitae porta velit. Nunc
-					blandit ut erat sed maximus. Orci varius natoque penatibus et magnis
-					dis parturient montes, nascetur ridiculus mus. Donec at laoreet nisi.
-					Ut tempor nunc tellus, quis mollis sapien ultricies ut. Fusce gravida
-					varius ligula, venenatis fringilla velit fringilla quis. Sed
-					condimentum sapien libero, vel pharetra purus ultricies nec. Etiam a
-					vulputate tellus. Quisque eget purus in orci accumsan tincidunt ac ut
-					nisl. Pellentesque tincidunt porta purus, quis congue nibh tempus
-					eget. Sed diam sapien, dictum ut mattis sit amet, faucibus at enim.{" "}
-				</p>
-			</div>
-		</div>
-	);
-};
-
-export default BecomeASponsor;
--- a/src/MockDB/pastSponsors.yml
+++ b/src/MockDB/pastSponsors.yml
@ -0,0 +1,36 @@
+- Schulich School of Engineering:
+    LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
+    Url: https://schulich.ucalgary.ca/
+    DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
+- Platinum Sponsor Name:
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:
+- Suri:
+    LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
+    Url: https://www.surimanufacturing.com/
+    DescriptionAboutSponsor:
+- SKF:
+    LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
+    Url: https://www.skf.com/ca/en
+    DescriptionAboutSponsor: I am not sure
+- WRMA:
+    LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
+    Url: https://wildrosemx.com/
+    DescriptionAboutSponsor:
+- Encore Metals:
+    LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
+    Url: https://www.encoremetals.com/
+    DescriptionAboutSponsor: Metal supplier
+- CNOOC:
+    LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
+    Url: https://cnoocinternational.com/
+    DescriptionAboutSponsor:
+- Redbull:
+    LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
+    Url: https://www.redbull.com/ca-en/
+    DescriptionAboutSponsor:
+- Canada Action:
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:
--- a/src/MockDB/sponsorship.yml
+++ b/src/MockDB/sponsorship.yml
@ -1,50 +1,41 @@
 Diamond Tier:
-  - Name: Schulich School of Engineering
+  - Schulich School of Engineering:
      LogoUrl: https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU
      Url: https://schulich.ucalgary.ca/
      DescriptionAboutSponsor: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu magna in diam consectetur rhoncus vel nec turpis. Sed finibus mi eu sem varius faucibus. Donec semper erat et bibendum pharetra. Suspendisse cursus lorem sed nisi semper, a rutrum nunc luctus. Nunc ullamcorper enim id orci interdum ultrices. Donec vestibulum nunc vel nisl pretium tempus. Morbi quis ante et ligula eleifend eleifend. Proin bibendum maximus elit vitae congue. Vivamus egestas, ex in tempor posuere, ligula nunc iaculis massa, in imperdiet dui justo eu dolor. Nullam placerat velit quis sem mattis, laoreet pharetra elit tempor.
-    DecriptionOnHelp: Money
 Platinum Tier:
-  - Name: Platinum Sponsor Name
+  - Platinum Sponsor Name:
      LogoUrl:
      Url:
      DescriptionAboutSponsor:
-    DescriptionOnHelp: Money
 Gold Tier:
-  - Name: Suri
+  - Suri:
      LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
      Url: https://www.surimanufacturing.com/
      DescriptionAboutSponsor:
-    DescriptionOnHelp: I am not sure of the time of writing this
-  - Name: SKF
+  - SKF:
      LogoUrl: https://www.skf.com/v2/assets/img/skf-logo-white.svg
      Url: https://www.skf.com/ca/en
      DescriptionAboutSponsor: I am not sure
-    DescriptionOnHelp: I am not sure of the time of writing this
-  - Name: WRMA
+  - WRMA:
      LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.png
      Url: https://wildrosemx.com/
      DescriptionAboutSponsor:
-    DescriptionOnHelp: Lets us use their trak during the warm months
 Silver Tier:
-  - Name: Encore Metals
+  - Encore Metals:
      LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
      Url: https://www.encoremetals.com/
      DescriptionAboutSponsor: Metal supplier
-    DescriptionOnHelp: Where we buy metals from at a discounted rate
-  - Name: CNOOC
+  - CNOOC:
      LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
      Url: https://cnoocinternational.com/
      DescriptionAboutSponsor:
-    DescriptionOnHelp: Money
 Bronze Tier:
-  - Name: Redbull
+  - Redbull:
      LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
      Url: https://www.redbull.com/ca-en/
      DescriptionAboutSponsor:
-    DescriptionOnHelp: Free Energy Drinks
-  - Name: Canada Action
+  - Canada Action:
      LogoUrl:
-    Url: I dont know
+      Url:
      DescriptionAboutSponsor:
-    DescriptionOnHelp: Money
--- a/src/OurSponsors/OurSponsors.css
+++ b/src/OurSponsors/OurSponsors.css
@ -3,48 +3,77 @@
 	flex-direction: column;
 	justify-content: center;
 	background-color: gray;
-	padding-left: 10%;
-	padding-right: 10%;
+	padding-left: 2%;
+	padding-right: 2%;
 }

-#OurSponsors div div {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+#BecomeASponsors {
 	background-color: white;
 }

-#OurSponsors div div div div div img {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div p {
-	display: flex;
-	justify-content: left;
-}
-
-#OurSponsors div div div div div {
-	padding: 0%;
-	display: flex;
-	flex-direction: column;
-	justify-content: left;
-}
-
-#OurSponsors div div div div {
+#BecomeASponsors div {
 	display: flex;
 	flex-direction: row;
-	justify-content: flex-end;
-	padding: 0%;
-	width: 100%;
 }

-#OurSponsors h2 {
-	background-color: aquamarine;
-	text-align: center;
-	margin: 0px;
+#BecomeASponsors a {
+	color: inherit;
+	text-decoration: none;
 }

-#OurSponsors h3 {
+#BecomeASponsors div a img {
+	height: 18rem;
+	width: auto;
+	padding-right: 3rem;
+}
+
+#BecomeASponsors img {
+	height: auto;
+	width: 60%;
+}
+
+#Sponsor {
+	background-color: white;
+}
+
+#SponsorEnd {
+	text-align: end;
+}
+
+.SponsorsTitle {
 	text-align: left;
+	border-bottom: 2px solid black;
+}
+
+.Sponsors {
+	background-color: inherit;
+}
+
+.Sponsors a {
+	display: flex;
+	flex-direction: column;
+	color: inherit;
+	text-decoration: none;
+	cursor: pointer;
+	background-color: whitesmoke;
+}
+
+.Sponsors a div {
+	display: flex;
+	flex-direction: row;
+}
+
+.Sponsors a h4 {
+	width: 30%;
+}
+
+.Sponsors a img {
+	max-height: 8rem;
+	max-width: 70%;
+}
+
+.Sponsors a p {
+	padding: 2rem;
+	padding-top: 5px;
+	padding-bottom: 5px;
 }
--- a/src/OurSponsors/OurSponsors.js
+++ b/src/OurSponsors/OurSponsors.js
@ -1,21 +1,23 @@
 import "./OurSponsors.css";
 import { useEffect, useState } from "react";
-import sponsorData from "../MockDB/sponsorship.yml";
+import currentSponsorData from "../MockDB/sponsorship.yml";
+import pastSponsorData from "../MockDB/pastSponsors.yml";
 import yaml from "js-yaml";
-import OpenPage from "../Header/OpenPage";

 /**
 * @param {null} null - requires onthing
 * @returns {JSX.Element} JSX - HTML tags and JS functionality
 * @description Our Sponsors Page
 * @author Brock <darkicewolf50@gmail.com>
- * @todo finish page layout
+ * @todo finsih layout and add content
 */
 const OurSponsors = () => {
-	const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	const [pastSponsorsDict, setPastSponsorsDict] = useState();

 	useEffect(() => {
-		getSponsors();
+		getCurrentSponsors();
+		getPastSponsors();
 	}, []);

 	/**
@ -25,93 +27,169 @@ const OurSponsors = () => {
 	 * @author Brock <darkicewolf50@gmail.com>
 	 * @todo add gPRC to backend and front end add connect to synology drive
 	 */
-	const getSponsors = async () => {
+	const getCurrentSponsors = async () => {
 		try {
-			const res = await fetch(sponsorData);
+			const res = await fetch(currentSponsorData);
 			const rawText = await res.text();
-			const yamlDict = yaml.load(rawText);
-			setSponsorsDict(yamlDict);
+			const yamlDict = await yaml.load(rawText);
+			setCurrentSponsorsDict(yamlDict);
 		} catch (error) {
 			//error checking
+			console.log(error);
+			console.error("Error recieving data from server:");
+		}
+	};
+	/**
+	 * @param {null} null - requires nothing (link)
+	 * @returns {Object} sponsorsDict - gets a Dictionary of our sponsors from synology drive
+	 * @description Gets the list of sponsors from the synology drive (not implemented), converts the json file into a dictionary
+	 * @author Brock <darkicewolf50@gmail.com>
+	 * @todo add gPRC to backend and front end add connect to synology drive
+	 */
+	const getPastSponsors = async () => {
+		try {
+			const res = await fetch(pastSponsorData);
+			const rawText = await res.text();
+			const yamlDict = await yaml.load(rawText);
+			setPastSponsorsDict(yamlDict);
+		} catch (error) {
+			// error checking
 			console.error("Error recieving data from server:");
 		}
 	};

-	if (!sponsorsDict) {
-		//awaiting for a resposne from the backend
-		//add loading notification to user
-		return <p>Loading...</p>;
-	}
-	if (sponsorsDict) {
-		//maps out the dictionary and displays the content
 	return (
 		<div id="OurSponsors">
+			<h1>Sponsor</h1>
 			<div id="BecomeASponsors">
-					<OpenPage
-						pageToGoTo={"/BecomeASponsor"}
-						textOnButton={"Become a Sponsor"}
-					/>
-				</div>
-				<div id="CurrentSponosrs">
-					<h3>Current Sponsors</h3>
-					{/* gets the outmost name of the Object {"Name of tier": {...}} */}
-					{Object.keys(sponsorsDict).map((sponsorTier) => (
-						<div
-							key={sponsorTier}
-							className={sponsorTier}>
-							<h2>{sponsorTier}</h2>
-							{/* gets the keys from the new inner object used so that no two html tags are the "same" */}
-							{Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
-								const sponsor = sponsorsDict[sponsorTier][sponsorKey];
-								return (
-									<div key={sponsorKey}>
+				<p>(How our team uses what's given by and benefits from sponsors)</p>
 				<div>
-											<div>
-												{sponsor.Name && <h3>{sponsor.Name}</h3>}
-												{sponsor.LogoUrl && (
 					<a
-														href={sponsor.Url}
-														rel="noreferrer"
-														target="_blank">
+						href="https://google.com"
+						target="_blank"
+						rel="noreferrer">
 						<img
-															src={sponsor.LogoUrl}
-															alt={
-																sponsor.Name +
-																"'s logo, one of the companies that sponsors Schulich Off-Road"
-															}
+							src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710699982/qr-code_l9q7ik.png"
+							alt="QR code to contanct us form"
 						/>
+						<p>Click on this to open the contact form</p>
 					</a>
-												)}
+					<p>
+						Talk about how you can reach out to sponsor us. (Maybe also include
+						a link to the form as well)
+					</p>
 				</div>
-											{/* puts this in the sponsor's section only if they are silver and above */}
-											{sponsor.DescriptionAboutSponsor !== undefined &&
-												sponsor.DecriptionOnHelp !== undefined &&
-												(sponsorTier !== "Bronze Tier" ||
-													sponsorTier !== "Silver Tier") && (
-													<p>Another Element</p>
-												)}
+				<p>
+					(Talk about what we can offer our sponsors for helping us briefly or
+					in a listing format. We can also mention how they can find more on the
+					sponsorship package - plus provide some way they can access the
+					package from here)
+				</p>
+				<img
+					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
+					alt="A photo of our sponsorship package"
+				/>
+			</div>
+			<div id="Sponsor">
+				<h2 className="SponsorsTitle">Current Sponsors</h2>
+				{/* shows the current sponsors only after the data has been recieved */}
+				{currentSponsorsDict === undefined ? (
+					<p>Loading...</p>
+				) : (
+					<>
+						{/* gets the outmost name of the Object Name of tier*/}
+						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+							return (
+								<div className="Sponsors">
+									<h3>{sponsorsTier}</h3>
+									{/* gets key form list of tier */}
+									{Object.keys(currentSponsorsDict[sponsorsTier]).map(
+										(sponsorsKey) => {
+											return (
+												<>
+													{/* gets name out of object and gets data of that sponsor preped */}
+													{Object.keys(
+														currentSponsorsDict[sponsorsTier][sponsorsKey]
+													).map((sponsorName) => {
+														let sponsorData =
+															currentSponsorsDict[sponsorsTier][sponsorsKey][
+																sponsorName
+															];
+														return (
+															<a
+																href={sponsorData.Url}
+																target="_blank"
+																rel="noreferrer">
+																<div>
+																	<h4>{sponsorName}</h4>
+																	<img
+																		src={sponsorData.LogoUrl}
+																		alt={sponsorName + "'s Logo"}
+																	/>
+																</div>
+																{(sponsorsTier !== "Silver Tier" ||
+																	sponsorsTier !== "Bronze Tier") && (
+																	<div>
+																		<p>{sponsorData.DescriptionAboutSponsor}</p>
 																	</div>
-										{/* puts this in the sponsor's section only if they are silver and above */}
-										{sponsor.DescriptionAboutSponsor !== undefined &&
-											(sponsorTier !== "Bronze Tier" ||
-												sponsorTier !== "Silver Tier") && (
-												<p>{sponsor.DescriptionAboutSponsor}</p>
 																)}
-										{/* puts this in the sponsor's section only if they are silver and above */}
-										{sponsor.DecriptionOnHelp !== undefined &&
-											(sponsorTier !== "Bronze Tier" ||
-												sponsorTier !== "Silver Tier") && (
-												<p>{sponsor.DecriptionOnHelp}</p>
+															</a>
+														);
+													})}
+												</>
+											);
+										}
 									)}
 								</div>
 							);
 						})}
+					</>
+				)}
 			</div>
-					))}
+			<div id="Sponsor">
+				<h2
+					className="SponsorsTitle"
+					id="SponsorEnd">
+					Past Sponsors
+				</h2>
+				{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
+				{pastSponsorsDict === undefined ? (
+					<p>Loading...</p>
+				) : (
+					<>
+						{/* gets keys o objects in list */}
+						{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
+							return (
+								<div className="Sponsors">
+									{/* gets name of sponsor then uses it to get data of past sponsor */}
+									{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
+										(pastSponsorName) => {
+											let pastSponsors =
+												pastSponsorsDict[pastSponsorKey][pastSponsorName];
+											return (
+												<a
+													href={pastSponsors.Url}
+													target="_blank"
+													rel="noreferrer">
+													<div>
+														<h4>{pastSponsorName}</h4>
+														<img
+															src={pastSponsors.LogoUrl}
+															alt={pastSponsorName + "'s Logo"}
+														/>
+													</div>
+												</a>
+											);
+										}
+									)}
+								</div>
+							);
+						})}
+					</>
+				)}
 			</div>
 		</div>
 	);
-	}
 };

 export default OurSponsors;
--- a/src/index.js
+++ b/src/index.js
@ -1,30 +1,40 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Header from './Header/Header';
-import AboutUs from './AboutUs/AboutUs';
-import Teams from './Teams/Teams';
-import OurSponsors from './OurSponsors/OurSponsors';
-import BecomeASponsor from './BecomeASponsor/BecomeASponsor';
-import JoinTheClub from './Club Membership & Upcoming Events/JoinTheClub/JoinTheClub';
-import UpcomingEvents from './Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents';
-import Gallery from './Gallery/Gallery';
-import './index.css';
+import Header from "./Header/Header";
+import AboutUs from "./AboutUs/AboutUs";
+import Teams from "./Teams/Teams";
+import OurSponsors from "./OurSponsors/OurSponsors";
+import JoinTheClub from "./Club Membership & Upcoming Events/JoinTheClub/JoinTheClub";
+import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/UpcomingEvents";
+import Gallery from "./Gallery/Gallery";
+import "./index.css";

-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
 	<React.StrictMode>
 		<BrowserRouter>
 			<Routes>
-        <Route element = {<Header />}>
-          <Route path = '/' element = {<AboutUs />}></Route>
-          <Route path = '/Teams' element = {<Teams />}></Route>
-          <Route path = '/OurSponsors' element = {<OurSponsors />}></Route>
-          <Route path = '/BecomeASponsor' element = {<BecomeASponsor />}></Route>
-          <Route path = '/JoinTheClub' element = {<JoinTheClub />}></Route>
-          <Route path = '/UpcomingEvents' element = {<UpcomingEvents />}></Route>
-          <Route path = '/Gallery' element = {<Gallery />}></Route>
+				<Route element={<Header />}>
+					<Route
+						path="/"
+						element={<AboutUs />}></Route>
+					<Route
+						path="/Teams"
+						element={<Teams />}></Route>
+					<Route
+						path="/OurSponsors"
+						element={<OurSponsors />}></Route>
+					<Route
+						path="/JoinTheClub"
+						element={<JoinTheClub />}></Route>
+					<Route
+						path="/UpcomingEvents"
+						element={<UpcomingEvents />}></Route>
+					<Route
+						path="/Gallery"
+						element={<Gallery />}></Route>
 				</Route>
 			</Routes>
 		</BrowserRouter>