fea(newSite): removed old sponsor, centered sponsors, contact page now has a google maps, more mobile prep finished

This commit is contained in:
2025-07-21 16:05:39 -06:00
parent 9e93e05cd2
commit a3cd8fa9ab
14 changed files with 227 additions and 207 deletions

View File

@ -66,7 +66,7 @@
flex-direction: column;
justify-content: flex-start;
padding: 0svh 1svw;
max-width: 700px;
max-width: 800px;
}
#about-competitions {

View File

@ -57,14 +57,12 @@ const AboutsUs = () => {
Engineers (SAE) every year.
</p>
<p>
We're dedicated to giving members hands-on experience working on
the car, which allows them to both learn new skills and
Our members are given opportunities to gain hands-on experience
working on the car, which allows them to both learn new skills and
techniques, such as using Solidworks, Ansys, machining, and
welding, as well as utilizing knowledge learned from classrooms.
This is done with practical projects, allowing students to build
skills and knowledge that employers are looking for. We strive to
bridge the gap between education and application, making learning
effective and memorable.
This is done with practical projects, allowing members to build
skills and knowledge that employers are looking for.
</p>
</div>
@ -83,13 +81,12 @@ const AboutsUs = () => {
<p>
Every year, we take our car to the United States to compete
against other teams from all across the globe. Teams from
universities design, build, and race these all-terrain vehicles
that are capable of going through a series of rough courses, as
well as discuss their findings, such as cost reports and design
choices, all in a series of dynamic and static events. We also get
the chance to connect with engineering students from around the
world, trading advice and making new friends, and network with
sponsors to explore future job opportunities.
universities design, build, and race these vehicles capable of
going through a series of rough courses. In addition, teams
discuss their findings, such as cost reports and design choices.
All of this is done in a series of dynamic and static events. On
top of this, we also get the chance to connect with students and
sponsors from all over the world.
</p>
</div>
</div>
@ -100,106 +97,23 @@ const AboutsUs = () => {
Static events are where the whole team steps away from building
the car and takes a look at the professional and analytical aspect
of the team. The business presentation, cost event, and technical
inspection are all events that are equally important as the actual
car, as this is where we show real-world understanding of
engineering, manufacturing, and business decisions. It's not only
about making the car, it's also about demonstrating a clear
understanding behind design rationale, cost efficiency, and
marketability within a competitive industry.
inspection are all events where we show real-world understanding
of engineering, manufacturing, and business decisions. This is
done through presentations and tests before the race.
</p>
{/* <ol>
<li>
<h3>SALES PRESENTATION</h3>
<h3>Business Team</h3>
<p>
In collaboration with the rest of the team, develops a concept
proposal and presents it to a panel of industry judges to gain
support, such as funding.
</p>
</li>
<li>
<h3>COST EVENT</h3>
<h3>Mechanical and Electrical Teams</h3>
<p>
- bruh idfk DESIGN - The team presents the design, research,
and testing of the vehicle to a panel of judges.
</p>
</li>
<li>
<h3>TECHNICAL INSPECTIONS</h3>
<h3>Whole Team</h3>
<p>
(maybe take off) - Judges inspect every aspect of the car in
order to make sure it complies with competition rules and
ensure safety.
</p>
<p>
(maybe sperate? ie Frame Tech, Engine Tech, General Tech,
etc.)
</p>
</li>
</ol> */}
</div>
<div>
<h2>Dynamic Events</h2>
<p>
Dynamic events are where the car is actually put to the test, with
different events each made to test a certain aspect of the car.
Acceleration, sled pull, hill climb and maneuverability are all
events that show how our vehicle does against other teams. After
all these events, the finale comes in the form of the endurance
event, a four-hour race filled with jumps, pits, and other
obstacles, and teams compete to see how many laps the cars can
make. It combines all the factors from previous events, on top of
the reliability of our car.
Dynamic events put the car to the test, each one targeting a
specific aspect of its capability. Acceleration, sled pull, hill
climb and maneuverability are all events that compare our
performance against other teams. After that, we compete in the
endurance event, a four-hour race filled with many obstacles to
see how many laps each car can complete. This combines all the
factors from previous events, on top of the reliability of our
car.
</p>
{/* <ul>
<li>
<h3>BRAKE INSPECTION</h3>
<p>The cars is tested to see if all four wheels stop</p>
</li>
<li>
<h3>ACCELERATION</h3>
<p>The car is tested for speed by uhh i forgot</p>
</li>
<li>
<h3>SLED PULL</h3>
<p>The car's torque is tested by pulling variable load</p>
</li>
<li>
<h3>HILL CLIMB</h3>
<p>
The car is tested to see how high the car can climb up a
variable slope
</p>
</li>
<li>
<h3>MANEUVERABILITY</h3>
<p>
Obstacle course, where the fastest and most accurate vehicles
are awarded more points
</p>
</li>
<li>
<h3>ROCK CRAWL</h3>
<p>
This one is self explanitory, drive over boulders and large
logs
</p>
</li>
<li>
<h3>ENDURANCE</h3>
<p>
All the cars in the competition race for four hours, seeing
how many laps each car can handle. This event is worth the
most points and is the most exciting.
</p>
<p>
Fun Fact: This is the only wheel to wheel event that SAE
hosts.
</p>
</li>
</ul> */}
</div>
</div>

View File

@ -16,46 +16,53 @@
text-wrap: wrap;
}
#Contact > div:nth-child(1) {
#Contact > div:nth-child(2) {
display: flex;
flex-direction: row;
flex-flow: row wrap;
align-items: flex-start;
row-gap: 2svh;
}
column-gap: 8svw;
#Contact > div:nth-child(1) {
flex-direction: row;
column-gap: 2svw;
align-items: center;
justify-content: center;
background: var(--BajaBlack);
color: white;
padding: 2svh 0svw;
}
#Contact div:nth-child(1) div:first-child {
flex-direction: row;
#Contact div:nth-child(2) div:first-child {
flex-flow: row wrap;
margin-left: 4svw;
}
#Contact div:nth-child(1) div:last-child {
#Contact div:nth-child(2) div:last-child {
flex-direction: column;
margin: 0px;
margin-left: auto;
margin-right: 16svw;
/* margin-left: auto;
margin-right: 16svw; */
font-size: 30px;
}
#Contact div:nth-child(1) div:last-child h1 {
#Contact div:nth-child(2) div:last-child h1 {
margin: 0px;
font-size: 40px;
width: inherit;
}
#Contact div:nth-child(1) img {
#Contact div:nth-child(2) img {
width: 300px;
height: 600px;
}
#Contact div:nth-child(2) iframe {
margin: 0px;
border: none;
border-radius: 1rem;
width: inherit;
height: 300px;
}
@media only screen and (max-width: 1025px) {
#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(1) {
display: none;
@ -74,4 +81,8 @@
#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(3) {
display: none;
}
/* #Contact div:nth-child(2) iframe {
width: inherit;
} */
}

