mirror of
https://github.com/UofCBaja/BajaUofCWebsite.git
synced 2025-07-10 05:07:13 -06:00
feat(newSite): coloring and placement redone again
This commit is contained in:
@ -5,7 +5,7 @@
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: #1f1f1f;
|
||||
background-color: var(--BajaBlack);
|
||||
color: white;
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@ const AboutsUs = () => {
|
||||
<li>
|
||||
<h4>Recuitment Opens</h4>
|
||||
<CountDownTimer
|
||||
dateFinished={new Date("August 29, 2025 00:00:00")}
|
||||
dateFinished={new Date("August 29, 2024 00:00:00")}
|
||||
messageDisplayBefore={""}
|
||||
messageDisplayAfter={<p>Link to google form</p>}
|
||||
/>
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
.countDownTimer #afterTime #counter {
|
||||
color: white;
|
||||
background-color: red;
|
||||
background-color: var(--BajaRed);
|
||||
}
|
||||
|
||||
.countDownTimer #counter.dangerDays {
|
||||
background-color: red;
|
||||
background-color: var(--BajaRed);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.countDownTimer #counter {
|
||||
display: flex;
|
||||
flex-flow: row nowrap !important;
|
||||
flex-flow: row wrap !important;
|
||||
padding: 0.5svh 1svw;
|
||||
text-align: center;
|
||||
background-color: whitesmoke;
|
||||
@ -24,7 +24,7 @@
|
||||
|
||||
.countDownTimer #counter div {
|
||||
display: flex;
|
||||
flex-flow: row nowrap !important;
|
||||
flex-flow: row wrap !important;
|
||||
padding: 0px;
|
||||
column-gap: 10px;
|
||||
}
|
||||
@ -55,7 +55,7 @@
|
||||
}
|
||||
|
||||
.countDownTimer #counter .countdownDanger {
|
||||
color: #ff0000;
|
||||
color: var(--BajaRed);
|
||||
}
|
||||
|
||||
.countDownTimer a {
|
||||
@ -64,7 +64,23 @@
|
||||
}
|
||||
|
||||
.countDownTimer {
|
||||
width: 525px !important;
|
||||
max-width: 525px !important;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 420px) {
|
||||
.countDownTimer #counter #MiddleCounter {
|
||||
visibility: hidden; /* keeps space in layout */
|
||||
}
|
||||
|
||||
.countDownTimer #counter #EndCounter {
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.countDownTimer #counter #EndCounter {
|
||||
visibility: hidden; /* keeps space in layout */
|
||||
}
|
||||
}
|
||||
|
||||
@ -100,12 +100,12 @@ const ShowCounter = ({ days, hours, minutes, seconds }) => {
|
||||
valueAwayFrom={hours}
|
||||
discriptor={"Hours"}
|
||||
/>
|
||||
<p>:</p>
|
||||
<p id="MiddleCounter">:</p>
|
||||
<DateTimeDisplay
|
||||
valueAwayFrom={minutes}
|
||||
discriptor={"Mins"}
|
||||
/>
|
||||
<p>:</p>
|
||||
<p id="EndCounter">:</p>
|
||||
<DateTimeDisplay
|
||||
valueAwayFrom={seconds}
|
||||
discriptor={"Seconds"}
|
||||
@ -117,7 +117,9 @@ const ShowCounter = ({ days, hours, minutes, seconds }) => {
|
||||
const DateTimeDisplay = ({ valueAwayFrom, discriptor }) => {
|
||||
return (
|
||||
<div>
|
||||
<p>{valueAwayFrom}</p>
|
||||
<p style={discriptor === "Days" ? { width: "3ch" } : undefined}>
|
||||
{valueAwayFrom}
|
||||
</p>
|
||||
<p>{discriptor}</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
justify-content: center;
|
||||
background-color: #a80029;
|
||||
background-color: var(--BajaRed);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
:root {
|
||||
/* --BajaBlack: #1f1f1f; */
|
||||
--BajaBlack: #1c1c1c;
|
||||
|
||||
/* --BajaRed: rgb(100, 0, 0); */
|
||||
/* --BajaRed: #c1011c; */
|
||||
--BajaRed: #a80029;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
@ -8,7 +17,7 @@ header {
|
||||
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #1f1f1f;
|
||||
background-color: var(--BajaBlack);
|
||||
/* position: absolute; */
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
@ -65,7 +74,7 @@ nav a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
background-color: #1f1f1f;
|
||||
background-color: var(--BajaBlack);
|
||||
color: whitesmoke;
|
||||
|
||||
font-size: larger;
|
||||
@ -79,7 +88,7 @@ nav a:first-child {
|
||||
}
|
||||
|
||||
nav a li:hover {
|
||||
color: #a80029;
|
||||
color: var(--BajaRed);
|
||||
}
|
||||
nav ul {
|
||||
display: flex;
|
||||
|
||||
@ -73,8 +73,8 @@ export default function Header() {
|
||||
<Link to={"/AboutUs"}>
|
||||
<li>ABOUT</li>
|
||||
</Link>
|
||||
<Link to={"/Vehicles"}>
|
||||
<li>OUR VEHICLES</li>
|
||||
<Link to={"/Team"}>
|
||||
<li>TEAM</li>
|
||||
</Link>
|
||||
<Link to={"/History"}>
|
||||
<li>HISTORY</li>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
flex-direction: column;
|
||||
padding: 4svh 4svw;
|
||||
row-gap: 4svh;
|
||||
background-color: black;
|
||||
background-color: var(--BajaBlack);
|
||||
color: white;
|
||||
font-size: larger;
|
||||
}
|
||||
@ -34,6 +34,8 @@
|
||||
border: 1px solid white;
|
||||
padding: 1svh 6svw;
|
||||
color: inherit;
|
||||
background-color: var(--BajaRed);
|
||||
font-size: larger;
|
||||
}
|
||||
|
||||
#History div button:hover {
|
||||
@ -56,13 +58,14 @@
|
||||
}
|
||||
|
||||
#History tr td {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
max-width: 400px;
|
||||
max-height: 400px;
|
||||
vertical-align: middle;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#History tr td img {
|
||||
aspect-ratio: 1;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 1rem;
|
||||
@ -72,42 +75,36 @@
|
||||
#History .HistoryCompInfo {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
width: inherit;
|
||||
padding: 4svh 0svw;
|
||||
|
||||
border: 1px solid white;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
:root {
|
||||
--historyPaddingFromMiddle: 4svw;
|
||||
#History td > div {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* #History table tr td:first-child {
|
||||
padding-right: var(--historyPaddingFromMiddle);
|
||||
} */
|
||||
|
||||
/* #History table tr td:nth-child(3) {
|
||||
padding-left: var(--historyPaddingFromMiddle);
|
||||
} */
|
||||
|
||||
#History .HistoryCompInfo h2,
|
||||
#History .HistoryCompInfo h4 {
|
||||
margin: 2svh 0svw;
|
||||
width: fit-content;
|
||||
margin: 2svh auto;
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 1svw;
|
||||
row-gap: 1svh;
|
||||
padding: 0svh 2svw;
|
||||
margin: 0px;
|
||||
/* width: 90%; */
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo ul li {
|
||||
padding: 0.5svh 0svw;
|
||||
flex: 50%;
|
||||
flex: 40%;
|
||||
}
|
||||
|
||||
#History .HistoryCompInfo ul li:nth-child(odd) {
|
||||
@ -142,6 +139,7 @@
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
/* padding: 0svh 15svw; */
|
||||
/* width: 70svw; */
|
||||
padding-top: 2svh;
|
||||
background-color: #1f1f1f;
|
||||
background-color: var(--BajaBlack);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -37,7 +37,8 @@
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
margin-top: 2svh;
|
||||
background-color: #a80029;
|
||||
background-color: var(--BajaRed);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.HomePageLayout a:hover {
|
||||
@ -69,35 +70,37 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
border-radius: 15px;
|
||||
border: solid 2px white;
|
||||
align-items: center;
|
||||
/* border-radius: 15px; */
|
||||
/* border: solid 2px white; */
|
||||
|
||||
padding: 30px;
|
||||
max-width: 80svw;
|
||||
padding: 8svh 0px;
|
||||
margin: 0px;
|
||||
width: 100%;
|
||||
color: var(--BajaBlack);
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#HomeSponsors h2 {
|
||||
margin-top: 0px;
|
||||
border-bottom: none;
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
#HomeSponsors div {
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
#HomeSponsors div div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
|
||||
width: inherit;
|
||||
max-width: 100%;
|
||||
|
||||
justify-content: center;
|
||||
padding: 0px;
|
||||
row-gap: 2svh;
|
||||
padding: 1svh 0svw;
|
||||
row-gap: 4svh;
|
||||
column-gap: 6svw;
|
||||
}
|
||||
|
||||
#HomeSponsors div div div {
|
||||
#HomeSponsors div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 0px;
|
||||
@ -105,7 +108,7 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#HomeSponsors div div div img {
|
||||
#HomeSponsors div div img {
|
||||
border-radius: 1rem;
|
||||
min-height: 0px;
|
||||
align-self: center;
|
||||
@ -126,6 +129,7 @@
|
||||
|
||||
justify-content: center;
|
||||
padding-top: 2svh;
|
||||
color: var(--BajaBlack);
|
||||
}
|
||||
|
||||
#HomeSponsorLinks a {
|
||||
@ -134,6 +138,7 @@
|
||||
margin: 0px 2svw;
|
||||
text-wrap: nowrap;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#HomeBottomGallery {
|
||||
|
||||
@ -69,30 +69,28 @@ export default function Home() {
|
||||
/>
|
||||
</div>
|
||||
<div id="HomeSponsors">
|
||||
<h2>Sponsor Section</h2>
|
||||
<h2>Current Sponsors</h2>
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<img
|
||||
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU"
|
||||
alt="Schulich logo"
|
||||
/>
|
||||
<h3>Schulich School of Engineering</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="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"
|
||||
alt=""
|
||||
/>
|
||||
<h3>Morphgenix</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://www.3ds.com/assets/3ds-navigation/3DS_corporate-logo_solidworks.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h3>Solidworks</h3>
|
||||
</div>
|
||||
<img
|
||||
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQj9L3ZGK6WtOmJbzxmCzRxwLXYKGC5SDcAKHb0ScfbUmbtG0IujQt6eQDaI_Pm9g4DZvc&usqp=CAU"
|
||||
alt="Schulich logo"
|
||||
/>
|
||||
<h3>Schulich School of Engineering</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="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"
|
||||
alt=""
|
||||
/>
|
||||
<h3>Morphgenix</h3>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://www.3ds.com/assets/3ds-navigation/3DS_corporate-logo_solidworks.svg"
|
||||
alt=""
|
||||
/>
|
||||
<h3>Solidworks</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div id="HomeSponsorLinks">
|
||||
|
||||
@ -2,7 +2,7 @@ Diamond Tier:
|
||||
- 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.
|
||||
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.
|
||||
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
|
||||
|
||||
@ -11,84 +11,61 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background-color: gray;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
/* background-color: gray; */
|
||||
}
|
||||
|
||||
#BecomeASponsors {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#BecomeASponsors div {
|
||||
#SponsorsAbout {
|
||||
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: 40svh;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#BecomeASponsors img {
|
||||
height: auto;
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
#BecomeASponsors table {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#BecomeASponsors table caption {
|
||||
background-color: red;
|
||||
align-items: center;
|
||||
padding: 4svh 0svw;
|
||||
background-color: var(--BajaBlack);
|
||||
color: white;
|
||||
text-align: start;
|
||||
padding-left: 4svw;
|
||||
}
|
||||
|
||||
#SponsorsAbout h2 {
|
||||
margin: 0px;
|
||||
padding: 2svh 0svw;
|
||||
padding-top: 4svh;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
#SponsorsAbout p {
|
||||
font-size: larger;
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
max-width: 120ch;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#BecomeASponsors table thead {
|
||||
background-color: black;
|
||||
#SponsorsAbout ul {
|
||||
list-style-type: none;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
column-gap: 4svw;
|
||||
padding: 0svh 0svw;
|
||||
padding-top: 4svh;
|
||||
}
|
||||
|
||||
#SponsorsAbout a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
padding: 10px;
|
||||
background-color: var(--BajaRed);
|
||||
border-radius: 15px;
|
||||
padding: 2svh 2svw;
|
||||
}
|
||||
|
||||
.evenRow {
|
||||
background-color: lightgrey;
|
||||
#SponsorsAbout a:hover {
|
||||
background-color: rgba(128, 128, 128, 0.4);
|
||||
color: var(--BajaBlack);
|
||||
}
|
||||
|
||||
.oddRow {
|
||||
background-color: whitesmoke;
|
||||
#Sponsor .Sponsors h3 {
|
||||
font-size: xx-large;
|
||||
margin: 2svh 1svw;
|
||||
}
|
||||
|
||||
#Sponsor {
|
||||
background-color: white;
|
||||
padding-bottom: 3svh;
|
||||
}
|
||||
|
||||
@ -110,38 +87,17 @@
|
||||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: inherit;
|
||||
align-items: center;
|
||||
width: 70svw;
|
||||
}
|
||||
|
||||
.Sponsors a {
|
||||
@ -153,6 +109,7 @@
|
||||
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;
|
||||
width: inherit;
|
||||
}
|
||||
|
||||
.Sponsors a:hover {
|
||||
@ -164,13 +121,14 @@
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.Sponsors a div div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 5svw;
|
||||
max-width: 60ch;
|
||||
}
|
||||
|
||||
.Sponsors a h3 {
|
||||
|
||||
@ -1,379 +0,0 @@
|
||||
import "./OurSponsors.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import currentSponsorData from "../MockDB/sponsorship.yml";
|
||||
import pastSponsorData from "../MockDB/pastSponsors.yml";
|
||||
import yaml from "js-yaml";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires onthing
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description Our Sponsors Page
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo finish layout and add content
|
||||
*/
|
||||
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();
|
||||
getPastSponsors();
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* @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(currentSponsorData);
|
||||
const rawText = await res.text();
|
||||
const yamlDict = await yaml.load(rawText);
|
||||
setCurrentSponsorsDict(yamlDict);
|
||||
} catch (error) {
|
||||
//error checking
|
||||
console.log(error);
|
||||
console.error("Error recieving data from server:");
|
||||
}
|
||||
};
|
||||
/**
|
||||
* @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 getPastSponsors = async () => {
|
||||
try {
|
||||
const res = await fetch(pastSponsorData);
|
||||
const rawText = await res.text();
|
||||
const yamlDict = await yaml.load(rawText);
|
||||
setPastSponsorsDict(yamlDict);
|
||||
} catch (error) {
|
||||
// error checking
|
||||
console.error("Error recieving data from server:");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="OurSponsors">
|
||||
<div id="BecomeASponsors">
|
||||
<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={LinktoSponsorOutreachForm}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<img
|
||||
src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1711588091/qr-code_z5kmef.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>
|
||||
{/* 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>✓</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>
|
||||
</div>
|
||||
</div>
|
||||
<div id="Sponsor">
|
||||
<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>
|
||||
) : (
|
||||
<>
|
||||
{/* 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 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]
|
||||
).map((sponsorName) => {
|
||||
let sponsorData =
|
||||
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>
|
||||
<img
|
||||
src={sponsorData.LogoUrl}
|
||||
alt={sponsorName + "'s Logo"}
|
||||
/>
|
||||
{sponsorBronzeSilver === true ? (
|
||||
<div>
|
||||
<h3>{sponsorName}</h3>
|
||||
<p>
|
||||
{sponsorData.DescriptionAboutSponsor}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sponsorCenter">
|
||||
<h3>{sponsorName}</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div id="Sponsor">
|
||||
<div id="sideBorder">
|
||||
<div></div>
|
||||
<h1 className="SponsorsTitle" id="SponsorEnd">
|
||||
Past Sponsors
|
||||
</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 (
|
||||
<>
|
||||
{/* gets name of sponsor then uses it to get data of past sponsor */}
|
||||
{Object.keys(pastSponsorsDict[pastSponsorKey]).map(
|
||||
(pastSponsorName) => {
|
||||
let pastSponsors =
|
||||
pastSponsorsDict[pastSponsorKey][pastSponsorName];
|
||||
return (
|
||||
<a
|
||||
href={pastSponsors.Url}
|
||||
target="_blank"
|
||||
className="sponsorGridItem"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<div>
|
||||
<img
|
||||
src={pastSponsors.LogoUrl}
|
||||
alt={pastSponsorName + "'s Logo"}
|
||||
/>
|
||||
<div className="sponsorCenter">
|
||||
<h3>{pastSponsorName}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurSponsors;
|
||||
149
src/OurSponsors/OurSponsors.jsx
Normal file
149
src/OurSponsors/OurSponsors.jsx
Normal file
@ -0,0 +1,149 @@
|
||||
import "./OurSponsors.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import currentSponsorData from "../MockDB/sponsorship.yml";
|
||||
import yaml from "js-yaml";
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
|
||||
/**
|
||||
* @param {null} null - requires onthing
|
||||
* @returns {JSX.Element} JSX - HTML tags and JS functionality
|
||||
* @description Our Sponsors Page
|
||||
* @author Brock <darkicewolf50@gmail.com>
|
||||
* @todo finish layout and add content
|
||||
*/
|
||||
const OurSponsors = () => {
|
||||
const [currentSponsorsDict, setCurrentSponsorsDict] = useState(); //variable states for the dictionary of sponsors
|
||||
// eslint-disable-next-line
|
||||
// const LinktoSponsorOutreachForm =
|
||||
// "https://docs.google.com/forms/d/e/1FAIpQLSd8eR1es9QJWjlQfGtpJaf8Jwv63d6Ei2e4FSpoBdkB6OiT4g/viewform?usp=sf_link";
|
||||
|
||||
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(currentSponsorData);
|
||||
const rawText = await res.text();
|
||||
const yamlDict = await yaml.load(rawText);
|
||||
setCurrentSponsorsDict(yamlDict);
|
||||
} catch (error) {
|
||||
//error checking
|
||||
console.log(error);
|
||||
console.error("Error recieving data from server:");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div id="OurSponsors">
|
||||
<UpdateBanner
|
||||
updatedTitleText="Sponsors"
|
||||
updatedSubtitleText=""
|
||||
updatedImgUrl="https://picsum.photos/200"
|
||||
/>
|
||||
<div id="SponsorsAbout">
|
||||
<h2>Our partners are the foundation of our success.</h2>
|
||||
<p>
|
||||
By supporting us, you're helping shape the next generation of
|
||||
engineers. Our club members develop real-world skills, problem-solving
|
||||
abilities, and teamwork. And of course, with your help, we’re one step
|
||||
closer to victory.
|
||||
</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="">Learn More</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="">Support Us</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="Sponsor">
|
||||
{/* shows the current sponsors only after the data has been recieved */}
|
||||
{currentSponsorsDict === undefined ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
<>
|
||||
{/* 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
|
||||
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]
|
||||
).map((sponsorName) => {
|
||||
let sponsorData =
|
||||
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>
|
||||
<img
|
||||
src={sponsorData.LogoUrl}
|
||||
alt={sponsorName + "'s Logo"}
|
||||
/>
|
||||
{sponsorBronzeSilver === true ? (
|
||||
<div>
|
||||
<h3>{sponsorName}</h3>
|
||||
<p>
|
||||
{sponsorData.DescriptionAboutSponsor}
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="sponsorCenter">
|
||||
<h3>{sponsorName}</h3>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OurSponsors;
|
||||
@ -0,0 +1,85 @@
|
||||
#Team {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 4svh 0svw;
|
||||
padding-bottom: 16svh;
|
||||
background-color: var(--BajaBlack);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Team div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 10svh;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#Team div div {
|
||||
flex-flow: row wrap;
|
||||
column-gap: 2svw;
|
||||
|
||||
/* padding: 0svh 2svw; */
|
||||
color: inherit;
|
||||
justify-content: center;
|
||||
padding: 0svh 2svw;
|
||||
}
|
||||
|
||||
#Team div div div {
|
||||
flex-direction: column;
|
||||
max-width: 40ch;
|
||||
row-gap: 0px;
|
||||
color: inherit;
|
||||
padding: 0px 4svw;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#Team img {
|
||||
display: flex;
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
border-radius: 1rem;
|
||||
}
|
||||
|
||||
#Team h2 {
|
||||
font-size: 80px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#Team h3 {
|
||||
margin: 0px;
|
||||
padding: 2svh 0svw;
|
||||
color: inherit;
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#Team div div:nth-child(2) {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
#Team p {
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
font-size: 22px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#Team div div div {
|
||||
max-width: inherit;
|
||||
}
|
||||
|
||||
#Team div div:nth-child(even) {
|
||||
flex-wrap: wrap-reverse;
|
||||
}
|
||||
|
||||
#Team img {
|
||||
width: 100svw;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#Team h3 {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,63 +2,146 @@ import "./Team.css";
|
||||
import UpdateBanner from "../Header/UpdateBanner";
|
||||
|
||||
export default function Team() {
|
||||
let listofLeads = [
|
||||
{
|
||||
urlPhotoLink:
|
||||
"https://static.wixstatic.com/media/5824fc_1c487c2b3eac4ef6ac53a6d75b6867e1~mv2.jpg/v1/fill/w_420,h_497,fp_0.51_0.47,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Baja-14_edited.jpg",
|
||||
name: "Joshua Gall",
|
||||
descriptionOfLead:
|
||||
"I am in my final of mechanical engineering. This is my fifth and final year on the team!",
|
||||
subteam: "Team Captain",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<div id="Team">
|
||||
<UpdateBanner
|
||||
updatedTitleText="The Team"
|
||||
updatedSubtitleText=""
|
||||
updatedImgUrl="https://picsum.photos/200"
|
||||
/>
|
||||
<div id="team">
|
||||
<h2>SUBTEAMS</h2>
|
||||
<div>
|
||||
<div>
|
||||
<h5>Interested in joining?</h5>
|
||||
<p>blurb about how you can develop your skills yada yada</p>
|
||||
<a href="mailto:uofcbaja@gamil.com">Contact Us</a>
|
||||
<div>
|
||||
<h3>Suspension</h3>
|
||||
<p>
|
||||
Our subteam is responsible for the car's handling and terrain
|
||||
performance. We assemble components like the arms, shocks,
|
||||
steering knuckles, and rear bearing carriers. We also perform
|
||||
simulations, calculations, and welding.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="sus related"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h2>Meet the Team</h2>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="chas related"
|
||||
/>
|
||||
<div>
|
||||
<div>
|
||||
<h4>Team Leads</h4>
|
||||
<p>
|
||||
These are our team leads for the 2024 season. Team leads put in
|
||||
a lot of extra hours coordinating, mentoring, and helping their
|
||||
junior subteam members learn new design and manufacturing
|
||||
methods.
|
||||
</p>
|
||||
</div>
|
||||
<div></div>
|
||||
<h3>Chassis</h3>
|
||||
<p>
|
||||
Our subteam designs and manufactures the skeleton of the car,
|
||||
incorporating all subsystems and ensuring driver protection. We
|
||||
utilize manufacturing techniques such as welding, tube coping and
|
||||
tube bending.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Ergonomics</h3>
|
||||
<p>
|
||||
Our subteam works to ensure driver comfort, integrating human and
|
||||
mechanical factors. We work to increase the number of eligible
|
||||
drivers within the car and decrease driver fatigue by optimizing
|
||||
the seat, head rest, pedals, and pedal foot resets.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="ergo related"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="chas related"
|
||||
/>
|
||||
<div>
|
||||
<h3>Steering</h3>
|
||||
<p>
|
||||
Our subteam designs the steering behaviors of the car, including
|
||||
turning radius, pinion and rack ratio, and implementing Ackerman
|
||||
geometry. We use FEA analysis to professional CNC machining to
|
||||
optimize driving dynamics.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Powertrain</h3>
|
||||
<p>
|
||||
Our subteam transfers power to the rear wheels and driveshaft
|
||||
using gearbox, bevel gearbox, CVT, propshaft, rear axles, rear
|
||||
brakes, and rear hubs.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="sus related"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="chas related"
|
||||
/>
|
||||
<div>
|
||||
<h3>Final Drive</h3>
|
||||
<p>
|
||||
Our subteam designs, tests and manufactures the 4WD system,
|
||||
including the differential, axles, hubs and brakes.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Electrical</h3>
|
||||
<p>
|
||||
Our subteam does the testing, wiring sensors and doing data
|
||||
collection and analysis, as well as implementing the wiring and
|
||||
electrical system in the vehicle.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="sus related"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="chas related"
|
||||
/>
|
||||
<div>
|
||||
<h3>Software</h3>
|
||||
<p>
|
||||
We design and built this site, handle simulation and gather data
|
||||
through the onboard data collection system and run our in club
|
||||
storage system.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<h3>Business</h3>
|
||||
<p>
|
||||
Our subteam develops sponsorship relationships, creates content to
|
||||
post on social media, develop brand strategies for marketing
|
||||
campaigns, arrange travel bookings, handles payments, and manages
|
||||
team merch.
|
||||
</p>
|
||||
</div>
|
||||
<img
|
||||
src="https://picsum.photos/200"
|
||||
alt="sus related"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function TeamIndividual(
|
||||
urlPhotoLink = "https://picsum.photos/200/200",
|
||||
name = "Bob",
|
||||
descriptionOfLead = "",
|
||||
subteam = "Temp Team"
|
||||
) {
|
||||
return (
|
||||
<div className="teamInd">
|
||||
<img
|
||||
src={url_photo_link}
|
||||
alt={name + "'s headshot"}
|
||||
/>
|
||||
<h6>{subteam}</h6>
|
||||
<p>{descriptionofLead}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -14,6 +14,7 @@ import MockPage from "./MockDB/MockPage";
|
||||
import Home from "./Home/Home";
|
||||
import History from "./History/History";
|
||||
import Contact from "./Contact/Contact";
|
||||
import Team from "./Teams/Team";
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById("root"));
|
||||
root.render(
|
||||
@ -52,6 +53,9 @@ root.render(
|
||||
<Route
|
||||
path="/Contact"
|
||||
element={<Contact />}></Route>
|
||||
<Route
|
||||
path="/Team"
|
||||
element={<Team />}></Route>
|
||||
</Route>
|
||||
</Routes>
|
||||
</BrowserRouter>
|
||||
|
||||
Reference in New Issue
Block a user