add static pages

imports/ui/components/PageHeader/PageHeader.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './PageHeader.scss';
+
+const PageHeader = ({ title, subtitle }) => (
+  <div className="PageHeader">
+    <div className="PageHeader-container">
+      <h1>{title}</h1>
+      {subtitle ? <p>{subtitle}</p> : ''}
+    </div>
+  </div>
+);
+
+PageHeader.defaultProps = {
+  subtitle: '',
+};
+
+PageHeader.propTypes = {
+  title: PropTypes.string.isRequired,
+  subtitle: PropTypes.string,
+};
+
+export default PageHeader;

imports/ui/components/PageHeader/PageHeader.scss

@@ -0,0 +1,47 @@
+@import '../../stylesheets/mixins';
+@import '../../stylesheets/colors';
+
+.PageHeader {
+  border-bottom: 1px solid $gray-lighter;
+  padding: 0px 0 20px;
+  margin-bottom: 20px;
+
+  h1 {
+    font-size: 20px;
+    font-weight: 600;
+    margin: 0;
+  }
+
+  p {
+    font-size: 14px;
+    margin-top: 10px;
+    margin-bottom: 0;
+    color: $gray-light;
+  }
+}
+
+.PageHeader-container {
+  text-align: center;
+}
+
+@include breakpoint(tablet) {
+  .PageHeader {
+    padding: 10px 0 30px;
+    margin-bottom: 30px;
+
+    h1 {
+      font-size: 24px;
+    }
+
+    p {
+      font-size: 16px;
+    }
+  }
+}
+
+@include breakpoint(desktop) {
+  .PageHeader {
+    padding: 20px 0 40px;
+    margin-bottom: 40px;
+  }
+}