feat(home): finshed about us, started on sponsors section

public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
+	"short_name": "UCalgary Baja",
-  "name": "Create React App Sample",
+	"name": "UCalgary Baja Website",
 	"icons": [
 		{
 			"src": "favicon.ico",

src/Header/Header.css

@@ -129,6 +129,8 @@ nav ul {
 
 :root {
 	--fade-starts-at: 80%;
+	--banner-text-pos-left: 15svw;
+	--banner-text-background: white;
 }
 
 #BannerHeader img {
@@ -162,25 +164,25 @@ nav ul {
 #BannerHeader h1 {
 	display: flex;
 	width: fit-content;
-
+	margin: 0px;
-	margin-left: 15svw;
+	margin-left: var(--banner-text-pos-left);
 
 	font-size: 80px; /* todo make larger */
 	font-weight: normal;
 
-	background-color: white;
+	background-color: var(--banner-text-background);
 }
 
 #BannerHeader h2 {
 	display: flex;
 	width: fit-content;
 
-	margin-left: 3svw;
+	margin-left: var(--banner-text-pos-left);
 
 	font-size: xx-large;
 	font-weight: normal;
 
-	background-color: white;
+	background-color: var(--banner-text-background);
 }
 
 /* for dark mode */

src/Home/Home.css

@@ -0,0 +1,84 @@
+#Home {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+	padding-top: 2svh;
+	background-color: rgba(128, 128, 128, 0.2);
+}
+
+#HomeSponsors {
+	display: flex;
+	flex-flow: row wrap;
+	column-gap: 4svw;
+	justify-content: space-evenly;
+
+	margin: 1svh 6svw;
+	padding: 2svh 4svw;
+	background-color: white;
+	border-radius: 1rem;
+}
+
+#HomeSponsors a {
+	text-decoration: none;
+	color: inherit;
+	flex: 0 1 30%;
+}
+
+#HomeSponsors a img {
+	max-width: 200px;
+	max-height: 200px;
+}
+
+#HomeSponsors a p {
+	margin: 1rem;
+}
+
+#HomeAboutUs {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	column-gap: 4svw;
+	padding: 2svh 4vw;
+	background-color: black;
+	color: white;
+}
+
+#HomeAboutUs img {
+	flex: 0 1 40%;
+	overflow: hidden;
+	/* max-height: 50svh; */
+}
+
+#HomeAboutUs div {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	flex: 0 1 40%;
+	overflow: hidden;
+}
+
+#HomeAboutUs h3 {
+	/* margin: 0px; */
+	font-size: 3rem;
+}
+
+#HomeAboutUs p {
+	text-align: start;
+}
+
+#HomeAboutUs div a {
+	width: fit-content;
+	align-self: center;
+	font-size: 1rem;
+	padding: 2svh 4svw;
+	border-radius: 0px;
+	border: none;
+	background-color: white;
+	text-decoration: none;
+	color: black;
+	border-radius: 5px;
+}
+
+#HomeAboutUs div a:hover {
+	background-color: lightgray;
+}

src/Home/Home.jsx

@@ -1,14 +1,127 @@
 import UpdateBanner from "../Header/UpdateBanner";
+import { Link } from "react-router-dom";
+import { useEffect, useState } from "react";
+import yaml from "js-yaml";
 
