Merge pull request #15 from kkopp/info-pages

adding pages

client/src/components/Footer/index.js

@@ -7,7 +7,7 @@ const Footer = () => {
     <MDBFooter style={bgBlue} className="font-small pt-4 mt-4">
       <div className="footer-copyright text-center py-3">
         <MDBContainer fluid>
-          &copy; {new Date().getFullYear()} | Created by: Lisa and Kristina
+          &copy; {new Date().getFullYear()} | Created by: Kristina and Lisa
         </MDBContainer>
       </div>
     </MDBFooter>

client/src/components/NavBar/index.js

@@ -43,13 +43,13 @@ class NavBar extends React.Component {
 							<MDBCollapse isOpen={this.state.collapse} navbar>
 								<MDBNavbarNav right>
 									<MDBNavItem active>
-										<MDBNavLink to="#">Home</MDBNavLink>
+										<MDBNavLink to="/landing">Home</MDBNavLink>
 									</MDBNavItem>
 									<MDBNavItem>
-										<MDBNavLink to="#">Resources</MDBNavLink>
+										<MDBNavLink to="/resources">Resources</MDBNavLink>
 									</MDBNavItem>
 									<MDBNavItem>
-										<MDBNavLink to="#">About Us</MDBNavLink>
+										<MDBNavLink to="/about">About Us</MDBNavLink>
 									</MDBNavItem>
 								</MDBNavbarNav>
 							</MDBCollapse>

client/src/pages/About.js

@@ -0,0 +1,66 @@
+import React from "react";
+import {  MDBRow, MDBCol, MDBCard, MDBAvatar, MDBCardBody, MDBIcon } from "mdbreact";
+
+const TeamPage = () => {
+  return (
+    <MDBCard className="my-5 px-5 pb-5 text-center">
+        <MDBCardBody>
+          <h2 className="h1-responsive font-weight-bold my-5">
+            Denver Campaign Data Project
+          </h2>
+          <p className="grey-text w-responsive mx-auto mb-5">
+            Millions of dollars are contributed to candidates in Denver elections, but the city does not maintain a campaign-finance database that's easy to search. Rather, the city publishes Excel spreadsheets of this data. For our coding boot camp final project, we set out to create a website that makes it easy for voters to find information about campaign contributions and expenditures. Our goal is to help Denver voters make informed decisions.
+          </p>
+          <MDBRow>
+            <MDBCol lg="3" md="6" className="mb-lg-0 mb-5">
+              <MDBAvatar
+                tag="img"
+                src="https://avatars2.githubusercontent.com/u/42563514?s=400"
+                className="rounded-circle z-depth-1 img-fluid"
+                alt="Kristina Kopp"
+              />
+              <h5 className="font-weight-bold mt-4 mb-3">Kristina Kopp</h5>
+              <p className="text-uppercase blue-text">Web Developer</p>
+              <p className="grey-text">
+                University of Denver Women's Coding Boot Camp, graduated March 2019.
+              </p>
+              <ul className="list-unstyled mb-0">
+                <a href="https://github.com/kkopp" className="p-2 fa-lg">
+                  <MDBIcon fab icon="github" className="blue-text" />
+                </a>
+                <a href="#!" className="p-2 fa-lg">
+                  <MDBIcon fab icon="linkedin" className="blue-text" />
+                </a>
+                </ul>
+            </MDBCol>
+
+            <MDBCol lg="3" md="6" className="mb-lg-0 mb-5">
+              <MDBAvatar
+                tag="img"
+                src="https://avatars1.githubusercontent.com/u/43078062?s=400"
+                className="rounded-circle z-depth-1 img-fluid"
+                alt="Kristina Kopp"
+              />
+              <h5 className="font-weight-bold mt-4 mb-3">Lisa Jones</h5>
+              <p className="text-uppercase blue-text">Web Developer</p>
+              <p className="grey-text">
+                University of Denver Women's Coding Boot Camp, graduated March 2019.
+              </p>
+              <ul className="list-unstyled mb-0">
+                <a href="https://github.com/thatlisajones" className="p-2 fa-lg">
+                  <MDBIcon fab icon="github" className="blue-text" />
+                </a>
+                <a href="#!" className="p-2 fa-lg">
+                  <MDBIcon fab icon="linkedin" className="blue-text" />
+                </a>
+                </ul>
+            </MDBCol>
+
+
+          </MDBRow>
+        </MDBCardBody>
+      </MDBCard>
+  );
+}
+
+export default About;

client/src/pages/Resources.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MDBCard, MDBCardBody, MDBCardTitle, MDBCardText, MDBCardHeader, MDBBtn, MDBContainer } from "mdbreact";
+
+const Resources = props => {
+return (
+<MDBContainer>
+  <MDBCard style={{ width: "22rem", marginTop: "1rem" }}>
+    <MDBCardHeader color="primary-color" tag="h3">
+      Voter Resources
+    </MDBCardHeader>
+    <MDBCardBody>
+      <MDBCardTitle>Learn More</MDBCardTitle>
+      <MDBCardText>
+        For the most recent information about Denver elections, please visit the city's official resource page.
+      </MDBCardText>
+      <a href="https://www.denvergov.org/content/denvergov/en/denver-elections-divison.html"><MDBBtn color="primary">go to denvergov</MDBBtn></a>
+    </MDBCardBody>
+  </MDBCard>
+</MDBContainer>
+);
+};
+
+export default Resources;