View File

@ -17,8 +17,10 @@ export default function Contact() {
updatedSubtitleText=""
updatedImgUrl="https://picsum.photos/200"
/>
<ContactUs />
<div>
<div>
{/* <div>
<img
src="https://static.wixstatic.com/media/5824fc_7b1be3e69c074f669945ecdbd23ce4ce~mv2.jpg/v1/fill/w_482,h_1068,fp_0.38_0.50,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1822_edited.jpg"
alt="Team members bending a tube"
@ -31,7 +33,16 @@ export default function Contact() {
src="https://static.wixstatic.com/media/5824fc_065658fda1d94a7b8b620a7ce43a503d~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/_MG_1830_edited.jpg"
alt="Team member welding"
/>
</div>
</div> */}
<iframe
src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d607.187504916335!2d-114.13152976941713!3d51.080958175926455!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sca!4v1753133943192!5m2!1sen!2sca"
title="UCalgary Baja Shop"
// width="600"
// height="450"
// style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<div>
<h1>Hours of Operation</h1>
<a href="mailto:uofcbaja@gmail.com">
@ -44,7 +55,6 @@ export default function Contact() {
</ul>
</div>
</div>
<ContactUs />
</div>
);
}

View File

@ -39,7 +39,7 @@
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.5);
border-width: 2px;
padding: 1svh 0svw;
padding: 1svh 1ch;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;
@ -50,7 +50,7 @@
border-radius: var(--card-border-radius);
border-color: rgba(245, 245, 245, 0.4);
border-width: 2px;
padding: 1svh 0svw;
padding: 1svh 1ch;
margin: 1svh 0.5svw;
color: inherit;
align-items: start;

