added layout components

client/build/components/AboutPageContent/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _AboutSpeechOne = _interopRequireDefault(require("@components/AboutSpeechOne"));
+
+var _AboutSpeechTwo = _interopRequireDefault(require("@components/AboutSpeechTwo"));
+
+var _HorizontalSplit = _interopRequireDefault(require("@components/HorizontalSplit"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutPageContent = function AboutPageContent() {
+  return _react.default.createElement(_HorizontalSplit.default, {
+    leftSide: _react.default.createElement(_AboutSpeechOne.default, null),
+    rightSide: _react.default.createElement(_AboutSpeechTwo.default, null)
+  });
+};
+
+var _default = AboutPageContent;
+exports.default = _default;

client/build/components/AboutSpeechOne/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechOne = function AboutSpeechOne() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", {
+    className: "pull-quote"
+  }, "Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own."), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://twitter.com/spee_ch"
+  }, "TWITTER")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch"
+  }, "GITHUB")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://discord.gg/YjYbwhS"
+  }, "DISCORD CHANNEL")), _react.default.createElement("p", null, _react.default.createElement("a", {
+    className: "link--primary",
+    target: "_blank",
+    href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
+  }, "DOCUMENTATION")));
+};
+
+var _default = AboutSpeechOne;
+exports.default = _default;

client/build/components/AboutSpeechTwo/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var AboutSpeechTwo = function AboutSpeechTwo() {
+  return _react.default.createElement("div", null, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://lbry.io"
+  }, "LBRY"), " blockchain."), _react.default.createElement("p", null, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://lbry.io/get"
+  }, "LBRY"), " network.  This means that your images are stored in multiple locations without a single point of failure."), _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", null, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://github.com/lbryio/spee.ch"
+  }, "github repo"), " and go to town!"), _react.default.createElement("p", null, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://chat.lbry.io"
+  }, "discord channel"), " or solve one of our ", _react.default.createElement("a", {
+    className: "link--primary",
+    href: "https://github.com/lbryio/spee.ch/issues"
+  }, "github issues"), "."));
+};
+
+var _default = AboutSpeechTwo;
+exports.default = _default;

client/build/components/HomePageContent/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PublishTool = _interopRequireDefault(require("@containers/PublishTool"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var HomePageContent = function HomePageContent() {
+  return _react.default.createElement(_PublishTool.default, null);
+};
+
+var _default = HomePageContent;
+exports.default = _default;

client/build/components/HorizontalSplit/index.js

@@ -0,0 +1,65 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styleCss = _interopRequireDefault(require("./style.css.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var HorizontalSplit =
+/*#__PURE__*/
+function (_React$Component) {
+  function HorizontalSplit() {
+    _classCallCheck(this, HorizontalSplit);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HorizontalSplit).apply(this, arguments));
+  }
+
+  _createClass(HorizontalSplit, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        style: _styleCss.default.wrapper
+      }, _react.default.createElement("div", {
+        style: _styleCss.default.column
+      }, this.props.leftSide), _react.default.createElement("div", {
+        style: _styleCss.default.column
+      }, this.props.rightSide));
+    }
+  }]);
+
+  _inherits(HorizontalSplit, _React$Component);
+
+  return HorizontalSplit;
+}(_react.default.Component);
+
+var _default = HorizontalSplit;
+exports.default = _default;

client/build/components/HorizontalSplit/style.css.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var wrapper = {
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'flex-start'
+};
+var column = {
+  width: '45%'
+};
+var _default = {
+  wrapper: wrapper,
+  column: column
+};
+exports.default = _default;

client/build/components/PageContent/index.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styleCss = _interopRequireDefault(require("./style.css.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var PageContent =
+/*#__PURE__*/
+function (_React$Component) {
+  function PageContent() {
+    _classCallCheck(this, PageContent);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(PageContent).apply(this, arguments));
+  }
+
+  _createClass(PageContent, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        style: _styleCss.default,
+        className: 'row--tall flex-container--column'
+      }, this.props.children);
+    }
+  }]);
+
+  _inherits(PageContent, _React$Component);
+
+  return PageContent;
+}(_react.default.Component);
+
+var _default = PageContent;
+exports.default = _default;

