Merge pull request #4 from UofCBaja/sponsor

Sponsor page needs actual content and some css tlc
2025-06-15 05:14:18 -06:00 · 2024-03-17 21:27:21 -06:00 · 2024-03-17 21:27:21 -06:00 · 55b06fb308
commit 55b06fb308
parent 34ac2f6cf1 ed09013129
24 changed files with 22743 additions and 22084 deletions
--- a/.github/workflows/testAutomatic.yaml
+++ b/.github/workflows/testAutomatic.yaml
@ -34,3 +34,16 @@ jobs:
      # this step runs a bash (Ubuntu's default shell) command
      - name: list files
        run: ls
+
+  Eslinter:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run ESLint
+        run: npm run lint
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+	"DockerRun.DisableDockerrc": true
+}
--- a/README.md
+++ b/README.md
@ -1,6 +1,9 @@
 # Baja Website

+[![Continuous Integration Testing](https://github.com/UofCBaja/BajaUofCWebsite/actions/workflows/testAutomatic.yaml/badge.svg?branch=dev)](https://github.com/UofCBaja/BajaUofCWebsite/actions/workflows/testAutomatic.yaml)
+
 The website is located at [BajaUofC.com](https://www.youtube.com/watch?v=dQw4w9WgXcQ)
+
 # Getting Started with Create React App

 This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,41 +1,47 @@
 {
-  "name": "bajauofcwebsite",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "^0.72.6",
-    "react-router-dom": "^6.17.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "bajauofcwebsite",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@svgr/webpack": "^8.1.0",
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"js-yaml": "^4.1.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-native": "^0.72.6",
+		"react-router-dom": "^6.20.0",
+		"react-scripts": "5.0.1",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject",
+		"lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"devDependencies": {
+		"eslint": "^8.57.0",
+		"yaml-loader": "^0.8.1"
+	}
 }
--- a/public/index.html
+++ b/public/index.html
@ -1,21 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
+	<head>
+		<meta charset="utf-8" />
+		<link
+			rel="icon"
+			href="./logo.ico" />
+		<meta
+			name="viewport"
+			content="width=device-width, initial-scale=1" />
+		<meta
+			name="theme-color"
+			content="#000000" />
+		<meta
+			name="description"
+			content="Web site created using create-react-app" />
+		<link
+			rel="apple-touch-icon"
+			href="%PUBLIC_URL%/logo192.png" />
+		<!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
+		<link
+			rel="manifest"
+			href="%PUBLIC_URL%/manifest.json" />
+		<!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.
@ -24,12 +33,12 @@
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
-    <title>React App</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
+		<title>Schulich Off-Road</title>
+	</head>
+	<body>
+		<noscript>You need to enable JavaScript to run this app.</noscript>
+		<div id="root"></div>
+		<!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

@ -39,5 +48,5 @@
      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
-  </body>
+	</body>
 </html>
--- a/public/logo.ico
+++ b/public/logo.ico
--- a/src/BecomeASponsor/BecomeASponsor.js
+++ b/src/BecomeASponsor/BecomeASponsor.js
@ -1,5 +0,0 @@
-export default function BecomeASponsor() {
-    return (
-        <p>Become A Sponsor</p>
-    );
-};
--- a/src/Footer/Ender.css
+++ b/src/Footer/Ender.css
@ -0,0 +1,33 @@
+#ender {
+	display: flex;
+	flex-direction: column;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	justify-content: center;
+	background-color: lightgrey;
+}
+
+#pointerCursor {
+	cursor: pointer;
+}
+
+#ender div {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+}
+#ender p {
+	padding-left: 2%;
+}
+
+#ender .hidden {
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	display: none;
+}
+
+#ender .hidden li {
+	list-style-type: none;
+	padding-right: 2%;
+}
--- a/src/Footer/Ender.js
+++ b/src/Footer/Ender.js
@ -0,0 +1,28 @@
+import "./Ender.css";
+/**
+ * @param {null} null - requires onthing
+ * @returns {JSX.Element} Page - HTML tags and JS functionality
+ * @description The Footer of the page
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo add who helped developed the site and finalize css
+ */
+const Ender = () => {
+	return (
+		<footer id="ender">
+			<div>
+				<p>&#169; 2023 by Schulich Off-Road </p>
+				<p
+					onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
+					id="pointerCursor">
+					Powered by: Morphgenix
+				</p>
+			</div>
+			<ul className="hidden">
+				<li>Developed by:</li>
+				<li>Brock</li>
+			</ul>
+		</footer>
+	);
+};
+
+export default Ender;
--- a/src/Header/DropdownMenu.js
+++ b/src/Header/DropdownMenu.js
@ -1,14 +1,24 @@
-import { useNavigate } from "react-router-dom";
+import OpenPageButton from "./OpenPageButton";

