add static pages

imports/ui/components/Content/Content.js

@@ -0,0 +1,16 @@
+/* eslint-disable react/no-danger */
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Content.scss';
+
+const Content = ({ content }) => (
+  <div className="Content" dangerouslySetInnerHTML={{ __html: content }} />
+);
+
+Content.propTypes = {
+  content: PropTypes.string.isRequired,
+};
+
+export default Content;

imports/ui/components/Content/Content.scss

@@ -0,0 +1,36 @@
+@import '../../stylesheets/mixins';
+
+.Content {
+  max-width: 700px;
+  margin: 0 auto;
+  font-size: 14px;
+  line-height: 22px;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 30px 0 20px;
+  }
+
+  p {
+    margin-bottom: 20px;
+  }
+
+  > *:first-child {
+    margin-top: 0px;
+  }
+
+  > *:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+@include breakpoint(tablet) {
+  .Content {
+    font-size: 16px;
+    line-height: 22px;
+  }
+}

imports/ui/components/Footer/Footer.scss

@@ -39,7 +39,9 @@ body {
       color: $gray-light;
     }
 
-    a:hover {
+    a:hover,
+    a:active,
+    a:focus {
       text-decoration: none;
       color: $gray;
     }

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;
+  }
+}