Restructuring and styling services page

src/components/WorkStyle.js

@@ -11,11 +11,6 @@ import UnitIntegration from '../images/unit-and-integration-testing.svg'
 
 const WorkStyle = ({ ...props }) => (
   <section className="container rounded overflow-hidden shadow-md hover:shadow-lg mx-auto text-center my-12 p-4 bg-white">
-    <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"
-    />
-
     <div className="mx-auto py-6 text-center border-grey-lighter">
       <div className="flex flex-wrap pt-6 text-grey-darker">
         <div className="w-full md:w-1/2 p-6 md:border-r-2 border-grey-lighter">

src/pages/about.js

@@ -7,8 +7,8 @@ const AboutPage = () => (
   <div>
     <PageIntro
       intro="About Us"
-      headline="Founded by Software Engineers"
-      text="focused on delivering solutions that make valuable impact"
+      headline="Founded By Software Engineers"
+      text="focused on creating solutions that make valuable impact"
       sectionClasses="mb-16 lg:mb-8"
     />
 

src/pages/index.js

@@ -50,25 +50,25 @@ const IndexPage = ({ ...props }) => (
         </svg>
 
         <Service
-          img={ImgDesign}
-          title="User Experience Design"
-          text="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."
-        />
-
-        <Service
-          reversed
           img={ImgFullstack}
-          title="Fullstack Web Development"
+          title="Full-Stack Web Development"
           text="At Saburly, we are experts in web development services using both client-side and server-side technologies. Our talented developers work with popular languages and are always up to speed on the cutting edge trends in web application development. We deliver high-quality, maintainable code on time and know how to balance between cost, time and quality."
         />
 
         <Service
+          reversed
           img={ImgMobile}
           imgClasses="max-h-sm"
           title="Mobile App Development"
           text="We have the necessary skillset to develop 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."
         />
 
+        <Service
+          img={ImgDesign}
+          title="User Experience Design"
+          text="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."
+        />
+
         <div className="py-8 text-center lg:flex justify-center">
           <Button
             standard

src/pages/services.js

@@ -13,14 +13,22 @@ const ServicesPage = () => (
       sectionClasses="mb-16 lg:mb-8"
     />
 
-    <section className="container mx-auto my-12 p-4">
+    <section className="container mx-auto text-center my-12 p-4">
       <SectionIntro
         headline="Full-stack software development"
         text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
       />
     </section>
 
-    <WorkStyle />
+    <div className="bg-grey-lighter p-10">
+      <section className="container mx-auto 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"
+        />
+      </section>
+      <WorkStyle />
+    </div>
   </div>
 )