Adding illustration, stylistic changes

package.json

@@ -14,7 +14,8 @@
     "gatsby-transformer-sharp": "^1.6.27",
     "react-helmet": "^5.2.0",
     "react-responsive-mixin": "^0.4.0",
-    "slideout": "^1.0.1"
+    "slideout": "^1.0.1",
+    "tiny-slider-react": "^0.3.7"
   },
   "keywords": [
     "gatsby"

src/components/Card.js

@@ -12,7 +12,7 @@ const Card = ({ ...props }) => (
         <img className="w-full" src={ImgSprint} alt="Sprint Work" />
       )}
     </Link>
-    <div className="px-6 py-4 bg-white">
+    <div className="px-6 py-4">
       <Link className="no-underline" to={props.url}>
         <h3 className="text-black font-bold text-xl mb-2">{props.title}</h3>
       </Link>

src/components/Header.css

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

src/components/SectionIntro.js

@@ -32,6 +32,7 @@ const IntroDefault = ({ ...props }) => (
         {props.text}
       </p>
     )}
+    {props.children}
   </div>
 )
 

src/pages/services.js

@@ -6,21 +6,52 @@ import SectionIntro from '../components/SectionIntro'
 import WorkStyle from '../components/WorkStyle'
 import Technologies from '../components/Technologies'
 
+import FullstackDev from '../images/fullstack-web-development.svg'
+
 const ServicesPage = () => (
   <div>
     <PageIntro
       intro="Services"
-      headline="Experienced digital agency"
+      headline="Creative digital agency"
       text="with a mission is to make our clients stand out"
       sectionClasses="mb-16 lg:mb-8"
     />
 
+    <SectionIntro
+      classes="text-center max-w-lg mx-auto"
+      intro="Agile practitioners"
+      headline="Software Development Services"
+      text="Keeping track of emerging technologies is important to us so that we can deliver forward-thinking solutions. Our flexible agile development processes ensure high productivity and makes it easier to balance between cost, time and quality."
+    />
+
+    <section>
+      <div className="container mx-auto">
+        <div>
+          <SectionIntro
+            classes="max-w-lg"
+            headline="Full-stack software development"
+            text="We offer full-cycle web development services for the connected
+          world. Our talented developers work with popular languages and are
+          up to speed with cutting edge trends. 
+          The solutions provided are both for custom web development solutions and
+          extensions for third party solutions."
+          >
+            <p className="font-light leading-normal opacity-70 mt-4">
+              Building competitive applications these days is challenging. We
+              have what it takes for both native languages and hybrid solutions.
+              Mobile solutions for iOS are built with Swift & Objective-C and
+              Android solutions are built with Java & Kotlin. We love using
+              technologies like React Native and Electron to build
+              cross-platform apps.
+            </p>
+          </SectionIntro>
+          <Technologies />
+        </div>
+        <img src={FullstackDev} alt="Ricoh Logo" />
+      </div>
+    </section>
+
     <section className="container mx-auto mt-12 p-4">
-      <SectionIntro
-        classes="text-center max-w-lg mx-auto"
-        headline="Software Development Services"
-        text="We are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we deliver top-notch software quality. Our flexible agile development processes ensure high productivity and we know how to balance between cost, time and quality."
-      />
       <div className="md:flex mt-4">
         <div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
           <h3 className="text-l my-2 text-white">Modern Web Development</h3>

src/styles/general.css

@@ -1,13 +1,3 @@
-html {
-  overflow: hidden;
-  height: 100%;
-}
-
-body {
-  overflow: scroll;
-  height: 100%;
-}
-
 .bg-saburly-indigo {
   background: rgb(69, 76, 183);
   background: linear-gradient(

yarn.lock

@@ -9148,6 +9148,12 @@ timers-browserify@^2.0.2, timers-browserify@^2.0.4:
   dependencies:
     setimmediate "^1.0.4"
 
+tiny-slider-react@^0.3.7:
+  version "0.3.7"
+  resolved "https://registry.yarnpkg.com/tiny-slider-react/-/tiny-slider-react-0.3.7.tgz#97ba77f330ad12fc0a02c1f4737bbc9f66ba07be"
+  dependencies:
+    ventura-slider "^1.0.7"
+
 tinycolor2@^1.1.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
@@ -9534,6 +9540,10 @@ vendors@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/vendors/-/vendors-1.0.2.tgz#7fcb5eef9f5623b156bcea89ec37d63676f21801"
 
+ventura-slider@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/ventura-slider/-/ventura-slider-1.0.7.tgz#8c11d7b831da0e248c99d9d1171d1733a0a3744d"
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"