old-v2-frontend/src/components/WorkStyle.js

import React from 'react'

import SectionIntro from './SectionIntro'

import HQCode from '../images/coder-awards.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 border-bottom-saburly mx-auto my-4 bg-white">
    {props.children}
    <div className="mx-auto text-center border-grey-lighter">
      <div className="flex flex-wrap text-black">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <img src={HQCode} className="max-w-10" alt="High Quality Code" />
          <h3 className="text-2xl saburly-color my-2">High Quality Code</h3>
          <p className="leading-normal font-light text-lg">
            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}
            className="max-w-10"
            alt="High Quality Code"
          />
          <h3 className="text-2xl saburly-color my-2">Continuous delivery</h3>
          <p className="leading-normal font-light text-lg">
            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-black">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <img
            src={ModernDevops}
            className="max-w-10"
            alt="High Quality Code"
          />
          <h3 className="text-2xl saburly-color my-2">Modern DevOps</h3>
          <p className="leading-normal font-light text-lg">
            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} className="max-w-10" alt="High Quality Code" />
          <h3 className="text-2xl saburly-color my-2">Code Reviews</h3>
          <p className="leading-normal font-light text-lg">
            “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-black">
        <div className="w-full md:w-1/2 p-8 md:border-r-2 border-grey-lighter">
          <img src={UXResearch} className="max-w-10" alt="High Quality Code" />
          <h3 className="text-2xl saburly-color my-2">UX testing/research</h3>
          <p className="leading-normal font-light text-lg">
            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}
            className="max-w-10"
            alt="High Quality Code"
          />
          <h3 className="text-2xl saburly-color my-2">
            Unit & Integration testing
          </h3>
          <p className="leading-normal font-light text-lg">
            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