Sponsor css update

Sponsor css merge

src/MockDB/sponsorship.yml

@@ -4,9 +4,9 @@ Diamond Tier:
       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:
+  - Morphgenix:
-      LogoUrl:
+      LogoUrl: Sam I need this
-      Url:
+      Url: https://www.morphgenix.com
       DescriptionAboutSponsor:
 Gold Tier:
   - Suri:
@@ -21,6 +21,14 @@ Gold Tier:
       LogoUrl: https://wildrosemx.com/wp-content/uploads/2021/08/wild-rose-motocross-calgary-rasterized.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
@@ -30,6 +38,10 @@ Silver Tier:
       LogoUrl: https://cnoocinternational.com/img/cnooc-logo.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
+      Url: https://www.polaris.com/en-ca/
+      DescriptionAboutSponsor:
 Bronze Tier:
   - Redbull:
       LogoUrl: "https://img.redbull.com/redbullcom/static/redbullcom-logo_double-with-text.svg"

src/OurSponsors/OurSponsors.css

@@ -1,3 +1,12 @@
+:root {
+	--tableBackground: white;
+	--sponsorBorderWidth: 2px;
+	--sponsorBorderStyle: solid;
+	--sponsorBorderColour: black;
+	--sponsorBorder: var(--sponsorBorderWidth) var(--sponsorBorderStyle)
+		var(--sponsorBorderColour);
+}
+
 #OurSponsors {
 	display: flex;
 	flex-direction: column;
@@ -12,19 +21,39 @@
 }
 
 #BecomeASponsors div {
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 4svh;
+	margin-left: 1svw;
+	margin-right: 1svw;
+}
+
+#BecomeASponsors div div {
 	display: flex;
 	flex-direction: row;
+	border-bottom: none;
+	padding: 0px;
 }
 
 #BecomeASponsors a {
 	color: inherit;
 	text-decoration: none;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+	transition: scale 0.3s;
+	border-radius: 5px;
+	margin-left: 1svw;
+	margin-right: 3svw;
+	width: fit-content;
+}
+
+#BecomeASponsors a:hover {
+	cursor: pointer;
+	scale: 1.05;
 }
 
 #BecomeASponsors div a img {
-	height: 18rem;
+	height: 40svh;
 	width: auto;
-	padding-right: 3rem;
 }
 
 #BecomeASponsors img {
@@ -32,17 +61,83 @@
 	width: 60%;
 }
 
+#BecomeASponsors table {
+	background-color: white;
+}
+
+#BecomeASponsors table caption {
+	background-color: red;
+	color: white;
+	text-align: start;
+	padding-left: 4svw;
+	font-size: larger;
+}
+
+#BecomeASponsors table thead {
+	background-color: black;
+	color: white;
+	padding: 10px;
+}
+
+.evenRow {
+	background-color: lightgrey;
+}
+
+.oddRow {
+	background-color: whitesmoke;
+}
+
 #Sponsor {
 	background-color: white;
+	padding-bottom: 3svh;
 }
 
 #SponsorEnd {
 	text-align: end;
 }
 
-.SponsorsTitle {
+#OurSponsors h1 {
+	position: relative;
 	text-align: left;
-	border-bottom: 2px solid black;
+	border-bottom: var(--sponsorBorder);
+	border-top: var(--sponsorBorder);
+	width: fit-content;
+	padding-top: 2svh;
+	padding-bottom: 2svh;
+}
+
+#OurSponsors #h1Exception {
+	border-top: none;
+}
+
+/* this hurt me  but we now have a border at the side*/
+#sideBorder {
+	display: flex;
+	flex-direction: row;
+	padding-top: 2svh;
+	padding-bottom: 2svh;
+	margin-top: 1svh;
+	margin-bottom: 3svh;
+	border-bottom: var(--sponsorBorder);
+	align-items: center;
+}
+
+#sideBorder h1 {
+	padding-right: 2svw;
+	margin: 0px;
+	width: fit-content;
+	border: none;
+}
+
+#sideBorder div {
+	background-color: var(--sponsorBorderColour);
+	flex: 1;
+	height: var(--sponsorBorderWidth);
+}
+
+#Sponsor .Sponsors h1 {
+	width: 100%;
+	border: none;
 }
 
 .Sponsors {
@@ -56,24 +151,69 @@
 	text-decoration: none;
 	cursor: pointer;
 	background-color: whitesmoke;
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+	transition: scale 0.3s;
+}
+
+.Sponsors a:hover {
+	cursor: pointer;
+	scale: 1.05;
 }
 
 .Sponsors a div {
 	display: flex;
 	flex-direction: row;
+	height: inherit;
+	width: inherit;
 }
 
