feat(*): create RmAbout and RmHeader

src/assets/scss/_mixins.scss

@@ -0,0 +1,20 @@
+@mixin background-cover() {
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+@mixin serif-font() {
+  font-family: 'Lora', 'Times New Roman', serif;
+}
+
+@mixin sans-serif-font() {
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+@mixin min-height() {
+  min-height: -webkit-calc(100vh - 181px);
+  min-height:    -moz-calc(100vh - 181px);
+  min-height:         calc(100vh - 181px);
+}

src/assets/scss/styles.scss

@@ -4,6 +4,9 @@
 // Global
 //
 @import './global';
+// Mixins
+//
+@import './mixins';
 
 @import '~bootstrap/scss/bootstrap.scss';
 

src/components/RmHeader/RmHeader.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+/**
+ *
+ * @param {String} heading
+ * @param {String} subHeading
+ * @param {String} imgUrl
+ * @return {component}
+ * @constructor
+ */
+const RmHeader = ({ heading, subHeading, imgUrl = '' }) => (
+
+  <header className="rmHeader__masthead" style={{'background': imgUrl}}>
+    <div className="rmHeader__overlay" />
+    <div className="container">
+      <div className="row">
+        <div className="col-lg-8 col-md-10 mx-auto">
+          <div className="rmHeader__page-heading">
+            <h1>{ heading }</h1>
+            <span className="rmHeader__subheading">{subHeading}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+);
+
+export default RmHeader;

src/components/RmHeader/RmHeader.scss

@@ -0,0 +1,63 @@
+// Styling for the masthead
+.rmHeader__masthead {
+  // TIP: Background images are set within the HTML using inline CSS!
+  margin-bottom: 50px;
+  background: no-repeat center center;
+  background-color: $gray-600;
+  background-attachment: scroll;
+  position: relative;
+  @include background-cover;
+
+  .rmHeader__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background-color: $gray-900;
+    opacity: 0.5;
+  }
+
+  .rmHeader__page-heading,
+  .rmHeader__post-heading,
+  .rmHeader__site-heading {
+    padding: 126px 0 150px;
+    color: white;
+
+    @media only screen and (min-width: 768px) {
+
+      padding: 126px 0;
+
+    }
+
+  }
+
+  .rmHeader__page-heading,
+  .rmHeader__site-heading {
+    text-align: center;
+
+    h1 {
+      font-size: 50px;
+      margin-top: 0;
+    }
+
+    .rmHeader__subheading {
+      font-size: 24px;
+      font-weight: 300;
+      line-height: 1.1;
+      display: block;
+      margin: 10px 0 0;
+      @include sans-serif-font;
+    }
+
+    @media only screen and (min-width: 768px) {
+
+      h1 {
+        font-size: 80px;
+      }
+
+    }
+
+  }
+
+}

src/components/RmRoot/RmRoot.jsx

@@ -6,6 +6,7 @@ import {
 } from 'react-router-dom';
 
 import RmLanding from '../../containers/RmLanding/RmLanding';
+import RmAbout from '../../containers/RmAbout/RmAbout';
 import RmMovies from '../../containers/RmMovies/RmMovies';
 import RmMovieDetails from '../../containers/RmMovieDetails/RmMovieDetails';
 import RmFooter from '../../components/RmFooter/RmFooter';
@@ -17,6 +18,9 @@ const RmRoot = ({ store }) => (
         <div>
           <Route exact path="/" component={RmLanding} />
           <Route
+            path="/about"
+            component={props => <RmAbout {...props} />}
+          /><Route
             path="/movies"
             component={props => <RmMovies {...props} />}
           />

src/containers/RmAbout/RmAbout.jsx

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import RmHeader from '../../components/RmHeader/RmHeader';
+import RmNav from '../../containers/RmNav/RmNav';
+
+class RmAbout extends Component {
+
+  render() {
+    return (
+      <section className="rmAbout">
+        <RmNav />
+        <div className="rmAbout__wrapper">
+          <RmHeader
+            heading="About"
+            subHeading="React Movies"/>
+          <div className="container pb-5">
+            <div className="row">
+              <div className="col-lg-8 col-md-10 mx-auto">
+                <p>
+                  This is just an app to save and share your favorite movies, because sometimes we need a recommendation
+                  when we doesn't has anything to see, so this is the perfect place.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+}
+
+export default RmAbout;

src/containers/RmAbout/RmAbout.scss

@@ -0,0 +1,10 @@
+.rmAbout {
+
+  @include min-height;
+
+  .rmAbout__wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+}

src/containers/RmNav/RmNav.jsx

@@ -21,8 +21,8 @@ class RmNav extends Component {
   links = [
     {
       id: v4(),
-      path: 'home',
-      name: 'Home'
+      path: 'about',
+      name: 'About'
     },
     {
       id: v4(),
@@ -54,39 +54,36 @@ class RmNav extends Component {
     }
 
     return (
-      <div className="mb-3">
-        <nav className="navbar navbar-dark navbar-expand-lg bg-dark">
-          <NavLink
-            to="/"
-            className="navbar-brand">
-            React Movies
-          </NavLink>
-          <button
-            className="navbar-toggler navbar-toggler-right"
-            type="button">
-            <span className="navbar-toggler-icon" />
-          </button>
-          <div className="collapse navbar-collapse">
-            <ul className="navbar-nav mr-auto">
-              {this.links.map(({ path, name, id}) => (
-                <li key={id} className="nav-item">
-                  <NavLink
-                    to={`/${path}`}
-                    key={id}
-                    activeClassName="active"
-                    className="nav-link">
-                    {name}
-                  </NavLink>
-                </li>
-              ))}
-            </ul>
-            <div className="form-inline">
-              {space}
-            </div>
+      <nav className="navbar navbar-dark navbar-expand-lg bg-dark">
+        <NavLink
+          to="/"
+          className="navbar-brand">
+          React Movies
+        </NavLink>
+        <button
+          className="navbar-toggler navbar-toggler-right"
+          type="button">
+          <span className="navbar-toggler-icon" />
+        </button>
+        <div className="collapse navbar-collapse">
+          <ul className="navbar-nav mr-auto">
+            {this.links.map(({ path, name, id}) => (
+              <li key={id} className="nav-item">
+                <NavLink
+                  to={`/${path}`}
+                  key={id}
+                  activeClassName="active"
+                  className="nav-link">
+                  {name}
+                </NavLink>
+              </li>
+            ))}
+          </ul>
+          <div className="form-inline">
+            {space}
           </div>
-
-        </nav>
-      </div>
+        </div>
+      </nav>
     );
   }