How We Work component and stylistic changes

src/components/WorkStyle.js

@@ -0,0 +1,91 @@
+import React from 'react'
+
+import SectionIntro from './SectionIntro'
+
+import HQCode from '../images/high-quality-code.svg'
+import ContDelivery from '../images/continuous-delivery.svg'
+import ModernDevops from '../images/modern-devops.svg'
+import CodeReviews from '../images/code-reviews.svg'
+import UXResearch from '../images/ux-research.svg'
+import UnitIntegration from '../images/unit-and-integration-testing.svg'
+
+const WorkStyle = ({ ...props }) => (
+  <section className="container rounded overflow-hidden shadow-md hover:shadow-lg mx-auto text-center my-12 p-4 bg-white">
+    <SectionIntro
+      headline="How We Work"
+      text="We are serving everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions delivery great value and meet your specific business requirements"
+    />
+
+    <div className="mx-auto py-6 text-center border-grey-lighter">
+      <div className="flex flex-wrap pt-6 text-grey-darker">
+        <div className="w-full md:w-1/2 p-6 md:border-r-2 border-grey-light">
+          <img src={HQCode} alt="High Quality Code" />
+          <h3 className="text-xl my-2">High Quality Code</h3>
+          <p className="leading-normal">
+            We have deep understanding of software engineering & computer
+            science and we know what it takes to write high-quality, performant
+            and maintainable code. Clean, readable, robust code is something we
+            strive for.
+          </p>
+        </div>
+        <div className="w-full md:w-1/2 p-4">
+          <img src={ContDelivery} alt="High Quality Code" />
+          <h3 className="text-xl my-2">Continuous delivery</h3>
+          <p className="leading-normal">
+            Deploying new code to production should not take weeks. We know how
+            to build pipelines that allow code changes to be pushed to different
+            cloud environments automatically. Deploying to production is as easy
+            as pressing a button.
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
+        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
+          <img src={ModernDevops} alt="High Quality Code" />
+          <h3 className="text-xl my-2">Modern DevOps</h3>
+          <p className="leading-normal">
+            We like a "release early, release often" philosophy and to achieve
+            this we use modern DevOps tools like Docker. But DevOps is not only
+            about development and operations, it is also about quality.
+            Automated testing is part of our continuous delivery process,
+            deploying code with a high confidence level
+          </p>
+        </div>
+        <div className="w-full md:w-1/2 p-4">
+          <img src={CodeReviews} alt="High Quality Code" />
+          <h3 className="text-xl my-2">Code Reviews</h3>
+          <p className="leading-normal">
+            “Two Heads are Better Than One”. Code reviews are integrated part of
+            our process which makes catching bugs early before they event get
+            merged into the code. We make sure each change is reviewed by
+            multiple people before shipping it to the production environment.
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-wrap md:border-t-2 border-grey-light text-grey-darker text-grey-darker">
+        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-light">
+          <img src={UXResearch} alt="High Quality Code" />
+          <h3 className="text-xl my-2">UX testing/research</h3>
+          <p className="leading-normal">
+            We know it takes more than just an user video or a survey to
+            understand your user experience. We improve UX by watching how real
+            customers interact with your interface (websites, mobile devices,
+            prototypes). The research generates actionable findings to redesign
+            your site or application.
+          </p>
+        </div>
+        <div className="w-full md:w-1/2 p-4">
+          <img src={UnitIntegration} alt="High Quality Code" />
+          <h3 className="text-xl my-2">Unit & Integration testing</h3>
+          <p className="leading-normal">
+            Unit and integration testing are vital parts of the testing process.
+            Having automated unit & integration tests is the key prerequisite
+            for writing high-quality code at a fast pace.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+)
+
+export default WorkStyle