Add typewriter library, restructure and design

src/components/Header.css

@@ -1,5 +1,5 @@
 .menu_icon [class*='menu_bar-'] {
-  background: #fff;
+  background: #393990;
   -webkit-transform: rotate(0deg);
   transform: rotate(0deg);
   -webkit-transition: 0.2s ease all;

src/components/InfoBox.js

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

src/components/PageIntro.js

@@ -11,6 +11,7 @@ const PageIntro = ({ ...props }) => (
       } p-4`}
     >
       <div className="text-center lg:text-left">
+        {props.children}
         <SectionIntro
           intro={props.intro}
           classes={`lg:text-left lg:max-w-sm content-center ${

src/components/SectionIntro.js

@@ -27,7 +27,7 @@ const IntroDefault = ({ ...props }) => (
     {props.text && (
       <p
         className={`${props.light ? headlineDark : ''} 
-    font-light text-black-light leading-normal`}
+    font-light text-black-light text-lg leading-normal`}
       >
         {props.text}
       </p>

src/components/Service.js

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

src/components/WorkStyle.js

@@ -17,7 +17,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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
@@ -27,7 +27,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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
@@ -39,7 +39,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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.
@@ -50,7 +50,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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
@@ -62,7 +62,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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,
@@ -73,7 +73,7 @@ const WorkStyle = ({ ...props }) => (
         <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 font-light">
+          <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.