Initial animation added

Author: git-sujon

src/Pages/Home/AgentHiring/AgentHiring.js

@@ -1,10 +1,16 @@
 import React from "react";
 import { Link } from "react-router-dom";
-
+import AOS from "aos";
+import "aos/dist/aos.css";
 const AgentHiring = () => {
   return (
     <section class="overflow-hidden sm:grid sm:grid-cols-2 pt-32">
-      <div class=" pr-8 pb-8 md:pb-0">
+      <div class=" pr-8 pb-8 md:pb-0"
+       data-aos="fade-down"
+       data-aos-offset="300"
+       data-aos-easing="linear"
+       data-aos-duration="500"
+      >
         <div class="mx-auto max-w-xl text-center sm:text-left">
           <h2 class="text-3xl font-bold text-gray-900 md:text-6xl">
           Our Agent Can Help You to Find the Best House
@@ -25,10 +31,18 @@ const AgentHiring = () => {
         </div>
       </div>
 
+      <div 
+       data-aos="fade-up"
+       data-aos-offset="300"
+       data-aos-easing="linear"
+       data-aos-duration="500"
+
+      >
       <img
         alt="Student"
         src="https://i.ibb.co/dfCvzY4/Easter-Buyshutterstock-1156208527.jpg"
       />
+      </div>
     </section>
   );
 };

src/Pages/Home/Home.js

@@ -19,9 +19,10 @@ const Home = () => {
   return (
     <div>
       <div
-        data-aos="fade-right"
+        data-aos="fade-down"
         data-aos-offset="300"
-        data-aos-easing="ease-in-sine"
+        data-aos-easing="linear"
+        data-aos-duration="1000"
       >
         <HomeBanner></HomeBanner>
       </div>
@@ -31,9 +32,9 @@ const Home = () => {
         {/* <Search></Search> */}
         <div
           data-aos="fade-up"
-          data-aos-duration="4000"
           data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
+          data-aos-easing="linear"
+          data-aos-duration="500"
         >
           <CatagoriesShowcase></CatagoriesShowcase>
         </div>
@@ -42,9 +43,7 @@ const Home = () => {
         {/* ............................. */}
 
         <div
-          data-aos="fade-down"
-          data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
+
         >
           <Advertised></Advertised>
         </div>
@@ -53,9 +52,6 @@ const Home = () => {
         {/* ............................. */}
 
         <div
-          data-aos="fade-right"
-          data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
         >
           <AgentHiring></AgentHiring>
         </div>
@@ -66,7 +62,8 @@ const Home = () => {
         <div
           data-aos="fade-left"
           data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
+          data-aos-easing="linear"
+          data-aos-duration="500"
         >
           <WhyIndirect></WhyIndirect>
         </div>
@@ -77,7 +74,8 @@ const Home = () => {
         <div
           data-aos="zoom-in-up"
           data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
+          data-aos-easing="linear"
+          data-aos-duration="500"
         >
           <Testimonials></Testimonials>
         </div>
@@ -93,7 +91,8 @@ const Home = () => {
         <div
           data-aos="zoom-out-up"
           data-aos-offset="300"
-          data-aos-easing="ease-in-sine"
+          data-aos-easing="linear"
+          data-aos-duration="500"
         >
           <AboutIndirect></AboutIndirect>
         </div>
@@ -104,7 +103,7 @@ const Home = () => {
         <div
           data-aos="fade-up"
           data-aos-easing="linear"
-          data-aos-duration="1500"
+          data-aos-duration="500"
         >
           <SubscribeCTA></SubscribeCTA>
         </div>

src/Pages/Home/WhyIndirect/WhyIndirect.js

@@ -3,11 +3,25 @@ import { ShieldCheckIcon } from '@heroicons/react/24/solid'
 const WhyIndirect = () => {
   return (
     <section class="overflow-hidden sm:grid sm:grid-cols-2 pt-32">
-      <img
+    <div
+       data-aos="fade-down"
+       data-aos-offset="300"
+       data-aos-easing="linear"
+       data-aos-duration="500"
+    
+    >
+    <img
         alt="Student"
         src="https://i.ibb.co/Br6Tr6g/960x0.jpg"
       />
-      <div class=" pl-8 pb-8 md:pb-0">
+    </div>
+      <div class=" pl-8 pb-8 md:pb-0"
+         data-aos="fade-up"
+         data-aos-offset="300"
+         data-aos-easing="linear"
+         data-aos-duration="500"
+      
+      >
         <div class="mx-auto max-w-xl text-center sm:text-left">
           <h2 class="text-3xl font-bold text-gray-900 md:text-6xl">
             Home Buying And Selling Journey with Indirect