Stylistic changes and new illustrations

src/pages/about.js

@@ -7,7 +7,7 @@ const AboutPage = () => (
   <div>
     <PageIntro
       intro="About Us"
-      headline="Founded By Software Engineers"
+      headline="Founded by software engineers"
       text="focused on creating solutions that make valuable impact"
       sectionClasses="mb-16 lg:mb-8"
     />

src/pages/contact.js

@@ -5,17 +5,52 @@ import SectionIntro from '../components/SectionIntro'
 
 const ContactPage = () => (
   <div>
-  <PageIntro intro="Contact" headline="Let's Connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
+  <PageIntro intro="Contact" headline="Let's connect" text="and build something awesome together" sectionClasses="mb-16 lg:mb-8" />
 
   <section className="container mx-auto my-12 p-4">
-        <SectionIntro
-          headline="Use the form below or any of the alternatives to connect"
-        />
+    <SectionIntro
+      headline="Use the form below or any of the alternatives to connect"
+    />
+
+    <p>Request a Proposal</p>
+    <p>Request a Video Call</p>
+    <p>Old-fashioned phone calls work as well: - +...</p>
+  </section>
+
+  <form className="container mx-auto max-w-md p-6">
+    <div className="flex flex-wrap -mx-3">
+
+      <div className="w-full md:w-1/2 p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          Name
+        </label>
+        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-first-name" type="text" placeholder="Jane" required />
+      </div>
+
+      <div className="w-full md:w-1/2 p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          E-mail
+        </label>
+        <input className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="email" placeholder="Doe" required />
+      </div>
+
+      <div className="w-full p-3">
+        <label className="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-first-name">
+          Message
+        </label>
+        <textarea className="appearance-none block w-full bg-grey-lightest text-grey-darker border rounded py-3 px-4" id="grid-last-name" type="text" placeholder="Doe" required />
+      </div>
+
+    </div>
+
+    <div className="w-full">
+      <button className="w-full shadow bg-purple hover:bg-purple-light text-white font-bold py-2 px-4 rounded" type="submit">
+        Send Mail
+      </button>
+    </div>
+
+</form>
 
-        <p>Request a Proposal</p>
-        <p>Request a Video Call</p>
-        <p>Old-fashioned phone calls work as well: - +...</p>
-      </section>
   </div>
 )
 

src/pages/index.js

@@ -8,10 +8,10 @@ import PageIntro from '../components/PageIntro'
 import InfoBox from '../components/InfoBox'
 import Technologies from '../components/Technologies'
 
-import ImgIntro from '../images/software-consulting.svg'
-import ImgDesign from '../images/ux-ui-design-agency.svg'
-import ImgFullstack from '../images/fullstack-web-development-agency.svg'
-import ImgMobile from '../images/mobile-development-agency.svg'
+import ImgIntro from '../images/web-development-agency.svg'
+import ImgDesign from '../images/ux-ui-design.svg'
+import ImgFullstack from '../images/fullstack-web-development.svg'
+import ImgMobile from '../images/mobile-development.svg'
 
 import LogoIBM from '../images/logo-ibm-color.svg'
 import LogoRicoh from '../images/logo-ricoh-color.svg'
@@ -40,36 +40,27 @@ const IndexPage = ({ ...props }) => (
         />
       </section>
 
-      <section className="bg-saburly-indigolight relative">
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400.8 96.4">
-          <title>bg-saburly-white</title>
-          <path
-            d="M417.7,96.4C655.2,93.3,743.6,0,983.1,0h417.7V96.4H417.7Z"
-            transform="translate(0 0)"
-            style={{ fill: '#fff' }}
-          />
-        </svg>
+      <section className="relative">
+        <Service
+          img={ImgDesign}
+          title="User Experience (UX) Design"
+          text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
+        />
 
         <Service
+          reversed
           img={ImgFullstack}
           title="Full-Stack Web Development"
           text="At Saburly, we are experts in modern web development using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
         />
 
         <Service
-          reversed
           img={ImgMobile}
           imgClasses="max-h-sm"
           title="Mobile App Development"
           text="We have what it takes to develop competitive iOS and Android applications using both native languages and hybrid solutions. Solutions for iOS are built with Swift & Objective-C and Android solutions are built with Java & Kotlin. We love using technologies like React Native to build cross-platform native apps."
         />
 
-        <Service
-          img={ImgDesign}
-          title="User Experience Design"
-          text="Our approach is simple: focus on how users might use the product in the best way possible. We offer UX and interface design for all screens and devices. The solutions are usually shaped through iterative processes of research, prototyping and testing."
-        />
-
         <div className="py-8 text-center lg:flex justify-center">
           <Button
             standard

src/pages/services.js

@@ -10,7 +10,7 @@ const ServicesPage = () => (
   <div>
     <PageIntro
       intro="Services"
-      headline="Experienced Digital Agency"
+      headline="Experienced digital agency"
       text="with a mission is to make our clients stand out"
       sectionClasses="mb-16 lg:mb-8"
     />
@@ -19,7 +19,7 @@ const ServicesPage = () => (
       <SectionIntro
         classes="text-center max-w-lg mx-auto"
         headline="Software Development Services"
-        text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
+        text="We are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we deliver top-notch software quality. Our flexible agile development processes ensure high productivity and we know how to balance between cost, time and quality."
       />
       <div className="md:flex mt-4">
         <div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
@@ -77,7 +77,7 @@ const ServicesPage = () => (
     <div className="bg-indigo-darkest text-center py-4 lg:px-4">
       <Link className="no-underline text-white" to="/contact">
         <div
-          className="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
+          className="p-2 bg-saburly-dark items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
           role="alert"
         >
           <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">