From 63b6f37e3f191d7c0f986f406209d344945b28f9 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Sat, 19 Jan 2019 11:56:05 +0530
Subject: [PATCH 1/4] Finished UI

---
 app/components/Contact/contact.scss |  80 +++++++++++++++
 app/components/Contact/index.js     |  29 ++++++
 app/containers/App/index.js         |   2 +
 app/global-styles.scss              |  44 ++++++++-
 package-lock.json                   | 147 ++++------------------------
 5 files changed, 171 insertions(+), 131 deletions(-)
 create mode 100644 app/components/Contact/contact.scss
 create mode 100644 app/components/Contact/index.js

diff --git a/app/components/Contact/contact.scss b/app/components/Contact/contact.scss
new file mode 100644
index 0000000..ca188b4
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/app/components/Contact/index.js b/app/components/Contact/index.js
new file mode 100644
index 0000000..7a97a42
--- /dev/null
+++ b/app/components/Contact/index.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import './contact.scss';
+
+const Contact = () => (
+  <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 action="">
+      <input
+        id="Name"
+        type="text"
+        autoComplete="name"
+        placeholder="Your Name"
+      />
+      <input
+        id="message"
+        type="email"
+        autoComplete="email"
+        placeholder="Your Email"
+      />
+      <textarea name="message" id="message" placeholder="Your Message" />
+      <button type="submit" className="button button--success button--block">
+        Send Message
+      </button>
+    </form>
+  </section>
+);
+
+export default Contact;
diff --git a/app/containers/App/index.js b/app/containers/App/index.js
index 5a84634..19c317b 100755
--- a/app/containers/App/index.js
+++ b/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>
diff --git a/app/global-styles.scss b/app/global-styles.scss
index 21db871..812514b 100755
--- a/app/global-styles.scss
+++ b/app/global-styles.scss
@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600');
+
 html,
 body {
   height: 100%;
@@ -5,7 +7,15 @@ body {
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  padding: 0;
+  margin: 0;
+  font-family: 'Poppins', Helvetica, Arial, sans-serif;
+  font-weight: normal;
+  line-height: 1.3;
+  color: #a1a6bb;
+  background: #e4e7ef;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body.fontLoaded {
@@ -23,3 +33,35 @@ 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;
+}
diff --git a/package-lock.json b/package-lock.json
index 7fe189f..1443401 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -111,6 +111,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
       "integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
+      "dev": true,
       "requires": {
         "@babel/types": "^7.0.0"
       }
@@ -972,25 +973,13 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.0.0.tgz",
       "integrity": "sha512-5tPDap4bGKTLPtci2SUl/B7Gv8RnuJFuQoWx26RJobS0fFrz4reUA3JnwIM+HVHEmWE0C1mzKhDtTp8NsWY02Q==",
+      "dev": true,
       "requires": {
         "esutils": "^2.0.2",
         "lodash": "^4.17.10",
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/is-prop-valid": {
-      "version": "0.6.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.6.8.tgz",
-      "integrity": "sha512-IMSL7ekYhmFlILXcouA6ket3vV7u9BqStlXzbKOF9HBtpUPMMlHU+bBxrLOa2NvleVwNIxeq/zL8LafLbeUXcA==",
-      "requires": {
-        "@emotion/memoize": "^0.6.6"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.6.6",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.6.6.tgz",
-      "integrity": "sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ=="
-    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1572,7 +1561,8 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true
     },
     "asn1": {
       "version": "0.2.4",
@@ -1942,6 +1932,7 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.8.0.tgz",
       "integrity": "sha512-PcrdbXFO/9Plo9JURIj8G0Dsz+Ct8r+NvjoLh6qPt8Y/3EIAj1gHGW1ocPY1IkQbXZLBEZZSRBAxJem1KFdBXg==",
+      "dev": true,
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.0.0",
         "lodash": "^4.17.10"
@@ -3621,11 +3612,6 @@
         }
       }
     },
