Added some landing page elements

frontend/src/Email/Email.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Email.scss'; 
+
+const Email = () => {
+  return (
+    <div className="email">
+
+    </div>
+  )
+};
+
+export default Email;

frontend/src/Email/Email.scss

@@ -0,0 +1,9 @@
+@import '../index.scss'; 
+
+.email {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}
+

frontend/src/Footer/Footer.js

@@ -6,13 +6,18 @@ const Footer = () => {
     <footer>
       <div className="footer-location">
         <h3>Exit Plan</h3>
+        <hr></hr>
+        <br />
         <p>123 W 12th Street,</p>
         <p>Denver, CO 12345</p>
       </div>
       <div className="footer-links">
         <h3>Useful Links</h3>
+        <hr></hr>
         <a>Customer Support</a>
+        <br/>
         <a>Emergency Resources</a>
+        <br/>
         <a>Directory</a>
       </div>
     </footer>

frontend/src/Footer/Footer.scss

@@ -2,18 +2,32 @@
 
 footer {
   background-color: $dark-blue; 
-  height: 200px; 
+  height: 100px; 
   display: flex; 
   flex-direction: row;
   justify-content: space-between; 
   color: $off-white;
+  align-items: center;
+  font-family: Helvetica, sans-serif; 
 }
 
 .footer-location {
-  width: 200px;
+  width: 125px;
+  margin-left: 20px;
 }
 
 .footer-links {
-  width: 200px;
+  width: 125px;
+  text-align: right;
+  margin-right: 20px;
+}
+
+h3 {
+  font-size: 18px;
+  font-style: italic;
+}
+
+p, a {
+  font-size: 12px;
 }
 

frontend/src/Hero/Hero.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Hero.scss'; 
+
+const Hero = () => {
+  return (
+    <div className="hero">
+      <img className="hero-logo" src="./assets/Exit_Plan_Hero.png" alt="exit plan hero"/>
+    </div>
+  )
+};
+
+export default Hero;

frontend/src/Hero/Hero.scss

@@ -0,0 +1,16 @@
+@import '../index.scss'; 
+
+.hero {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 400px;
+}
+
+.hero-logo {
+  width: 100%; 
+  margin-top: 3%; 
+  padding-left: 10%;
+  padding-right: 10%;
+  margin-bottom: 3%;
+}

frontend/src/Intro/Intro.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Intro.scss'; 
+
+const Intro = () => {
+  return (
+    <div className="intro">
+      <div className="intro-text">
+        some text
+      </div>
+      <div className="intro-video">
+        some more text
+      </div>
+    </div>
+  )
+};
+
+export default Intro;

frontend/src/Intro/Intro.scss

@@ -0,0 +1,20 @@
+@import '../index.scss'; 
+
+.intro {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+  flex-direction: row;
+  font-family: Helvetica, sans-serif; 
+}
+
+.intro-text {
+  width: 50%;
+  background: green;
+}
+
+.intro-video {
+  width: 50%;
+  background: purple;
+}

frontend/src/Link/Link.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './Link.scss'; 
+
+const Link = () => {
+  return (
+    <div className="link">
+
+    </div>
+  )
+};
+
+export default Link;

frontend/src/Link/Link.scss

@@ -0,0 +1,8 @@
+@import '../index.scss'; 
+
+.link {
+  background-color: $light-blue; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}

frontend/src/Main/Main.js

@@ -1,10 +1,18 @@
 import React from 'react';
 import './Main.scss'; 
+import Hero from '../Hero/Hero.js';
+import Intro from '../Intro/Intro.js';
+import Link from '../Link/Link.js';
+import Email from '../Email/Email.js';
+
 
 const Main = () => {
   return (
     <main>
-
+      <Hero />
+      <Intro />
+      <Link />
+      <Email />
     </main>
   )
 };