chnged from dictionary to external yml file

package-lock.json

@@ -12,12 +12,16 @@
 				"@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"
+			},
+			"devDependencies": {
+				"yaml-loader": "^0.8.1"
 			}
 		},
 		"node_modules/@adobe/css-tools": {
@@ -2379,11 +2383,6 @@
 				"url": "https://opencollective.com/eslint"
 			}
 		},
-    "node_modules/@eslint/eslintrc/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
 		"node_modules/@eslint/eslintrc/node_modules/globals": {
 			"version": "13.20.0",
 			"resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
@@ -2398,17 +2397,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
 		"node_modules/@eslint/eslintrc/node_modules/type-fest": {
 			"version": "0.20.2",
 			"resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
@@ -2486,6 +2474,14 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
 		"node_modules/@istanbuljs/load-nyc-config/node_modules/camelcase": {
 			"version": "5.3.1",
 			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
@@ -2506,6 +2502,18 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/@istanbuljs/load-nyc-config/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/@istanbuljs/load-nyc-config/node_modules/locate-path": {
 			"version": "5.0.0",
 			"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@@ -3578,6 +3586,14 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
+		"node_modules/@react-native-community/cli-config/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
 		"node_modules/@react-native-community/cli-config/node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -3643,6 +3659,18 @@
 				"node": ">=4"
 			}
 		},
+		"node_modules/@react-native-community/cli-config/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/@react-native-community/cli-config/node_modules/parse-json": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -4840,11 +4868,6 @@
 				"url": "https://github.com/sponsors/gregberge"
 			}
 		},
-    "node_modules/@svgr/core/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
 		"node_modules/@svgr/core/node_modules/cosmiconfig": {
 			"version": "8.3.6",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
@@ -4870,17 +4893,6 @@
 				}
 			}
 		},
-    "node_modules/@svgr/core/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
 		"node_modules/@svgr/hast-util-to-babel-ast": {
 			"version": "8.0.0",
 			"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
@@ -4949,11 +4961,6 @@
 				"@svgr/core": "*"
 			}
 		},
-    "node_modules/@svgr/plugin-svgo/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
 		"node_modules/@svgr/plugin-svgo/node_modules/cosmiconfig": {
 			"version": "8.3.6",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
@@ -4979,17 +4986,6 @@
 				}
 			}
 		},
-    "node_modules/@svgr/plugin-svgo/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
 		"node_modules/@svgr/webpack": {
 			"version": "8.1.0",
 			"resolved": "https://registry.npmjs.org/@svgr/webpack/-/webpack-8.1.0.tgz",
@@ -6509,12 +6505,9 @@
 			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
 		},
 		"node_modules/argparse": {
-      "version": "1.0.10",
+			"version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-      "dependencies": {
-        "sprintf-js": "~1.0.2"
-      }
 		},
 		"node_modules/aria-query": {
 			"version": "5.1.3",
@@ -9553,11 +9546,6 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
-    "node_modules/eslint/node_modules/argparse": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
-      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
-    },
 		"node_modules/eslint/node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -9622,17 +9610,6 @@
 				"node": ">=8"
 			}
 		},
-    "node_modules/eslint/node_modules/js-yaml": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dependencies": {
-        "argparse": "^2.0.1"
-      },
-      "bin": {
-        "js-yaml": "bin/js-yaml.js"
-      }
-    },
 		"node_modules/eslint/node_modules/supports-color": {
 			"version": "7.2.0",
 			"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -10338,6 +10315,11 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/fs": {
+			"version": "0.0.1-security",
+			"resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+			"integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+		},
 		"node_modules/fs-extra": {
 			"version": "10.1.0",
 			"resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
@@ -11789,6 +11771,12 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/javascript-stringify": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/javascript-stringify/-/javascript-stringify-2.1.0.tgz",
+			"integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
+			"dev": true
+		},
 		"node_modules/jest": {
 			"version": "27.5.1",
 			"resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
@@ -13701,12 +13689,11 @@
 			"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
 		},
 		"node_modules/js-yaml": {
-      "version": "3.14.1",
+			"version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
-      "integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
 			"dependencies": {
-        "argparse": "^1.0.7",
+				"argparse": "^2.0.1"
-        "esprima": "^4.0.0"
 			},
 			"bin": {
 				"js-yaml": "bin/js-yaml.js"
@@ -14627,6 +14614,14 @@
 				"url": "https://github.com/chalk/ansi-styles?sponsor=1"
 			}
 		},
+		"node_modules/metro-config/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
 		"node_modules/metro-config/node_modules/chalk": {
 			"version": "4.1.2",
 			"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -14716,6 +14711,18 @@
 				"node": "^14.15.0 || ^16.10.0 || >=18.0.0"
 			}
 		},
