From e147553ed631292bdbfc1f9dc6331c3091e55904 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Mon, 9 Jul 2018 17:14:42 +0200
Subject: [PATCH] Style for services page and text changes

---
 src/components/WorkStyle.js | 18 +++++++--------
 src/pages/about.js          |  2 +-
 src/pages/index.js          |  8 +++----
 src/pages/services.js       | 46 ++++++++++++++++++++++++++++++++-----
 4 files changed, 54 insertions(+), 20 deletions(-)

diff --git a/src/components/WorkStyle.js b/src/components/WorkStyle.js
index d335a16..9d97db6 100644
--- a/src/components/WorkStyle.js
+++ b/src/components/WorkStyle.js
@@ -10,10 +10,10 @@ import UXResearch from '../images/ux-research.svg'
 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">
-    <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">
+  <section className="container rounded overflow-hidden shadow-md mx-auto text-center my-4 bg-white">
+    <div className="mx-auto text-center border-grey-lighter">
+      <div className="flex flex-wrap text-grey-darker">
+        <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">
@@ -23,7 +23,7 @@ const WorkStyle = ({ ...props }) => (
             strive for.
           </p>
         </div>
-        <div className="w-full md:w-1/2 p-4">
+        <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">
@@ -35,7 +35,7 @@ const WorkStyle = ({ ...props }) => (
         </div>
       </div>
       <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-grey-darker text-grey-darker">
-        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-lighter">
+        <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">
@@ -46,7 +46,7 @@ const WorkStyle = ({ ...props }) => (
             deploying code with a high confidence level
           </p>
         </div>
-        <div className="w-full md:w-1/2 p-4">
+        <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">
@@ -58,7 +58,7 @@ const WorkStyle = ({ ...props }) => (
         </div>
       </div>
       <div className="flex flex-wrap md:border-t-2 border-grey-lighter text-grey-darker text-grey-darker">
-        <div className="w-full md:w-1/2 p-4 md:border-r-2 border-grey-lighter">
+        <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">
@@ -69,7 +69,7 @@ const WorkStyle = ({ ...props }) => (
             your site or application.
           </p>
         </div>
-        <div className="w-full md:w-1/2 p-4">
+        <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">
diff --git a/src/pages/about.js b/src/pages/about.js
index 8c52305..14fbf62 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -22,7 +22,7 @@ const AboutPage = () => (
     <section className="container mx-auto my-12 p-4">
       <SectionIntro
         headline="Our goal is long-term engagement"
-        text="We are a small company with a personal touch. We know our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills"
+        text="We are a small company with a personal touch that knows our stuff. Our people have T-shaped profiles which means that they combine a deep specialism with a broad range of knowledge and skills."
       />
     </section>
   </div>
diff --git a/src/pages/index.js b/src/pages/index.js
index 7dd7e9e..4be30d4 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -33,7 +33,7 @@ const IndexPage = ({ ...props }) => (
     <main>
       <section className="container mx-auto max-w-lg text-center my-12 p-4">
         <SectionIntro
-          intro="We do this"
+          intro="What We Offer"
           headline="Because great code makes our heart pound"
           text="We have a deep passion for cutting edge technologies and incredible user experiences. We create custom end-to-end solutions that will make you stand out. Our experienced tech leads can even help you with initial analysis, architecture design, testing and deployments"
         />
@@ -52,7 +52,7 @@ const IndexPage = ({ ...props }) => (
         <Service
           img={ImgFullstack}
           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."
+          text="At Saburly, we are experts in modern web development 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
@@ -60,7 +60,7 @@ const IndexPage = ({ ...props }) => (
           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."
+          text="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."
         />
 
         <Service
@@ -72,7 +72,7 @@ const IndexPage = ({ ...props }) => (
         <div className="py-8 text-center lg:flex justify-center">
           <Button
             standard
-            text="More About What We Do"
+            text="More About The Services We Provide"
             url="/services"
             classes="m-1 rounded-full hover:shadow-md text-grey-darker hover:shadow"
           />
diff --git a/src/pages/services.js b/src/pages/services.js
index a3deaed..c91a9cb 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -13,15 +13,49 @@ const ServicesPage = () => (
       sectionClasses="mb-16 lg:mb-8"
     />
 
-    <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 className="container max-w-lg mx-auto my-12 p-4">
+      <SectionIntro classes="text-center mb-8" 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="my-4 mx-auto border shadow-md 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 mx-auto border shadow-md p-6 rounded">
+      <h3 className="text-l my-2">Mobile App Development</h3>
+      <p className="leading-normal">
+       Info...
+      </p>
+    </div>
+
+    <div className="my-4 mx-auto border shadow-md p-6 rounded">
+      <h3 className="text-l my-2">AI & Automation</h3>
+      <p className="leading-normal">
+        Info...
+      </p>
+    </div>
+
+    <div className="my-4 mx-auto border shadow-md p-6 rounded">
+      <h3 className="text-l my-2">Blockchain & Distributed Applications</h3>
+      <p className="leading-normal">
+        Info...
+      </p>
+    </div>
+
+    <div className="my-4 mx-auto border shadow-md p-6 rounded">
+      <h3 className="text-l my-2">UX & UI Design</h3>
+      <p className="leading-normal">
+        Info...
+      </p>
+    </div>
+
+      <SectionIntro classes="text-center my-12" 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>
 
     <div className="bg-grey-lighter p-10">
-      <section className="container mx-auto text-center">
+      <section className="container mx-auto 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"