Add revealing effects on components

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",

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,6 +13,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ContactPage = () => (
   <PageTransition>
+    <Fade top>
       <PageIntro
         tiltImage
         headline="Let's make it happen"
@@ -20,9 +22,11 @@ const ContactPage = () => (
         image={ContactImage}
         imgClasses="-mb-12 border-white border-8 rounded"
       />
+    </Fade>
 
     <section className="container mx-auto my-12 p-4">
       <div className="md:flex">
+        <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" />
@@ -64,6 +68,8 @@ const ContactPage = () => (
               </div>
             </div>
           </div>
+        </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" />
@@ -105,10 +111,12 @@ const ContactPage = () => (
               </div>
             </div>
           </div>
+        </Fade>
       </div>
     </section>
 
     <div className="bg-saburly-lighter p-8">
+      <Fade>
         <section className="container lg:flex justify-between mx-auto">
           <form
             action="https://formspree.io/info@saburly.com"
@@ -161,6 +169,7 @@ const ContactPage = () => (
             />
           </div>
         </section>
+      </Fade>
     </div>
   </PageTransition>
 )

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,6 +27,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const IndexPage = ({ ...props }) => (
   <PageTransition>
+    <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}
@@ -43,24 +45,30 @@ const IndexPage = ({ ...props }) => (
           great<br />digital experiences
         </h2>
       </PageIntro>
+    </Fade>
 
     <main>
       <section className="container mx-auto max-w-lg text-center mt-16 p-4">
+        <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">
+        <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."
           />
+        </Fade>
 
+        <Fade right>
           <Service
             reversed
             h2Classes="text-4xl font-light saburly-color"
@@ -69,7 +77,9 @@ const IndexPage = ({ ...props }) => (
             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"
@@ -77,7 +87,9 @@ const IndexPage = ({ ...props }) => (
             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
@@ -86,10 +98,12 @@ const IndexPage = ({ ...props }) => (
               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">
+          <Fade>
             <SectionIntro
               h2Classes="text-4xl"
               headline="Ambitious projects bring great responsibility"
@@ -132,21 +146,27 @@ const IndexPage = ({ ...props }) => (
                 />
               </div>
             </div>
+          </Fade>
 
+          <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">
+        <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">
@@ -157,19 +177,23 @@ const IndexPage = ({ ...props }) => (
                   excerpt={node.excerpt}
                   image={
                     node.featured_media
-                    ? node.featured_media.localFile.childImageSharp.resolutions
+                      ? 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>

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,6 +16,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const ServicesPage = () => (
   <PageTransition>
+    <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"
@@ -23,7 +25,9 @@ const ServicesPage = () => (
         image={IntroImage}
         imgClasses="-mb-12 border-white border-8 rounded-lg"
       />
+    </Fade>
     <section className="px-4 py-16">
+      <Fade left>
         <div className="container mx-auto">
           <div className="lg:flex">
             <img
@@ -31,6 +35,7 @@ const ServicesPage = () => (
               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"
@@ -53,9 +58,10 @@ const ServicesPage = () => (
                 </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
+                  creating a clear understanding of the problem that you're
-                to solve with the project. After collecting and analyzing data,
+                  trying to solve with the project. After collecting and
-                we develop concept that becomes a guideline for the design.
+                  analyzing data, we develop concept that becomes a guideline
+                  for the design.
                 </p>
               </div>
               <div className="my-4">
@@ -64,21 +70,23 @@ const ServicesPage = () => (
                 </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
+                  and delightful to interact with. From User-Flows, Lo-Fi &
-                Wireframes and Prototypes to polished slick end-products, we
+                  Hi-Fi Wireframes and Prototypes to polished slick
-                create digital experiences that stand out. This is done through
+                  end-products, we create digital experiences that stand out.
-                our human-centered UI/UI approach where the main goal is to
+                  This is done through our human-centered UI/UI approach where
-                effectively communicate the functionality of your product to its
+                  the main goal is to effectively communicate the functionality
-                target audience.
+                  of your product to its target audience.
                 </p>
               </div>
             </SectionIntro>
           </div>
         </div>
+      </Fade>
     </section>
 
     <section className="bg-saburly relative bg-saburly-lighter px-4 py-16">
       <div className="container mx-auto">
+        <Fade right>
           <div className="lg:flex">
             <div>
               <SectionIntro
@@ -106,20 +114,20 @@ const ServicesPage = () => (
                   Mobile & desktop apps
                 </h3>
                 <p className="font-light leading-normal text-lg text-black-light">
-                Building competitive applications these days is challenging, but
+                  Building competitive applications these days is challenging,
-                we believe that we have what it takes for both native languages
+                  but we believe that we have what it takes for both native
-                and hybrid solutions. We love using technologies like React
+                  languages and hybrid solutions. We love using technologies
-                Native and Electron to build cross-platform apps.
+                  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
+                  providers such as AWS and Google Cloud Platform. We offer
-                and automation to support delivery across all our applications.
+                  setups and automation to support delivery across all our
-                We use the most up-to-date tools to enable stable and
+                  applications. We use the most up-to-date tools to enable
-                predictable processes of continuous delivery.
+                  stable and predictable processes of continuous delivery.
                 </p>
               </div>
             </div>
@@ -129,6 +137,8 @@ const ServicesPage = () => (
               alt="Fullstack Web Development Agency"
             />
           </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">
@@ -137,17 +147,19 @@ const ServicesPage = () => (
               <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
+              so that we can deliver forward-thinking solutions, but we
-            that technologies as just tools. That's why we're keen on being
+              understand that technologies as just tools. That's why we're keen
-            framework agnostic and selecting the best tools for your needs.
+              on being framework agnostic and selecting the best tools for your
-            Below are some of the technologies that we're currently working with
+              needs. Below are some of the technologies that we're currently
-            on a daily basis.
+              working with on a daily basis.
             </p>
             <Technologies />
           </div>
+        </Fade>
       </div>
     </section>
 
+    <Fade>
       <div className="px-4 py-16 bg-saburly-fadeout">
         <div className="container mx-auto xl:flex justify-center items-center">
           <SectionIntro
@@ -164,6 +176,7 @@ const ServicesPage = () => (
         </div>
         <WorkStyle />
       </div>
+    </Fade>
   </PageTransition>
 )
 

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"