Fade effect to about us page

src/pages/about.js

@@ -1,15 +1,16 @@
 import React, { Component } from 'react'
-
 import PageIntro from '../components/PageIntro'
 import SectionIntro from '../components/SectionIntro'
 
+import PageTransition from 'gatsby-plugin-page-transitions'
+import Fade from 'react-reveal/fade'
+
 import IntroImage from '../images/web-development-consultants.jpg'
 import MeaningSaburly from '../images/coding-tutorials-patience.svg'
 
-import PageTransition from 'gatsby-plugin-page-transitions'
-
 const AboutPage = () => (
   <PageTransition>
+    <Fade top>
       <PageIntro
         tiltImage
         headline="Founded by developers"
@@ -17,8 +18,10 @@ const AboutPage = () => (
         image={IntroImage}
         imgClasses="border-white border-8 rounded -mb-12"
       />
+    </Fade>
 
     <section className="container mx-auto my-12 p-4">
+      <Fade left>
         <div className="md:flex justify-center items-center">
           <img
             src={MeaningSaburly}
@@ -31,14 +34,17 @@ const AboutPage = () => (
             text="...Patience. ...Our goal is long-term engagement."
           />
         </div>
+      </Fade>
     </section>
 
     <section className="container mx-auto my-12 p-4">
+      <Fade>
         <SectionIntro
           h2Classes="text-5xl"
           headline="The Team"
           text="We are a small company with a personal touch that knows our stuff. Our team consists of handpicked expert software developers, designers and system architects - all highly motivated to help you succeed."
         />
+      </Fade>
     </section>
   </PageTransition>
 )