Add a Mentorship Page

src/scenes/home/history/timelineEvent/timelineEvent.js

@@ -4,21 +4,15 @@ import styles from './timelineEvent.css';
 
 const TimelineEvent = ({ title, content }) => (
   <div className={styles.eventContainer}>
-    <h4 className={styles.eventTitle}>
-      {title}
-    </h4>
+    <h4 className={styles.eventTitle}>{title}</h4>
 
-    <div className={styles.eventContent}>
-      <p>
-        {content}
-      </p>
-    </div>
+    <div className={styles.eventContent}>{content}</div>
   </div>
 );
 
 TimelineEvent.propTypes = {
   title: PropTypes.string.isRequired,
-  content: PropTypes.string.isRequired,
+  content: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.node]).isRequired,
 };
 
 export default TimelineEvent;

src/scenes/home/home.css

@@ -1,27 +1,27 @@
 .home {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-    overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  overflow: hidden;
 }
 
 .main {
-    display: flex;
-    flex: 1;
+  display: flex;
+  flex: 1;
 }
 
 .main > div {
-    width: 100%;
+  width: 100%;
 }
 
 .homeImage {
-    height:300px;
+  height: 300px;
 }
 
 .backgroundImageHome {
-    background-size: 100%;
-    background-position: center top;
-    background-repeat: no-repeat;
+  background-size: 100%;
+  background-position: center top;
+  background-repeat: no-repeat;
 }
 
 @media screen and (max-width: 1200px) {
@@ -48,6 +48,12 @@
   }
 }
 
+.backgroundImageGettingStarted {
+  background-size: 100%;
+  background-position: right top;
+  background-repeat: no-repeat;
+}
+
 .backgroundImageTeam {
   background-size: 100%;
   background-position: right top;
@@ -58,6 +64,22 @@
   .backgroundImageTeam {
     background-size: auto 9%;
   }
+  .backgroundImageGettingStarted {
+    background-size: auto 30%;
+  }
+}
+
+@media screen and (max-width: 950px) {
+  .backgroundImageGettingStarted {
+    background-size: auto 25%;
+    background-position: top;
+  }
+}
+
+@media screen and (max-width: 840px) {
+  .backgroundImageGettingStarted {
+    background-size: auto 20%;
+  }
 }
 
 @media screen and (max-width: 650px) {

src/scenes/home/home.js

@@ -8,6 +8,7 @@ import IdmeVerify from 'shared/components/idme/idmeverify/idmeverify';
 import AuthenticatedRoute from 'shared/components/authenticatedRoute/authenticatedRoute';
 import familyImage from 'images/Family-2.jpg';
 import lincolnImage from 'images/lincoln.jpg';
+import winstonImage from 'images/Winston.jpg';
 import colinPowellImage from 'images/colin-powell.jpg';
 import Profile from './profile/profile';
 import SignUp from './signup/signup';
@@ -33,6 +34,7 @@ import Challenge from './challenge/challenge';
 import SignupInformation from './informationForm/informationForm';
 import Benefit from './benefit/benefit';
 import Terms from './termsOfService/termsOfService';
+import OurPrograms from './ourPrograms/ourPrograms';
 import ChapterLeader from './chapterLeader/chapterLeader';
 import styles from './home.css';
 
@@ -73,6 +75,13 @@ class Home extends Component {
         bgImageUrl: lincolnImage,
         bgImageStyle: 'backgroundImageTeam',
       });
