feat(home sponsors): sponsors section optimized to reuse old code from sponsors, transition added

src/Header/Header.css

@@ -128,7 +128,8 @@ nav ul {
 }
 
 :root {
-	--fade-starts-at: 80%;
+	--fade-starts-at-bottom: 80%;
+	--fade-starts-at-top: 96%;
 	--banner-text-pos-left: 15svw;
 	--banner-text-background: white;
 }
@@ -146,12 +147,12 @@ nav ul {
 
 	-webkit-mask-image: linear-gradient(
 		to bottom,
-		black var(--fade-starts-at),
+		black var(--fade-starts-at-bottom),
 		transparent
 	);
 	mask-image: linear-gradient(
 		to bottom,
-		black var(--fade-starts-at),
+		black var(--fade-starts-at-bottom),
 		transparent
 	);
 }

src/Header/Header.js

@@ -77,7 +77,10 @@ export default function Header() {
 		const HomeBannerTop = document.getElementById("BannerHeader");
 
 		// 1svh is to gget the div close enough to the image
-		HomeBannerTop.style.height = `calc(100svh + -${headerTopTotalHeight}px)`;
+		HomeBannerTop.style.setProperty(
+			"height",
+			`calc(100svh + -${headerTopTotalHeight}px)`
+		);
 	};
 
 	return (

src/Home/Home.css

@@ -2,8 +2,19 @@
 	display: flex;
 	flex-direction: column;
 	text-align: center;
+	margin-top: 2svh;
 	padding-top: 2svh;
 	background-color: rgba(128, 128, 128, 0.2);
+	-webkit-mask-image: linear-gradient(
+		to top,
+		black var(--fade-starts-at-top),
+		transparent
+	);
+	mask-image: linear-gradient(
+		to top,
+		black var(--fade-starts-at-top),
+		transparent
+	);
 }
 
 #HomeSponsors {
@@ -19,14 +30,18 @@
 }
 
 #HomeSponsors a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
 	text-decoration: none;
 	color: inherit;
 	flex: 0 1 30%;
 }
 
 #HomeSponsors a img {
-	max-width: 200px;
 	max-height: 200px;
+	max-width: 200px;
 }
 
 #HomeSponsors a p {

src/Home/Home.jsx

@@ -66,9 +66,9 @@ export default function Home() {
 						<p>Loading...</p>
 					) : (
 						<>
-							{Object.keys(currentSponsors).map((sponsorTier) => {
+							{Object.keys(currentSponsors).map((sponsorTier) =>
 								Object.keys(currentSponsors[sponsorTier]).map(
-									(sponsorListPos) => {
+									(sponsorListPos) =>
 										Object.keys(
 											currentSponsors[sponsorTier][sponsorListPos]
 										).map((sponsorName) => {
@@ -77,22 +77,23 @@ export default function Home() {
 													sponsorName
 												];
 											console.log(sponsorTier, sponsorName, sponsorDetail);
-											return (
+											return sponsorDetail !== null ? (
-												// {sponsorDetail.Url !== null && sponsorDetail.LogoUrl !== null ? (<></>) :
+												sponsorDetail.Url !== "" &&
-												<a
+												sponsorDetail.LogoUrl !== null ? (
-													href={sponsorDetail.Url}
+													<a
-													key={sponsorName}>
+														href={sponsorDetail.Url}
-													<img
+														key={sponsorName}>
-														src={sponsorDetail.LogoUrl}
+														<img
-														alt={sponsorName + "'s logo"}
+															src={sponsorDetail.LogoUrl}
-													/>
+															alt={sponsorName + "'s logo"}
-													<p>{sponsorTier} Sponsor</p>
+														/>
-												</a>
+														<p>{sponsorTier} Sponsor</p>
-											);
+													</a>
-										});
+												) : null
-									}
+											) : null;
-								);
+										})
-							})}
+								)
+							)}
 						</>
 					)}
 				</div>

src/MockDB/pastSponsors.yml

