Installed React-awesome-reveal and configured it on Mission Pillar, About and the Hero Section

Author: Zackius

package.json

@@ -14,13 +14,14 @@
     "validate": "concurrently --kill-others-on-fail -g -p \"[{name}]\" -n \"prettier,lint,typecheck,build\" \"npm:prettier:check -s\" \"npm:lint -s\" \"npm:typecheck -s\" \"npm:build -s -- --no-lint\""
   },
   "dependencies": {
+    "@emotion/react": "^11.10.6",
     "@headlessui/react": "^1.7.3",
     "@types/react-google-recaptcha": "^2.1.5",
     "next": "12.3.1",
     "react": "18.1.0",
+    "react-awesome-reveal": "^4.2.3",
     "react-dom": "18.1.0",
-    "react-google-recaptcha": "^2.1.0",
-    "react-reveal": "^1.2.2"
+    "react-google-recaptcha": "^2.1.0"
   },
   "devDependencies": {
     "@formspree/react": "^2.4.1",

src/components/AboutUs/AboutUs.tsx

@@ -1,18 +1,18 @@
-import { Fade } from "react-reveal"
+import { Fade } from "react-awesome-reveal"
 
 export default function AboutUs() {
   return (
     <section
       id="about-us"
       className="flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4"
     >
-      <Fade right>
+      <Fade direction="down">
       <h2 className="text-3xl border-b-2 border-slate-400 md:text-6xl tracking-wide md:font-light uppercase">
         About Us
       </h2>
       <p className="hidden md:inline-block text-4xl font-bold ">
         Empowering great talent
-      </p>
+        </p>
       <p className="sm:text-sm md:text-xl tracking-wide text-center space-y-4">
         We bring together people who are passionate about React JS and{' '}
         <br className="hidden md:display" />

src/components/HeroHeader/DesktopHero.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import Navbar from '../Navbar';
 import bgImage from '../../../public/images/hero-image.jpg';
 import LinkButton from '../LinkButton/LinkButton';
+import {Fade} from "react-awesome-reveal"
 
 export default function HeroHeader() {
   return (
@@ -18,13 +19,16 @@ export default function HeroHeader() {
         <Navbar />
       </div>
       <div className="w-full flex flex-col items-center justify-center z-10">
+        <Fade direction='left'>
         <h1 className="font-montserrat font-bold text-center text-white text-[40px] leading-10 w-[388px] mx-auto mt-20">
           React Developer Community Kenya
         </h1>
         <p className="font-montserrat text-white w-[570px] mx-auto text-center mt-5 mb-[45px]">
           We are a tech community in Kenya focused on the React JS library and
           its ecosystem.
-        </p>
+          </p>
+        </Fade>
+        <Fade direction='right'>
         <div className="flex items-center justify-center mb-44 relative">
           <LinkButton
             className="flex justify-center items-center bg-[#EC0505] w-[307px] h-[61px] rounded-md text-white font-montserrat font-bold"
@@ -34,7 +38,8 @@ export default function HeroHeader() {
           >
             Join ReactDevsKe
           </LinkButton>
-        </div>
+          </div>
+          </Fade>
       </div>
     </div>
   );

src/components/MissionPillars/MissionPillars.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import Pillar from '../Pillar/Pillar';
-import {Fade} from "react-reveal"
+import {Fade} from "react-awesome-reveal"
 
 export default function MissionPillars() {
   return (
@@ -10,14 +10,14 @@ export default function MissionPillars() {
       </h2>
       <div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
         <div className="flex">
-          <Fade left>
+          <Fade direction="left">
           <Pillar count="01" label="Mentorship" />
           </Fade>
         </div>
         <div className="flex justify-end w-full md:w-2/5 lg:w-1/4">
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
-              <Fade right>
+              <Fade direction='right'>
               <Image
                 src={'/images/mentorship-image.jpg'}
                 alt="Mentorship Image"
@@ -30,14 +30,14 @@ export default function MissionPillars() {
       </div>
       <div className="flex flex-col md:flex-row-reverse md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6 md:space-x-reverse">
         <div className="flex justify-end">
-          <Fade right>
+          <Fade direction='right'>
           <Pillar count="02" label="Learning" />
        </Fade>
         </div>
         <div className="flex md:justify-start w-full md:w-2/5 lg:w-1/4">
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
-              <Fade left>
+              <Fade direction='left'>
               <Image
                 src={'/images/learning-image.jpg'}
                 alt="Learning Image"
@@ -50,14 +50,14 @@ export default function MissionPillars() {
       </div>
       <div className="flex flex-col md:flex-row md:items-center md:justify-center w-full px-6 space-y-4 md:space-x-6">
         <div className="flex">
-          <Fade left>
+          <Fade direction='left'>
           <Pillar count="03" label="Community" />
           </Fade>
         </div>
         <div className="flex justify-end w-full md:w-2/5 lg:w-1/4 ">
           <div className="flex w-1/2 md:w-full">
             <div className="w-full overflow-hidden aspect-w-4 aspect-h-3">
-              <Fade right>
+              <Fade direction='right'>
               <Image
                 src={'/images/community-image.jpg'}
                 alt="Community Image"