+		"node_modules/metro-config/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/metro-config/node_modules/parse-json": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -18561,6 +18568,14 @@
 				"url": "https://github.com/sponsors/gregberge"
 			}
 		},
+		"node_modules/react-scripts/node_modules/argparse": {
+			"version": "1.0.10",
+			"resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+			"integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+			"dependencies": {
+				"sprintf-js": "~1.0.2"
+			}
+		},
 		"node_modules/react-scripts/node_modules/css-select": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/css-select/-/css-select-2.1.0.tgz",
@@ -18618,6 +18633,18 @@
 			"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
 			"integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w=="
 		},
+		"node_modules/react-scripts/node_modules/js-yaml": {
+			"version": "3.14.1",
+			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.14.1.tgz",
+			"integrity": "sha512-okMH7OXXJ7YrN9Ok3/SXrnu4iX9yOk+25nqX4imS2npuvTYDmo/QEZoqwZkYaIDk3jVvBOTOIEgEhaLOynBS9g==",
+			"dependencies": {
+				"argparse": "^1.0.7",
+				"esprima": "^4.0.0"
+			},
+			"bin": {
+				"js-yaml": "bin/js-yaml.js"
+			}
+		},
 		"node_modules/react-scripts/node_modules/mdn-data": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.4.tgz",
@@ -21901,6 +21928,32 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/yaml-loader": {
+			"version": "0.8.1",
+			"resolved": "https://registry.npmjs.org/yaml-loader/-/yaml-loader-0.8.1.tgz",
+			"integrity": "sha512-BCEndnUoi3BaZmePkwGGe93txRxLgMhBa/gE725v1/GHnura8QvNs7c4+4C1yyhhKoj3Dg63M7IqhA++15j6ww==",
+			"dev": true,
+			"dependencies": {
+				"javascript-stringify": "^2.0.1",
+				"loader-utils": "^2.0.0",
+				"yaml": "^2.0.0"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
+		"node_modules/yaml-loader/node_modules/yaml": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
+			"integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+			"dev": true,
+			"bin": {
+				"yaml": "bin.mjs"
+			},
+			"engines": {
+				"node": ">= 14"
+			}
+		},
 		"node_modules/yargs": {
 			"version": "16.2.0",
 			"resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",

package.json

@@ -7,6 +7,7 @@
 		"@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",
@@ -37,5 +38,8 @@
 			"last 1 firefox version",
 			"last 1 safari version"
 		]
+	},
+	"devDependencies": {
+		"yaml-loader": "^0.8.1"
 	}
 }

src/MockDB/sponsorship.yml

@@ -0,0 +1,50 @@
+Diamond Tier:
+  - Name: 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
+    LogoUrl:
+    Url:
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money
+Gold Tier:
+  - Name: 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
+    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
+    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
+    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
+    LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
+    Url: https://cnoocinternational.com/
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money
+Bronze Tier:
+  - Name: 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
+    LogoUrl:
+    Url: I dont know
+    DescriptionAboutSponsor:
+    DescriptionOnHelp: Money

src/OurSponsors/OurSponsors.css

@@ -14,24 +14,24 @@
 	background-color: white;
 }
 
