From 5dc905acabd0536b3caf7e63b3aa0ab28f0020f1 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Sat, 1 Sep 2018 14:14:37 +0200
Subject: [PATCH] Add revealing effects on components

---
 package.json          |   1 +
 src/pages/contact.js  | 265 +++++++++++++++++++++-------------------
 src/pages/index.js    | 278 +++++++++++++++++++++++-------------------
 src/pages/services.js | 263 ++++++++++++++++++++-------------------
 yarn.lock             |   6 +
 5 files changed, 433 insertions(+), 380 deletions(-)

diff --git a/package.json b/package.json
index d07bb1f..d3a93c6 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-headroom": "^2.2.2",
     "react-helmet": "^5.2.0",
     "react-responsive-mixin": "^0.4.0",
+    "react-reveal": "^1.2.2",
     "react-typed": "^1.0.9",
     "slideout": "^1.0.1",
     "tiny-slider": "^2.8.5",
diff --git a/src/pages/contact.js b/src/pages/contact.js
index 8caf1e0..085464f 100644
--- a/src/pages/contact.js
+++ b/src/pages/contact.js
@@ -2,6 +2,7 @@ import React from 'react'
 
 import SectionIntro from '../components/SectionIntro'
 import PageIntro from '../components/PageIntro'
+import Fade from 'react-reveal/fade'
 
 import ContactImage from '../images/saburly-web-agency.jpg'
 import Sarajevo from '../images/sarajevo-web-agency.jpg'