-    "css-color-keywords": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
-      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
-    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -3715,16 +3701,6 @@
         }
       }
     },
-    "css-to-react-native": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.2.2.tgz",
-      "integrity": "sha512-w99Fzop1FO8XKm0VpbQp3y5mnTnaS+rtCvS+ylSEOK76YXO5zoHQx/QMB1N54Cp+Ya9jB9922EHrh14ld4xmmw==",
-      "requires": {
-        "css-color-keywords": "^1.0.0",
-        "fbjs": "^0.8.5",
-        "postcss-value-parser": "^3.3.0"
-      }
-    },
     "css-tree": {
       "version": "1.0.0-alpha.28",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
@@ -4563,14 +4539,6 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "~0.4.13"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5131,7 +5099,8 @@
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs="
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
     },
     "etag": {
       "version": "1.8.1",
@@ -5610,27 +5579,6 @@
         "bser": "^2.0.0"
       }
     },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "requires": {
-        "core-js": "^1.0.0",
-        "isomorphic-fetch": "^2.1.1",
-        "loose-envify": "^1.0.0",
-        "object-assign": "^4.1.0",
-        "promise": "^7.1.1",
-        "setimmediate": "^1.0.5",
-        "ua-parser-js": "^0.7.18"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        }
-      }
-    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -7566,11 +7514,6 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
-    "iconv-lite": {
-      "version": "0.4.19",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-      "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
-    },
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -8402,7 +8345,8 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
     },
     "is-string": {
       "version": "1.0.4",
@@ -8533,15 +8477,6 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "requires": {
-        "node-fetch": "^1.0.1",
-        "whatwg-fetch": ">=0.10.0"
-      }
-    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -10692,11 +10627,6 @@
         "mimic-fn": "^1.0.0"
       }
     },
-    "memoize-one": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-4.0.2.tgz",
-      "integrity": "sha512-ucx2DmXTeZTsS4GPPUZCbULAN7kdPT1G+H49Y34JjbQ5ESc6OGhVxKvb1iKhr9v19ZB9OtnHwNnhUnNR/7Wteg=="
-    },
     "memory-fs": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.2.0.tgz",
@@ -11201,15 +11131,6 @@
         "lower-case": "^1.1.1"
       }
     },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "^0.1.11",
-        "is-stream": "^1.0.1"
-      }
-    },
     "node-gyp": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@@ -13184,7 +13105,8 @@
     "postcss-value-parser": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
+      "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
+      "dev": true
     },
     "pre-commit": {
       "version": "1.2.2",
@@ -13304,14 +13226,6 @@
       "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==",
       "dev": true
     },
-    "promise": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-      "requires": {
-        "asap": "~2.0.3"
-      }
-    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -14836,7 +14750,8 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
+      "dev": true
     },
     "setprototypeof": {
       "version": "1.1.0",
@@ -15614,21 +15529,6 @@
       "integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
       "dev": true
     },
-    "styled-components": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.0.2.tgz",
-      "integrity": "sha512-VTNCmBLNx0OS2GRaYk0yRAnQVDBCGnnxGkR6+BCmkKVv9VgICO7bEn3UDjlnwCw8hgIyecMzVLOPl+p1zqUxog==",
-      "requires": {
-        "@emotion/is-prop-valid": "^0.6.8",
-        "babel-plugin-styled-components": ">= 1",
-        "css-to-react-native": "^2.2.2",
-        "memoize-one": "^4.0.0",
-        "prop-types": "^15.5.4",
-        "react-is": "^16.3.1",
-        "stylis": "^3.5.0",
-        "stylis-rule-sheet": "^0.0.10"
-      }
-    },
     "stylelint": {
       "version": "9.6.0",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-9.6.0.tgz",
@@ -16005,16 +15905,6 @@
         "postcss": "^6.0.14"
       }
     },
