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>