Created 'Get involved' page -- need some help

src/scenes/home/getInvolved/getInvolved.css

@@ -0,0 +1,66 @@
+/* Shared styles for Get Involved sections: Why Give, Volunteer, etc. */
+
+.wrapper {
+  display: flex;
+}
+
+.half {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 50%;
+}
+
+.halfPhotoWrapper {
+  composes: half;
+}
+
+.photo {
+  width: 100%;
+  max-width: 500px;
+  height: auto;
+}
+
+.list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.listItem {
+  display: flex;
+  align-items: center;
+}
+
+.itemText {
+  margin-left: 20px;
+}
+
+.button {
+  margin-top: 1rem;
+}
+
+@media only screen and (min-width: 1112px) {
+  .half {
+    padding: 2rem;
+  }
+}
+
+@media only screen and (min-width: 320px) and (max-width: 1111px) {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .half {
+    padding: 1rem 0;
+    width: 100%;
+  }
+
+  .halfPhotoWrapper {
+    order: -1;
+  }
+}

src/scenes/home/getInvolved/getInvolved.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import HeroBanner from 'shared/components/heroBanner/heroBanner';
+import WhyGive from './whyGive/whyGive';
+import Volunteer from './volunteer/volunteer';
+
+const getInvolved = () => (
+  <div>
+    <HeroBanner
+      imageSrc="https://s3.amazonaws.com/operationcode-assets/page-get_involved/banner_people1.jpg"
+      title="Get Involved"
+      subtitle="See the magic happen..."
+    />
+
+    <WhyGive />
+    <Volunteer />
+  </div>
+);
+
+export default getInvolved;

src/scenes/home/getInvolved/volunteer/volunteer.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import faCheck from '@fortawesome/fontawesome-free-solid/faCheck';
+import LinkButton from 'shared/components/linkButton/linkButton';
+import Section from 'shared/components/section/section';
+import styles from '../getInvolved.css';
+
+const Volunteer = () => (
+  <Section title="Become a Volunteer">
+    <div className={styles.wrapper}>
+      <div className={styles.half}>
+        <ul className={styles.list}>
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Join our community on Slack, and work with new software developers
+              to help grow and mentor them in learning to code and enter the
+              tech industry. Answer questions, participate in mock interviews,
+              and review resumes.
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Lead a squad of new developers in learning new skills in Linux,
+              Python, cloud infrastructure, web development, and more.
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Meet up with a local chapter (or start your own!) and network with
+              other new developers eager to build cool apps and code the future!
+            </p>
+          </li>
+        </ul>
+      </div>
+      <div className={styles.halfPhotoWrapper}>
+        <img
+          src="https://s3.amazonaws.com/operationcode-assets/page-get_involved/hackathon1.jpg"
+          alt="Operation Code Members at Operation Spark"
+          className={styles.photo}
+        />
+      </div>
+    </div>
+    <div className={styles.button}>
+      <LinkButton text="Volunteer" theme="red" link="/signup" />
+    </div>
+  </Section>
+);
+
+export default Volunteer;

src/scenes/home/getInvolved/whyGive/whyGive.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import FontAwesomeIcon from '@fortawesome/react-fontawesome';
+import faCheck from '@fortawesome/fontawesome-free-solid/faCheck';
+import LinkButton from 'shared/components/linkButton/linkButton';
+import Section from 'shared/components/section/section';
+import styles from '../getInvolved.css';
+
+const WhyGive = () => (
+  <Section title="Why give to Operation Code?" theme="white">
+    <div className={styles.wrapper}>
+      <div className={styles.half}>
+        <img
+          src="https://s3.amazonaws.com/operationcode-assets/page-get_involved/benefit_dinner_2017.jpg"
+          alt="Benefit Dinner 2017"
+          className={styles.photo}
+        />
+      </div>
+      <div className={styles.half}>
+        <ul className={styles.list}>
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              To provide veterans, transitioning servicemembers, and military
+              spouses with transformative educational experiences
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              To advocate for more diversity and opportunity in the tech
+              industry
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              To enable our mission to reach more members of the military
+              community
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Scholarship funding for comp sci education, industry certification
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Sending veterans to conferences and major tech industry events
+            </p>
+          </li>
+
+          <li className={styles.listItem}>
+            <FontAwesomeIcon icon={faCheck} size="2x" />
+            <p className={styles.itemText}>
+              Building more tech communities near military installations
+            </p>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div className={styles.button}>
+      <LinkButton
+        text="Donate"
+        theme="red"
+        link="https://opencollective.com/operationcode#support"
+        isExternal
+      />
+    </div>
+  </Section>
+);
+
+export default WhyGive;

src/scenes/home/home.js

@@ -38,6 +38,7 @@ import Gala from './gala/gala';
 import Terms from './termsOfService/termsOfService';
 import OurPrograms from './ourPrograms/ourPrograms';
 import ChapterLeader from './chapterLeader/chapterLeader';
+import GetInvolved from './getInvolved/getInvolved';
 import Policy from './policy/policy';
 import OpCodeCon from './opCodeCon/opCodeCon';
 import styles from './home.css';
@@ -205,6 +206,7 @@ class Home extends Component {
             <Route path="/terms" component={Terms} />
             <Route path="/chapter_leader" component={ChapterLeader} />
             <Route path="/leadership_circle" component={LeadershipCircle} />
+            <Route path="/get-involved" component={GetInvolved} />
             <Route
               exact
               path="/"

src/shared/components/heroBanner/heroBanner.css

@@ -0,0 +1,24 @@
+.heroBanner {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+  display: flex;
+  height: 480px;
+  width: 100%;
+}
+
+.header {
+  flex-grow: 1;
+  box-sizing: border-box;
+  padding: 4rem;
+}
+
+@media only screen and (min-width: 320px) and (max-width: 768px) {
+  .heroBanner {
+    height: 320px;
+  }
+
+  .header {
+    padding: 2rem;
+  }
+}

src/shared/components/heroBanner/heroBanner.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './heroBanner.css';
+
+const HeroBanner = ({ imageSrc, title, subtitle }) => {
+  const bannerStyles = {
+    backgroundImage: `url(${imageSrc})`
+  };
+
+  return (
+    <div style={bannerStyles} className={styles.heroBanner}>
+      <div className={styles.header}>
+        <h1>{title}</h1>
+        { subtitle &&
+          <h4>{subtitle}</h4>
+        }
+      </div>
+    </div>
+  );
+};
+
+HeroBanner.propTypes = {
+  imageSrc: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string
+};
+
+HeroBanner.defaultProps = {
+  subtitle: ''
+};
+
+export default HeroBanner;

stories/components/heroBanner/index.js

@@ -0,0 +1,9 @@
+import react from 'react';
+import { storiesOf } from '@storybook/react';
+import HeroBanner from 'shared/components/heroBanner/heroBanner';
+
+import jamesBondJpg from '../../asset/james-bond.jpg';
+
+storiesOf('HeroBanner', module).add('Default', () => (
+  <HeroBanner imageSrc={jamesBondJpg} title="Bond" subtitle="James Bond" />
+));