-    "stylis": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.3.tgz",
-      "integrity": "sha512-TxU0aAscJghF9I3V9q601xcK3Uw1JbXvpsBGj/HULqexKOKlOEzzlIpLFRbKkCK990ccuxfXUqmPbIIo7Fq/cQ=="
-    },
-    "stylis-rule-sheet": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
-      "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
-    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -16754,7 +16644,8 @@
     "to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
+      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=",
+      "dev": true
     },
     "to-object-path": {
       "version": "0.3.0",
@@ -16957,11 +16848,6 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
-    "ua-parser-js": {
-      "version": "0.7.18",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz",
-      "integrity": "sha512-LtzwHlVHwFGTptfNSgezHp7WUlwiqb0gA9AALRbKaERfxwJoiX0A73QbTToxteIAuIaFshhgIZfqK8s7clqgnA=="
-    },
     "uglify-js": {
       "version": "3.4.8",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.8.tgz",
@@ -18221,7 +18107,8 @@
     "whatwg-fetch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
+      "dev": true
     },
     "whatwg-mimetype": {
       "version": "2.2.0",

From 35902b2c05af9e9c4c9fe7c043a3997a8bb19ef1 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Sun, 20 Jan 2019 10:00:25 +0530
Subject: [PATCH 2/4] Added formik

---
 app/components/Contact/index.js |  82 +++++++++++---
 app/global-styles.scss          |   8 +-
 package-lock.json               | 188 ++++++++++++++++++++++++++++++--
 package.json                    |   4 +-
 4 files changed, 247 insertions(+), 35 deletions(-)

diff --git a/app/components/Contact/index.js b/app/components/Contact/index.js
index 7a97a42..d193886 100644
--- a/app/components/Contact/index.js
+++ b/app/components/Contact/index.js
@@ -1,29 +1,77 @@
 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 = () => (
+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 action="">
-      <input
-        id="Name"
-        type="text"
-        autoComplete="name"
-        placeholder="Your Name"
-      />
-      <input
-        id="message"
-        type="email"
-        autoComplete="email"
-        placeholder="Your Email"
-      />
-      <textarea name="message" id="message" placeholder="Your Message" />
+    <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>
+    </Form>
   </section>
 );
 
-export default Contact;
+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: (values, { resetForm }) => {
+    // Handle http request here
+    console.log(values);
+    setTimeout(resetForm(), 2000);
+  },
+})(Contact);
diff --git a/app/global-styles.scss b/app/global-styles.scss
index 812514b..1860804 100755
--- a/app/global-styles.scss
+++ b/app/global-styles.scss
@@ -9,7 +9,7 @@ body {
 body {
   padding: 0;
   margin: 0;
-  font-family: 'Poppins', Helvetica, Arial, sans-serif;
+  font-family: 'Poppins', Arial, Helvetica, sans-serif;
   font-weight: normal;
   line-height: 1.3;
   color: #a1a6bb;
@@ -28,12 +28,6 @@ body.fontLoaded {
   min-width: 100%;
 }
 
-p,
-label {
-  font-family: Georgia, Times, 'Times New Roman', serif;
-  line-height: 1.5em;
-}
-
 h1,
 h2,
 h3,
diff --git a/package-lock.json b/package-lock.json
index 1443401..3386a8d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1561,8 +1561,7 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
-      "dev": true
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
     "asn1": {
       "version": "0.2.4",
@@ -3552,6 +3551,15 @@
         "sha.js": "^2.4.8"
       }
     },
+    "create-react-context": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.3.tgz",
+      "integrity": "sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag==",
+      "requires": {
+        "fbjs": "^0.8.0",
+        "gud": "^1.0.0"
+      }
+    },
     "cross-env": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
@@ -4104,6 +4112,11 @@
       "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
       "dev": true
     },
+    "deepmerge": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
+      "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
+    },
     "default-require-extensions": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/default-require-extensions/-/default-require-extensions-1.0.0.tgz",
