Format to fix build error [Fixes #137]

Author: octaviookumu

src/components/AboutUs/AboutUs.tsx

@@ -1,4 +1,4 @@
-import { Fade } from "react-awesome-reveal"
+import { Fade } from 'react-awesome-reveal';
 
 export default function AboutUs() {
   return (
@@ -7,18 +7,18 @@ export default function AboutUs() {
       className="flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4"
     >
       <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
+        <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 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>
-      <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,7 +1,7 @@
 import Link from 'next/link';
 import type { EventData } from '../../types/index';
 import DisplayRC from './DisplayRC';
-import {Fade} from "react-awesome-reveal"
+import { Fade } from 'react-awesome-reveal';
 
 const events: EventData[] = [
   {
@@ -66,11 +66,11 @@ 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"
     >
-      <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 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) => (

src/components/MissionPillars/MissionPillars.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 import Pillar from '../Pillar/Pillar';
-import {Fade} from "react-awesome-reveal"
+import { Fade } from 'react-awesome-reveal';
 
 export default function MissionPillars() {
   return (
@@ -11,65 +11,65 @@ export default function MissionPillars() {
       <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" />
+            <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>
+              <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>
+          <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>
+              <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 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>
+              <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>