-#OurSponsors div div div div img {
+#OurSponsors div div div div div img {
 	display: flex;
 	justify-content: left;
 }
 
-#OurSponsors div div p {
+#OurSponsors div div div p {
 	display: flex;
 	justify-content: left;
 }
 
-#OurSponsors div div div div {
+#OurSponsors div div div div div {
 	padding: 0%;
 	display: flex;
 	flex-direction: column;
 	justify-content: left;
 }
 
-#OurSponsors div div div {
+#OurSponsors div div div div {
 	display: flex;
 	flex-direction: row;
 	justify-content: end;
@@ -48,4 +48,3 @@
 #OurSponsors h3 {
 	text-align: left;
 }
-

src/OurSponsors/OurSponsors.js

@@ -1,9 +1,11 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
-import { useState } from 'react';
+import { useState } from "react";
-import './OurSponsors.css'
+import "./OurSponsors.css";
+import sponsorData from "../MockDB/sponsorship.yml";
 //can be removed later
-import fakeDelay from '../TestingTools/fakeDelay';
+import fakeDelay from "../TestingTools/fakeDelay";
-import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
+import yaml from "js-yaml";
 
 /**
  * @param {null} null - requires onthing
@@ -13,10 +15,10 @@ import { useNavigate } from 'react-router-dom';
  * @todo add link to become a sponsor at top, and thank you message
  */
 const OurSponsors = () => {
-    
 	const [sponsorsDict, setSponsorsDict] = useState(); //variable states for the dictionary of sponsors
 
-   useEffect(() => { //get sponsors on startup of page not optimized
+	useEffect(() => {
+		//get sponsors on startup of page not optimized
 		getSponsors();
 	}, []);
 
@@ -34,102 +36,39 @@ const OurSponsors = () => {
 	 * @todo add gPRC to backend and front end
 	 */
 	const getSponsors = async () => {
-        const tempListOfSponsors = {
+		const res = await fetch(sponsorData);
-            "Main Tier": {
+		const rawText = await res.text();
-                1:{
+		const yamlDict = yaml.load(rawText);
-                    "Name":"Hello",
-                    "LogoUrl":"",
-                    "Url":"",
-                    "DescriptionAboutSponsor":"this has text i dont care",
-                    "DecriptionOnHelp":"this has text i dont care"
-                }
-            },
-            "Platnum Tier": { 
-                1:{
-                    "Name":"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":"this has text i dont care"
-                },
-                2:{
-                    "Name":"",
-                    "LogoUrl":"",
-                    "Url":"",
-                    "DescriptionAboutSponsor":"this has text i dont care",
-                    "DecriptionOnHelp":"this has text i dont care"
-                }
-            },
-            "Gold Tier":{
-                1:{
-                    "Name":"",
-                    "LogoUrl":"",
-                    "Url":"",
-                    "DescriptionAboutSponsor":"this has text i dont care",
-                    "DecriptionOnHelp":"this has text i dont care"
-                },
-                2:{
-                    "Name":"",
-                    "LogoUrl":"data:image/png;base64,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",
-                    "Url":"",
-                    "DescriptionAboutSponsor":"1this has text i dont care",
-                    "DecriptionOnHelp":"2this has text i dont care"
-                }
-            },
-            "Silver Tier": {
-                1:{
-                    "Name":"Father",
-                    "LogoUrl":"",
-                    "Url":""
-                    //"DescriptionAboutSponsor":"", //Dont get this
-                    //"DecriptionOnHelp":"" //Dont get this
-                },
-                2:{
-                    "Name":"Help",
-                    "LogoUrl":"",
-                    "Url":""
-                    //"DescriptionAboutSponsor":"", //Dont get this
-                    //"DecriptionOnHelp":"" //Dont get this
-                }
-            },
-            "Bronze Tier":{
-                1:{
-                    "Name":"I'm",
-                    //"LogoUrl":"", //Dont get this
-                    "Url":""
-                    //"DescriptionAboutSponsor":"", //Dont get this
-                    //"DecriptionOnHelp":"" //Dont get this
-                },
-                2:{
-                    "Name":"Stuck to a cactus",
-                    //"LogoUrl":"", //Dont get this
-                    "Url":""
-                    //"DescriptionAboutSponsor":"", //Dont get this
-                    //"DecriptionOnHelp":"" //Dont get this
-                }
-            }
-        };
 		try {
 			await fakeDelay(1000);
 			console.log("It ran");
-            let res = tempListOfSponsors;
+			let res = yamlDict;
 			setSponsorsDict(res);
-        } catch (error) {   //error checking
+		} catch (error) {
-            console.error('Error sending data to server:', error);
+			//error checking
-        }
+			console.error("Error sending data to server:", error);
 		}
+	};
 
-
+	if (!sponsorsDict) {
-    if (!sponsorsDict) {    //awaiting for a resposne from the backend
+		//awaiting for a resposne from the backend
-            return <p>Loading...</p>
+		return <p>Loading...</p>;
 	}
-    if(sponsorsDict) {  //maps out the dictionary and displays the content
+	if (sponsorsDict) {
-            return (<div id='OurSponsors'>
+		//maps out the dictionary and displays the content
-                    <div id='BecomeASponsors'>
+		return (
-                        <button onClick={() => OpenPage('/BecomeASponsor')}>Become A Sponsor</button>
+			<div id="OurSponsors">
+				<div id="BecomeASponsors">
+					<button onClick={() => OpenPage("/BecomeASponsor")}>
+						Become A Sponsor
+					</button>
 				</div>
+				<div>
+					<h3>Current Sponsors</h3>
 					{Object.keys(sponsorsDict).map((sponsorTier) => (
-                        <div key={sponsorTier} className={sponsorTier}>
+						<div
+							key={sponsorTier}
+							className={sponsorTier}>
 							<h2>{sponsorTier}</h2>
 							{Object.keys(sponsorsDict[sponsorTier]).map((sponsorKey) => {
 								const sponsor = sponsorsDict[sponsorTier][sponsorKey];
@@ -138,20 +77,43 @@ const OurSponsors = () => {
 										<div>
 											<div>
 												{sponsor.Name && <h3>{sponsor.Name}</h3>}
-                                    {sponsor.LogoUrl && <a href={sponsor.Url}><img src={sponsor.LogoUrl} alt="Sponsor Logo" /></a>}
+												{sponsor.LogoUrl && (
+													<a
+														href={sponsor.Url}
+														target="_blank">
+														<img
+															src={sponsor.LogoUrl}
+															alt="Sponsor Logo"
+														/>
+													</a>
+												)}
 											</div>
-                                    {(sponsor.DescriptionAboutSponsor !== undefined && sponsor.DecriptionOnHelp !== undefined) && <p>Another Element</p>}
+											{sponsor.DescriptionAboutSponsor !== undefined &&
+												sponsor.DecriptionOnHelp !== undefined &&
+												(sponsorTier != "Bronze Tier" ||
+													sponsorTier != "Silver Tier") && (
+													<p>Another Element</p>
+												)}
 										</div>
-                                {sponsor.DescriptionAboutSponsor !== undefined && <p>{sponsor.DescriptionAboutSponsor}</p>}
+										{sponsor.DescriptionAboutSponsor !== undefined &&
-                                {sponsor.DecriptionOnHelp !== undefined && <p>{sponsor.DecriptionOnHelp}</p>}
+											(sponsorTier != "Bronze Tier" ||
+												sponsorTier != "Silver Tier") && (
+												<p>{sponsor.DescriptionAboutSponsor}</p>
+											)}
+										{sponsor.DecriptionOnHelp !== undefined &&
+											(sponsorTier != "Bronze Tier" ||
+												sponsorTier != "Silver Tier") && (
+												<p>{sponsor.DecriptionOnHelp}</p>
+											)}
 									</div>
 								);
 							})}
 						</div>
 					))}
-            </div>);
+				</div>
+			</div>
+		);
 	}
-
 };
 
 export default OurSponsors;