@@ -4539,6 +4552,14 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
+      }
+    },
     "end-of-stream": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@@ -5579,6 +5600,27 @@
         "bser": "^2.0.0"
       }
     },
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
+      "requires": {
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "1.2.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
+        }
+      }
+    },
     "fd-slicer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
@@ -5821,6 +5863,11 @@
         "readable-stream": "^2.0.4"
       }
     },
+    "fn-name": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/fn-name/-/fn-name-2.0.1.tgz",
+      "integrity": "sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc="
+    },
     "fontfaceobserver": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz",
@@ -5867,6 +5914,34 @@
         "mime-types": "^2.1.12"
       }
     },
+    "formik": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/formik/-/formik-1.4.2.tgz",
+      "integrity": "sha512-ZssZJmR15wEE+gepEUQQjNoyUIfpc+zwLFZiWNnC4ZolhBM7EQO7wjip+gIC9y/1k3c4tDeEite+CMCwk4ti4Q==",
+      "requires": {
+        "create-react-context": "^0.2.2",
+        "deepmerge": "^2.1.1",
+        "hoist-non-react-statics": "^2.5.5",
+        "lodash": "^4.17.11",
+        "lodash-es": "^4.17.11",
+        "prop-types": "^15.6.1",
+        "react-fast-compare": "^2.0.1",
+        "tiny-warning": "^1.0.2",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "hoist-non-react-statics": {
+          "version": "2.5.5",
+          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
+          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        },
+        "lodash-es": {
+          "version": "4.17.11",
+          "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.11.tgz",
+          "integrity": "sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q=="
+        }
+      }
+    },
     "forwarded": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
@@ -6960,6 +7035,11 @@
       "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
       "dev": true
     },
+    "gud": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
+      "integrity": "sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw=="
+    },
     "gulp-decompress": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/gulp-decompress/-/gulp-decompress-1.2.0.tgz",
@@ -7514,6 +7594,14 @@
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=",
       "dev": true
     },
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
+    },
     "icss-replace-symbols": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz",
@@ -8345,8 +8433,7 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
     "is-string": {
       "version": "1.0.4",
@@ -8477,6 +8564,15 @@
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
       "dev": true
     },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
+      }
+    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -11131,6 +11227,15 @@
         "lower-case": "^1.1.1"
       }
     },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
+      }
+    },
     "node-gyp": {
       "version": "3.8.0",
       "resolved": "https://registry.npmjs.org/node-gyp/-/node-gyp-3.8.0.tgz",
@@ -13226,6 +13331,14 @@
       "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
@@ -13251,6 +13364,11 @@
         "object-assign": "^4.1.1"
       }
     },
+    "property-expr": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-1.5.1.tgz",
+      "integrity": "sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g=="
+    },
     "proto-list": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/proto-list/-/proto-list-1.2.4.tgz",
@@ -13512,6 +13630,11 @@
         "scheduler": "^0.10.0"
       }
     },
+    "react-fast-compare": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
+      "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
+    },
     "react-helmet": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-5.2.0.tgz",
@@ -14750,8 +14873,7 @@
     "setimmediate": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=",
-      "dev": true
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
     "setprototypeof": {
       "version": "1.1.0",
@@ -16112,6 +16234,11 @@
       "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
       "dev": true
     },
+    "synchronous-promise": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.6.tgz",
+      "integrity": "sha512-TyOuWLwkmtPL49LHCX1caIwHjRzcVd62+GF6h8W/jHOeZUFHpnd2XJDVuUlaTaLPH1nuu2M69mfHr5XbQJnf/g=="
+    },
     "table": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz",
@@ -16578,6 +16705,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.2.tgz",
+      "integrity": "sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q=="
+    },
     "tinycolor2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
@@ -16799,8 +16931,7 @@
     "tslib": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
