Added fade animation feature on MissionPillar, About, and Event. Text border bottom in componenets headers

Author: Zackius

package.json

@@ -19,7 +19,8 @@
     "next": "12.3.1",
     "react": "18.1.0",
     "react-dom": "18.1.0",
-    "react-google-recaptcha": "^2.1.0"
+    "react-google-recaptcha": "^2.1.0",
+    "react-reveal": "^1.2.2"
   },
   "devDependencies": {
     "@formspree/react": "^2.4.1",

src/components/AboutUs/AboutUs.tsx

@@ -1,10 +1,13 @@
+import { Fade } from "react-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 right>
+      <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 ">
@@ -16,6 +19,7 @@ export default function AboutUs() {
         it&apos;s ecosystem. We are a community of full-stack developers,
         frontend developers and so much more
       </p>
+      </Fade>
     </section>
   );
 }

src/components/ContactUs/DesktopVersion.tsx

@@ -8,7 +8,7 @@ import ReCAPTCHA from 'react-google-recaptcha';
 export default function DesktopVersion() {
   const [captchaComplete, setCaptchaComplete] = useState<boolean>(false);
 
-  const [state, handleSubmit] = useForm(process.env.NEXT_PUBLIC_FORMSPREE_ID!);
+  const [state, handleSubmit] = useForm("process.env.NEXT_PUBLIC_FORMSPREE_ID!");
 
   const handleRecaptchaResult = (result: string | null) => {
     if (result) {
@@ -84,7 +84,7 @@ export default function DesktopVersion() {
           />
 
           <ReCAPTCHA
-            sitekey={process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!}
+            sitekey={"process.env.NEXT_PUBLIC_RECAPTCHA_SITE_KEY!"}
             onChange={handleRecaptchaResult}
           />
 

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-reveal"
 
 const events: EventData[] = [
   {
@@ -60,10 +61,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 right>
+      <h2 className="flex text-2xl  border-b-2 border-slate-400 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/MissionPillars/MissionPillars.tsx

@@ -1,56 +1,69 @@
 import Image from 'next/image';
 import Pillar from '../Pillar/Pillar';
+import {Fade} from "react-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 border-b-2 border-slate-400  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 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>
               <Image
                 src={'/images/mentorship-image.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 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>
               <Image
                 src={'/images/learning-image.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 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>
               <Image
                 src={'/images/community-image.jpg'}
                 alt="Community Image"
                 layout="fill"
               />
+             </Fade>
             </div>
           </div>
         </div>