Stylistic upgrades and add top clutch company url

src/components/SectionIntro.js

@@ -19,7 +19,7 @@ const IntroDefault = ({ ...props }) => (
     {props.headline && (
       <h2
         className={`${props.light ? headlineDark : ''} ${props.h2Classes}
-    text-black my-2 py-1`}
+    text-black font-black my-2 py-1`}
       >
         {props.headline}
       </h2>

src/pages/contact.js

@@ -105,10 +105,10 @@ const ContactPage = () => (
       <section className="container lg:flex justify-between mx-auto">
         <form
           action="https://formspree.io/info@saburly.com"
-          className="w-full max-w-sm mx-auto pt-16 p-6"
+          className="w-full max-w-sm mx-auto p-6"
           method="POST"
         >
-          <SectionIntro headline="We'd love to hear from you" />
+          <SectionIntro headline="We'd love to hear from you" h2Classes="text-3xl xsm:text-4xl sm:text-5xl xl:text-6xl font-black" />
           <div className="md:flex flex-wrap">
             <input
               className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"

src/pages/index.js

@@ -24,6 +24,7 @@ import LogoCoor from '../images/logo-coor-color.svg'
 import LogoIMCG from '../images/logo-imcg.png'
 import LogoColounge from '../images/logo-colounge.svg'
 import LogoHyrma from '../images/logo-hyrma-admin.svg'
+import TopWebDevelopers from '../images/top-web-developer-company.png'
 
 import PageTransition from 'gatsby-plugin-page-transitions'
 
@@ -39,7 +40,7 @@ const IndexPage = ({ ...props }) => (
       image={ImgIntro}
       imgClasses="-mb-20 p-2 md:p-8"
     >
-      <h1 className="my-4 text-3xl xsm:text-4xl text-black md:text-5xl">
+      <h1 className="my-4 text-3xl xsm:text-4xl font-black text-black md:text-5xl">
         We{' '}
         <Typed
           strings={['imagine', 'design', 'develop', 'maintain']}
@@ -53,17 +54,27 @@ const IndexPage = ({ ...props }) => (
     </PageIntro>
 
     <main>
-      <section className="container mx-auto max-w-lg text-center mt-16 p-4">
+
+      <section className="md:flex p-8 mt-10 items-center justify-center m-auto">
+      <div className="text-center">
+      <a href="https://clutch.co/se/app-developers" target="_blank">
+        <img
+          src={TopWebDevelopers}
+          alt="Top Web Developer Company"
+        />
+        </a>
+        </div>
         <SectionIntro
-          classes="my-10"
+        classes="p-8 md:max-w-lg"
-          h2Classes="text-3xl xsm:text-4xl sm:text-6xl font-black"
+        h2Classes="text-3xl xsm:text-4xl sm:text-5xl xl:text-6xl font-black"
-          headline="Because beautiful code makes our heart pound"
+        headline="Because beautiful code makes our heart pound"
-          text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
+        text="What gets us going is our passion for cutting edge technologies and incredible user experiences. Our developers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
         />
       </section>
 
       <section className="relative">
         <Service
+        reversed
           classes="py-8"
           h2Classes="text-2xl xsm:text-3xl saburly-color"
           img={ImgDesign}
@@ -72,7 +83,6 @@ const IndexPage = ({ ...props }) => (
         />
 
         <Service
-          reversed
           classes="py-8"
           h2Classes="text-2xl xsm:text-3xl saburly-color"
           img={ImgFullstack}
@@ -82,6 +92,7 @@ const IndexPage = ({ ...props }) => (
         />
 
         <Service
+        reversed
           img={ImgMobile}
           classes="py-8"
           h2Classes="text-2xl xsm:text-3xl saburly-color"
@@ -94,7 +105,7 @@ const IndexPage = ({ ...props }) => (
       <section className="bg-saburly-lighter text-center p-4 my-12">
         <div className="my-8 py-8 container mx-auto max-w-lg">
           <SectionIntro
-            h2Classes="text-3xl xsm:text-4xl sm:text-5xl"
+            h2Classes="text-3xl font-black xsm:text-4xl sm:text-5xl"
             headline="You'll be in great company"
             text="By thinking big, designing smart and developing fast, we are helping organizations of various sizes bring life to ideas. We are now eager to hear what challenges you have for us."
           />
@@ -162,7 +173,7 @@ const IndexPage = ({ ...props }) => (
 
       <section className="text-center p-4 relative">
         <SectionIntro
-          h2Classes="py-8 text-3xl xsm:text-4xl sm:text-5xl"
+          h2Classes="py-8 text-3xl font-black xsm:text-4xl sm:text-5xl"
           headline="Sometimes we have fun & publish"
         />
         <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">