Merge pull request #13 from irulabs/restyle

Restyle homepage
irulabs · Feb 19, 2018 · 0ec7436 · 0ec7436
2 parents 9c703f2 + 4486827
commit 0ec7436
Show file tree

Hide file tree

Showing 18 changed files with 186 additions and 41 deletions.
diff --git a/app/public/index.html b/app/public/index.html
@@ -21,7 +21,7 @@
     -->
     <title>Iru Labs</title>
   </head>
-  <body>
+  <body class="near-black">
     <form name="contactIru" netlify netlify-honeypot="bot-field" hidden>
       <input type="text" name="name" />
       <input type="email" name="email" />

diff --git a/app/src/assets/icons/checkbox.svg b/app/src/assets/icons/checkbox.svg
diff --git a/app/src/components/About.js b/app/src/components/About.js
@@ -0,0 +1,21 @@
+import React from 'react';
+
+const About = () => {
+    return (
+      <section className="ph4 ph6-m ph7-l pt6 pb5 bb b--near-white bw3 bg-near-white bg-yellow">
+
+      <h1 className="f1 fw6 tl dark-pink mb1 mw7-ns">
+        We build products to <span className="underline underline-yellow">delight</span> users<sup className="f2">*</sup>
+      </h1>
+
+      <p className="dark-pink f7 mt0">*<span className="i">disclaimer</span>: there&#x27;s more to it than code.</p>
+
+      <p className="mw7-ns pt3 mid-gray near-black fw6">
+      Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo.
+      </p>
+
+      </section>
+    )
+}
+
+export default About;
diff --git a/app/src/components/App.js b/app/src/components/App.js
@@ -8,13 +8,16 @@ import Clients from './Clients';
 import Work from './Work';
 import Contact from './Contact';
 
