From ff0134eb0f1dfbe9ca41734dced3c1a98e435462 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <darkicewolf50@gmail.com>
Date: Wed, 11 Jun 2025 15:08:48 -0600
Subject: [PATCH] feat(contact): desktop page finished

---
 src/Contact/Contact.css | 86 +++++++++++++++++++++++++++++++++++++++++
 src/Contact/Contact.jsx | 49 ++++++++++++++++-------
 src/Header/Header.css   |  3 ++
 3 files changed, 124 insertions(+), 14 deletions(-)

diff --git a/src/Contact/Contact.css b/src/Contact/Contact.css
index e69de29..17bb051 100644
--- a/src/Contact/Contact.css
+++ b/src/Contact/Contact.css
@@ -0,0 +1,86 @@
+#Contact a {
+	text-decoration: none;
+	color: inherit;
+}
+
+#Contact ul {
+	list-style-type: none;
+	padding: 0px;
+	margin: 0px;
+}
+
+#Contact img {
+	width: 100px;
+	height: 100px;
+}
+
+#Contact h1,
+#Contact h4,
+#Contact p {
+	margin: 1svh 0svw;
+}
+
+#Contact div {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+	row-gap: 2svh;
+}
+
+#Contact div:nth-child(1) {
+	flex-direction: row;
+	column-gap: 2svw;
+	/* justify-content: center; */
+	align-items: center;
+	background: black;
+	color: white;
+	padding: 2svh 0svw;
+}
+
+#Contact div:nth-child(1) div:first-child {
+	flex-direction: row;
+	margin-left: 4svw;
+}
+
+#Contact div:nth-child(1) div:last-child {
+	flex-direction: column;
+	margin-left: auto;
+	margin-right: 16svw;
+}
+
+#Contact div:nth-child(1) div:last-child h1 {
+	margin: 0px;
+	font-size: 40px;
+}
+
+#Contact div:nth-child(1) img {
+	width: 300px;
+	height: 80svh;
+}
+
+#Contact div:nth-child(2) div {
+	flex-direction: column;
+	font-size: 30px;
+	font-weight: bold;
+	margin: 0px;
+	padding: 0svh 2svw;
+}
+
+#Contact div:nth-child(2) h1 {
+	text-wrap: nowrap;
+	align-self: flex-start;
+	margin-left: 2svw;
+	margin-right: 2svw;
+	font-size: 60px;
+}
+
+#Contact div:nth-child(2) {
+	margin: 0svh 0svw;
+	justify-content: flex-start;
+	height: 40svh;
+}
+
+#Contact div:last-child {
+	margin: 4svh 0svw;
+	justify-content: space-evenly;
+}
diff --git a/src/Contact/Contact.jsx b/src/Contact/Contact.jsx
index 5d1c872..8c41af2 100644
--- a/src/Contact/Contact.jsx
+++ b/src/Contact/Contact.jsx
@@ -3,23 +3,39 @@ import "./Contact.css";
 
 export default function Contact() {
 	return (
-		<>
+		<div id="Contact">
 			<UpdateBanner
-				updatedTitleText="Contact Us"
+				updatedTitleText=""
 				updatedSubtitleText=""
-				updatedImgUrl="https://picsum.photos/200"
+				updatedImgUrl=""
 				updatetdImgAlt="Lorem Picsum"
 			/>
 			<div>
-				<h1>Hours of Operation</h1>
-				<a href="mailto:uofcbaja@gmail.com">
-					<h4>Send us an email.</h4>
-					<h4>uofcbaja@gmail.com</h4>
-				</a>
-				<ul>
-					<li>Wednesday: 6pm - 8pm</li>
-					<li>Saturday: 10am - 4pm</li>
-				</ul>
+				<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"
+					/>
+					<img
+						src="https://static.wixstatic.com/media/5824fc_b83d649723274d5aa1455380f96e35c3~mv2.jpg/v1/fill/w_482,h_1068,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/20240203_155632.jpg"
+						alt="Team member filing"
+					/>
+					<img
+						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>
+					<h1>Hours of Operation</h1>
+					<a href="mailto:uofcbaja@gmail.com">
+						<h4>Send us an email.</h4>
+						<h4>uofcbaja@gmail.com</h4>
+					</a>
+					<ul>
+						<li>Wednesday: 6pm - 8pm</li>
+						<li>Saturday: 10am - 4pm</li>
+					</ul>
+				</div>
 			</div>
 			<div>
 				<h1>Join the team</h1>
@@ -31,15 +47,20 @@ export default function Contact() {
 					<a href="https://www.instagram.com/ucalgarybaja/">@UofCBaja</a>
 				</div>
 			</div>
+			<img
+				src="https://static.wixstatic.com/media/baac51_880011a7327649cd8870a61f80595ebf~mv2.jpg/v1/fill/w_2520,h_462,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/baac51_880011a7327649cd8870a61f80595ebf~mv2.jpg"
+				alt="Carbon Fiber Transition"
+				style={{ height: "30svh", width: "100%" }}
+			/>
 			<div>
-				<h1>Sponsor the Team</h1>
 				<a href="mailto:uofcbaja@gmail.com?subject=Lets start something great">
 					<img
 						src="https://www.svgrepo.com/show/390657/email-envelope-letter-mail-message-communication.svg"
 						alt="email symbol"
 					/>
 				</a>
+				<h1>Sponsor the Team</h1>
 			</div>
-		</>
+		</div>
 	);
 }
diff --git a/src/Header/Header.css b/src/Header/Header.css
index 5406f06..d72d4ac 100644
--- a/src/Header/Header.css
+++ b/src/Header/Header.css
@@ -228,3 +228,6 @@ nav a li:hover {
 #root.darkmode #darkModeToggle {
 	filter: hue-rotate(180deg);
 }
+a {
+	cursor: pointer;
+}