View File

@ -18,9 +18,10 @@
justify-content: center;
column-gap: 2svw;
}
#ender p {
/* #ender p {
padding-left: 2%;
}
} */
#ender .hidden {
display: flex;

View File

@ -14,11 +14,6 @@ export default function Ender() {
<footer id="ender">
<div>
<p>&#169; {date.getFullYear()} UCalgary Baja </p>
<p
onClick={() => window.open("https://www.morphgenix.com/", "_blank")}
id="pointerCursor">
Partnered with Morphgenix
</p>
</div>
<div>
<a href="https://www.linkedin.com/company/schulich-off-road/">

View File

@ -81,6 +81,13 @@
}
}
/* @media only screen and (max-width: 500px) {
#History tr td img {
width: 1svw;
height: inherit;
}
} */
#History .HistoryCompInfo {
display: block;
text-align: center;
@ -128,7 +135,9 @@
position: relative;
width: 10px;
text-align: center;
padding: 0px;
padding: 0svh 2svw;
/* min-width: 40px; */
max-height: none;
}
#History .symbol::before {
@ -172,7 +181,8 @@
position: relative;
background-color: black;
z-index: 2; /* above line */
margin: 0svh 0svw;
width: fit-content;
margin: 0svh auto;
margin-bottom: 4svh;
}

View File

