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 mx-auto text-center my-4 bg-white">
    <div className="mx-auto text-center border-grey-lighter">
      <div className="flex flex-wrap text-grey-darker">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <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-8">
          <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-lighter text-grey-darker text-grey-darker">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <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-8">
          <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-lighter text-grey-darker text-grey-darker">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <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-8">
          <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