-.Sponsors a h4 {
+.Sponsors a div div {
-	width: 30%;
+	display: flex;
+	flex-direction: column;
+	padding-left: 5svw;
+}
+
+.Sponsors a h3 {
+	display: flex;
+	width: fit-content;
+	border-bottom: var(--sponsorBorder);
 }
 
 .Sponsors a img {
-	max-height: 8rem;
+	max-height: 24svh;
-	max-width: 70%;
+	width: 24svw;
+	padding-top: 1svh;
+	padding-bottom: 1svh;
 }
 
-.Sponsors a p {
+.sponsorCenter {
-	padding: 2rem;
+	display: flex;
-	padding-top: 5px;
+	justify-content: center;
-	padding-bottom: 5px;
+}
+
+.sponsorGridContainer {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	grid-gap: 20px;
+}
+
+.sponsorGridItem {
+	background-color: aqua;
+	width: calc(100%- 20px);
+	height: 100%;
+}
+
+.sponsorGridContainer .sponsorGridItem div div {
+	flex: 1;
+	padding-left: 1svw;
+}
+
+.sponsorGridItem h3 {
+	text-align: center;
+	justify-content: center;
+	align-items: center;
+}
+
+.sponsorGridItem {
+	grid-column: span 1;
 }

src/OurSponsors/OurSponsors.js

@@ -14,6 +14,8 @@ import yaml from "js-yaml";
 const OurSponsors = () => {
 	const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
 	const [pastSponsorsDict, setPastSponsorsDict] = useState();
+	const LinktoSponsorOutreachForm =
+		"https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
 
 	useEffect(() => {
 		getCurrentSponsors();
@@ -60,12 +62,34 @@ const OurSponsors = () => {
 
 	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>
+					<h1 id="h1Exception">How sponsors help us</h1>
+					<p>
+						Schulich Off-Road expresses deep appreciation for sponsors' crucial
+						support in various team operations, from sourcing parts to
+						participating in competitions. Tailored sponsorship agreements
+						acknowledge each sponsor's unique contributions. As a student-led
+						team, every form of support, whether monetary or in goods and
+						services, is essential for success. Past sponsor assistance
+						includes:
+					</p>
+					<ul>
+						<li>Design fabrication</li>
+						<li>Material procurement</li>
+						<li>Design consultations</li>
+						<li>Software provision Travel funding for competitions</li>
+					</ul>
+					<p>
+						These partnerships signify a commitment to excellence and innovation
+						in engineering.
+					</p>
+				</div>
+				<div>
+					<h1>Become a sponsor</h1>
 					<div>
 						<a
-						href="https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link"
+							href={LinktoSponsorOutreachForm}
 							target="_blank"
 							rel="noreferrer">
 							<img
@@ -75,23 +99,156 @@ const OurSponsors = () => {
 							<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
+							Talk about how you can reach out to sponsor us. (Maybe also
-						a link to the form as well)
+							include a link to the form as well)
 						</p>
 					</div>
-				<p>
+				</div>
-					(Talk about what we can offer our sponsors for helping us briefly or
+				<div>
-					in a listing format. We can also mention how they can find more on the
+					<h1>Why Sponsor Us?</h1>
-					sponsorship package - plus provide some way they can access the
+					<ul>
-					package from here)
+						<li>
-				</p>
+							Objective: Connect sponsors with next generation of Canadian
-				<img
+							engineers
-					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1708797415/Screenshot_from_2024-02-24_10-52-24_nsn9uv.png"
+						</li>
-					alt="Our sponsorship package"
+						<li>
-				/>
+							Opportunity to work with Schulich Off-Road team and wider
+							undergraduate community at University of Calgary who are a part of
+							the Schulich Off-Road team
+						</li>
+						<li>
+							Build mutually beneficial relationships with dedicated and
+							ambitious students
+						</li>
+						<li>
+							Benefits include perks for advertising and promoting services and
+							company to team members
+						</li>
+						<li>
+							Collaboration with leading companies to ensure members learn
+							sought-after skills
+						</li>
+						<li>
+							Mitigate frictional unemployment for graduating team members
+						</li>
+						<li>
+							Networking opportunities for members with potential employers
+						</li>
+						<li>
+							Employers can build connections with new generation of engineers
+							to secure jobs and potential employees
+						</li>
+					</ul>
+					{/* the sponsorship package replicated */}
+					<a
+						href={LinktoSponsorOutreachForm}
+						target="_blank"
+						rel="noreferrer">
+						<table>
+							<caption>
+								<h3>Sponsor Packages</h3>
+							</caption>
+							<thead>
+								<tr>
+									<td>{/*blank on purpose to add spcae for a black box */}</td>
+									<td>Diamond $10,000+</td>
+									<td>Platinum $5000</td>
+									<td>Gold $1000</td>
+									<td>Silver $500</td>
+									<td>Bronze $200</td>
+								</tr>
+							</thead>
+							<tbody>
+								<tr className="evenRow">
+									<td>Skill Development</td>
+									<td>8</td>
+									<td>4</td>
+									<td>2</td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="oddRow">
+									<td>Shop Visits</td>
+									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="evenRow">
+									<td>Interviews</td>
+									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="oddRow">
+									<td>Portfolios</td>
+									<td>&#10003; (Detailed)</td>
+									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="evenRow">
+									<td>Company Into to team</td>
+									<td>&#10003;</td>
+									<td>&#10003;</td>
+									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="oddRow">
+									<td>Custom Gift</td>
+									<td>&#10003;</td>
+									<td>&#10003;</td>
+									<td>&#10003;</td>
+									<td></td>
+									<td></td>
+								</tr>
+								<tr className="evenRow">
+									<td>Branding on Apperal (single colour)</td>
+									<td>On full sleeve</td>
+									<td>On Sleeve Forearm</td>
+									<td>Medium on back</td>
+									<td>Small on back</td>
+									<td>Small on back</td>
+								</tr>
+								<tr className="oddRow">
+									<td>Logo on Vehicle</td>
+									<td>
+										36in<sup>2</sup>
+									</td>
+									<td>
+										28in<sup>2</sup>
+									</td>
+									<td>
+										20in<sup>2</sup>
+									</td>
+									<td>
+										10in<sup>2</sup>
+									</td>
+									<td></td>
+								</tr>
+								<tr className="evenRow">
+									<td>Social Media (Min.)</td>
+									<td>Once/2 Weeks</td>
+									<td>Once/Month</td>
+									<td>Once/3 Month</td>
+									<td>Once/6 Month</td>
+									<td>Once/12 Month</td>
+								</tr>
+							</tbody>
+						</table>
+					</a>
+				</div>
 			</div>
 			<div id="Sponsor">
-				<h2 className="SponsorsTitle">Current Sponsors</h2>
+				<div id="sideBorder">
+					<h1>Current Sponsors</h1>
+					<div></div>
+				</div>
 				{/* shows the current sponsors only after the data has been recieved */}
 				{currentSponsorsDict === undefined ? (
 					<p>Loading...</p>
@@ -99,14 +256,25 @@ const OurSponsors = () => {
 					<>
 						{/* gets the outmost name of the Object Name of tier*/}
 						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
+							let changetoGridStyle =
+								sponsorsTier === "Diamond Tier" ||
+								sponsorsTier === "Platinum Tier";
+							let girdContainer = changetoGridStyle
+								? ""
+								: "sponsorGridContainer";
+							let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
+
 							return (
-								<div className="Sponsors">
+								<div
+									key={sponsorsTier}
+									className="Sponsors">
 									<h3>{sponsorsTier}</h3>
+									<div className={girdContainer}>
 										{/* gets key form list of tier */}
 										{Object.keys(currentSponsorsDict[sponsorsTier]).map(
 											(sponsorsKey) => {
 												return (
-												<>
+													<div key={sponsorsKey}>
 														{/* gets name out of object and gets data of that sponsor preped */}
 														{Object.keys(
 															currentSponsorsDict[sponsorsTier][sponsorsKey]
@@ -115,52 +283,68 @@ const OurSponsors = () => {
 																currentSponsorsDict[sponsorsTier][sponsorsKey][
 																	sponsorName
 																];
+															let sponsorBronzeSilver =
+																sponsorsTier !== "Silver Tier" &&
+																sponsorsTier !== "Bronze Tier";
 															return (
 																<a
+																	key={sponsorData}
 																	href={sponsorData.Url}
 																	target="_blank"
+																	className={gridItem}
 																	rel="noreferrer">
 																	<div>
-																	<h4>{sponsorName}</h4>
 																		<img
 																			src={sponsorData.LogoUrl}
 																			alt={sponsorName + "'s Logo"}
 																		/>
-																</div>
+																		{sponsorBronzeSilver === true ? (
-																{(sponsorsTier !== "Silver Tier" ||
-																	sponsorsTier !== "Bronze Tier") && (
 																			<div>
-																		<p>{sponsorData.DescriptionAboutSponsor}</p>
+																				<h3>{sponsorName}</h3>
+																				<p>
+																					{sponsorData.DescriptionAboutSponsor}
+																				</p>
+																			</div>
+																		) : (
+																			<div className="sponsorCenter">
+																				<h3>{sponsorName}</h3>
 																			</div>
 																		)}
+																	</div>
 																</a>
 															);
 														})}
-												</>
+													</div>
 												);
 											}
 										)}
 									</div>
+								</div>
 							);
 						})}
 					</>
 				)}
 			</div>
 			<div id="Sponsor">
-				<h2
+				<div id="sideBorder">
+					<div></div>
+					<h1
 						className="SponsorsTitle"
 						id="SponsorEnd">
 						Past Sponsors
-				</h2>
+					</h1>
+				</div>
+
 				{/* shows past sponsors only when recieved, do not duplicate the sponsors from current ones */}
 				{pastSponsorsDict === undefined ? (
 					<p>Loading...</p>
 				) : (
 					<>
+						<div className="Sponsors sponsorGridContainer">
 							{/* 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) => {
@@ -170,21 +354,25 @@ const OurSponsors = () => {
 													<a
 														href={pastSponsors.Url}
 														target="_blank"
+														className="sponsorGridItem"
 														rel="noreferrer">
 														<div>
-														<h4>{pastSponsorName}</h4>
 															<img
 																src={pastSponsors.LogoUrl}
 																alt={pastSponsorName + "'s Logo"}
 															/>
+															<div className="sponsorCenter">
+																<h3>{pastSponsorName}</h3>
+															</div>
 														</div>
 													</a>
 												);
 											}
 										)}
-								</div>
+									</>
 								);
 							})}
+						</div>
 					</>
 				)}
 			</div>