Merge pull request #129 from Zackius/animation-zack

Added fade animation feature on MissionPillar, About, and Event. Text…

Author: orama254

package.json

@@ -14,10 +14,12 @@
     "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"
   },

src/components/AboutUs/AboutUs.tsx

@@ -1,21 +1,25 @@
+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"
     >
-      <h2 className="text-3xl md:text-6xl tracking-wide md:font-light uppercase">
+      <Fade direction="down">
+      <h2 className="text-3xl  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" />
         it&apos;s ecosystem. We are a community of full-stack developers,
         frontend developers and so much more
       </p>
+      </Fade>
     </section>
   );
 }

src/components/Events/Events.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
 import type { EventData } from '../../types/index';
 import DisplayRC from './DisplayRC';
+import {Fade} from "react-awesome-reveal"
 
 const events: EventData[] = [
   {
@@ -65,10 +66,12 @@ export default function Events() {
       id="events"
       className="relative flex flex-col items-center justify-center w-full py-16 bg-white md:py-20 gap-y-2 md:gap-y-5"
     >
-      <h2 className="flex items-center justify-center font-light tracking-wide">
+      <Fade direction='down'>
+      <h2 className="flex text-2xl  items-center justify-center font-light tracking-wide">
         Events
       </h2>
       <h2 className="pb-2 text-2xl font-bold md:pb-10">Community Events</h2>
+      </Fade>
       <div className="grid grid-cols-1 gap-y-4 md:gap-y-10 gap-x-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 xl:gap-x-8 md:grid-cols-2 bg-[#09AFC6] px-4 md:px-10 lg:px-16 py-8 md:py-14 xl:py-16">
         {events.map((event) => (
           <DisplayRC

src/components/HeroHeader/DesktopHero.tsx

@@ -2,6 +2,7 @@ import Image from 'next/image';
 import React from 'react';
 import Navbar from '../Navbar';
 import LinkButton from '../LinkButton/LinkButton';
+import {Fade} from "react-awesome-reveal"
 
 export default function HeroHeader() {
   return (
@@ -17,13 +18,14 @@ export default function HeroHeader() {
         <Navbar />
       </div>
       <div className="w-full flex flex-col items-center justify-center z-10">
+        <Fade direction='down'>
         <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>
         <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"
@@ -33,7 +35,8 @@ export default function HeroHeader() {
           >
             Join ReactDevsKe
           </LinkButton>
-        </div>
+          </div>
+          </Fade>
       </div>
     </div>
   );

src/components/MissionPillars/MissionPillars.tsx

@@ -1,62 +1,75 @@
 import Image from 'next/image';
 import Pillar from '../Pillar/Pillar';
+import {Fade} from "react-awesome-reveal"
 
 export default function MissionPillars() {
   return (
     <section className="flex flex-col w-full md:justify-center items-center bg-white md:bg-[#CEEDF4] py-12 space-y-10">
-      <h2 className="md:uppercase font-bold md:font-light text-2xl md:text-5xl">
+      <h2 className="md:uppercase  font-bold md:font-light text-2xl md:text-5xl">
         Our Mission Pillars
       </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 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 direction='right'>
               <Image
                 src={
                   'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/mentorship-image_tz0mor.jpg'
                 }
                 alt="Mentorship Image"
                 layout="fill"
               />
+          </Fade>
             </div>
           </div>
         </div>
       </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 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 direction='left'>
               <Image
                 src={
                   'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/learning-image_eylqwm.jpg'
                 }
                 alt="Learning Image"
                 layout="fill"
               />
+             </Fade>
             </div>
           </div>
         </div>
       </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 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 direction='right'>
               <Image
                 src={
                   'https://res.cloudinary.com/reactjs-devs-ke/image/upload/v1678532588/website-images/community-image_pkeqwj.jpg'
                 }
                 alt="Community Image"
                 layout="fill"
               />
+             </Fade>
             </div>
           </div>
         </div>