+    } else if (location.pathname === '/our_programs') {
+      this.setState({
+        bgChanged: !(this.state.bgImage),
+        bgImage: true,
+        bgImageUrl: winstonImage,
+        bgImageStyle: "backgroundImageGettingStarted"
+      });
     } else if (location.pathname === '/history') {
       this.setState({
         bgChanged: !this.state.bgImage,
@@ -200,6 +209,10 @@ class Home extends Component {
                 <Landing {...props} sendNotification={this.sendNotification} />
               )}
             />
+            <Route
+              path="/our_programs"
+              component={OurPrograms}
+            />
             <Route exact path="/scholarships" component={Scholarships} />
             <Route path="/benefit" render={() => <Benefit {...authProps} />} />
             <Route path="/gala" render={() => <Benefit {...authProps} />} />

src/scenes/home/ourPrograms/gettingStarted/gettingStarted.css

@@ -0,0 +1,61 @@
+.timeline {
+  width: 90%;
+  margin: 50px auto;
+}
+
+.segment {
+  display: flex;
+}
+
+/* Step Number (left column) */
+.stepNumber {
+  flex: 1;
+  position: relative;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.stepNumber > h3 {
+  position: absolute;
+  width: 100%;
+  top: 14px;
+  padding-right: 10px;
+}
+
+/* Vertical Line w/ Bubbles (middle column) */
+.vertLine {
+  position: relative;
+  padding: 0 20px;
+}
+
+.line {
+  position: absolute;
+  transform: translateX(-50%);
+  width: 2px;
+  top: 0;
+  height: 100%;
+  background-color: #d7d7d7;
+}
+
+.bubble {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  border: 2px solid #7d7d7d;
+  background-color: white;
+  position: absolute;
+  transform: translateX(-50%);
+  top: 25px;
+}
+
+/* Events (right column) */
+.timelineEvent {
+  flex: 8;
+}
+
+@media screen and (max-width: 680px) {
+  .stepNumber > h3 {
+    top: 24px;
+    font-size: 1.1rem;
+  }
+}

src/scenes/home/ourPrograms/gettingStarted/gettingStarted.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import Section from 'shared/components/section/section';
+import TimelineEvent from '../../history/timelineEvent/timelineEvent';
+import styles from './gettingStarted.css';
+
+const step1 = (
+  <p>
+    The first step to getting a mentor is to decide that you need one. If you
+    have a specific question, perhaps try asking in our Slack. You can also turn
+    to stackoverflow.com. If you need something a little more involved, move on
+    to Step 1.
+  </p>
+);
+
+const step2 = (
+  <p>
+    Navigate over to your profile in Operation Code and get verified as a
+    Veteran using our ID.ME system. Once verified, click the &apos;Request a
+    Mentor&apos; button. You&apos;ll be asked for a bit of information so we can
+    best pair you up with the right mentor. Once your mentor contacts you, agree
+    upon a time and method for a 30 minute meeting.
+  </p>
+);
+
+const step3 = (
+  <div>
+    <p>Your first meeting will accomplish a few things</p>
+    <ol>
+      <li>Determine if you and your mentor are good culture fit.</li>
+      <li>Outline a problem and determine your action</li>
+    </ol>
+  </div>
+);
+
+const GettingStarted = () => (
+  <Section title="Getting Started">
+    <div className={styles.timeline}>
+      <div className={styles.segment}>
+        <div className={styles.stepNumber}>
+          <h3>1</h3>
+        </div>
+
+        <div className={styles.vertLine}>
+          <div className={styles.line} />
+          <div className={styles.bubble} />
+        </div>
+
+        <div className={styles.timelineEvent}>
+          <TimelineEvent title="Identify your Needs" content={step1} />
+        </div>
+      </div>
+      <div className={styles.segment}>
+        <div className={styles.stepNumber}>
+          <h3>2</h3>
+        </div>
+
+        <div className={styles.vertLine}>
+          <div className={styles.line} />
+          <div className={styles.bubble} />
+        </div>
+
+        <div className={styles.timelineEvent}>
+          <TimelineEvent title="Request a Mentor" content={step2} />
+        </div>
+      </div>
+      <div className={styles.segment}>
+        <div className={styles.stepNumber}>
+          <h3>3</h3>
+        </div>
+
+        <div className={styles.vertLine}>
+          <div className={styles.line} />
+          <div className={styles.bubble} />
+        </div>
+
+        <div className={styles.timelineEvent}>
+          <TimelineEvent title="Your first Meeting" content={step3} />
+        </div>
+      </div>
+    </div>
+  </Section>
+);
+
+export default GettingStarted;

src/scenes/home/ourPrograms/mentorVolunteers/mentorVolunteers.css

@@ -0,0 +1,18 @@
+.iconList {
+  align-items: flex-start;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: space-between;
+}
+
+.characteristics {
+  align-items: center;
+  display: flex;
+  justify-content: flex-start;
+  margin: 1rem 0;
+}
+
+.iconContainer {
+  padding: 0 25px 0 0;
+  width: 75px;
+}

src/scenes/home/ourPrograms/mentorVolunteers/mentorVolunteers.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { FaClockO, FaGroup, FaHandPeaceO } from 'react-icons/lib/fa';
+import Section from 'shared/components/section/section';
+import styles from './mentorVolunteers.css';
+
+const MentorVolunteers = () => (
+  <Section title="Our Mentor Volunteers">
+    <p>
+      All of our mentors possess <u>3 characteristics</u>:
+    </p>
+
+    <div className={styles.iconList}>
+      <div className={styles.characteristics}>
+        <div className={styles.iconContainer}>
+          <FaClockO size={75} />
+        </div>
+        <p>
+          <strong>Availability:</strong> They are willing to set aside time to
+          help you.
+        </p>
+      </div>
+
+      <div className={styles.characteristics}>
+        <div className={styles.iconContainer}>
+          <FaGroup size={75} />
+        </div>
+        <p>
+          <strong>Expert Knowledge:</strong> Each mentor is a subject matter
+          expert in their choosen field with years of experience. We will curate
+          your specific request to a mentor that knows your field.
+        </p>
+      </div>
+
+      <div className={styles.characteristics}>
+        <div className={styles.iconContainer}>
+          <FaHandPeaceO size={75} />
+        </div>
+        <p>
+          <strong>Trustworthiness:</strong> Our mentors are honest with you,
+          even when it&apos;s the hard truth. Expect a helpful and critical
+          leader, not a cheerleader.
+        </p>
+      </div>
+    </div>
+  </Section>
+);
+
+export default MentorVolunteers;

src/scenes/home/ourPrograms/mentorshipProgram/mentorshipProgram.css

@@ -0,0 +1,42 @@
+.flexContainer {
+  width: 100%;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+  padding: 15px 0 0 0;
+}
+
+.featureHeading {
+  width: 30%;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: 700;
+}
+
+.featureHeading > p {
+  margin-left: 20px;
+}
+
+.iconStyle {
+  color: #000;
+}
+
+.featureDescription {
+  width: 70%;
+}
+
+@media screen and (max-width: 768px) {
+  .flexContainer {
+    flex-flow: column;
+  }
+
+  .featureHeading {
+    width: 100%;
+  }
+
+  .featureDescription {
+    width: 100%;
+  }
+}