Add/about page (#61)

* added more to about page

* decided to push to sign in home

* sarah bio

* added final stuff

client/src/components/about/About.css

@@ -0,0 +1,39 @@
+h1 {
+
+}
+
+#aboutBody {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  background-color: white;
+  border: 4px solid grey;
+  margin: 3em;
+  padding: 1em;
+  border-radius: 8px;
+  width: 50%;
+}
+
+#allTeam {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+img {
+  border-radius: 8px;
+}
+
+#tallImage {
+  width: 10em;
+}
+
+#longImage {
+  width: 10em;
+}
+
+p {
+  text-align: center;
+}

client/src/components/about/About.js

@@ -0,0 +1,45 @@
+import React, { Fragment } from 'react';
+import mikeImage from '../../assets/mike.png';
+import mackImage from '../../assets/mack.jpg';
+import sarahImage from '../../assets/sarah.jpg';
+import styles from './About.css';
+
+
+const About = () => {
+  return (
+    <Fragment>
+      <h1>About The Team</h1>
+      <div id={styles.allTeam}>
+        <div id={styles.aboutBody}>
+          <h4>Mack Berliner</h4>
+          <img src={mackImage} id={styles.tallImage}/>
+          <p>
+        Software developer and University of Oregon alumni with a exemplary background in public policy.
+        Mack find great satisfaction collaborating with creative individuals, and bringing ideas to life through code.
+        Outside of work you can find him hiking in the forest or chasing the perfect powder day on the mountain.
+          </p>
+        </div>
+        <div id={styles.aboutBody}>
+          <h4>Mike Lambert</h4>
+          <img src={mikeImage} id={styles.longImage}/>
+          <p>
+      Mike Lambert is full-stack developer with a particular affinity for the front-end.
+      He holds a degree in philosophy from the University of Washington, as well as an MBA from IE Business School in Madrid, Spain.
+      He has lived in five countries on three different continents and is fluent in four (human) languages.
+      When he’s not rockin’ out in the code mines, you can find Mike hanging with his wife Luces and two lovebirds, Raymi and Condor.
+          </p>
+        </div>
+        <div id={styles.aboutBody}>
+          <h4>Sarah Flynn</h4>
+          <img src={sarahImage} id={styles.tallImage}/>
+          <p>Sarah Flynn is a full stack software developer using the MERN stack, Vue (a favorite), and Plain JS.
+             She is curious, hard-working, and deeply committed to the missions of organizations she works for.
+              She started out as an astrophysics major in college, where she did research assistantships at Brookhaven National Laboratory and the National Radio Astronomy Observatory.
+               She graduated summa cum laude with a BA in creative writing and also excelled in an MFA creative writing program. She has 10 years of experience working in Portland in advocate/manager/director roles for campaigns and nonprofits. When she isn't coding, she is probably sleeping or running errands, but she might also be rock climbing, hiking, playing the ukulele, or traveling.</p>
+        </div>
+      </div>
+    </Fragment>
+  );
+};
+
+export default About;

client/src/components/dashboard/RequestDetail.js

@@ -40,7 +40,7 @@ class RequestDetail extends PureComponent {
       (requestedNanny, i) => {
         return (
           <div key={i}>
-            <h1>Nanny Profile {i}:</h1>
+            <h1>Nanny Profile {i + 1}:</h1>
             <p><b>Name:</b> {requestedNanny.name}</p>
             <img src={requestedNanny.photo} alt='profile photo' />
             <p><b>Price per hour:</b> {requestedNanny.pricePerHour + 3.5}</p>

client/src/components/header/Header.js

@@ -15,6 +15,12 @@ export default function Header({ session, signOut }) {
         <span id={styles.hamburgerSpan} />
 
         <nav id={styles.nav}>
+          <Link
+            className={styles.link}
+            to={ROUTES.ABOUT.linkTo()}
+          >
+            About Us
+          </Link>
           <Link
             className={styles.link}
             to={ROUTES.DASHBOARD.linkTo(session._id)}

client/src/components/home/Home.js

@@ -1,15 +1,12 @@
 import React, { Fragment } from 'react';
 import { Link } from 'react-router-dom';
 import { ROUTES } from '../../routes/routes';
+import About from '../about/About';
 
 const Home = () => {
   return (
     <Fragment>
-      <h2>Welcome Home</h2>
-      <p>
-        Lorem ipsum dolor Bob Ross... Let’s make a happy little mountain now. You have to make almighty decisions when you’re the creator. Let’s make a nice big leafy tree. Remember how free clouds are. They just lay around in the sky all day long.
-      </p>
-      <Link to={ROUTES.SIGNUP.linkTo()}>Sign Up Now!</Link>
+      <About/>
     </Fragment>
   );
 };

client/src/routes/routes.js

@@ -7,14 +7,15 @@ import ProfileContainer from '../containers/ProfileContainer';
 import DashBoardContainer from '../containers/DashBoardContainer';
 import AppointmentDetail from '../containers/AppointmentDetail';
 import RequestDetail from '../containers/RequestDetail';
+import About from '../components/about/About';
 
 
 
 export const ROUTES = {
-  HOME: {
-    path: '/',
-    Component: Home,
-    linkTo: () => '/'
+  ABOUT: {
+    path: '/about',
+    Component: About,
+    linkTo: () => '/about'
   },
   SIGNUP: {
     path: '/signup',
@@ -46,6 +47,11 @@ export const ROUTES = {
     path: '/dashboard/:id',
     Component: withSession(DashBoardContainer),
     linkTo: id => `/dashboard/${id}`
+  },
+  HOME: {
+    path: '/',
+    Component: Signin,
+    linkTo: () => '/'
   }
 };