Styling changes for consistency

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>

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>

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>
 

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>

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."
               />

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;
   }

tailwind.config.js

@@ -598,6 +598,7 @@ module.exports = {
     '4': '4rem',
     '5': '5rem',
     '10': '10rem',
+    '35': '35rem',
     xs: '20rem',
     sm: '30rem',
     md: '40rem',