@@ -1,31 +1,11 @@
-- 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/
@@ -34,3 +14,47 @@
     LogoUrl:
     Url:
     DescriptionAboutSponsor:
+- Schulich School of Engineering:
+    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/
+    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.
+- Suri:
+    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/
+    DescriptionAboutSponsor:
+- Morphgenix:
+    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
+    DescriptionAboutSponsor:
+- Solidworks:
+    LogoUrl: https://static.wixstatic.com/media/5824fc_bf60d1e1d88f44d5a5227aa85bfdb30f~mv2.png/v1/fill/w_593,h_123,fp_0.50_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5824fc_bf60d1e1d88f44d5a5227aa85bfdb30f~mv2.png
+    Url: https://www.solidworks.com/
+    DescriptionAboutSponsor:
+- WRMA:
+    LogoUrl: https://static.wixstatic.com/media/5824fc_07d8e7297fb147fba71a1c6a9468f8e0~mv2.png/v1/fill/w_354,h_278,al_c,lg_1,q_85,enc_avif,quality_auto/5824fc_07d8e7297fb147fba71a1c6a9468f8e0~mv2.png
+    Url: https://wildrosemx.com/
+    DescriptionAboutSponsor:
+- Trotec:
+    LogoUrl: https://www.troteclaser.com/_nuxt/img/logo-trotec.709e7ce.svg
+    Url: https://www.troteclaser.com/en-ca/
+    DescriptionAboutSponsor:
+- Encore Metals:
+    LogoUrl: https://static.wixstatic.com/media/5824fc_18266e1befde40f1904008d9ae3ccd2c~mv2.png/v1/fill/w_280,h_56,al_c,lg_1,q_85,enc_avif,quality_auto/5824fc_18266e1befde40f1904008d9ae3ccd2c~mv2.png
+    Url: https://www.encoremetals.com/
+    DescriptionAboutSponsor: Metal supplier
+- CNOOC:
+    LogoUrl: https://static.wixstatic.com/media/5824fc_da06825356ab46da814a57f151d2411c~mv2.png/v1/crop/x_0,y_1,w_2780,h_699/fill/w_593,h_149,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5824fc_da06825356ab46da814a57f151d2411c~mv2.png
+    Url: https://cnoocinternational.com/
+    DescriptionAboutSponsor:
+- Polaris:
+    LogoUrl: https://static.wixstatic.com/media/5824fc_185cc0a2410f4ad38862564702e3c88e~mv2.png/v1/crop/x_0,y_13,w_292,h_162/fill/w_409,h_216,fp_0.50_0.50,lg_1,q_85,enc_avif,quality_auto/300x200_Polaris%20-%20Copy.png
+    Url: https://www.polaris.com/en-ca/
+    DescriptionAboutSponsor:
+- Ansys:
+    LogoUrl: https://www.ansys.com/content/dam/company/brand/logos/ansys-logos/ansys-logo.jpg
+    Url: https://www.ansys.com
+    DescriptionAboutSponsor:
+- darkicewolf50:
+    LogoUrl: https://gitea.bajacloud.duckdns.org/avatars/736ff895ae4b87101385b87887e5865e?size=512
+    Url: https://darkicewolf50.pages.dev
+    DescriptionAboutSponsor:

src/MockDB/sponsorship.yml

@@ -3,51 +3,56 @@ Diamond Tier:
       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/
       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.
+  - Suri:
+      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/
+      DescriptionAboutSponsor:
 Platinum Tier:
   - Morphgenix:
       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
       DescriptionAboutSponsor:
 Gold Tier:
