From 9723e480129bb27d7b636860f5f852cf570d2560 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <brock.tomlinson@ucalgary.ca>
Date: Wed, 27 Mar 2024 20:22:59 -0600
Subject: [PATCH] added sponsor: sponsor table css finished, page finished
---
src/OurSponsors/OurSponsors.css | 42 +++++
src/OurSponsors/OurSponsors.js | 316 ++++++++++++++++++--------------
2 files changed, 216 insertions(+), 142 deletions(-)
diff --git a/src/OurSponsors/OurSponsors.css b/src/OurSponsors/OurSponsors.css
index 2bba20e..d19ad6b 100644
--- a/src/OurSponsors/OurSponsors.css
+++ b/src/OurSponsors/OurSponsors.css
@@ -1,3 +1,6 @@
+:root {
+ --tableBackground: white;
+}
#OurSponsors {
display: flex;
flex-direction: column;
@@ -12,8 +15,19 @@
}
#BecomeASponsors div {
+ display: flex;
+ flex-direction: column;
+ border-bottom: 2px solid black;
+ padding-bottom: 4svh;
+ margin-left: 1svw;
+ margin-right: 1svw;
+}
+
+#BecomeASponsors div div {
display: flex;
flex-direction: row;
+ border-bottom: none;
+ padding: 0px;
}
#BecomeASponsors a {
@@ -24,6 +38,7 @@
border-radius: 5px;
margin-left: 1rem;
margin-right: 3rem;
+ width: fit-content;
}
#BecomeASponsors a:hover {
@@ -41,6 +56,32 @@
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;
}
@@ -52,6 +93,7 @@
h1 {
text-align: left;
border-bottom: 2px solid black;
+ width: fit-content;
}
.Sponsors {
diff --git a/src/OurSponsors/OurSponsors.js b/src/OurSponsors/OurSponsors.js
index b6a4557..efc0dbe 100644
--- a/src/OurSponsors/OurSponsors.js
+++ b/src/OurSponsors/OurSponsors.js
@@ -14,7 +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://google.com";
+ const LinktoSponsorOutreachForm =
+ "https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
useEffect(() => {
getCurrentSponsors();
@@ -62,154 +63,185 @@ const OurSponsors = () => {
return (
<div id="OurSponsors">
<div id="BecomeASponsors">
- <h1>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>
- <h1>Become a sponsor</h1>
<div>
+ <h1>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={LinktoSponsorOutreachForm}
+ 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>
+ </div>
+ <div>
+ <h1>Why Sponsor Us?</h1>
+ <ul>
+ <li>
+ Objective: Connect sponsors with next generation of Canadian
+ engineers
+ </li>
+ <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>
<a
href={LinktoSponsorOutreachForm}
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>
+ <table>
+ <caption>
+ <h2>Sponsor Packages</h2>
+ </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>✓</td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr className="evenRow">
+ <td>Interviews</td>
+ <td>✓</td>
+ <td></td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr className="oddRow">
+ <td>Portfolios</td>
+ <td>✓ (Detailed)</td>
+ <td>✓</td>
+ <td></td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr className="evenRow">
+ <td>Company Into to team</td>
+ <td>✓</td>
+ <td>✓</td>
+ <td>✓</td>
+ <td></td>
+ <td></td>
+ </tr>
+ <tr className="oddRow">
+ <td>Custom Gift</td>
+ <td>✓</td>
+ <td>✓</td>
+ <td>✓</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>
- <p>
- Talk about how you can reach out to sponsor us. (Maybe also include
- a link to the form as well)
- </p>
</div>
- <h1>Why Sponsor Us?</h1>
- <ul>
- <li>
- Objective: Connect sponsors with next generation of Canadian
- engineers
- </li>
- <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>
- <a
- href={LinktoSponsorOutreachForm}
- target="_blank"
- rel="noreferrer">
- <table>
- <thead>
- <h2>Sponsor Packages</h2>
- </thead>
- <tbody>
- <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>
- <tr>
- <td>Skill Development</td>
- <td>8</td>
- <td>4</td>
- <td>2</td>
- </tr>
- <tr>
- <td>Shop Visits</td>
- <td>✓</td>
- </tr>
- <tr>
- <td>Interviews</td>
- <td>✓</td>
- </tr>
- <tr>
- <td>Portfolios</td>
- <td>✓ (Detailed)</td>
- <td>✓</td>
- </tr>
- <tr>
- <td>Company Into to team</td>
- <td>✓</td>
- <td>✓</td>
- <td>✓</td>
- </tr>
- <tr>
- <td>Custom Gift</td>
- <td>✓</td>
- <td>✓</td>
- <td>✓</td>
- </tr>
- <tr>
- <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>
- <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>
- </tr>
- <tr>
- <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 id="Sponsor">
<h1>Current Sponsors</h1>