From 1a0095aae6cb55617ff45dfcf106b3c7bc2c6b98 Mon Sep 17 00:00:00 2001
From: SohelRaja <rohan.nsec@gmail.com>
Date: Sun, 26 Apr 2020 09:47:36 +0530
Subject: [PATCH] Animation added to Aboutus

---
 src/components/AboutComponent.js | 34 +++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/AboutComponent.js b/src/components/AboutComponent.js
index a40285b..2f2cef5 100644
--- a/src/components/AboutComponent.js
+++ b/src/components/AboutComponent.js
@@ -1,21 +1,25 @@
 import React from 'react';
 import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { Fade, Stagger } from 'react-animation-components';
+
 import './../App.css';
 import { baseUrl } from '../shared/baseUrl';
 
 function RenderLeader({leader}){
     return(
-        <Media>
-            <Media left middle>
-                <Media object src={baseUrl + leader.image} alt={leader.name} className="media-image"/>
-            </Media>
-            <Media body>
-                <Media heading>{leader.name}</Media>
-                <p>{leader.designation}</p>
-                <p>{leader.description}</p>
+            <Media>
+                <Fade in>
+                    <Media left middle>
+                        <Media object src={baseUrl + leader.image} alt={leader.name} className="media-image"/>
+                    </Media>
+                    <Media body>
+                        <Media heading>{leader.name}</Media>
+                        <p>{leader.designation}</p>
+                        <p>{leader.description}</p>
+                    </Media>
+                </Fade>
             </Media>
-        </Media>
     );
 }
 
@@ -82,11 +86,13 @@ function About(props) {
                 <div className="col-12">
                     <h3>Corporate Leadership</h3>
                 </div>
-                <div className="col-12">
-                    <Media list>
-                        {leaders}
-                    </Media>
-                </div>
+                <Stagger in>
+                    <div className="col-12">
+                        <Media list>
+                            {leaders}
+                        </Media>
+                    </div>
+                </Stagger>
             </div>
         </div>
     );