-      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ==",
-      "dev": true
+      "integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
     },
     "tty-browserify": {
       "version": "0.0.0",
@@ -16848,6 +16979,11 @@
       "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
       "dev": true
     },
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
+    },
     "uglify-js": {
       "version": "3.4.8",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.8.tgz",
@@ -18107,8 +18243,7 @@
     "whatwg-fetch": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q==",
-      "dev": true
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
     },
     "whatwg-mimetype": {
       "version": "2.2.0",
@@ -18400,6 +18535,39 @@
         "buffer-crc32": "~0.2.3",
         "fd-slicer": "~1.1.0"
       }
+    },
+    "yup": {
+      "version": "0.26.7",
+      "resolved": "https://registry.npmjs.org/yup/-/yup-0.26.7.tgz",
+      "integrity": "sha512-JrOZlPHNYTVerwrIS3x+F8/U/87lNNQU/ig3Y8b2dehZRhdegHVBr5AnUSB+kLLs3Gp9ne8ZybPtTGITKndu+w==",
+      "requires": {
+        "@babel/runtime": "7.0.0",
+        "fn-name": "~2.0.1",
+        "lodash": "^4.17.10",
+        "property-expr": "^1.5.0",
+        "synchronous-promise": "^2.0.5",
+        "toposort": "^2.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.0.0",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.0.0.tgz",
+          "integrity": "sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA==",
+          "requires": {
+            "regenerator-runtime": "^0.12.0"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.12.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
+          "integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
+        },
+        "toposort": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz",
+          "integrity": "sha1-riF2gXXRVZ1IvvNUILL0li8JwzA="
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 5e8655a..832e6bf 100644
--- a/package.json
+++ b/package.json
@@ -66,6 +66,7 @@
     "cross-env": "5.2.0",
     "express": "4.16.4",
     "fontfaceobserver": "2.0.13",
+    "formik": "^1.4.2",
     "history": "4.7.2",
     "hoist-non-react-statics": "3.0.1",
     "immutable": "3.8.2",
@@ -87,7 +88,8 @@
     "redux-saga": "0.16.2",
     "reselect": "4.0.0",
     "sanitize.css": "4.1.0",
-    "warning": "4.0.2"
+    "warning": "4.0.2",
+    "yup": "^0.26.7"
   },
   "devDependencies": {
     "@babel/cli": "7.1.2",

From 21fa5863dbcc15b8029045f9ecfde41a4fc1439e Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 21 Jan 2019 15:02:57 +0530
Subject: [PATCH 3/4] Remove setTimeout used to hide error message

---
 app/components/Contact/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/components/Contact/index.js b/app/components/Contact/index.js
index d193886..ec78a2a 100644
--- a/app/components/Contact/index.js
+++ b/app/components/Contact/index.js
@@ -69,9 +69,8 @@ export default withFormik({
       .required('Email is required'),
     message: Yup.string().required('Message is required'),
   }),
-  handleSubmit: (values, { resetForm }) => {
+  handleSubmit: values => {
     // Handle http request here
     console.log(values);
-    setTimeout(resetForm(), 2000);
   },
 })(Contact);

From 61513c808c08a1e6b79384651440f9b6241a47c2 Mon Sep 17 00:00:00 2001
From: ZeeshanTamboli <zeeshan.tamboli@gmail.com>
Date: Tue, 22 Jan 2019 10:40:44 +0530
Subject: [PATCH 4/4] Removed log and added TODO comment

---
 app/components/Contact/index.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/components/Contact/index.js b/app/components/Contact/index.js
index ec78a2a..e909230 100644
--- a/app/components/Contact/index.js
+++ b/app/components/Contact/index.js
@@ -69,8 +69,5 @@ export default withFormik({
       .required('Email is required'),
     message: Yup.string().required('Message is required'),
   }),
-  handleSubmit: values => {
-    // Handle http request here
-    console.log(values);
-  },
+  handleSubmit: () => {}, // TODO: Integrate Contact form API #13 ,
 })(Contact);