+import About from './About';
+import OurWay from './OurWay';
+
 class App extends Component {
   render() {
     return (
       <div>
-        <Nav />
-        <Landing />
-        <WhoWeAre />
+        <Nav position="fixed" borders="bb bw1 b--dark-pink"/>
+        <About />
+        <OurWay />
         <Clients />
         <Work />
         <Contact />

diff --git a/app/src/components/Berkeley.js b/app/src/components/Berkeley.js
@@ -10,7 +10,7 @@ class Berkeley extends Component {
   render() {
     return (
       <div>
-        <Nav color="bg-dark-green" position="fixed" />
+        <Nav color="bg-white" position="fixed" borders="bb bw1 b--dark-green"/>
         <div className="ph4 ph5-m ph7-l">
 
           <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
@@ -47,7 +47,6 @@ class Berkeley extends Component {
           </p>
 
         </div>
-        <Nav color="bg-dark-green" />
       </div>
     );
   }

diff --git a/app/src/components/BuildingExploratory.js b/app/src/components/BuildingExploratory.js
@@ -12,7 +12,7 @@ class BuildingExploratory extends Component {
     render() {
         return (
             <div>
-                <Nav color="bg-dark-magenta" position="fixed"/>
+                <Nav color="bg-white" position="fixed" borders="bb bw1 b--dark-magenta"/>
                 <div className="ph4 ph5-m ph7-l">
 
                     <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
@@ -49,7 +49,6 @@ class BuildingExploratory extends Component {
                     <p className="f4"> We like to work in an iterative way following the agile methodology and Islington Local List was no exception to this approach. We’ve worked very closely with The Building Exploratory to achieve the first version. Once it has been tested with users and critical feedback has been gathered, we will be working on ways to improve the experience further. </p>
 
                 </div>
-                <Nav color="bg-dark-magenta" />
             </div>
         );
     }

diff --git a/app/src/components/Card.js b/app/src/components/Card.js
@@ -4,12 +4,12 @@ import { Link } from 'react-router-dom';
 const Card = ({ width, image, client, blurb, link }) => {
   // whole card clicks through to case study
   return (
-    <div className={`${width} tl mb4 mb0-l`}>
+    <div className={`${width} tl mb4 mb0-l `}>
       <img alt="" src={ image } className="w-100" />
       <div className="ph1">
         <h3 className="b f4 h3 ma0 flex items-center">{ client }</h3>
         <p>{ blurb }</p>
-        <Link className="b link pointer underline black" to={ `/case-study/${link}` } ><p> Read More </p> </Link>
+        <Link className="b link pointer underline color-inherit" to={ `/case-study/${link}` } ><p> Read More </p> </Link>
       </div>
     </div>
   )

diff --git a/app/src/components/CheckboxItem.js b/app/src/components/CheckboxItem.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import checkbox from '../assets/icons/checkbox.svg';
+
+const CheckboxItem = ({ title, text}) => {
+  return (
+    <div className="flex items-center mw7-ns">
+      <img src={ checkbox } className="h2p5 pl4" alt="filled-in checkbox icon"/>
+      <div className="flex flex-column tl pl3">
+      <h4 className="mb1">{ title }</h4>
+
+      <p className="mt0">{ text }</p>
+      </div>
+    </div>
+  )
+}
+
+
+export default CheckboxItem;
diff --git a/app/src/components/Clients.js b/app/src/components/Clients.js
@@ -6,20 +6,20 @@ import dwyl from '../assets/clients/dwyl.png';
 
 const Clients = () => {
   return (
-    <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="Berkeley Homes" src={berkeley} />
+    <section className="ph4 ph6-l pv4 tc bg-near-white">
+      <h2 className="mt0 underline underline-yellow dark-pink">You&#x27;re in good company</h2>
+      <div className="flex justify-between flex-wrap">
+        <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
+          <img alt="Berkeley Homes" className="h2 h2p5-ns" src={berkeley} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="The Building Exploratory" src={buildingExploratory} />
+        <div className="w-50 w-10-ns tc flex items-center justify-center ph1 mv2">
+          <img alt="dwyl" className="h2 h2p5-ns" src={dwyl} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="City University London" src={city} />
+        <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
+          <img alt="The Building Exploratory" className="h1 h2-ns" src={buildingExploratory} />
         </div>
-        <div className="h2 w-10 tc flex items-center justify-center">
-          <img alt="dwyl" className="w-70" src={dwyl} />
+        <div className="w-50 w-25-ns tc flex items-center justify-center ph1 mv2">
+          <img alt="City University London" className="h2 h2p5-ns" src={city} />
         </div>
       </div>
     </section>

diff --git a/app/src/components/Contact.js b/app/src/components/Contact.js
@@ -64,9 +64,11 @@ class Contact extends Component {
     console.log(this.state.emailError, 'error')
     console.log(this.state.isSubmitted, 'isSubmitted')
     return (
-      <section className="ph4 ph6-m ph7-l pv5 bg-black">
+      <section className="ph4 ph6-m ph7-l pv5 bg-dark-pink vh-100">
+      <h2 className="underline underline-yellow white tc">Get in Touch</h2>
+
       { !this.state.isSubmitted &&
-          <form onSubmit={this.handleSubmit} className="flex flex-wrap justify-between">
+          <form onSubmit={this.handleSubmit} className="flex flex-wrap justify-between mt5">
             <Input
               width="w-45"
               label="name"
@@ -93,19 +95,20 @@ class Contact extends Component {
               placeholder="let us know how we can help!" />
 
             <div className="flex flex-column items-end w-100">
-              { this.state.emailError &&
-                <div className="white">Please enter a valid email</div>
-              }
               <button
-                className="bg-white f4 tc w-30 pa3 bn pointer outline-0"
+                className="f4 tc w-30 pa3 pointer bg-dark-pink yellow ba bw1 b--yellow outline-0"
                 type="submit">
                   Submit
               </button>
+
+              { this.state.emailError &&
+                <div className="white pv2">Please enter a valid email</div>
+              }
             </div>
           </form>
       }
       { this.state.isSubmitted &&
-        <div className="tc white pv6">Thanks for your message, we will be in touch soon.</div>
+        <div className="tc white pv6 f3">Thanks for your message, we&#x27;ll be in touch soon.</div>
       }
 
       </section>

diff --git a/app/src/components/Input.js b/app/src/components/Input.js
@@ -1,10 +1,10 @@
 import React from 'react';
 
 const Input = ({ inputType, label, name, value, handleInput, placeholder, width }) => {
-    const inputStyle = "bb outline-0 bw1 br-0 bl-0 bt-0 b--white bg-black white pv2"
+    const inputStyle = "bb outline-0 bw1 br-0 bl-0 bt-0 b--yellow bg-dark-pink white pv2"
     return (
         <div className={`flex flex-column white mb4 ${width}`}>
-            <label htmlFor={label} className="f7 mb2"> { label } </label>
+            <label htmlFor={label} className="f7 mb2 b"> { label } </label>
             { inputType === 'input' ?
             <input
                 className={ `${inputStyle}`}
@@ -15,7 +15,7 @@ const Input = ({ inputType, label, name, value, handleInput, placeholder, width
                 onChange={(e) => { handleInput(label, e.target.value) }} />
             :
             <textarea
-                className={`text-area overflow-hidden ${inputStyle}`}
+                className={`text-area overflow-hidden outline-0 ${inputStyle}`}
                 id={label}
                 name={ name }
                 value={value}

diff --git a/app/src/components/Nav.js b/app/src/components/Nav.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Nav = ({color = "bg-black", position = "inherit"}) => {
+const Nav = ({color="bg-white", position = "inherit", borders="bn"}) => {
   return (
-    <nav className={ `${position} w-100 ${color} white tl pa1 ph3` }>
-      <Link className="link white" to="/">
+    <nav className={ `${position} ${borders} w-100 z-max ${color} white tl ph3` }>
+      <Link className="link near-black" to="/">
         <h3 className="f3 ma3">iru labs</h3>
       </Link>
     </nav>

diff --git a/app/src/components/OurWay.js b/app/src/components/OurWay.js
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import CheckboxItem from './CheckboxItem';
+
+const OurWay = () => {
+  return (
+    <section className="ph4 ph6-m ph7-l pv5 bb b--near-white bw3">
+      <h2 className="underline underline-yellow dark-pink tl">Our Way</h2>
+
+      <div className="flex flex-column">
+
+        <CheckboxItem
+          title="Crafted"
+          text="How we build it is important. Taking care early on means that we build products which are scalable by default. As your userbase grows, the code we crafted for you will serve you well."
+          />
+
+        <CheckboxItem
+          title="Modern Tech"
+          text="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."
+          />
+
+        <CheckboxItem
+          title="Iterate by Default"
+          text="We build what&#x27;s needed first, then iterate based on data. This is only possible by developers and app owners communicating frequently and directly. That's why you'll never have to go through an account manager to talk about your product."
+          />
+      </div>
+    </section>
+  )
+}
+
+
+export default OurWay;
diff --git a/app/src/components/Quodl.js b/app/src/components/Quodl.js
@@ -12,7 +12,7 @@ class Quodl extends Component {
   render() {
     return (
       <div>
-        <Nav color="bg-light-orange" position="fixed" />
+        <Nav color="bg-white" position="fixed" borders="bb bw1 b--light-orange" />
         <div className="ph4 ph5-m ph7-l">
 
           <h3 className="tc mt0 pt6"> CLIENT WORK </h3>
@@ -73,7 +73,6 @@ class Quodl extends Component {
           </p>
 
         </div>
-        <Nav color="bg-light-orange" />
       </div>
     );
   }

diff --git a/app/src/components/Work.js b/app/src/components/Work.js
@@ -9,7 +9,7 @@ import berkeley from '../assets/berkeley/berkeley-mobile.png';
 const Work = () => {
   return (
     <section className="ph4 ph6-m ph7-l pv5 tc">
-      <h3>Our Work</h3>
+      <h2 className="underline underline-yellow dark-pink">Our Work</h2>
       <div className="flex-ns flex-wrap justify-between-ns">
         <Card
           width="w-100 w-45-ns w-30-xl"

diff --git a/app/src/css/app.css b/app/src/css/app.css
@@ -22,7 +22,9 @@ h6 {
   font-family: 'Bungee', sans-serif;
 }
 
-
+.h2p5 {
+  height: 3rem;
+}
 .h4p5 {
   height: 10rem;
 }
@@ -38,10 +40,15 @@ h6 {
   background: #42A276;
 }
 
-
+.b--dark-magenta {
+  border-color: #7c2069;
+}
 .b--light-orange {
   border-color: #e99c1e;
 }
+.b--dark-green {
+  border-color: #42A276;
+}
 
 .f0 {
   font-size: 4rem;
@@ -51,25 +58,37 @@ h6 {
   width: 45%;
 }
 
+/* NS QUERIES */
 @media screen and (min-width: 48em) {
   .w-45-ns {
     width: 45%;
   }
+  .h2p5-ns {
+    height: 3rem;
+  }
 }
 
+/* M QUERIES */
 @media screen and (min-width: 48em) and (max-width: 64em){
   .w-45-m {
     width: 45%;
   }
+  .h2p5-m {
+    height: 3rem;
+  }
 }
 
+/* L QUERIES */
 @media screen and (min-width: 64em){
   .w-45-l {
     width: 45%;
   }
+  .h2p5-l {
+    height: 3rem;
+  }
 }
 
-/* extra large screen: 1280px */
+/* CUSTOM: extra large screen: 1280px */
 @media screen and (min-width: 80em){
   .w-45-xl {
     width: 45%;
@@ -84,3 +103,22 @@ h6 {
   resize: none;
   height: 5.5rem;
 }
+
+.underline-yellow {
+   text-decoration-color: #FFD700;
+}
+
+/* placeholder text */
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #F4F4F4;
+    opacity: 1; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+    color: #F4F4F4;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+    color: #F4F4F4;
+}