Add technologies, component restructure, config changes and style fixes

src/pages/services.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import Link from 'gatsby-link'
 
 import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
@@ -14,59 +15,57 @@ const ServicesPage = () => (
       sectionClasses="mb-16 lg:mb-8"
     />
 
-    <section className="container max-w-lg mx-auto mt-12 p-4">
+    <section className="container mx-auto mt-12 p-4">
       <SectionIntro
-        classes="text-center"
+        classes="text-center max-w-lg mx-auto"
         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."
       />
+      <div className="md:flex mt-4">
+        <div className="my-1 md:mx-1 border p-6 hover:shadow-md 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. Our talented developers work with popular languages and are
+            always up to speed with cutting edge trends in web development. We
+            provide services for both custom web development solutions and
+            extensions for third party solutions.
+          </p>
+        </div>
+
+        <div className="my-1 md:mx-1 border hover:shadow-md 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
+            applications using both native languages and hybrid solutions.
+            Solutions for iOS are built with Swift & Objective-C and Android
+            solutions are built with Java & Kotlin. We love using technologies
+            like React Native to build cross-platform native apps.
+          </p>
+        </div>
+
+        <div className="my-1 md:mx-1 border hover:shadow-md 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
+            the best way possible. We offer UX and interface design for all
+            screens and devices. The solutions are usually shaped through
+            iterative processes of research, prototyping and testing.
+          </p>
+        </div>
+      </div>
+      <div className="border md:mx-1 my-1 mb-8 hover:shadow-md rounded p-6">
+        <SectionIntro
+          headline="Technologies"
+          classes="text-center text-l max-w-lg mx-auto"
+          text="We understand that technologies are just tools, so we tend to be framework agnostic and select the best tools for your needs. These are the technologies that we're currently working with on a daily basis."
+        />
+        <Technologies />
+      </div>
     </section>
 
-    <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.
-          Our talented developers work with popular languages and are always up
-          to speed with cutting edge trends in web development. We provide
-          services for both custom web development solutions and extensions for
-          third party solutions.
-        </p>
-      </div>
-
-      <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
-          applications using both native languages and hybrid solutions.
-          Solutions for iOS are built with Swift & Objective-C and Android
-          solutions are built with Java & Kotlin. We love using technologies
-          like React Native to build cross-platform native apps.
-        </p>
-      </div>
-
-      <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
-          the best way possible. We offer UX and interface design for all
-          screens and devices. The solutions are usually shaped through
-          iterative processes of research, prototyping and testing.
-        </p>
-      </div>
-    </div>
-
-    <div className="container mx-auto my-12">
-      <SectionIntro
-        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."
-      />
-      <Technologies />
-    </div>
-
-    <div className="bg-grey-lighter p-10">
-      <section className="container mx-auto max-w-lg text-center">
+    <div className="bg-grey-lighter p-4">
+      <section className="container mx-auto mt-8 max-w-lg text-center">
         <SectionIntro
           headline="How We Work"
           text="We are serving everything from Fortune 500 companies to startups and tailor our processes based on your scale and needs. We collaborate closely with our clients at each step of the development process and make sure that the solutions delivery great value and meet your specific business requirements"
@@ -74,6 +73,29 @@ const ServicesPage = () => (
       </section>
       <WorkStyle />
     </div>
+
+    <div className="bg-indigo-darkest text-center py-4 lg:px-4">
+      <Link className="no-underline text-white" to="/contact">
+        <div
+          className="p-2 bg-indigo-darker items-center text-indigo-lightest leading-none lg:rounded-full flex lg:inline-flex"
+          role="alert"
+        >
+          <span className="flex rounded-full bg-indigo uppercase px-2 py-1 text-xs font-bold mr-3">
+            Let's Connect
+          </span>
+          <span className="font-semibold mr-2 text-left flex-auto">
+            Tell us about your project and get a free proposal
+          </span>
+          <svg
+            className="fill-current opacity-75 h-4 w-4"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+          >
+            <path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" />
+          </svg>
+        </div>
+      </Link>
+    </div>
   </div>
 )