+/**
+ * @param {null} null -  Takes in nothing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Drop down menu elements
+ * @author Brock <darkicewolf50@gmail.com>
+ */
 const DropdownMenu = () => {
-  const navigate = useNavigate();
-
-  return (
-    <div>
-      <button type = "button" onClick = {() => navigate('/JoinTheClub')}>Join the Club</button>
-      <button type = "button" onClick = {() => navigate('/UpcomingEvents')}>Upcoming Events</button>
-    </div>
-  );
+	return (
+		<div>
+			<OpenPageButton
+				pageToGoTo={"/JoinTheClub"}
+				textOnButton={"Join the Club"}
+			/>
+			<OpenPageButton
+				pageToGoTo={"/UpcomingEvents"}
+				textOnButton={"Upcoming Events"}
+			/>
+		</div>
+	);
 };

-export default DropdownMenu;
+export default DropdownMenu;
--- a/src/Header/Header.css
+++ b/src/Header/Header.css
@ -0,0 +1,32 @@
+header {
+	display: flex;
+	flex-direction: column;
+	margin: 1%;
+	margin-top: 0%;
+}
+
+figure {
+	margin: 0px;
+	height: 10%;
+}
+
+header figure {
+	cursor: pointer;
+}
+
+#logo {
+	height: 5rem;
+	background-color: white;
+}
+
+/* not sure what these two are for */
+#title {
+	background-color: blueviolet;
+}
+.banner {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	background-color: aqua;
+}
--- a/src/Header/Header.js
+++ b/src/Header/Header.js
@ -1,45 +1,89 @@
-import logo from './logo.png';
+import logo from "./logo.webp";
 import DropdownMenu from "./DropdownMenu";
-import { useNavigate } from "react-router-dom";
+import OpenPageButton from "./OpenPageButton";
+import { useNavigate, Outlet } from "react-router-dom";
 import { useState } from "react";
-import { Outlet } from "react-router-dom";
 import "./Header.css";
+import Ender from "../Footer/Ender";