@ -64,10 +64,10 @@ export default function History() {
/>
<div>
<p>
The history of our cars are below. They include overall competition
results (as well as old competition stats if u wanna include that).
Learn more about what we do at competition here.
Here's a look at our past vehicles and the competition results they
achieved.
</p>
<p>Each result showcases the dedication and growth of our team.</p>
<Link to={"/AboutUs"}>
<button>Learn More</button>
</Link>
@ -80,13 +80,14 @@ export default function History() {
</colgroup> */}
<tbody>
<tr>
<td></td>
{/* <td></td> */}
<td
className="symbol"
id="HistoryJoin">
id="HistoryJoin"
colSpan={3}>
<div>Where You Join!</div>
</td>
<td></td>
{/* <td></td> */}
</tr>
{historyTimeLineInfo.map((yearInfo, index) => {
return (

View File

@ -13,17 +13,28 @@
.HomePageLayout div {
display: flex;
column-gap: 4svw;
flex-flow: row wrap;
justify-content: center;
column-gap: 2svw;
row-gap: 2svh;
padding: 2svh 2svw;
}
.HomePageLayout div div {
flex-direction: column;
justify-content: flex-start;
padding: 0svh 1svw;
max-width: 800px;
row-gap: 0svh;
}
.HomePageLayout div img {
border-radius: 1rem;
/* height: clamp(200px, 100%, 55svh); */
/* height: 100%; */
/* max-width: 40%; */
height: 350px;
width: 350px;
aspect-ratio: 1;
height: 400px;
width: 400px;
/* margin-top: 4svh; */
align-self: center;
}
@ -53,8 +64,11 @@
}
.HomePageLayout p {
padding: 0px;
margin: 1svh 0svw;
/* padding: 0px;
margin: 1svh 0svw; */
min-width: none;
padding: 0svh 0svw;
margin: 1.5svh 0svw;
font-size: larger;
}
@ -66,6 +80,14 @@
padding: 0px 1svw;
}
@media only screen and (max-width: 800px) {
.HomePageLayout img {
width: 300px;
border-radius: 1rem;
}
}
#HomeSponsors {
display: flex;
flex-direction: column;

View File

@ -1,4 +1,3 @@
import { Link } from "react-router-dom";
import "./Home.css";
import UpdateBanner from "../Header/UpdateBanner";
@ -27,19 +26,17 @@ export default function Home() {
<h2>What We Do</h2>
<p>
UCalgary Baja is a student organization which designs, builds, and
racing an off-road vehicle in the Baja SAE competition organized
by the Society of Automotive Engineers (SAE) every year. Schulich
Off-Road's cars are tough, dependable, competitive, and extremely
fun to drive.
races an off-road vehicle in the Baja SAE competition organized by
the Society of Automotive Engineers (SAE) every year.
</p>
<p>
In UCalgary Baja, we gain practical experience in design and
manufacturing by constructing various car components. We learn to
balance cost, manufacturing limitations, and performance to
develop optimal parts, budgets, and processes. This involves using
CAD technology like SolidWorks and FEA simulations.
manufacturing by constructing various car components. Our work
combines mechanical design, project management, and hands-on
manufacturing experience. This involves using CAD technology like
SolidWorks and FEA simulations.
</p>
<Link to={"AboutUs"}>Learn More</Link>
<a href={"/AboutUs"}>Learn More</a>
</div>
</div>
<div>
@ -47,20 +44,18 @@ export default function Home() {
<h2>Who We Are</h2>
<p>
We are a team of engineering and business students who strive to
expand our horizons in our respective fields by getting real
world, hands on experience. Our members achieve this by being a
part of one of our 9 sub-teams: Suspension, Chassis, Ergonomics,
Steering, Powertrain, Final Drive, Electrical, Software, and
Business.
expand our horizons by getting real world, hands-on experience.
Our members achieve this by being a part of one of our 10
sub-teams: Suspension, Chassis, Ergonomics, Steering, Powertrain,
Final Drive, Telemetry, Data Acquisition, Software, and Business.
</p>
<p>
Each subteam handles a specific component, collaborating,
researching, and troubleshooting throughout the design process.
After building the vehicle, we attend competitions in the United
States, where our hard work is put to the test against the other
teams from all across the world.
Each subteam handles a specific component, working with other
members through the design process. After building the vehicle, we
attend competitions in the United States, where our hard work is
put to the test against the teams from all across the world.
</p>
<Link to={"/"}>Learn More</Link>
<a href={"/"}>Learn More</a>
{/* Replace with Join later*/}
</div>
<img
@ -94,8 +89,8 @@ export default function Home() {
</div>
</div>
<div id="HomeSponsorLinks">
<Link to={"/OurSponsors"}>See All</Link>
<Link to={"/OurSponsors"}>Support Us</Link>
<a href={"/OurSponsors"}>See All</a>
<a href={"/OurSponsors"}>Support Us</a>
</div>
</div>
<div>
@ -106,14 +101,13 @@ export default function Home() {
<div>
<h2>Sponsor Us</h2>
<p>
We appreciate all the help we get from sponsors because it helps
fund our Baja team with essential parts, materials, manufacturing
support, and ability to go to competitions. Their contributions
make it possible for us to design, build, and compete at a high
level. From donated components to financial backing, our sponsors
are a key part of what drives our team forward.
We appreciate all the help we get from sponsors, as it helps fund
our Baja team with essential parts, materials, manufacturing
support, and ability to go to competitions. From donated
components to financial backing, our sponsors are a key part of
what drives our team forward.
</p>
<Link to={"/OurSponsors"}>Learn More</Link>
<a href={"/OurSponsors"}>Learn More</a>
</div>
</div>
<div id="HomeBottomGallery">

View File

@ -53,6 +53,7 @@
background-color: var(--BajaRed);
border-radius: 15px;
padding: 2svh 2svw;
font-size: large;
}
#SponsorsAbout a:hover {
@ -105,7 +106,7 @@
display: flex;
flex-direction: column;
background-color: inherit;
/* align-items: center; */
align-items: center;
/* width: 70svw; */
}
@ -115,6 +116,7 @@
padding: 2svh 2svw;
column-gap: 2svw;
row-gap: 2svh;
justify-content: center;
}
.Sponsors a {
@ -187,3 +189,27 @@
min-width: 1px;
}
}
#SponsorAfter {
display: flex;
flex-direction: column;
align-items: center;
padding: 4svh 0svw;
background-color: var(--BajaBlack);
color: white;
text-align: center;
}
#SponsorAfter p {
max-width: 120ch;
font-size: large;
/* margin: 0px; */
}
#SponsorAfter h2 {
max-width: 120ch;
margin: 0px;
padding: 2svh 0svw;
padding-top: 4svh;
font-size: 30px;
}