client/build/components/PageContent/style.css.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var style = {
+  margin: '1em',
+  backgroundColor: 'red'
+};
+var _default = style;
+exports.default = _default;

client/build/components/PageLayout/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _SEO = _interopRequireDefault(require("@components/SEO"));
+
+var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+
+var _PageContent = _interopRequireDefault(require("@components/PageContent"));
+
+var _styleCss = _interopRequireDefault(require("./style.css.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); }
+
+var PageLayout =
+/*#__PURE__*/
+function (_React$Component) {
+  function PageLayout() {
+    _classCallCheck(this, PageLayout);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(PageLayout).apply(this, arguments));
+  }
+
+  _createClass(PageLayout, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate() {
+      return false;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return _react.default.createElement("div", {
+        style: _styleCss.default,
+        className: 'row--tall flex-container--column'
+      }, _react.default.createElement(_SEO.default, {
+        pageTitle: this.props.pageTitle,
+        pageUri: this.props.pageUri
+      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement(_PageContent.default, null, this.props.children));
+    }
+  }]);
+
+  _inherits(PageLayout, _React$Component);
+
+  return PageLayout;
+}(_react.default.Component);
+
+var _default = PageLayout;
+exports.default = _default;

client/build/components/PageLayout/style.css.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var style = {// backgroundColor: 'grey',
+};
+var _default = style;
+exports.default = _default;

client/build/pages/AboutPage/index.js

@@ -7,9 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _AboutPageContent = _interopRequireDefault(require("@components/AboutPageContent"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,53 +43,10 @@ function (_React$Component) {
   _createClass(AboutPage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", null, _react.default.createElement(_SEO.default, {
+      return _react.default.createElement(_PageLayout.default, {
         pageTitle: 'About',
         pageUri: 'about'
-      }), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
+      }, _react.default.createElement(_AboutPageContent.default, null));
-        className: "row row--padded"
-      }, _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("p", {
-        className: "pull-quote"
-      }, "Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own."), _react.default.createElement("p", null, _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://twitter.com/spee_ch"
-      }, "TWITTER")), _react.default.createElement("p", null, _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://github.com/lbryio/spee.ch"
-      }, "GITHUB")), _react.default.createElement("p", null, _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://discord.gg/YjYbwhS"
-      }, "DISCORD CHANNEL")), _react.default.createElement("p", null, _react.default.createElement("a", {
-        className: "link--primary",
-        target: "_blank",
-        href: "https://github.com/lbryio/spee.ch/blob/master/README.md"
-      }, "DOCUMENTATION")))), _react.default.createElement("div", {
-        className: "column column--5 column--med-10 align-content-top"
-      }, _react.default.createElement("div", {
-        className: "column column--8 column--med-10"
-      }, _react.default.createElement("p", null, "Spee.ch is a media-hosting site that reads from and publishes content to the ", _react.default.createElement("a", {
-        className: "link--primary",
-        href: "https://lbry.io"
-      }, "LBRY"), " blockchain."), _react.default.createElement("p", null, "Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the ", _react.default.createElement("a", {
-        className: "link--primary",
-        href: "https://lbry.io/get"
-      }, "LBRY"), " network.  This means that your images are stored in multiple locations without a single point of failure."), _react.default.createElement("h3", null, "Contribute"), _react.default.createElement("p", null, "If you have an idea for your own spee.ch-like site on top of LBRY, fork our ", _react.default.createElement("a", {
-        className: "link--primary",
-        href: "https://github.com/lbryio/spee.ch"
-      }, "github repo"), " and go to town!"), _react.default.createElement("p", null, "If you want to improve spee.ch, join our ", _react.default.createElement("a", {
-        className: "link--primary",
-        href: "https://chat.lbry.io"
-      }, "discord channel"), " or solve one of our ", _react.default.createElement("a", {
-        className: "link--primary",
-        href: "https://github.com/lbryio/spee.ch/issues"
-      }, "github issues"), ".")))));
     }
   }]);
 

