Header

src/components/Activity.js

@@ -4,13 +4,14 @@ import styles from "../css/Activity.module.css";
 
 export default props => {
   return (
-    <div id={styles.container}>
-      <div className={styles.squareBackground}></div>
-      <img style={props.imagePos} src={props.image} className={styles.image} alt={props.altText} />
+    <>
+      <div className={styles.squareBackground}>
+        <img style={props.imagePos} src={props.image} className={styles.image} alt={props.altText} />
+      </div>
       <div className={styles.text}>
         <h1 id={styles.textTitle}>{props.title}</h1>
         <p id={styles.textBody}>{props.msg}</p>
       </div>
-    </div>
+    </>
   )
 }

src/components/Header.js

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Button from './Button'
+import styles from '../css/Header.module.css';
+
+import surge from "../assets/surge.svg"
+import rocketMonitor from "../assets/rocket-monitor.svg"
+
+export default props => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.backgroundContainer}>
+        <img className={styles.logo} src={surge} alt="SFU Surge Logo" />
+        <div className={styles.headerText}>
+          <h1 className={styles.mandate}>{props.mandate}</h1>
+          <p className={styles.mission}>{props.mission}</p>
+        </div>
+        <div className={styles.btn}>
+          <Button
+            text="Join the Movement"
+            // link="/mailchimp"
+            style={{ width: "40%", height: "35px", fontSize: "12px", backgroundColor: "var(--color-btnPrimary)", margin: "0" }}
+          />
+          <Button
+            text="Learn More"
+            // link="/about"
+            style={{ width: "40%", height: "35px", fontSize: "12px", backgroundColor: "var(--color-btnSecondary", margin: "0" }}
+          />
+        </div>
+      </div>
+      <img className={styles.rocketMonitor} src={rocketMonitor} alt="" />
+    </div>
+  )
+}

src/components/UpcomingEvent.js

@@ -31,7 +31,7 @@ export default props => {
           <img src={clock} alt="Time" />
           <p>{props.time}</p>
         </div>
-        <a className={styles.fbEvent} href={props.link}>{props.title}</a>
+        <a className={styles.fbEvent} href={props.fbLink}>{props.title}</a>
       </div>
     </div>
   )

src/css/Activity.module.css

@@ -1,27 +1,19 @@
-#container {
-  position: relative;
-  margin-left: 12%;
-  margin-bottom: 250px;
-}
-
 .squareBackground {
-  width: 75%;
+  width: 90%;
   height: calc(65vw);
   background-color: var(--color-img);
 }
 
 .image {
-  width: 70%;
-  float: right;
-  margin-right: 15%;
-  transform: translateY(-105%);
+  width: 90%;
 }
 
 .text {
-  position: absolute;
-  width: 85%;
+  /* width: 90%; */
   text-align: left;
   color: var(--color-main);
+  margin-top: -10px;
+  margin-bottom: 45px;
 }
 
 #textTitle {

src/css/Button.module.css

@@ -6,6 +6,7 @@
   background-color: var(--color-btnPrimary);
   font-family: var(--color-main);
   font-weight: 600;
+  font-size: 20px;
   color: #FFFFFF;
   text-decoration: none;
 }

src/css/Header.module.css

@@ -0,0 +1,47 @@
+.wrapper {
+  height: 100%;
+  margin-bottom: 30px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}
+
+.backgroundContainer {
+  background-image: url(../assets/frontpage-background.svg);
+  background-size: cover;
+  height: 475px;
+}
+
+.logo {
+  margin-top: 50px;
+}
+
+.headerText {
+  color: var(--color-main);
+  justify-content: center;
+  text-align: center;
+}
+
+.mandate {
+  font-size: var(--fontSize-mobile-subHeading);
+  font-size: 20px;
+}
+
+.mission {
+  width: 75%;
+  margin: auto;
+  text-align: left;
+  font-size: 16px;
+}
+
+.btn {
+  margin-top: 20px;
+  display: flex;
+  justify-content: space-evenly;
+}
+
+.rocketMonitor {
+  width: 80%;
+  margin-top: -30%;
+}

src/css/Homepage.module.css

@@ -0,0 +1,37 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.title {
+  color: var(--color-main);
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 25px;
+}
+
+.activities {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-self: center;
+  width: 80%;
+}
+
+.spotlight {
+  margin: -30px auto 10px auto;
+  width: 80%;
+}
+
+.stream {
+  font-size: 16px;
+  color: var(--color-btnSecondary)
+}
+
+.upcomingEvents {
+  font-size: 30px;
+  font-weight: 600;
+  color: var(--color-main);
+  text-align: center;
+}