View File

@ -53,7 +53,7 @@ const OurSponsors = () => {
<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, were one step
abilities, and teamwork. And of course, with your help, we're one step
closer to victory.
</p>
<ul>
@ -126,6 +126,29 @@ const OurSponsors = () => {
</>
)}
</div>
<div id="SponsorAfter">
<h2>Sponsorship Information</h2>
<p>
Our sponsors are the backbone of UCalgary Baja's success, providing
support that allows our members to gain hands-on engineering
experience as part of their education. Our team is entirely
student-run, allowing members to develop skills beyond engineering,
including design, fundraising, sourcing materials, team management,
and project coordination.
</p>
<p>
We deeply value the partnership with our sponsors, as their support
makes every project and competition possible.
</p>
<p>
If you're interested in sponsoring UCalgary Baja, please contact our
team captain at []/click here/idk what else lol. Below, you can find
our sponsorship package detailing the opportunities available.
</p>
<div>
<p>Sponsorship Package (probably just a link)</p>
</div>
</div>
</div>
);
};

View File

@ -15,10 +15,10 @@ export default function Team() {
<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.
Our subteam works on 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
@ -36,8 +36,8 @@ export default function Team() {
<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.
learn manufacturing techniques like welding, tube coping and tube
bending.
</p>
</div>
</div>
@ -45,10 +45,10 @@ export default function Team() {
<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.
Our subteam works to ensure driver comfort, increase the number of
eligible drivers that can drive the car, and decrease driver
fatigue by optimizing the seat, head rest, pedals, and pedal foot
resets.
</p>
</div>
<img
@ -65,9 +65,8 @@ export default function Team() {
<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.
turning radius, pinion and rack ratio. We use FEA analysis to
professional CNC machining to optimize driving dynamics.
</p>
</div>
</div>
@ -100,11 +99,11 @@ export default function Team() {
</div>
<div>
<div>
<h3>Electrical</h3>
<h3>Telemetry</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.
Our subteam is responsible for wiring sensors and transmitting
real-time data from the vehicle, letting the team to monitor
performance and diagnose issues during testing.
</p>
</div>
<img
@ -112,6 +111,20 @@ export default function Team() {
alt="sus related"
/>
</div>
<div>
<img
src="https://picsum.photos/200"
alt="Data acc related"
/>
<div>
<h3>Data Acquisition</h3>
<p>
Our subteam focuses on integrating sensors and managing the
vehicle's wiring system to accurately collect, store, and analyze
performance data for post-test evaluation.
</p>
</div>
</div>
<div>
<img
src="https://picsum.photos/200"
@ -126,20 +139,20 @@ export default function Team() {
</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>
<h3>Business</h3>
<p>
Our subteam develops sponsorship relationships, creates content to
post on social media, develop marketing campaigns, arrange travel
bookings, handles payments, and manages team merch.
</p>
</div>
</div>
</div>
</div>