@@ -12,155 +13,163 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ContactPage = () => (
   <PageTransition>
-    <PageIntro
-      tiltImage
-      headline="Let's make it happen"
-      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"
-    />
+    <Fade top>
+      <PageIntro
+        tiltImage
+        headline="Let's make it happen"
+        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"
+      />
+    </Fade>
 
     <section className="container mx-auto my-12 p-4">
       <div className="md:flex">
-        <div className="p-2 text-center">
-          <div className="rounded overflow-hidden border-bottom-saburly">
-            <img className="w-full" src={Stockholm} alt="Stockholm City" />
-            <div className="px-6 py-4">
-              <div className="uppercase font-medium text-xl mb-6">
-                office in Stockholm
-              </div>
-              <div className="md:flex text-left justify-around text-black text-base">
-                <div>
-                  <h4 className="text-black">Adress</h4>
-                  <p className="text-black-light">
-                    Saburly AB <br />
-                    Vretenvägen 13 <br />
-                    171 54 Solna <br />
-                    Sweden <br />
-                  </p>
+        <Fade left>
+          <div className="p-2 text-center">
+            <div className="rounded overflow-hidden border-bottom-saburly">
+              <img className="w-full" src={Stockholm} alt="Stockholm City" />
+              <div className="px-6 py-4">
+                <div className="uppercase font-medium text-xl mb-6">
+                  office in Stockholm
                 </div>
-                <div>
-                  <h4 className="text-black">Contact</h4>
-                  <p className="text-black-light">
-                    Phone:{' '}
-                    <a
-                      className="text-purple-dark hover:text-purple-light no-underline"
-                      href="tel:+46760477717"
-                    >
-                      +46760477717
-                    </a>
-                    <br />
-                    E-mail:{' '}
-                    <a
-                      className="text-purple-dark hover:text-purple-light no-underline"
-                      href="mailto:sweden@saburly.com"
-                    >
-                      sweden@saburly.com
-                    </a>{' '}
-                  </p>
+                <div className="md:flex text-left justify-around text-black text-base">
+                  <div>
+                    <h4 className="text-black">Adress</h4>
+                    <p className="text-black-light">
+                      Saburly AB <br />
+                      Vretenvägen 13 <br />
+                      171 54 Solna <br />
+                      Sweden <br />
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="text-black">Contact</h4>
+                    <p className="text-black-light">
+                      Phone:{' '}
+                      <a
+                        className="text-purple-dark hover:text-purple-light no-underline"
+                        href="tel:+46760477717"
+                      >
+                        +46760477717
+                      </a>
+                      <br />
+                      E-mail:{' '}
+                      <a
+                        className="text-purple-dark hover:text-purple-light no-underline"
+                        href="mailto:sweden@saburly.com"
+                      >
+                        sweden@saburly.com
+                      </a>{' '}
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
-        <div className="p-2 text-center">
-          <div className="rounded overflow-hidden border-bottom-saburly">
-            <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
-            <div className="px-6 py-4">
-              <div className="uppercase font-medium text-xl mb-6">
-                office in Sarajevo
-              </div>
-              <div className="md:flex text-left justify-around text-base">
-                <div>
-                  <h4 className="text-black">Adress</h4>
-                  <p className="text-black-light">
-                    Saburly d.o.o <br />
-                    Hakije Turajlica 2 <br />
-                    71 000 Sarajevo <br />
-                    Bosnia & Herzegovina <br />
-                  </p>
+        </Fade>
+        <Fade right>
+          <div className="p-2 text-center">
+            <div className="rounded overflow-hidden border-bottom-saburly">
+              <img className="w-full" src={Sarajevo} alt="Sarajevo City" />
+              <div className="px-6 py-4">
+                <div className="uppercase font-medium text-xl mb-6">
+                  office in Sarajevo
                 </div>
-                <div>
-                  <h4 className="text-black">Contact</h4>
-                  <p className="text-black-light">
-                    Phone:{' '}
-                    <a
-                      className="text-purple-dark hover:text-purple-light no-underline"
-                      href="tel:+38761909238"
-                    >
-                      +38761909238
-                    </a>{' '}
-                    <br />
-                    E-mail:{' '}
-                    <a
-                      className="text-purple-dark hover:text-purple-light no-underline"
-                      href="mailto:bosnia@saburly.com"
-                    >
-                      bosnia@saburly.com
-                    </a>{' '}
-                  </p>
+                <div className="md:flex text-left justify-around text-base">
+                  <div>
+                    <h4 className="text-black">Adress</h4>
+                    <p className="text-black-light">
+                      Saburly d.o.o <br />
+                      Hakije Turajlica 2 <br />
+                      71 000 Sarajevo <br />
+                      Bosnia & Herzegovina <br />
+                    </p>
+                  </div>
+                  <div>
+                    <h4 className="text-black">Contact</h4>
+                    <p className="text-black-light">
+                      Phone:{' '}
+                      <a
+                        className="text-purple-dark hover:text-purple-light no-underline"
+                        href="tel:+38761909238"
+                      >
+                        +38761909238
+                      </a>{' '}
+                      <br />
+                      E-mail:{' '}
+                      <a
+                        className="text-purple-dark hover:text-purple-light no-underline"
+                        href="mailto:bosnia@saburly.com"
+                      >
+                        bosnia@saburly.com
+                      </a>{' '}
+                    </p>
+                  </div>
                 </div>
               </div>
             </div>
           </div>
-        </div>
+        </Fade>
       </div>
     </section>
 
     <div className="bg-saburly-lighter p-8">
-      <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"
-          method="POST"
-        >
-          <SectionIntro headline="Send us a message" />
-          <div className="md:flex flex-wrap">
-            <input
-              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
-              id="grid-first-name"
-              type="text"
-              placeholder="Name"
-              name="name"
-              required
-            />
+      <Fade>
+        <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"
+            method="POST"
+          >
+            <SectionIntro headline="Send us a message" />
+            <div className="md:flex flex-wrap">
+              <input
+                className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
+                id="grid-first-name"
+                type="text"
+                placeholder="Name"
+                name="name"
+                required
+              />
 
-            <input
-              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
-              id="grid-first-name"
-              type="text"
-              placeholder="Email"
-              name="_replyto"
-              required
-            />
+              <input
+                className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2"
+                id="grid-first-name"
+                type="text"
+                placeholder="Email"
+                name="_replyto"
+                required
+              />
 
-            <textarea
-              className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
-              id="grid-last-name"
-              type="text"
-              name="message"
-              placeholder="Message"
-              required
+              <textarea
+                className="appearance-none bg-transparent border-contact block w-full typed-cursor py-2 border-grey-light"
+                id="grid-last-name"
+                type="text"
+                name="message"
+                placeholder="Message"
+                required
+              />
+            </div>
+
+            <button
+              className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
+              value="Send"
+              type="submit"
+            >
+              Send
+            </button>
+          </form>
+          <div>
+            <img
+              src={FormImage}
+              alt="Contact Form Image"
+              className="p-10 w-full text-center block md:max-w-lg mx-auto"
             />
           </div>
-
-          <button
-            className="mt-4 w-full shadow bg-teal hover:bg-teal-light text-white py-2 px-4 rounded"
-            value="Send"
-            type="submit"
-          >
-            Send
-          </button>
-        </form>
-        <div>
-          <img
-            src={FormImage}
-            alt="Contact Form Image"
-            className="p-10 w-full text-center block md:max-w-lg mx-auto"
-          />
-        </div>
-      </section>
+        </section>
+      </Fade>
     </div>
   </PageTransition>
 )
