set up netlify redirect

horizontal padding of sections
relates #10

app/public/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

app/src/components/Berkeley.js

@@ -10,12 +10,12 @@ class Berkeley extends Component {
   render() {
     return (
       <div>
-        <Nav color="bg-dark-green" postion="fixed" />
-        <div className="ph7-l">
+        <Nav color="bg-dark-green" position="fixed" />
+        <div className="ph4 ph5-m ph7-l">
 
           <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
           <h1 className="f1 tc"> Berkeley Homes </h1>
-          <p className="f4 tc"> An app to encourage reporting of positive and negative safety behaviours on construction sites </p>
+          <p className="f4 tc"> Encouraging reporting of positive and negative safety behaviours on construction sites </p>
           <img src={berkeleyMobile} alt="design-images" />
 
           <div className="flex justify-center items-center">
@@ -32,18 +32,18 @@ class Berkeley extends Component {
             <h3 className="pl2">Implementation </h3>
           </div>
           <p className="f4">
-            With the knowledge that current methods weren’t working, we knew that in order to build an effective solution we needed to understand _why_ builders weren’t using the current system. During the research phase, we discovered that the main reason for the low response rate was the amount of detail required from the builder in a language which was often not their native tongue.
+            With the knowledge that current methods weren’t working, we knew that in order to build an effective solution we needed to understand <span className="b">why</span> builders weren’t using the current system. During the research phase, we discovered that the main reason for the low response rate was the amount of detail required from the builder in a language which was often not their native tongue.
           </p>
           <p className="f4">
-            Once we understood the issue, we were able to architect a solution which minimised the steps that builders had to take to successfully report an event. We also realised that the forms were usually filled out once the builder was off-site meaning that it was sometimes hard to get accurate information about _precisely_ where on site the event happened. We solved this by creating a feature which allowed the user to provide visual information about the location and encourage reporting on the spot. All this reporting data needed to be reviewed by the safety manager who could take the necessary follow-up action, and so we set up a system of email alerts to the relevant parties when a new report is submitted.
+            Once we understood the issue, we were able to architect a solution which minimised the steps that builders had to take to successfully report an event. We also realised that the forms were usually filled out once the builder was off-site meaning that it was sometimes hard to get accurate information about precisely where on site the event happened. We solved this by creating a feature which allowed the user to provide visual information about the location and encourage reporting on the spot. All this reporting data needed to be reviewed by the safety manager who could take the necessary follow-up action, and so we set up a system of email alerts to the relevant parties when a new report is submitted.
           </p>
 
           <div className="flex justify-center items-center">
             <img className="w2" src={success} alt="success" />
             <h3 className="pl2">Project Outcome </h3>
           </div>
           <p className="f4">
-            The results of the digital product became visible in a rapid space of time: within just two weeks of the product going live. The number of responses increased significantly and most of the responses were in the form of an image, showing how sometimes we can collect the information we need in unexpected ways. Lowering the barrier to entry and input fields has led to a more connected environment for Goodmans Fields in which all members on site contribute to maintaining a safe environment.
+            The results of the digital product became visible within just two weeks of the product going live. The number of responses increased significantly and most of the responses were in the form of an image, showing how sometimes we can collect the information we need in unexpected ways. Lowering the barrier to entry and input fields has led to a more connected environment for Goodmans Fields in which all members on site contribute to maintaining a safe environment.
           </p>
 
         </div>
@@ -53,4 +53,4 @@ class Berkeley extends Component {
   }
 }
 
-export default Berkeley;
+export default Berkeley;

app/src/components/BuildingExploratory.js

@@ -12,8 +12,8 @@ class BuildingExploratory extends Component {
     render() {
         return (
             <div>
-                <Nav color="bg-dark-magenta" postion="fixed"/>
-                <div className="ph7-l">
+                <Nav color="bg-dark-magenta" position="fixed"/>
+                <div className="ph4 ph5-m ph7-l">
 
                     <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
                     <h1 className="f1 tc"> The Building Exploratory </h1>
@@ -25,7 +25,7 @@ class BuildingExploratory extends Component {
                       <h3 className="pl2 pt2">Project Goal </h3>
                     </div>
                     <p className="f4">
-                    The Building Exploratory came to us with a need to build an interactive app to showcase data from their Islington Local List project. During the project, Volunteers collected and documented information about 2000 locally listed buildings in the London Borough of Islington.
+                    The Building Exploratory came to us with a need to build an interactive app to showcase data from their Islington Local List project. During the project, volunteers collected and documented information about 2000 locally listed buildings in the London Borough of Islington.
                     </p>
                     <p className="f4">
                     Our task was to build an app which would present this information in an appealing way to encourage engagement by the wider community and have the content dynamically update when new data is added to The Building Exploratory’s databank.
@@ -55,4 +55,4 @@ class BuildingExploratory extends Component {
     }
 }
 
-export default BuildingExploratory;
+export default BuildingExploratory;

app/src/components/Clients.js

@@ -7,23 +7,20 @@ import emf from '../assets/clients/emf.png';
 
 const Clients = () => {
   return (
-    <section className="ph7-l pv2 tc">
+    <section className="ph4 ph7-l pv2 tc">
       <h3 className="mt0">You&#x27;re in good company</h3>
       <div className="flex justify-between">
         <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="" src={berkeley} />
+          <img alt="Berkeley Homes" src={berkeley} />
         </div>
         <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="" src={buildingExploratory} />
+          <img alt="The Building Exploratory" src={buildingExploratory} />
         </div>
         <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="" src={city} />
+          <img alt="City University London" src={city} />
         </div>
         <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="" className="w-70" src={dwyl} />
-        </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="" src={emf} />
+          <img alt="dwyl" className="w-70" src={dwyl} />
         </div>
       </div>
     </section>

app/src/components/Contact.js

@@ -64,7 +64,7 @@ class Contact extends Component {
     console.log(this.state.emailError, 'error')
     console.log(this.state.isSubmitted, 'isSubmitted')
     return (
-      <section className="ph7-l pv5 bg-black">
+      <section className="ph4 ph6-m ph7-l pv5 bg-black">
       { !this.state.isSubmitted &&
           <form onSubmit={this.handleSubmit} className="flex flex-wrap justify-between">
             <Input
@@ -74,7 +74,7 @@ class Contact extends Component {
               inputType="input"
               value={this.state.name}
               handleInput={this.handleChange}
-              placeholder="Jessica Salmon" />
+              placeholder="your name" />
             <Input
               width="w-45"
               label="email"

app/src/components/Landing.js

@@ -2,10 +2,9 @@ import React from 'react';
 
 const Landing = () => {
     return (
-        <section className="ph7-l bg-black vh-75 cover bg-center flex items-center justify-center">
-          <h1 className="white tc f0">It takes more than code to build a great product</h1>
-
-      </section>
+        <section className="ph4 ph7-l bg-black flex items-center justify-center">
+          <h1 className="white tc mv7-l f0 f1-ns">It takes more than code to build a great product</h1>
+        </section>
     )
 }
 

app/src/components/Nav.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Nav = ({color = "bg-black", postion = "inherit"}) => {
+const Nav = ({color = "bg-black", position = "inherit"}) => {
   return (
-    <nav className={ `${postion} ph7-l w-100 ${color} white tl pa1 ph3` }>
+    <nav className={ `${position} w-100 ${color} white tl pa1 ph3` }>
       <Link class="link white" to="/">
         <h3 className="f3 ma3">iru labs</h3>
       </Link>

app/src/components/Quodl.js

@@ -12,12 +12,13 @@ class Quodl extends Component {
   render() {
     return (
       <div>
-        <Nav color="bg-light-orange" postion="fixed" />
-        <div className="ph7-l">
+        <Nav color="bg-light-orange" position="fixed" />
+        <div className="ph4 ph5-m ph7-l">
 
           <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
           <h1 className="f1 tc"> Quodl </h1>
-          <p className="f4 tc"> A Single Page app showcasing locally listed buildings in London Borough of Islington </p>
+          <p className="f4 tc"> A real-time quiz app to increase
+          in-lecture engagement and support learning </p>
 
           <img src={quodlDesktopMobile} alt="design-images" />
 
@@ -39,7 +40,7 @@ class Quodl extends Component {
               <h3> Lecturer </h3>
               <p> Ability to set up multiple modules </p>
               <p> Run Live quizzes </p>
-              <p> Set up Gamification with medals and trophies </p>
+              <p> Set up gamification with medals and trophies </p>
               <p> Review student progress, keeping track of how individuals are getting on </p>
             </div>
             <div className="w-40 ba bw1 b--light-orange mh2 ph2">
@@ -58,7 +59,7 @@ class Quodl extends Component {
             <h3 className="pl2">Implementation </h3>
           </div>
           <p className="f4">
-            One of the challenges during development was to build a product that satisfies the needs of both lecturers and students. Quizzes on the app run in real-time, enabling lecturers to integrate test-taking into their lectures.  This added an extra layer of complexity and we focused on using websockets with socket.io to support real-time interactions. The app became so well-adopted that City University returned to us to work on optimising the real time experience when the usage boomed from the early-adoption figures of around 50 to 250 simultaneous users.We love it when products we’ve built are successful enough to warrant our working on supporting a growing user base!
+            One of the challenges during development was to build a product that satisfies the needs of both lecturers and students. Quizzes on the app run in real-time, enabling lecturers to integrate test-taking into their lectures.  This added an extra layer of complexity and we focused on using websockets with socket.io to support real-time interactions. The app became so well-adopted that City University returned to us to work on optimising the real time experience when the usage boomed from the early-adoption figures of around 50 to 250 simultaneous users. We love it when products we’ve built are successful enough to warrant our working on supporting a growing user base!
           </p>
           <img className="pv4" src={quodlMobileOnly} alt="design-images" />
           <img src={quodlDesktop2} alt="design-images" />
@@ -78,4 +79,4 @@ class Quodl extends Component {
   }
 }
 
-export default Quodl;
+export default Quodl;

app/src/components/WhoWeAre.js

@@ -5,8 +5,8 @@ import modernTech from '../assets/icons/modern-tech.svg';
 import notLockedIn from '../assets/icons/locked-in.svg';
 const WhoWeAre = () => {
   return (
-    <section className="ph7-l pv5">
-      <h3 className="">We build products with care</h3>
+    <section className="ph4 ph6-m ph7-l pv5">
+      <h3>We build products with care</h3>
       <p>
         <span className="underline bungee">Care.</span> &nbsp;
         In what we work on. In how we build it. Building a product is a
@@ -25,12 +25,12 @@ const WhoWeAre = () => {
           <p className="tc">Crafted</p>
           <p>How we build it is important. Taking care early on means that we
           can build products which are scalable by default. As your
-          userbase grows, the code we crafted for you will still serve you well.</p>
+          userbase grows, the code we crafted for you will serve you well.</p>
         </div>
         <div className="flex flex-column w-30-ns">
           <img src={modernTech} className="h4" alt="Pacman ghost icon" />
           <p className="tc">Modern Tech</p>
-          <p>We love coding, so we are on top of the ever-changing landscape of
+          <p>We love coding, so we&#x27;re on top of the ever-changing landscape of
           web development. We build products in the best way possible, using tech
           that is appropriate for the job.</p>
         </div>

app/src/components/Work.js

@@ -7,7 +7,7 @@ import placeholder2 from '../assets/placeholder/2.jpg';
 
 const Work = () => {
   return (
-    <section className="ph7-l pv5 tc">
+    <section className="ph4 ph6-m ph7-l pv5 tc">
       <h3>Our Work</h3>
       <div className="flex-ns justify-between-ns">
         <Card