Changes in font, illustrations and various design tweaks

src/components/Card.js

@@ -15,7 +15,7 @@ const Card = ({ ...props }) => (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
       <div className="px-6 py-4">
-        <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
+        <h3 className="text-black font-bold text-3xl mb-2">{props.title}</h3>
         <p
           className="text-black-light text-base"
           dangerouslySetInnerHTML={{ __html: props.excerpt }}

src/components/InfoBox.js

@@ -3,7 +3,7 @@ import Link from 'gatsby-link'
 
 const InfoBox = ({ ...props }) => (
   <div className={`${props.classes}`}>
-    <h2 className="text-black my-2">{props.headline}</h2>
+    <h2 className={`${props.h2Classes} text-black my-2`}>{props.headline}</h2>
     <p className="text-black-light leading-normal text-lg font-light">
       {props.text}
     </p>

src/components/PageIntro.js

@@ -37,6 +37,7 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
+              h2Classes="text-4xl md:text-5xl"
               intro={this.props.intro}
               classes={`lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses

src/components/SectionIntro.js

@@ -18,7 +18,7 @@ const IntroDefault = ({ ...props }) => (
     )}
     {props.headline && (
       <h2
-        className={`${props.light ? headlineDark : ''}
+        className={`${props.light ? headlineDark : ''} ${props.h2Classes}
     text-black pt-1 pb-2`}
       >
         {props.headline}

src/components/Service.js

@@ -13,6 +13,7 @@ const Service = ({ ...props }) => (
       alt={`${props.title} agency`}
     />
     <InfoBox
+      h2Classes={props.h2Classes}
       classes="p-4 md:max-w-sm"
       headline={props.title}
       text={props.text}

src/components/WorkStyle.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import SectionIntro from './SectionIntro'
 
-import HQCode from '../images/high-quality-code.svg'
+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'
@@ -16,7 +16,7 @@ const WorkStyle = ({ ...props }) => (
       <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-xl my-2">High Quality Code</h3>
+          <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
@@ -30,7 +30,7 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Continuous delivery</h3>
+          <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
@@ -46,7 +46,7 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Modern DevOps</h3>
+          <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
@@ -57,7 +57,7 @@ const WorkStyle = ({ ...props }) => (
         </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-xl my-2">Code Reviews</h3>
+          <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
@@ -69,7 +69,7 @@ const WorkStyle = ({ ...props }) => (
       <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-xl my-2">UX testing/research</h3>
+          <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
@@ -84,7 +84,9 @@ const WorkStyle = ({ ...props }) => (
             className="max-w-10"
             alt="High Quality Code"
           />
-          <h3 className="text-xl my-2">Unit & Integration testing</h3>
+          <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