-export default function Header() {
-    const [isDropdownVisible, setDropdownVisible] = useState(false);
-    const navigate = useNavigate();
+/**
+ * @param {null} null -  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>
+ */
+const Header = () => {
+	const [isDropdownVisible, setDropdownVisible] = useState(false);
+	const navigate = useNavigate();

-    const handleMouseEnter = () => {
-        setDropdownVisible(true);
-    };
+	/**
+	 * @param {String} arg -  The page that the button goes to
+	 * @returns {JSX.Element} JSX - HTML tags and JS functionality
+	 * @description Function that move you to the specified place
+	 * @author Brock <darkicewolf50@gmail.com>
+	 */
+	const LinkTo = (arg) => {
+		navigate(arg);
+	};

-    const handleMouseLeave = () => {
-        setDropdownVisible(false);
-    };
+	//makes the drop down menu visible when the mouse enters the Club Membership & Upcoming events button area
+	const handleMouseEnter = () => {
+		setDropdownVisible(true);
+	};
+	//makes the drop down menu invisible when the mouse leaves the Club Membership & Upcoming events button area
+	const handleMouseLeave = () => {
+		setDropdownVisible(false);
+	};

-    return (
-        <>
-            <header>
-                <div>
-                    <img onClick = {() => navigate('/')} src={logo} alt="logo" />
-                    <p>Schulich Offroad</p>
-                </div>
-                <div>
-                    <button type = "button" onClick = {() => navigate('/')}>About Us</button>
-                    <button type = "button" onClick = {() => navigate('/Teams')}>Teams</button>
-                    <button type = "button" onClick = {() => navigate('/OurSponsors')}>Our Sponsors</button>
-                    <button type = "button" onClick = {() => navigate('/BecomeASponsor')}>Become a Sponsor</button>
-                    <div
-                    onMouseEnter={handleMouseEnter}
-                    onMouseLeave={handleMouseLeave}
-                    >
-                        <button type = "button">Club Membership & Upcoming Events</button>
-                        {isDropdownVisible && <DropdownMenu />}
-                    </div>
-                    <button type = "button" onClick = {() => navigate('/Gallery')}>Gallery</button>
-                </div>
-            </header>
-            <Outlet />
-        </>
-    );
-};
+	return (
+		<>
+			<header>
+				<figure onClick={() => LinkTo("/")}>
+					<img
+						id="logo"
+						src={logo}
+						alt="Schulich Off-Road's logo"
+					/>
+					<figcaption>
+						<h2>Schulich Offroad</h2>
+					</figcaption>
+				</figure>
+				<nav>
+					<OpenPageButton
+						pageToGoTo={"/"}
+						textOnButton={"About Us"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/Teams"}
+						textOnButton={"Teams"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/OurSponsors"}
+						textOnButton={"Our Sponsors"}
+					/>
+					<OpenPageButton
+						pageToGoTo={"/BecomeASponsor"}
+						textOnButton={"Become a Sponsor"}
+					/>
+					<div
+						onMouseEnter={handleMouseEnter}
+						onMouseLeave={handleMouseLeave}
+						style={{ background: "red" }}>
+						{/* dropdown menu is only visible when a mouse enters the area of the button below */}
+						<button type="button">Club Membership & Upcoming Events</button>{" "}
+						{/*this button does nothing yet*/}
+						{isDropdownVisible && <DropdownMenu />}
+					</div>
+					<OpenPageButton
+						pageToGoTo={"/Gallery"}
+						textOnButton={"Gallery"}
+					/>
+				</nav>
+			</header>
+			<Outlet />
+			<Ender />
+		</>
+	);
+};
+
+export default Header;
--- a/src/Header/OpenPage.js
+++ b/src/Header/OpenPage.js
@ -0,0 +1,25 @@
+import { useNavigate } from "react-router-dom";
+
+/**
+ * @param {String} pageToGoTo -  The page that the button goes to
+ * @param {String} textOnButton - The Text tht will be on the button
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Button Template that moves you to the
+ * @author Brock <darkicewolf50@gmail.com>
+ */
+const OpenPage = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
+};
+
+export default OpenPage;
--- a/src/Header/OpenPageButton.css
+++ b/src/Header/OpenPageButton.css
@ -0,0 +1,4 @@
+#navigateButton {
+	text-decoration: none;
+	cursor: pointer;
+}
--- a/src/Header/OpenPageButton.js
+++ b/src/Header/OpenPageButton.js
@ -0,0 +1,27 @@
+import { useNavigate } from "react-router-dom";
+import "./OpenPageButton.css";
+
+/**
+ * @param {String} pageToGoTo -  The page that the button goes to
+ * @param {String} textOnButton - The Text tht will be on the button
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Button Template that moves you to the
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo refactor so that name is OpenPageButton, add css to the button
+ */
+const OpenPageButton = ({ pageToGoTo, textOnButton }) => {
+	const navigate = useNavigate();
+	const navigateTo = (param) => {
+		navigate(param);
+	};
+
+	return (
+		<button
+			id="navigateButton"
+			onClick={() => navigateTo(pageToGoTo)}>
+			{textOnButton}
+		</button>
+	);
+};
+
+export default OpenPageButton;
--- a/src/Header/logo.png
+++ b/src/Header/logo.png
--- a/src/Header/logo.webp
+++ b/src/Header/logo.webp
--- 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
@ -0,0 +1,41 @@
+Diamond Tier:
+  - 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 Tier:
+  - Platinum Sponsor Name:
+      LogoUrl:
+      Url:
+      DescriptionAboutSponsor:
+Gold Tier:
+  - 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:
+Silver Tier:
+  - 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:
+Bronze Tier:
+  - 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/OurSponsors/OurSponsors.css
+++ b/src/OurSponsors/OurSponsors.css
@ -0,0 +1,79 @@
+#OurSponsors {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	background-color: gray;
+	padding-left: 2%;
+	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;
+	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,5 +1,195 @@
-export default function OurSponsors() {
-    return (
-        <p>Our Sponsors</p>
-    );
-};
+import "./OurSponsors.css";
+import { useEffect, useState } from "react";
+import currentSponsorData from "../MockDB/sponsorship.yml";
+import pastSponsorData from "../MockDB/pastSponsors.yml";
+import yaml from "js-yaml";
+
+/**
+ * @param {null} null - requires onthing
+ * @returns {JSX.Element} JSX - HTML tags and JS functionality
+ * @description Our Sponsors Page
+ * @author Brock <darkicewolf50@gmail.com>
+ * @todo finsih layout and add content
+ */
+const OurSponsors = () => {
+	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
+	const [pastSponsorsDict, setPastSponsorsDict] = useState();
+
+	useEffect(() => {
+		getCurrentSponsors();
+		getPastSponsors();
+	}, []);
+
+	/**
+	 * @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 getCurrentSponsors = async () => {
+		try {
+			const res = await fetch(currentSponsorData);
+			const rawText = await res.text();
+			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:");
+		}
+	};
+
+	return (
+		<div id="OurSponsors">
+			<h1>Sponsor</h1>
+			<div id="BecomeASponsors">
+				<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>
+				<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>
+																)}
+															</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/TestingTools/fakeDelay.js
+++ b/src/TestingTools/fakeDelay.js
@ -0,0 +1,12 @@
+/**
+ * @param {int} ms - time in ms to add a delay
+ * @returns {Promise(resolve)} Promise - reutrns an empty promise after the set time
+ * @description Testing tool to delay a function deliberatly
+ * @author Brock <darkicewolf50@gmail.com>
+ * @example await fakeDelay(5000);
+ */
+function fakeDelay(ms) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export default fakeDelay;
--- a/src/index.js
+++ b/src/index.js
@ -1,34 +1,44 @@
-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>
-      </Routes>
-    </BrowserRouter>
-  </React.StrictMode>
+	<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="/JoinTheClub"
+						element={<JoinTheClub />}></Route>
+					<Route
+						path="/UpcomingEvents"
+						element={<UpcomingEvents />}></Route>
+					<Route
+						path="/Gallery"
+						element={<Gallery />}></Route>
+				</Route>
+			</Routes>
+		</BrowserRouter>
+	</React.StrictMode>
 );

 // If you want to start measuring performance in your app, pass a function