From cbc438075309d75be38103ec328848bfa0e6eb9c Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 5 Sep 2018 09:30:55 +0200
Subject: [PATCH] Styling changes for consistency

---
 src/components/PageIntro.js |  7 ++++---
 src/pages/about.js          |  6 +++---
 src/pages/contact.js        |  4 ++--
 src/pages/index.js          | 12 ++++++------
 src/pages/services.js       |  8 ++++----
 src/styles/index.css        | 20 ++++++++++++++++++++
 tailwind.config.js          |  1 +
 7 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/components/PageIntro.js b/src/components/PageIntro.js
index a8c9654..6addd35 100644
--- a/src/components/PageIntro.js
+++ b/src/components/PageIntro.js
@@ -37,11 +37,12 @@ class PageIntro extends Component {
             {this.props.children}
             <SectionIntro
               header
-              h2Classes="text-4xl md:text-5xl"
+              h2Classes="text-4xl lg:mb-2 md:text-5xl"
               intro={this.props.intro}
-              classes={`lg:text-left lg:max-w-sm content-center ${
+              classes={`md:p-8 lg:text-left lg:max-w-sm content-center ${
                 this.props.sectionClasses
               }`}
+              textClasses="font-medium opacity-80"
               headline={this.props.headline}
               text={this.props.text}
             />
@@ -59,7 +60,7 @@ class PageIntro extends Component {
                 src={this.props.image}
                 className={`${
                   this.props.imgClasses
-                } tiltImage md:max-h-sm md:max-w-md mx-auto`}
+                } tiltImage md:max-h-sm md:max-w-35 mx-auto`}
                 alt="Software Development Agency"
               />
             </div>
diff --git a/src/pages/about.js b/src/pages/about.js
index 7cb33e9..85bd198 100644
--- a/src/pages/about.js
+++ b/src/pages/about.js
@@ -25,10 +25,10 @@ const AboutPage = () => (
     <Fade top>
       <PageIntro
         tiltImage
-        headline="Founded by developers"
+        headline="We know software"
         text="Saburly was founded by senior tech leads that understand what it takes to create modern digital solutions. We have managed large software development teams for successful companies in the past and are now recruiting and mentoring the best talents in the industry for Saburly."
         image={IntroImage}
-        imgClasses="border-white border-8 rounded -mb-12"
+        imgClasses="border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition -mb-12"
       />
     </Fade>
 
@@ -44,7 +44,7 @@ const AboutPage = () => (
             <p className="py-2 font-light text-grey-darkest text-center">
               Saburly comes from an old Bosnian saying and is about
             </p>
-            <h5 className="text-center text-4xl italic font-light text-black">
+            <h5 className="text-center text-xl md:text-2xl lg:text-4xl italic font-light text-black">
               "Achieving success through patience, strategic planning and
               perseverance"
             </h5>
diff --git a/src/pages/contact.js b/src/pages/contact.js
index e31cd17..a911ada 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -16,11 +16,11 @@ const ContactPage = () => (
     <Fade top>
       <PageIntro
         tiltImage
-        headline="Let's make it happen"
+        headline="Let's connect"
         text="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just find out more about what we do."
         sectionClasses="lg:mb-8"
         image={ContactImage}
-        imgClasses="-mb-12 border-white border-8 rounded"
+        imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
       />
     </Fade>
 
diff --git a/src/pages/index.js b/src/pages/index.js
index a5f8aff..f2a7e43 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -33,7 +33,7 @@ const IndexPage = ({ ...props }) => (
         image={ImgIntro}
         imgClasses="-mb-20 p-2 md:p-8"
       >
-        <h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
+        <h2 className="px-8 text-black text-4xl xl:text-5xl pt-1">
           We{' '}
           <Typed
             strings={['imagine', 'design', 'develop', 'maintain']}
@@ -105,35 +105,35 @@ const IndexPage = ({ ...props }) => (
               <div className="sm:w-1/2 md:w-1/5 p-2">
                 <img
                   src={LogoColounge}
-                  className="opacity-50 hover:opacity-100 client-logo p-1"
+                  className="opacity-50 hover:opacity-100 client-logo p-2"
                   alt="Colounge Logo"
                 />
               </div>
               <div className="sm:w-1/2 md:w-1/5 p-2">
                 <img
                   src={LogoRicoh}
-                  className="opacity-50 hover:opacity-100 client-logo p-1"
+                  className="opacity-50 hover:opacity-100 client-logo p-2"
                   alt="Ricoh Logo"
                 />
               </div>
               <div className="sm:w-1/3 md:w-1/5 p-2">
                 <img
                   src={LogoCoor}
-                  className="opacity-50 hover:opacity-100 client-logo p-1"
+                  className="opacity-50 hover:opacity-100 client-logo p-2"
                   alt="Coor Logo"
                 />
               </div>
               <div className="sm:w-1/3 md:w-1/5 p-2">
                 <img
                   src={LogoKinnarps}
-                  className="opacity-50 hover:opacity-100 client-logo p-1"
+                  className="opacity-50 hover:opacity-100 client-logo p-2"
                   alt="Kinnarps Logo"
                 />
               </div>
               <div className="sm:w-1/3 md:w-1/5 p-2">
                 <img
                   src={LogoIMCG}
-                  className="opacity-50 hover:opacity-100 client-logo p-1"
+                  className="opacity-50 hover:opacity-100 client-logo p-2"
                   alt="IMCG Logo"
                 />
               </div>
diff --git a/src/pages/services.js b/src/pages/services.js
index 415c092..4ddf4ed 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -20,10 +20,10 @@ const ServicesPage = () => (
       <PageIntro
         tiltImage
         buttonClasses="text-white font-normal shadow hover:shadow-md rounded-full mt-4 font-light bg-teal hover:bg-teal-dark mb-20"
-        headline="Agile Practitioners"
+        headline="Agile practitioners"
         text="At Saburly we embrace Agile’s methodologies for every project and business environment, no matter the size, scale, or complexity. Our flexible processes ensure high productivity and we know how to balance between cost, time and quality."
         image={IntroImage}
-        imgClasses="-mb-12 border-white border-8 rounded-lg"
+        imgClasses="-mb-12 border-white rounded-lg opacity-70 hover:opacity-100 saburly-transition"
       />
     </Fade>
     <section className="px-4 py-16">
@@ -37,7 +37,7 @@ const ServicesPage = () => (
             />
 
             <SectionIntro
-              h2Classes="text-4xl md:text-5xl saburly-color font-medium"
+              h2Classes="text-4xl md:text-5xl saburly-color font-light"
               classes="my-20 max-w-lg"
               headline="Design services"
               text="We offer consistent quality design that extends to every section of the application development. Our approach is simple: focus on how users might use the product
@@ -90,7 +90,7 @@ const ServicesPage = () => (
           <div className="lg:flex">
             <div>
               <SectionIntro
-                h2Classes="font-medium saburly-color text-4xl md:text-5xl"
+                h2Classes="font-light saburly-color text-4xl md:text-5xl"
                 headline="Software development"
                 text="From infrastructure to AI, we develop data-driven Full-Stack applications for both custom software and third party solutions."
               />
diff --git a/src/styles/index.css b/src/styles/index.css
index 96f1d70..9d2587f 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -3442,6 +3442,10 @@ table {
   max-width: 10rem;
 }
 
+.max-w-35 {
+  max-width: 35rem;
+}
+
 .max-w-2\.5 {
   max-width: 2.5rem;
 }
@@ -8596,6 +8600,10 @@ table {
     max-width: 10rem;
   }
 
+  .sm\:max-w-35 {
+    max-width: 35rem;
+  }
+
   .max-w-2\.sm\:5 {
     max-width: 2.5rem;
   }
@@ -13735,6 +13743,10 @@ table {
     max-width: 10rem;
   }
 
+  .md\:max-w-35 {
+    max-width: 35rem;
+  }
+
   .max-w-2\.md\:5 {
     max-width: 2.5rem;
   }
@@ -18874,6 +18886,10 @@ table {
     max-width: 10rem;
   }
 
+  .lg\:max-w-35 {
+    max-width: 35rem;
+  }
+
   .max-w-2\.lg\:5 {
     max-width: 2.5rem;
   }
@@ -24013,6 +24029,10 @@ table {
     max-width: 10rem;
   }
 
+  .xl\:max-w-35 {
+    max-width: 35rem;
+  }
+
   .max-w-2\.xl\:5 {
     max-width: 2.5rem;
   }
diff --git a/tailwind.config.js b/tailwind.config.js
index 9bb0e72..2bafcfc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -598,6 +598,7 @@ module.exports = {
     '4': '4rem',
     '5': '5rem',
     '10': '10rem',
+    '35': '35rem',
     xs: '20rem',
     sm: '30rem',
     md: '40rem',