diff --git a/src/pages/index.js b/src/pages/index.js
index 44cf328..1d439ea 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,6 +8,7 @@ import PageIntro from '../components/PageIntro'
 import InfoBox from '../components/InfoBox'
 import Technologies from '../components/Technologies'
 import Typed from 'react-typed'
+import Fade from 'react-reveal/fade'
 
 import ImgIntro from '../images/web-development-company.svg'
 import ImgDesign from '../images/user-experience-design-agency.svg'
@@ -26,150 +27,173 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const IndexPage = ({ ...props }) => (
   <PageTransition>
-    <PageIntro
-      text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
-      image={ImgIntro}
-      imgClasses="-mb-20 p-2 md:p-8"
-    >
-      <h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
-        We{' '}
-        <Typed
-          strings={['imagine', 'design', 'develop', 'maintain']}
-          typeSpeed={100}
-          backSpeed={50}
-          backDelay={3000}
-          loop
-        />
-        great<br />digital experiences
-      </h2>
-    </PageIntro>
+    <Fade top>
+      <PageIntro
+        text="We're a team of experienced, creative and passionate engineers and designers. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
+        image={ImgIntro}
+        imgClasses="-mb-20 p-2 md:p-8"
+      >
+        <h2 className="text-black text-4xl xl:text-5xl pt-1 pb-2">
+          We{' '}
+          <Typed
+            strings={['imagine', 'design', 'develop', 'maintain']}
+            typeSpeed={100}
+            backSpeed={50}
+            backDelay={3000}
+            loop
+          />
+          great<br />digital experiences
+        </h2>
+      </PageIntro>
+    </Fade>
 
     <main>
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">
-        <SectionIntro
-          h2Classes="text-3xl"
-          headline="Because beautiful code makes our heart pound"
-          text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
-        />
+        <Fade top>
+          <SectionIntro
+            h2Classes="text-3xl"
+            headline="Because beautiful code makes our heart pound"
+            text="We have a deep passion for cutting edge technologies and incredible user experiences. Our experienced engineers deliver custom end-to-end software solutions daily and can even help you with initial analysis, architecture design, testing and deployments."
+          />
+        </Fade>
       </section>
 
       <section className="bg-saburly relative">
-        <Service
-          h2Classes="text-4xl font-light saburly-color"
-          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
-          h2Classes="text-4xl font-light saburly-color"
-          img={ImgFullstack}
-          title="Full-Stack Development"
-          text="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."
-          imgClasses=""
-        />
-
-        <Service
-          img={ImgMobile}
-          h2Classes="text-4xl font-light saburly-color"
-          imgClasses="max-h-sm"
-          title="Mobile 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."
-        />
-
-        <div className="py-8 text-center lg:flex justify-center">
-          <Button
-            standard
-            text="More About What We Do"
-            url="/services"
-            classes="font-medium rounded-full hover:shadow-md text-grey-darker hover:shadow"
+        <Fade left>
+          <Service
+            h2Classes="text-4xl font-light saburly-color"
+            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>
+        </Fade>
+
+        <Fade right>
+          <Service
+            reversed
+            h2Classes="text-4xl font-light saburly-color"
+            img={ImgFullstack}
+            title="Full-Stack Development"
+            text="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."
+            imgClasses=""
+          />
+        </Fade>
+
+        <Fade left>
+          <Service
+            img={ImgMobile}
+            h2Classes="text-4xl font-light saburly-color"
+            imgClasses="max-h-sm"
+            title="Mobile 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."
+          />
+        </Fade>
+
+        <Fade>
+          <div className="py-8 text-center lg:flex justify-center">
+            <Button
+              standard
+              text="More About What We Do"
+              url="/services"
+              classes="font-medium rounded-full hover:shadow-md text-grey-darker hover:shadow"
+            />
+          </div>
+        </Fade>
       </section>
 
       <section className="bg-saburly-lighter text-center p-4 my-12">
         <div className="my-8 container mx-auto max-w-lg">
-          <SectionIntro
-            h2Classes="text-4xl"
-            headline="Ambitious projects bring great responsibility"
-            text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
-          />
-          <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
-            <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"
-                alt="Colounge Logo"
-              />
+          <Fade>
+            <SectionIntro
+              h2Classes="text-4xl"
+              headline="Ambitious projects bring great responsibility"
+              text="By thinking big, designing smart and developing fast, we have helped organizations of various sizes bring life to ideas and existing products. We're now eager to hear what challenges you have for us"
+            />
+            <div className="p-4 sm:flex flex-wrap items-center max-w-full justify-around">
+              <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"
+                  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"
+                  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"
+                  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"
+                  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"
+                  alt="IMCG Logo"
+                />
+              </div>
             </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"
-                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"
-                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"
-                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"
-                alt="IMCG Logo"
-              />
-            </div>
-          </div>
+          </Fade>
 
-          <Button
-            filled
-            text="Let's Get In Touch"
-            url="/contact"
-            classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
-          />
+          <Fade>
+            <Button
+              filled
+              text="Let's Get In Touch"
+              url="/contact"
+              classes="text-white font-medium shadow hover:shadow-md rounded-full mt-2 font-light bg-teal hover:bg-teal-dark"
+            />
+          </Fade>
         </div>
       </section>
 
       <section className="text-center p-8 relative">
-        <SectionIntro
-          h2Classes="font-light text-4xl"
-          headline="But occasionally we have fun & publish"
-        />
-        <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
-          {props.data.allWordpressPost.edges.map(({ node }) => (
-            <div key={node.id} className="md:w-1/2 p-2">
-              <Card
-                url={`blog/${node.slug}`}
-                title={node.title}
-                date={node.date}
-                excerpt={node.excerpt}
-                image={
-                  node.featured_media
-                    ? node.featured_media.localFile.childImageSharp.resolutions
-                    : undefined
-                }
-              />
-            </div>
-          ))}
-        </div>
-        <Button
-          standard
-          text="More Posts"
-          url="/blog"
-          classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
-        />
+        <Fade>
+          <SectionIntro
+            h2Classes="font-light text-4xl"
+            headline="But occasionally we have fun & publish"
+          />
+        </Fade>
+        <Fade>
+          <div className="container mx-auto w-full md:flex md:flex-wrap items-stretch w-full">
+            {props.data.allWordpressPost.edges.map(({ node }) => (
+              <div key={node.id} className="md:w-1/2 p-2">
+                <Card
+                  url={`blog/${node.slug}`}
+                  title={node.title}
+                  date={node.date}
+                  excerpt={node.excerpt}
+                  image={
+                    node.featured_media
+                      ? node.featured_media.localFile.childImageSharp
+                          .resolutions
+                      : undefined
+                  }
+                />
+              </div>
+            ))}
+          </div>
+        </Fade>
+        <Fade>
+          <Button
+            standard
+            text="More Posts"
+            url="/blog"
+            classes="mt-2 mb-8 hover:shadow-md rounded-full text-grey-darker"
+          />
+        </Fade>
       </section>
     </main>
   </PageTransition>
diff --git a/src/pages/services.js b/src/pages/services.js
index 006f569..1089448 100644
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -5,6 +5,7 @@ import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
 import WorkStyle from '../components/WorkStyle'
 import Technologies from '../components/Technologies'
+import Fade from 'react-reveal/fade'
 
 import IntroImage from '../images/agile-practitioners.jpg'
 import WebdevServices from '../images/custom-software-development.svg'
@@ -15,155 +16,167 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ServicesPage = () => (
   <PageTransition>
-    <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"
-      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"
-    />
+    <Fade top>
+      <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"
+        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"
+      />
+    </Fade>
     <section className="px-4 py-16">
-      <div className="container mx-auto">
-        <div className="lg:flex">
-          <img
-            src={UXdesign}
-            className="hidden md:mr-8 lg:block -mt-12"
-            alt="User Experience Design Agency"
-          />
-          <SectionIntro
-            h2Classes="text-4xl md:text-5xl saburly-color font-medium"
-            classes="max-w-lg"
-            headline="Design services"
-            text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
+      <Fade left>
+        <div className="container mx-auto">
+          <div className="lg:flex">
+            <img
+              src={UXdesign}
+              className="hidden md:mr-8 lg:block -mt-12"
+              alt="User Experience Design Agency"
+            />
+
+            <SectionIntro
+              h2Classes="text-4xl md:text-5xl saburly-color font-medium"
+              classes="max-w-lg"
+              headline="Design services"
+              text="We offer consistent quality that extends to every section of the application development. Our approach is simple: focus on how users might use the product
               in the best way possible. The solutions are usually shaped
               through iterative processes of research, prototyping and
               testing. All devices and screen sizes are welcome
           here."
-          >
-            <img
-              src={UXdesign}
-              className="lg:hidden p-8 mx-auto w-full -mt-12"
-              alt="User Experience Design Agency"
-            />
+            >
+              <img
+                src={UXdesign}
+                className="lg:hidden p-8 mx-auto w-full -mt-12"
+                alt="User Experience Design Agency"
+              />
 
-            <div className="my-4">
-              <h3 className="font-light my-1 text-3xl font-light">
-                Conceptualization & Branding
-              </h3>
-              <p className="font-light leading-normal text-black-light text-lg">
-                Before our designers work on visual details, we start off by
-                creating a clear understanding of the problem that you're trying
-                to solve with the project. After collecting and analyzing data,
-                we develop concept that becomes a guideline for the design.
-              </p>
-            </div>
-            <div className="my-4">
-              <h3 className="text-black font-light my-1 text-3xl font-light">
-                UX & UI Design
-              </h3>
-              <p className="font-light leading-normal text-black-light text-lg">
-                We love to design pixel-perfect products that are easy to use
-                and delightful to interact with. From User-Flows, Lo-Fi & Hi-Fi
-                Wireframes and Prototypes to polished slick end-products, we
-                create digital experiences that stand out. This is done through
-                our human-centered UI/UI approach where the main goal is to
-                effectively communicate the functionality of your product to its
-                target audience.
-              </p>
-            </div>
-          </SectionIntro>
+              <div className="my-4">
+                <h3 className="font-light my-1 text-3xl font-light">
+                  Conceptualization & Branding
+                </h3>
+                <p className="font-light leading-normal text-black-light text-lg">
+                  Before our designers work on visual details, we start off by
+                  creating a clear understanding of the problem that you're
+                  trying to solve with the project. After collecting and
+                  analyzing data, we develop concept that becomes a guideline
+                  for the design.
+                </p>
+              </div>
+              <div className="my-4">
+                <h3 className="text-black font-light my-1 text-3xl font-light">
+                  UX & UI Design
+                </h3>
+                <p className="font-light leading-normal text-black-light text-lg">
+                  We love to design pixel-perfect products that are easy to use
+                  and delightful to interact with. From User-Flows, Lo-Fi &
+                  Hi-Fi Wireframes and Prototypes to polished slick
+                  end-products, we create digital experiences that stand out.
+                  This is done through our human-centered UI/UI approach where
+                  the main goal is to effectively communicate the functionality
+                  of your product to its target audience.
+                </p>
+              </div>
+            </SectionIntro>
+          </div>
         </div>
-      </div>
+      </Fade>
     </section>
 
     <section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
       <div className="container mx-auto">
-        <div className="lg:flex">
-          <div>
-            <SectionIntro
-              h2Classes="font-medium 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."
-            />
+        <Fade right>
+          <div className="lg:flex">
+            <div>
+              <SectionIntro
+                h2Classes="font-medium 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."
+              />
+              <img
+                src={WebdevServices}
+                className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
+                alt="Fullstack Web Development Agency"
+              />
+              <div className="my-4">
+                <h3 className="my-1 text-black font-light text-3xl">
+                  Web development
+                </h3>
+                <p className="font-light leading-normal text-lg text-black-light">
+                  We offer full-cycle web development services for the connected
+                  world. Our talented developers work with popular languages and
+                  are up to speed with cutting edge trends.
+                </p>
+              </div>
+              <div className="my-4">
+                <h3 className="my-1 text-black font-light text-3xl">
+                  Mobile & desktop apps
+                </h3>
+                <p className="font-light leading-normal text-lg text-black-light">
+                  Building competitive applications these days is challenging,
+                  but we believe that we have what it takes for both native
+                  languages and hybrid solutions. We love using technologies
+                  like React Native and Electron to build cross-platform apps.
+                </p>
+              </div>
+              <div className="my-4">
+                <h3 className="my-1 text-black text-3xl font-light">DevOps</h3>
+                <p className="font-light leading-normal text-black-light text-lg">
+                  Our DevOps experience comes from working with leading hosting
+                  providers such as AWS and Google Cloud Platform. We offer
+                  setups and automation to support delivery across all our
+                  applications. We use the most up-to-date tools to enable
+                  stable and predictable processes of continuous delivery.
+                </p>
+              </div>
+            </div>
             <img
               src={WebdevServices}
-              className="lg:hidden w-full mx-auto text-center content-center align-center p-8"
+              className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
               alt="Fullstack Web Development Agency"
             />
-            <div className="my-4">
-              <h3 className="my-1 text-black font-light text-3xl">
-                Web development
-              </h3>
-              <p className="font-light leading-normal text-lg text-black-light">
-                We offer full-cycle web development services for the connected
-                world. Our talented developers work with popular languages and
-                are up to speed with cutting edge trends.
-              </p>
-            </div>
-            <div className="my-4">
-              <h3 className="my-1 text-black font-light text-3xl">
-                Mobile & desktop apps
-              </h3>
-              <p className="font-light leading-normal text-lg text-black-light">
-                Building competitive applications these days is challenging, but
-                we believe that we have what it takes for both native languages
-                and hybrid solutions. We love using technologies like React
-                Native and Electron to build cross-platform apps.
-              </p>
-            </div>
-            <div className="my-4">
-              <h3 className="my-1 text-black text-3xl font-light">DevOps</h3>
-              <p className="font-light leading-normal text-black-light text-lg">
-                Our DevOps experience comes from working with leading hosting
-                providers such as AWS and Google Cloud Platform. We offer setups
-                and automation to support delivery across all our applications.
-                We use the most up-to-date tools to enable stable and
-                predictable processes of continuous delivery.
-              </p>
-            </div>
           </div>
-          <img
-            src={WebdevServices}
-            className="hidden lg:block w-full max-h-35 mx-auto text-center content-center align-center p-8"
-            alt="Fullstack Web Development Agency"
-          />
-        </div>
-        <div className="p-8 my-4 bg-white border-bottom-saburly">
-          <h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
-          <p className="font-light leading-normal text-black-light text-lg">
-            We harness a wide array of emerging technologies, such as{' '}
-            <strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
-            <strong>Machine Learning</strong> and <strong>Blockchain</strong>,
-            pushing the boundaries of user experience across physical and
-            digital. Keeping track of emerging technologies is important to us
-            so that we can deliver forward-thinking solutions, but we understand
-            that technologies as just tools. That's why we're keen on being
-            framework agnostic and selecting the best tools for your needs.
-            Below are some of the technologies that we're currently working with
-            on a daily basis.
-          </p>
-          <Technologies />
-        </div>
+        </Fade>
+        <Fade bottom>
+          <div className="p-8 my-4 bg-white border-bottom-saburly">
+            <h3 className="my-1 text-black text-3xl">Emerging Technologies</h3>
+            <p className="font-light leading-normal text-black-light text-lg">
+              We harness a wide array of emerging technologies, such as{' '}
+              <strong>AR/VR</strong>, <strong>AI technologies</strong>,{' '}
+              <strong>Machine Learning</strong> and <strong>Blockchain</strong>,
+              pushing the boundaries of user experience across physical and
+              digital. Keeping track of emerging technologies is important to us
+              so that we can deliver forward-thinking solutions, but we
+              understand that technologies as just tools. That's why we're keen
+              on being framework agnostic and selecting the best tools for your
+              needs. Below are some of the technologies that we're currently
+              working with on a daily basis.
+            </p>
+            <Technologies />
+          </div>
+        </Fade>
       </div>
     </section>
 
-    <div className="px-4 py-16 bg-saburly-fadeout">
-      <div className="container mx-auto xl:flex justify-center items-center">
-        <SectionIntro
-          h2Classes="text-5xl saburly-color font-light"
-          headline="Flexible Workflow"
-          text="We are helping everything from Fortune 500 companies to startups
+    <Fade>
+      <div className="px-4 py-16 bg-saburly-fadeout">
+        <div className="container mx-auto xl:flex justify-center items-center">
+          <SectionIntro
+            h2Classes="text-5xl saburly-color font-light"
+            headline="Flexible Workflow"
+            text="We are helping 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 deliver great
           value and meets your specific business requirements"
-          classes="container mx-auto"
-        />
-        <img src={HowWeWork} className="w-full -mb-16" alt="DevOps Agency" />
+            classes="container mx-auto"
+          />
+          <img src={HowWeWork} className="w-full -mb-16" alt="DevOps Agency" />
+        </div>
+        <WorkStyle />
       </div>
-      <WorkStyle />
-    </div>
+    </Fade>
   </PageTransition>
 )
 
diff --git a/yarn.lock b/yarn.lock
index e8d3fca..d5735ce 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8119,6 +8119,12 @@ react-responsive-mixin@^0.4.0:
     enquire.js "^2.1.1"
     json2mq "^0.2.0"
 
+react-reveal@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
+  dependencies:
+    prop-types "^15.5.10"
+
 react-router-dom@^4.1.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.3.1.tgz#4c2619fc24c4fa87c9fd18f4fb4a43fe63fbd5c6"