-export default function AboutsUs() {
+import "./Home.css";
+import sponsorsyaml from "../MockDB/sponsorship.yml";
+
+export default function Home() {
+	const [currentSponsors, setCurrentSponsors] = useState();
+
+	useEffect(() => {
+		getCurrentSponsors();
+	}, []);
+	/**
+	 * @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(sponsorsyaml);
+			const rawText = await res.text();
+			const yamlDict = await yaml.load(rawText);
+			setCurrentSponsors(yamlDict);
+		} catch (error) {
+			//error checking
+			console.log(error);
+			console.error("Error recieving data from server:");
+		}
+	};
+	let Sponsors = {
+		"Schulich School of Engineering": {
+			SponsorTier: "Diamond",
+			LogoUrl:
+				"https://static.wixstatic.com/media/5824fc_5fbf9755b7a5425390262c6f5ac17044~mv2.png/v1/fill/w_426,h_204,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5824fc_5fbf9755b7a5425390262c6f5ac17044~mv2.png",
+			Url: "https://schulich.ucalgary.ca/",
+		},
+		Morphgenix: {
+			SponsorTier: "Diamond",
+			LogoUrl:
+				"https://static.wixstatic.com/media/5824fc_2eca210b7d4a49298a70ad1f0a61886e~mv2.jpg/v1/crop/x_0,y_1,w_2707,h_1353/fill/w_410,h_206,fp_0.50_0.50,q_80,usm_0.66_1.00_0.01,enc_auto/5824fc_2eca210b7d4a49298a70ad1f0a61886e~mv2.jpg",
+			Url: "https://www.morphgenix.com",
+		},
+		Suri: {
+			SponsorTier: "Diamond",
+			LogoUrl:
+				"https://static.wixstatic.com/media/5824fc_1a5c460f693b4c14baf546a55b02eec6~mv2.png/v1/crop/x_0,y_62,w_500,h_276/fill/w_222,h_123,fp_0.50_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5824fc_1a5c460f693b4c14baf546a55b02eec6~mv2.png",
+			Url: "https://www.surimanufacturing.com/",
+		},
+	};
 	return (
 		<>
 			<UpdateBanner
 				updatedTitleText="UCalgary Baja"
-				updatedSubtitleText=""
+				updatedSubtitleText="University of Calgary Baja SAE"
-				updatedImgUrl="https://picsum.photos/200"
+				updatedImgUrl="https://static.wixstatic.com/media/29f2faf621bf40e4b92ca52cfd7e9cdc.jpg/v1/fill/w_1706,h_1979,fp_0.57_0.48,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/29f2faf621bf40e4b92ca52cfd7e9cdc.jpg"
-				updatetdImgAlt="Lorem Picsum"
+				updatetdImgAlt="Pavement with some crosswalks on them"
 			/>
+			<div id="Home">
+				<h2>Our Sponsors</h2>
+				<div id="HomeSponsors">
+					{currentSponsors === undefined ? (
+						<p>Loading...</p>
+					) : (
+						<>
+							{Object.keys(currentSponsors).map((sponsorTier) => {
+								Object.keys(currentSponsors[sponsorTier]).map(
+									(sponsorListPos) => {
+										Object.keys(
+											currentSponsors[sponsorTier][sponsorListPos]
+										).map((sponsorName) => {
+											let sponsorDetail =
+												currentSponsors[sponsorTier][sponsorListPos][
+													sponsorName
+												];
+											console.log(sponsorTier, sponsorName, sponsorDetail);
+											return (
+												// {sponsorDetail.Url !== null && sponsorDetail.LogoUrl !== null ? (<></>) :
+												<a
+													href={sponsorDetail.Url}
+													key={sponsorName}>
+													<img
+														src={sponsorDetail.LogoUrl}
+														alt={sponsorName + "'s logo"}
+													/>
+													<p>{sponsorTier} Sponsor</p>
+												</a>
+											);
+										});
+									}
+								);
+							})}
+						</>
+					)}
+				</div>
+				<div>Mini Gallery</div>
+				<div id="HomeAboutUs">
+					<img
+						src="https://static.wixstatic.com/media/5824fc_f65d87b07f23407087a1bd60766d9548~mv2.jpg/v1/fill/w_846,h_1194,fp_0.50_0.48,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/thumbnail_DE9F07D7-298D-4FFD-9192-27854CB866AA.jpg"
+						alt="Blue baja car racing on muddy track"
+					/>
+					<div>
+						<h3>About Our Team</h3>
+						<p>
+							UCalgary Baja is a student organization responsible for designing,
+							building, and racing an off-road vehicle in the Baja SAE
+							intercollegiate competition organized by the Society of Automotive
+							Engineers (SAE). UCalgary Baja's cars are tough, dependable,
+							competitive, and extremely fun to drive.
+						</p>
+						<p>
+							We compete in the Baja SAE competition every year. An average of
+							100 teams from all corners of the globe compete in the event - the
+							US, Canada, Mexico, India, China, Brazil, Korea, and more. The
+							competition is ferocious, and the race is treacherous; more than
+							half of the cars that start the race never finish.{" "}
+						</p>
+						<Link to="/About">Learn More</Link>
+					</div>
+				</div>
+			</div>
 		</>
 	);
 }

src/index.js

@@ -11,6 +11,7 @@ import UpcomingEvents from "./Club Membership & Upcoming Events/UpcominEvents/Up
 import Gallery from "./Gallery/Gallery";
 import "./index.css";
 import MockPage from "./MockDB/MockPage";
+import Home from "./Home/Home";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
@@ -20,6 +21,10 @@ root.render(
 				<Route element={<Header />}>
 					<Route
 						path="/"
+						element={<Home />}
+					/>
+					<Route
+						path="/About"
 						element={<AboutUs />}></Route>
 					<Route
 						path="/Teams"