feat(vechilces): added content, css done, mobile done

src/Header/Header.css

@@ -163,7 +163,10 @@ nav a li:hover {
 :root {
 	--fade-starts-at-bottom: 90%;
 	--fade-starts-at-top: 96%;
-	--banner-text-background: white;
+	--banner-text-background: #1f1f1fcc;
+	--banner-text-padding: 2svh 2svw;
+	--banner-text-rounding: 1rem;
+	--banner-text-colour: white;
 }
 
 /* #BannerHeader img {
@@ -193,6 +196,9 @@ nav a li:hover {
 	font-weight: normal;
 
 	background-color: var(--banner-text-background);
+	border-radius: var(--banner-text-rounding);
+	color: var(--banner-text-colour);
+	padding: var(--banner-text-padding);
 }
 
 #BannerHeader h2 {
@@ -203,6 +209,9 @@ nav a li:hover {
 	font-weight: normal;
 
 	background-color: var(--banner-text-background);
+	border-radius: var(--banner-text-rounding);
+	color: var(--banner-text-colour);
+	padding: var(--banner-text-padding);
 }
 
 /* for dark mode */

src/Header/Header.js

@@ -139,7 +139,11 @@ export default function Header() {
 						style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
 						<div>
 							<h1>{bannerInfo.titleText}</h1>
-							<h2>{bannerInfo.subtitleText}</h2>
+							{bannerInfo.subtitleText === "" ? (
+								<></>
+							) : (
+								<h2>{bannerInfo.subtitleText}</h2>
+							)}
 						</div>
 					</div>
 				</>

src/Vehicles/Vehicles.css

@@ -0,0 +1,91 @@
+#vehicles div {
+	display: flex;
+	flex-flow: row wrap;
+	column-gap: 4svw;
+	row-gap: 4svh;
+	justify-content: center;
+	align-items: flex-start;
+	margin-bottom: 4svh;
+}
+
+#vehicles div div {
+	display: flex;
+	flex-direction: column;
+	row-gap: 0svh;
+	min-width: 360px;
+	max-width: 500px;
+	align-items: normal;
+	margin: 0px;
+}
+
+:root {
+	--vehicle-card-padding: 1svh 1svw;
+}
+#vehicles figure {
+	height: 60svh;
+	/* width: 20svw; */
+	display: flex;
+	margin: 0px;
+
+	background-repeat: no-repeat;
+	background-size: cover;
+	background-position: center;
+	justify-content: center;
+	align-items: flex-end;
+	border-radius: 1rem;
+	padding: var(--vehicle-card-padding);
+}
+
+#vehicles figure h4 {
+	color: white;
+	font-weight: bolder;
+	font-size: 60px;
+	margin: 8svh 0px;
+}
+
+#vehicles figcaption {
+	display: flex;
+	flex-direction: column;
+	text-wrap: wrap;
+	justify-content: center;
+	padding: var(--vehicle-card-padding);
+}
+
+#vehicles figcaption p {
+	margin: 0px;
+	margin-bottom: 1svh;
+	font-weight: bold;
+	align-self: flex-start;
+	justify-self: flex-start;
+}
+
+#vehicles table {
+	text-align: start;
+	justify-self: center;
+	display: flex;
+	flex-direction: column;
+	width: 80%;
+	align-self: center;
+}
+#vehicles thead {
+	/* text-align: center; */
+	margin: 0px auto;
+	margin-bottom: 2svh;
+	font-weight: bold;
+	font-size: larger;
+}
+
+#vehicles tr {
+	display: flex;
+	flex-direction: row;
+}
+#vehicles tr td:first-child {
+	margin-left: 0px;
+}
+#vehicles tr td {
+	margin-left: 1svw;
+}
+
+#vehicles tr td:last-child {
+	margin-left: auto;
+}

src/Vehicles/Vehicles.jsx

@@ -2,6 +2,58 @@ import UpdateBanner from "../Header/UpdateBanner";
 import "./Vehicles.css";
 
 export default function Vehicles() {
+	let vechiles_info = [
+		{
+			year: "2019-2023",
+			vehicle_img_link:
+				"https://static.wixstatic.com/media/5824fc_128f7d18ed2f44c6883cc5b86cc1b2c2~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_20230504_084347041.jpg",
+			display_year: "'23",
+			features:
+				"First time implementing 4WD and chromoly tubing for the frame, custom rear half shafts, custom gearbox",
+			competitions: [
+				{ location: "Oshkosh, WI", competition_year: 2023, placement: "22nd" },
+				{ location: "Portland, OR", competition_year: 2023, placement: "26th" },
+			],
+		},
+		{
+			year: 2019,
+			vehicle_img_link:
+				"https://static.wixstatic.com/media/5824fc_7a03429a7efb4ca2978176a9e9f7d9e3~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/MVIMG_20190615_145709_edited.jpg",
+
+			display_year: "'19",
+			features:
+				"Custom gearbox, TIG welded frame, custom front hubs, top 10 finish at second competition",
+			competitions: [
+				{ location: "Rochester, NY", competition_year: 2019, placement: "8th" },
+				{
+					location: "Gorman, CA",
+					competition_year: 2019,
+					placement: "49th",
+				},
+			],
+		},
+		{
+			year: "2018",
+			vehicle_img_link:
+				"https://static.wixstatic.com/media/5824fc_b2388960e7d44459abe5db3499b8ecc0~mv2.jpg/v1/fill/w_732,h_675,fp_0.50_0.36,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/7.jpg",
+			display_year: "'18",
+			features: "Custom gearbox",
+			competitions: [
+				{ location: "Portland, OR", competition_year: 2018, placement: "26th" },
+			],
+		},
+		{
+			year: 2017,
+			vehicle_img_link:
+				"https://static.wixstatic.com/media/5824fc_7ee01b6e4cdf416c8affff42cc19637e~mv2.jpg/v1/fill/w_732,h_675,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/IMG_0430.jpg",
+			display_year: "'17",
+			features:
+				"Custom gearbox, first-time implementing control link, and h arm suspension in the rear",
+			competitions: [
+				{ location: "Illinois", competition_year: "2017", placement: "41st" },
+			],
+		},
+	];
 	return (
 		<>
 			<UpdateBanner
@@ -10,6 +62,42 @@ export default function Vehicles() {
 				updatedImgUrl=""
 				updatetdImgAlt=""
 			/>
+			<div id="vehicles">
+				<h1>VIEW OUR PAST VEHICLES</h1>
+				<div>
+					{Object.values(vechiles_info).map((vechile_info) => {
+						// console.log(vechile_info);
+						// style={{backgroundImage: `url(${vechile_info})`}}
+						return (
+							<div>
+								<figure
+									style={{
+										backgroundImage: `url(${vechile_info.vehicle_img_link})`,
+									}}>
+									<h4>{vechile_info.display_year}</h4>
+								</figure>
+								<figcaption>
+									<p>{"Features: " + vechile_info.features}</p>
+									<table>
+										<thead>Competions</thead>
+										{Object.values(vechile_info.competitions).map(
+											(competition_info) => {
+												return (
+													<tr>
+														<td>{competition_info.location}</td>
+														<td>{competition_info.competition_year}</td>
+														<td>{competition_info.placement + " Place"}</td>
+													</tr>
+												);
+											}
+										)}
+									</table>
+								</figcaption>
+							</div>
+						);
+					})}
+				</div>
+			</div>
 		</>
 	);
 }