client/build/pages/HomePage/index.js

@@ -7,11 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _SEO = _interopRequireDefault(require("@components/SEO"));
+var _PageLayout = _interopRequireDefault(require("@components/PageLayout"));
 
-var _NavBar = _interopRequireDefault(require("@containers/NavBar"));
+var _HomePageContent = _interopRequireDefault(require("@components/HomePageContent"));
-
-var _PublishTool = _interopRequireDefault(require("@containers/PublishTool"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -45,11 +43,10 @@ function (_React$Component) {
   _createClass(HomePage, [{
     key: "render",
     value: function render() {
-      return _react.default.createElement("div", {
+      return _react.default.createElement(_PageLayout.default, {
-        className: 'row row--tall flex-container--column'
+        pageTitle: 'Speech',
-      }, _react.default.createElement(_SEO.default, null), _react.default.createElement(_NavBar.default, null), _react.default.createElement("div", {
+        pageUri: ''
-        className: 'row row--tall row--padded flex-container--column'
+      }, _react.default.createElement(_HomePageContent.default, null));
-      }, _react.default.createElement(_PublishTool.default, null)));
     }
   }]);
 

client/src/components/AboutPageContent/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+import AboutSpeechOne from '@components/AboutSpeechOne';
+import AboutSpeechTwo from '@components/AboutSpeechTwo';
+import HorizontalSplit from '@components/HorizontalSplit';
+
+const AboutPageContent = () => {
+  return (
+    <HorizontalSplit
+      leftSide={<AboutSpeechOne />}
+      rightSide={<AboutSpeechTwo />}
+    />
+  );
+};
+
+export default AboutPageContent;

client/src/components/AboutSpeechOne/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const AboutSpeechOne = () => {
+  return (
+    <div>
+      <p className='pull-quote'>Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
+      <p><a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a></p>
+      <p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a></p>
+      <p><a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a></p>
+      <p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a></p>
+    </div>
+  );
+};
+
+export default AboutSpeechOne;

client/src/components/AboutSpeechTwo/index.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+const AboutSpeechTwo = () => {
+  return (
+    <div>
+      <p>Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.</p>
+      <p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the <a className='link--primary' href='https://lbry.io/get'>LBRY</a> network.  This means that your images are stored in multiple locations without a single point of failure.</p>
+      <h3>Contribute</h3>
+      <p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a className='link--primary' href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!</p>
+      <p>If you want to improve spee.ch, join our <a className='link--primary' href='https://chat.lbry.io'>discord channel</a> or solve one of our <a className='link--primary' href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.</p>
+    </div>
+  );
+};
+
+export default AboutSpeechTwo;

client/src/components/HomePageContent/index.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import PublishTool from '@containers/PublishTool';
+
+const HomePageContent = () => {
+  return (
+    <PublishTool />
+  );
+};
+
+export default HomePageContent;

client/src/components/HorizontalSplit/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import style from './style.css.js';
+
+class HorizontalSplit extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div style={style.wrapper}>
+        <div style={style.column}>
+          {this.props.leftSide}
+        </div>
+        <div style={style.column}>
+          {this.props.rightSide}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default HorizontalSplit;

client/src/components/HorizontalSplit/style.css.js

@@ -0,0 +1,15 @@
+const wrapper = {
+  display       : 'flex',
+  flexDirection : 'row',
+  justifyContent: 'space-between',
+  alignItems    : 'flex-start',
+};
+
+const column = {
+  width: '45%',
+};
+
+export default {
+  wrapper,
+  column,
+};

client/src/components/PageContent/index.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import style from './style.css.js';
+
+class PageContent extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div style={style} className={'row--tall flex-container--column'}>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+export default PageContent;

client/src/components/PageContent/style.css.js

@@ -0,0 +1,6 @@
+const style = {
+  margin         : '1em',
+  backgroundColor: 'red',
+};
+
+export default style;

client/src/components/PageLayout/index.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import SEO from '@components/SEO';
+import NavBar from '@containers/NavBar';
+import PageContent from '@components/PageContent';
+
+import style from './style.css.js';
+
+class PageLayout extends React.Component {
+  shouldComponentUpdate () {
+    return false;
+  }
+  render () {
+    return (
+      <div style={style} className={'row--tall flex-container--column'}>
+        <SEO pageTitle={this.props.pageTitle} pageUri={this.props.pageUri} />
+        <NavBar />
+        <PageContent>
+          {this.props.children}
+        </PageContent>
+      </div>
+    );
+  }
+}
+
+export default PageLayout;

client/src/components/PageLayout/style.css.js

@@ -0,0 +1,5 @@
+const style = {
+  // backgroundColor: 'grey',
+};
+
+export default style;

client/src/pages/AboutPage/index.jsx

@@ -1,33 +1,13 @@
 import React from 'react';
-import SEO from '@components/SEO';
+import PageLayout from '@components/PageLayout';
-import NavBar from '@containers/NavBar';
+import AboutPageContent from '@components/AboutPageContent';
 
 class AboutPage extends React.Component {
   render () {
     return (
-      <div>
+      <PageLayout pageTitle={'About'} pageUri={'about'} >
-        <SEO pageTitle={'About'} pageUri={'about'} />
+        <AboutPageContent />
-        <NavBar />
+      </PageLayout>
-        <div className='row row--padded'>
-          <div className='column column--5 column--med-10 align-content-top'>
-            <div className='column column--8 column--med-10'>
-              <p className='pull-quote'>Spee.ch is an open-source project.  Please contribute to the existing site, or fork it and make your own.</p>
-              <p><a className='link--primary' target='_blank' href='https://twitter.com/spee_ch'>TWITTER</a></p>
-              <p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch'>GITHUB</a></p>
-              <p><a className='link--primary' target='_blank' href='https://discord.gg/YjYbwhS'>DISCORD CHANNEL</a></p>
-              <p><a className='link--primary' target='_blank' href='https://github.com/lbryio/spee.ch/blob/master/README.md'>DOCUMENTATION</a></p>
-            </div>
-          </div><div className='column column--5 column--med-10 align-content-top'>
-            <div className='column column--8 column--med-10'>
-              <p>Spee.ch is a media-hosting site that reads from and publishes content to the <a className='link--primary' href='https://lbry.io'>LBRY</a> blockchain.</p>
-              <p>Spee.ch is a hosting service, but with the added benefit that it stores your content on a decentralized network of computers -- the <a className='link--primary' href='https://lbry.io/get'>LBRY</a> network.  This means that your images are stored in multiple locations without a single point of failure.</p>
-              <h3>Contribute</h3>
-              <p>If you have an idea for your own spee.ch-like site on top of LBRY, fork our <a className='link--primary' href='https://github.com/lbryio/spee.ch'>github repo</a> and go to town!</p>
-              <p>If you want to improve spee.ch, join our <a className='link--primary' href='https://chat.lbry.io'>discord channel</a> or solve one of our <a className='link--primary' href='https://github.com/lbryio/spee.ch/issues'>github issues</a>.</p>
-            </div>
-          </div>
-        </div>
-      </div>
     );
   }
 };

client/src/pages/HomePage/index.jsx

@@ -1,18 +1,13 @@
 import React from 'react';
-import SEO from '@components/SEO';
+import PageLayout from '@components/PageLayout';
-import NavBar from '@containers/NavBar';
+import HomePageContent from '@components/HomePageContent';
-import PublishTool from '@containers/PublishTool';
 
 class HomePage extends React.Component {
   render () {
     return (
-      <div className={'row row--tall flex-container--column'}>
+      <PageLayout pageTitle={'Speech'} pageUri={''}>
-        <SEO />
+        <HomePageContent />
-        <NavBar />
+      </PageLayout>
-        <div className={'row row--tall row--padded flex-container--column'}>
-          <PublishTool />
-        </div>
-      </div>
     );
   }
 };