Fe 10 migrate the contact page

app/components/Contact/contact.scss

@@ -0,0 +1,80 @@
+.c-contact {
+  text-align: center;
+  form {
+    max-width: 400px;
+    margin: 40px auto;
+  }
+  h1 {
+    font-size: 2.4rem;
+    line-height: 1;
+  }
+  input,
+  textarea {
+    font-size: 16px;
+  }
+  textarea {
+    height: 125px;
+    padding: 0.7em;
+    max-width: 100%;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #dee0e9;
+    margin: 0 0 1rem;
+    font-family: inherit;
+    font-size: 1rem;
+    color: #3a405b;
+    background-color: #fff;
+    box-shadow: none;
+    border-radius: 2px;
+    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+  input[type='text'],
+  [type='email'] {
+    height: 2.9rem;
+    padding: 0.7em;
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 2.4375rem;
+    padding: 0.5rem;
+    border: 1px solid #dee0e9;
+    margin: 0 0 1rem;
+    font-family: inherit;
+    font-size: 1rem;
+    color: #3a405b;
+    background-color: #fff;
+    box-shadow: none;
+    border-radius: 2px;
+    transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .button--block {
+    width: 100%;
+  }
+  .button--success {
+    background: #4be1ab;
+    color: #fff;
+  }
+
+  .button {
+    font-weight: 600;
+    display: inline-block;
+    text-align: center;
+    line-height: 1;
+    cursor: pointer;
+    -webkit-appearance: none;
+    transition: background-color 0.25s ease-out, color 0.25s ease-out;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 4px;
+    padding: 0.75em 1em;
+    margin: 0;
+    font-size: 1.1rem;
+  }
+}

app/components/Contact/index.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withFormik, Form, Field } from 'formik';
+import * as Yup from 'yup';
+import './contact.scss';
+
+const Contact = ({ errors, touched }) => (
+  <section className="c-section c-contact u-padding-v-xlarge">
+    <h1>Get in touch</h1>
+    <p>We&apos;ll love to hear from you!</p>
+    <Form>
+      <div>
+        {touched.name && errors.name ? (
+          <p style={{ color: 'red' }}>{errors.name}</p>
+        ) : null}
+        <Field
+          id="Name"
+          type="text"
+          name="name"
+          autoComplete="name"
+          placeholder="Your Name"
+        />
+      </div>
+      <div>
+        {touched.email && errors.email ? (
+          <p style={{ color: 'red' }}>{errors.email}</p>
+        ) : null}
+        <Field
+          id="message"
+          type="email"
+          name="email"
+          autoComplete="email"
+          placeholder="Your Email"
+        />
+      </div>
+      <div>
+        {touched.message && errors.message ? (
+          <p style={{ color: 'red' }}>{errors.message}</p>
+        ) : null}
+        <Field
+          component="textarea"
+          name="message"
+          id="message"
+          placeholder="Your Message"
+        />
+      </div>
+      <button type="submit" className="button button--success button--block">
+        Send Message
+      </button>
+    </Form>
+  </section>
+);
+
+Contact.propTypes = {
+  errors: PropTypes.object.isRequired,
+  touched: PropTypes.object.isRequired,
+};
+
+export default withFormik({
+  mapPropsToValues: () => ({
+    name: '',
+    email: '',
+    message: '',
+  }),
+  validationSchema: Yup.object().shape({
+    name: Yup.string().required('Name is required'),
+    email: Yup.string()
+      .email('Email not valid')
+      .required('Email is required'),
+    message: Yup.string().required('Message is required'),
+  }),
+  handleSubmit: () => {}, // TODO: Integrate Contact form API #13 ,
+})(Contact);

app/containers/App/index.js

@@ -12,6 +12,7 @@ import { Switch, Route } from 'react-router-dom';
 
 import HomePage from 'containers/HomePage/Loadable';
 import NotFoundPage from 'containers/NotFoundPage/Loadable';
+import Contact from '../../components/Contact/index';
 
 import '../../global-styles.scss';
 
@@ -20,6 +21,7 @@ export default function App() {
     <div>
       <Switch>
         <Route exact path="/" component={HomePage} />
+        <Route exact path="/contact" component={Contact} />
         <Route component={NotFoundPage} />
       </Switch>
     </div>

app/global-styles.scss

@@ -1,11 +1,21 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600');
+
 html,
 body {
   height: 100%;
   width: 100%;
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 0;
+  margin: 0;
+  font-family: 'Poppins', Arial, Helvetica, sans-serif;
+  font-weight: normal;
+  line-height: 1.3;
+  color: #a1a6bb;
+  background: #e4e7ef;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body.fontLoaded {
@@ -18,8 +28,34 @@ body.fontLoaded {
   min-width: 100%;
 }
 
-p,
-label {
-  font-family: Georgia, Times, 'Times New Roman', serif;
-  line-height: 1.5em;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: 'Poppins', Helvetica, Arial, sans-serif;
+  font-weight: 600;
+  font-style: normal;
+  color: #3a405b;
+  text-rendering: optimizeLegibility;
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  line-height: 1.4;
+}
+
+p {
+  font-size: inherit;
+  line-height: 1.6;
+  margin-bottom: 1rem;
+  text-rendering: optimizeLegibility;
+}
+
+section {
+  display: block;
+}
+
+.u-padding-v-xlarge {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
 }