add OurSponsors: added QR code spot and space for content

src/OurSponsors/OurSponsors.css

@@ -7,6 +7,25 @@
 	padding-right: 2%;
 }
 
+#BecomeASponsors {
+	background-color: white;
+}
+
+#BecomeASponsors div {
+	display: flex;
+	flex-direction: row;
+}
+
+#BecomeASponsors a {
+	color: inherit;
+	text-decoration: none;
+}
+
+#BecomeASponsors div a img {
+	height: 18rem;
+	padding-right: 3rem;
+}
+
 #Sponsor {
 	background-color: white;
 }
@@ -38,16 +57,16 @@
 	flex-direction: row;
 }
 
-.Sponsors a div h4 {
+.Sponsors a h4 {
 	width: 30%;
 }
 
-.Sponsors a div img {
+.Sponsors a img {
 	max-height: 8rem;
 	max-width: 70%;
 }
 
-.Sponsors a div p {
+.Sponsors a p {
 	padding: 2rem;
 	padding-top: 5px;
 	padding-bottom: 5px;

src/OurSponsors/OurSponsors.js

@@ -3,15 +3,13 @@ import { useEffect, useState } from "react";
 import currentSponsorData from "../MockDB/sponsorship.yml";
 import pastSponsorData from "../MockDB/pastSponsors.yml";
 import yaml from "js-yaml";
-import OpenPage from "../Header/OpenPage";
-import fakeDelay from "../TestingTools/fakeDelay";
 
 /**
  * @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 [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
@@ -31,7 +29,6 @@ const OurSponsors = () => {
 	 */
 	const getCurrentSponsors = async () => {
 		try {
-			await fakeDelay(5000);
 			const res = await fetch(currentSponsorData);
 			const rawText = await res.text();
 			const yamlDict = await yaml.load(rawText);
@@ -63,11 +60,25 @@ const OurSponsors = () => {
 
 	return (
 		<div id="OurSponsors">
+			<h1>Sponsor</h1>
 			<div id="BecomeASponsors">
-				<OpenPage
-					pageToGoTo={"/BecomeASponsor"}
-					textOnButton={"Become a Sponsor"}
+				<p>(How our team uses what's given by and benefits from sponsors)</p>
+				<div>
+					<a
+						href="https://google.com"
+						target="_blank"
+						rel="noreferrer">
+						<img
+							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>
 			</div>
 			<div id="Sponsor">
 				<h2 className="SponsorsTitle">Current Sponsors</h2>
@@ -75,7 +86,7 @@ const OurSponsors = () => {
 				{currentSponsorsDict === undefined ? (
 					<p>Loading...</p>
 				) : (
-					<div>
+					<>
 						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
 							return (
 								<div className="Sponsors">
@@ -84,7 +95,7 @@ const OurSponsors = () => {
 									{Object.keys(currentSponsorsDict[sponsorsTier]).map(
 										(sponsorsKey) => {
 											return (
-												<div>
+												<>
 													{/* gets name out of object and gets data of that sponsor preped */}
 													{Object.keys(
 														currentSponsorsDict[sponsorsTier][sponsorsKey]
@@ -114,14 +125,14 @@ const OurSponsors = () => {
 															</a>
 														);
 													})}
-												</div>
+												</>
 											);
 										}
 									)}
 								</div>
 							);
 						})}
-					</div>
+					</>
 				)}
 			</div>
 			<div id="Sponsor">
@@ -133,7 +144,7 @@ const OurSponsors = () => {
 				{pastSponsorsDict === undefined ? (
 					<p>Loading...</p>
 				) : (
-					<div>
+					<>
 						{/* gets keys o objects in list */}
 						{Object.keys(pastSponsorsDict).map((pastSponsorKey) => {
 							return (
@@ -162,7 +173,7 @@ const OurSponsors = () => {
 								</div>
 							);
 						})}
-					</div>
+					</>
 				)}
 			</div>
 		</div>