From 79be60008394daa27934e85f0c1648f0079f3574 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <brock.tomlinson@ucalgary.ca>
Date: Sat, 9 Mar 2024 14:29:31 -0700
Subject: [PATCH] init home page

---
 src/AboutUs/AboutUs.css | 25 ++++++++++++++++++++++
 src/AboutUs/AboutUs.js  | 47 ++++++++++++++++++++++++++++++++++++-----
 2 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/AboutUs/AboutUs.css

diff --git a/src/AboutUs/AboutUs.css b/src/AboutUs/AboutUs.css
new file mode 100644
index 0000000..9beacc2
--- /dev/null
+++ b/src/AboutUs/AboutUs.css
@@ -0,0 +1,25 @@
+#aboutUs {
+	display: flex;
+	flex-direction: column;
+	align-content: center;
+}
+
+#benefits {
+	display: flex;
+	flex-direction: column;
+}
+
+.aboutUs article {
+	display: grid;
+	grid-template-columns: 50% 45%;
+	column-gap: 15px;
+	align-content: center;
+	padding-top: 15px;
+	padding-left: 5%;
+	padding-right: 5%;
+}
+
+.aboutUs img {
+	height: 300px;
+	width: 100%;
+}
diff --git a/src/AboutUs/AboutUs.js b/src/AboutUs/AboutUs.js
index 77531ed..f4eda45 100644
--- a/src/AboutUs/AboutUs.js
+++ b/src/AboutUs/AboutUs.js
@@ -1,5 +1,42 @@
-export default function AboutsUs() {
-    return (
-        <p>About Us</p>
-    );
-};
\ No newline at end of file
+import "./AboutUs.css";
+
+const AboutsUs = () => {
+	return (
+		<main className="aboutUs">
+			<img
+				src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
+				alt="Schulich off Road Banner"
+			/>
+			<article>
+				<img
+					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
+					alt="Who we are//temp"
+				/>
+				<p>Who we are</p>
+			</article>
+			<article>
+				<p>
+					What we do, breifly list the broad categories of what people do in our
+					team
+				</p>
+				<img
+					src="https://res.cloudinary.com/dpgrgsh7g/image/upload/v1710016930/IMG-20240207-WA0000_e1jcf4.jpg"
+					alt="montage of images mainly showcasing team memebers working"
+				/>
+			</article>
+			<article id="benefits">
+				<p>
+					What are the benefits of joing the team small list of how we actually
+					beneit new members
+				</p>
+				<ul>
+					<li>benefit 1</li>
+					<li>benefit 2</li>
+					<li>benefit 3</li>
+				</ul>
+			</article>
+		</main>
+	);
+};
+
+export default AboutsUs;