animations updated

Author: Utkarsh742

package-lock.json

@@ -1,16 +1,20 @@
 import React from 'react'
-
+import { useEffect } from 'react';
 import Home from './components/Home'
 import CampusCaptainForm from './components/campus-captains-form/CampusCaptainForm'
 import { BrowserRouter as Router, Route } from "react-router-dom";
 import Discord from './components/discord/Discord'
 import CoursePage from './components/course-page/CoursePage'
 import { CodingEssentials, CompCoding, ComputerVision, CppEssentials, DeepLearning, DSAEssentials, DSALevelUp, DynamicProgramming, GameTheory, Git, GraphAlgorithm, MachineLearning, NaturalLanguage, PythonDataScience, PythonMasterCourse } from './components/course-page/individual-components/index'
-
+import AOS from "aos";
+import "aos/dist/aos.css";
 
 const App = () => {
 
-
+      useEffect(() => {
+        AOS.init({startEvent : 'load'});
+        AOS.refreshHard();
+      },[]);
 
     return (
         <>

src/App.js

@@ -1,16 +1,7 @@
 import React from "react";
 import "./Blogs.css";
 import reading from "../../assets/Images/main/brandname.svg";
-
-import { Link } from 'react-router-dom';
-import AOS from "aos";
-import "aos/dist/aos.css";
-
 const Blogs = () => {
-  React.useEffect(() => {
-    AOS.init();
-    AOS.refresh();
-  }, []);
   return (
     <div className="components-outer-container" id="blogss">
       <div className="blogs-outer-container" data-aos="fade-up" >

src/components/Blogs/Blogs.jsx

@@ -16,6 +16,7 @@ import Blogs from './Blogs/Blogs'
 // import HeaderBanner from './header-banner/HeaderBanner'
 
 const Home = () => {
+ 
     return (
         <>
             {/* <Advertisement /> */}

src/components/Home.js

@@ -4,13 +4,8 @@ import codingMinutesLogo from "../../assets/Images/main/codingMinutesLogo.png";
 import youtube from "../../assets/Images/main/youtube.png";
 import linkedin from "../../assets/Images/main/linkedin.png";
 import instagram from "../../assets/Images/main/instagram.png";
-import AOS from "aos";
-import "aos/dist/aos.css";
 const Footer = () => {
-  React.useEffect(() => {
-    AOS.init();
-    AOS.refresh();
-  },[]);
+ 
   return (
     <div className="footer-outer-container" data-aos="fade-up">
       <div className="components-outer-container" id="faq">

src/components/footer/Footer.jsx

@@ -88,8 +88,19 @@
 
 .header-right-image {
   margin-top: 40px;
+  animation: wave 4.6s infinite;
+  transition: smooth;
 }
 
+@keyframes wave
+{
+    20%,to{
+      transform: translate3d(0);
+    }
+    40%{
+      transform: translateY(-12px);
+    }
+}
 .header-right-image img {
   width: 500px;
 }

src/components/header/header.css

@@ -9,13 +9,7 @@ import worldIcon from "../../assets/Images/main/world.png";
 import youtubeIcon from "../../assets/Images/main/youtube-icon.png";
 import webDesignIcon from "../../assets/Images/main/web-design.png";
 import medalIcon from "../../assets/Images/main/medal.png";
-import AOS from "aos";
-import "aos/dist/aos.css";
 const WhyCM = () => {
-  React.useEffect(() => {
-    AOS.init();
-    AOS.refresh();
-  }, []);
   return (
     <div className="components-outer-container">
       <div className="why-cm-outer-container">