-  - Suri:
+  - Solidworks:
-      LogoUrl: https://lh5.googleusercontent.com/WJsBsmcLypQhY0MMOLQtJSGFXrLQqPKNc3502rYUGKPCq_SfS9CxuoB3n541Kn9bKPm2b5aixCnYsCVYZAts2Y8xvmOHWL3nnbKtWUkE1KoFYYQ4bXUlikfF0NPIynxhzQ=w1280
+      LogoUrl: https://static.wixstatic.com/media/5824fc_bf60d1e1d88f44d5a5227aa85bfdb30f~mv2.png/v1/fill/w_593,h_123,fp_0.50_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5824fc_bf60d1e1d88f44d5a5227aa85bfdb30f~mv2.png
-      Url: https://www.surimanufacturing.com/
+      Url: https://www.solidworks.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
+      LogoUrl: https://static.wixstatic.com/media/5824fc_07d8e7297fb147fba71a1c6a9468f8e0~mv2.png/v1/fill/w_354,h_278,al_c,lg_1,q_85,enc_avif,quality_auto/5824fc_07d8e7297fb147fba71a1c6a9468f8e0~mv2.png
       Url: https://wildrosemx.com/
       DescriptionAboutSponsor:
   - Trotec:
       LogoUrl: https://www.troteclaser.com/_nuxt/img/logo-trotec.709e7ce.svg
       Url: https://www.troteclaser.com/en-ca/
       DescriptionAboutSponsor:
-  - Solidworks:
+
-      LogoUrl: https://www.3ds.com/assets/3ds-navigation/3DS_corporate-logo_solidworks.svg
-      Url: https://www.solidworks.com/
-      DescriptionAboutSponsor:
 Silver Tier:
   - Encore Metals:
-      LogoUrl: https://www.encoremetals.com/assets/images/logos/encore-metals-logo.png
+      LogoUrl: https://static.wixstatic.com/media/5824fc_18266e1befde40f1904008d9ae3ccd2c~mv2.png/v1/fill/w_280,h_56,al_c,lg_1,q_85,enc_avif,quality_auto/5824fc_18266e1befde40f1904008d9ae3ccd2c~mv2.png
       Url: https://www.encoremetals.com/
       DescriptionAboutSponsor: Metal supplier
   - CNOOC:
-      LogoUrl: https://cnoocinternational.com/img/cnooc-logo.png
+      LogoUrl: https://static.wixstatic.com/media/5824fc_da06825356ab46da814a57f151d2411c~mv2.png/v1/crop/x_0,y_1,w_2780,h_699/fill/w_593,h_149,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/5824fc_da06825356ab46da814a57f151d2411c~mv2.png
       Url: https://cnoocinternational.com/
       DescriptionAboutSponsor:
   - Polaris:
-      LogoUrl: https://cdn1.polaris.com/globalassets/crp/2024/nav-bar-logos/nav-bar-logo-polaris.svg?v=c0e00521
+      LogoUrl: https://static.wixstatic.com/media/5824fc_185cc0a2410f4ad38862564702e3c88e~mv2.png/v1/crop/x_0,y_13,w_292,h_162/fill/w_409,h_216,fp_0.50_0.50,lg_1,q_85,enc_avif,quality_auto/300x200_Polaris%20-%20Copy.png
       Url: https://www.polaris.com/en-ca/
       DescriptionAboutSponsor:
+  - Ansys:
+      LogoUrl: https://www.ansys.com/content/dam/company/brand/logos/ansys-logos/ansys-logo.jpg
+      Url: https://www.ansys.com
+      DescriptionAboutSponsor:
 Bronze Tier:
-  - Redbull:
+  #   - Redbull:
-      LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
+  #       LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"
-      Url: https://www.redbull.com/ca-en/
+  #       Url: https://www.redbull.com/ca-en/
-      DescriptionAboutSponsor:
+  #       DescriptionAboutSponsor:
-  - Canada Action:
+  #   - Canada Action:
-      LogoUrl:
+  #       LogoUrl:
-      Url:
+  #       Url:
+  #       DescriptionAboutSponsor:
+  - darkicewolf50:
+      LogoUrl: https://gitea.bajacloud.duckdns.org/avatars/736ff895ae4b87101385b87887e5865e?size=512
+      Url: https://darkicewolf50.pages.dev
       DescriptionAboutSponsor: