Add carousel, service info and style changes

src/pages/services.js

@@ -3,6 +3,7 @@ import React from 'react'
 import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
 import WorkStyle from '../components/WorkStyle'
+import Technologies from '../components/Technologies'
 
 const ServicesPage = () => (
   <div>
@@ -13,14 +14,16 @@ const ServicesPage = () => (
       sectionClasses="mb-16 lg:mb-8"
     />
 
-    <section className="container max-w-lg mx-auto my-12 p-4">
+    <section className="container max-w-lg mx-auto mt-12 p-4">
       <SectionIntro
-        classes="text-center mb-8"
+        classes="text-center"
         headline="Software Development Services"
         text="We have experiences with a wide variety of industries and 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 always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
       />
+    </section>
 
-      <div className="my-4 mx-auto border shadow-md p-6 rounded">
+    <div className="md:flex container mx-auto">
+      <div className="my-4 md:mx-2 border p-6 rounded">
         <h3 className="text-l my-2">Modern Web Development</h3>
         <p className="leading-normal">
           We offer full-cycle web development services for the connected world.
@@ -31,7 +34,7 @@ const ServicesPage = () => (
         </p>
       </div>
 
-      <div className="my-4 mx-auto border shadow-md p-6 rounded">
+      <div className="my-4 md:mx-2 border p-6 rounded">
         <h3 className="text-l my-2">Mobile App Development</h3>
         <p className="leading-normal">
           We have what it takes to develop competitive iOS and Android
@@ -42,7 +45,7 @@ const ServicesPage = () => (
         </p>
       </div>
 
-      <div className="my-4 mx-auto border shadow-md p-6 rounded">
+      <div className="my-4 md:mx-2 border p-6 rounded">
         <h3 className="text-l my-2">UX & UI Design</h3>
         <p className="leading-normal">
           Our approach is simple: focus on how users might use the product in
@@ -51,13 +54,16 @@ const ServicesPage = () => (
           iterative processes of research, prototyping and testing.
         </p>
       </div>
+    </div>
 
+    <div className="container mx-auto my-12">
       <SectionIntro
-        classes="text-center my-12"
+        classes="text-center max-w-lg mx-auto"
         headline="Technologies"
         text="We understand that technologies are just tools and select the appropriate tool for your needs. These are the technologies that we're currently working with on a daily basis."
       />
-    </section>
+      <Technologies />
+    </div>
 
     <div className="bg-grey-lighter p-10">
       <section className="container mx-auto max-w-lg text-center">