From 718c0833189c81e7130bb062baa6e66939d09092 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Sat, 11 Nov 2023 19:07:47 +0300
Subject: [PATCH 01/10] setup modal

---
 src/APP/components/index.js                   |   4 +-
 src/APP/pages/aboutUs/data.js                 |  59 +++++++
 .../aboutUs/sections/LeadershipSection.jsx    | 164 +++++++++++-------
 src/assets/images/aboutPage/index.js          |  39 +++++
 src/assets/images/icons/index.js              |   7 +
 5 files changed, 210 insertions(+), 63 deletions(-)
 create mode 100644 src/APP/pages/aboutUs/data.js
 create mode 100644 src/assets/images/aboutPage/index.js
 create mode 100644 src/assets/images/icons/index.js

diff --git a/src/APP/components/index.js b/src/APP/components/index.js
index 9d0bf5ce..a64fcd3b 100644
--- a/src/APP/components/index.js
+++ b/src/APP/components/index.js
@@ -3,5 +3,7 @@ import { default as Footer } from "./Footer";
 import { default as Footer2 } from "./Footer2";
 import { default as Header } from "./Header";
 import { default as Header2 } from "./Header2";
+import { default as Caroussel } from "./Caroussel";
+import { default as Counter } from "./Counter";
 
-export { FAQ, Footer, Footer2, Header, Header2 };
+export { FAQ, Footer, Footer2, Header, Header2, Caroussel, Counter };
diff --git a/src/APP/pages/aboutUs/data.js b/src/APP/pages/aboutUs/data.js
new file mode 100644
index 00000000..afb7ee01
--- /dev/null
+++ b/src/APP/pages/aboutUs/data.js
@@ -0,0 +1,59 @@
+import {
+  catherine,
+  fred,
+  hudson,
+  ian,
+  james,
+  juma,
+  marlyn,
+  sharon,
+  waithaka,
+} from "../../../assets/images/aboutPage";
+
+export const LeadershipData = [
+  {
+    name: "Fred Ouko",
+    title: "Founder",
+    image: fred,
+  },
+  {
+    name: "Catherine Kiiru",
+    title: "Dev Relations & Opensource Programs",
+    image: catherine,
+  },
+  {
+    name: "James Otieno",
+    title: "Community Manager",
+    image: james,
+  },
+  {
+    name: "Hudson Obai",
+    title: "Head of Engineering",
+    image: hudson,
+  },
+  {
+    name: "Ian Mugenya",
+    title: "Mentorship Program Lead",
+    image: ian,
+  },
+  {
+    name: "Marlyn Mayienga",
+    title: "Program Manager",
+    image: marlyn,
+  },
+  {
+    name: "Sharon Jebitok",
+    title: "Head of Chapters and Volunteers",
+    image: sharon,
+  },
+  {
+    name: "Waithaka Waweru",
+    title: "Dev Relations and Events",
+    image: waithaka,
+  },
+  {
+    name: "Juma Lawrence",
+    title: "Head of Communication",
+    image: juma,
+  },
+];
diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 2d372a40..8284b16d 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -1,72 +1,30 @@
-import FredOuko from "../../../../assets/images/aboutPage/leadership/fred-ouko.png";
-import CatherineKiiru from "../../../../assets/images/aboutPage/leadership/catherine-kiiru.png";
-import JamesOtieno from "../../../../assets/images/aboutPage/leadership/james-otieno.png";
-import HudsonObai from "../../../../assets/images/aboutPage/leadership/hudson-obai.png";
-import IanMugenya from "../../../../assets/images/aboutPage/leadership/ian-mugenya.png";
-import MarlynMayienga from "../../../../assets/images/aboutPage/leadership/marlyn-mayienga.png";
-import SharonJebitok from "../../../../assets/images/aboutPage/leadership/sharon-jebitok.png";
-import WaithakaWaweru from "../../../../assets/images/aboutPage/leadership/waithaka-waweru.png";
-import JumaLawrence from "../../../../assets/images/aboutPage/leadership/juma-lawrence.png";
-import Caroussel from "../../../components/Caroussel";
-import BuildingCommunity from "../../../../assets/images/aboutPage/building-community.png";
+import { Fragment, useState } from "react";
+import { Dialog, Transition } from "@headlessui/react";
 
-const LeadershipData = [
-  {
-    name: "Fred Ouko",
-    title: "Founder",
-    image: FredOuko,
-  },
-  {
-    name: "Catherine Kiiru",
-    title: "Dev Relations & Opensource Programs",
-    image: CatherineKiiru,
-  },
-  {
-    name: "James Otieno",
-    title: "Community Manager",
-    image: JamesOtieno,
-  },
-  {
-    name: "Hudson Obai",
-    title: "Head of Engineering",
-    image: HudsonObai,
-  },
-  {
-    name: "Ian Mugenya",
-    title: "Mentorship Program Lead",
-    image: IanMugenya,
-  },
-  {
-    name: "Marlyn Mayienga",
-    title: "Program Manager",
-    image: MarlynMayienga,
-  },
-  {
-    name: "Sharon Jebitok",
-    title: "Head of Chapters and Volunteers",
-    image: SharonJebitok,
-  },
-  {
-    name: "Waithaka Waweru",
-    title: "Dev Relations and Events",
-    image: WaithakaWaweru,
-  },
-  {
-    name: "Juma Lawrence",
-    title: "Head of Communication",
-    image: JumaLawrence,
-  },
-];
+import { Caroussel } from "../../../components";
+import { closeIcon } from "../../../../assets/images/icons";
+import { LeadershipData } from "../data";
+import { buildComm } from "../../../../assets/images/aboutPage";
 
 function LeadershipSection() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
   return (
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl">
       <h1 className="md:text-3xl text-2xl font-semibold title-font text-[#323433] text-center">
         Meet our leadership
       </h1>
 
-      <Caroussel CarousselData={LeadershipData}/>
-      
+      <Caroussel CarousselData={LeadershipData} />
+
       <div className="bg-[#E5EFEC] flex -mt-36 pt-40 pb-8 md:pb-24 px-4 lg:px-14 xl:px-28 justify-between flex-col md:flex-row">
         <div className="space-y-4 md:w-1/2 mb-14">
           <h2 className="text-[#009975] items-center text-xl">
@@ -91,10 +49,92 @@ function LeadershipSection() {
             mentorship and connected with job opportunities where they can earn
             from their hard work.
           </p>
-          <button className="font-semibold text-white bg-[#009975] border-0 py-3 px-8 w-full md:w-auto focus:outline-none rounded-lg text-lg">Partner with us</button>
+          <button
+            className="font-semibold text-white bg-[#009975] border-0 py-3 px-8 w-full md:w-auto focus:outline-none rounded-lg text-lg"
+            type="button"
+            onClick={openModal}
+          >
+            Partner with us
+          </button>
+
+          {/* Email us Modal */}
+          <Transition appear show={isOpen} as={Fragment}>
+            <Dialog as="div" className="relative z-10" onClose={closeModal}>
+              <Transition.Child
+                as={Fragment}
+                enter="ease-out duration-300"
+                enterFrom="opacity-0"
+                enterTo="opacity-100"
+                leave="ease-in duration-200"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+                <div className="fixed inset-0 bg-black/25" />
+              </Transition.Child>
+
+              <div className="fixed inset-0 overflow-y-auto">
+                <div className="flex min-h-full items-center justify-center p-4 text-center">
+                  <Transition.Child
+                    as={Fragment}
+                    enter="ease-out duration-300"
+                    enterFrom="opacity-0 scale-95"
+                    enterTo="opacity-100 scale-100"
+                    leave="ease-in duration-200"
+                    leaveFrom="opacity-100 scale-100"
+                    leaveTo="opacity-0 scale-95"
+                  >
+                    <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white p-6 text-left align-middle shadow-xl transition-all flex flex-col items-end gap-4">
+                      <button type="button" onClick={closeModal}>
+                        <img
+                          src={closeIcon}
+                          alt="close"
+                          className="object-contain w-4 h-4"
+                        />
+                      </button>
+                      <form className="flex flex-col gap-6 w-full">
+                        <Dialog.Title
+                          as="h3"
+                          className="text-lg font-medium leading-6 text-gray-900 pl-2"
+                        >
+                          Write a message
+                        </Dialog.Title>
+
+                        <div className="flex flex-col gap-4">
+                          <input
+                            type="text"
+                            placeholder="Your name"
+                            className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                          />
+                          <input
+                            type="email"
+                            placeholder="Your email"
+                            className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                          />
+                          <textarea
+                            cols="30"
+                            rows="10"
+                            placeholder="Your name"
+                            className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                          />
+                        </div>
+
+                        <button
+                          type="submit"
+                          className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-[#009975] px-6 py-3 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
+                          onClick={closeModal}
+                        >
+                          Send message
+                        </button>
+                      </form>
+                    </Dialog.Panel>
+                  </Transition.Child>
+                </div>
+              </div>
+            </Dialog>
+          </Transition>
         </div>
         <div className="md:w-1/2">
-          <img src={BuildingCommunity} alt="Space ya Tech Community"/>
+          <img src={buildComm} alt="Space ya Tech Community" />
         </div>
       </div>
     </section>
diff --git a/src/assets/images/aboutPage/index.js b/src/assets/images/aboutPage/index.js
new file mode 100644
index 00000000..c6456adb
--- /dev/null
+++ b/src/assets/images/aboutPage/index.js
@@ -0,0 +1,39 @@
+import aaron from "./creativeTeam/aaron-abubakar.png";
+import emmy from "./creativeTeam/emmy-akinyi.png";
+import pamela from "./creativeTeam/pamela-owino.png";
+
+import catherine from "./leadership/catherine-kiiru.png";
+import fred from "./leadership/fred-ouko.png";
+import hudson from "./leadership/hudson-obai.png";
+import ian from "./leadership/ian-mugenya.png";
+import james from "./leadership/james-otieno.png";
+import juma from "./leadership/juma-lawrence.png";
+import marlyn from "./leadership/marlyn-mayienga.png";
+import sharon from "./leadership/sharon-jebitok.png";
+import waithaka from "./leadership/waithaka-waweru.png";
+
+import about1 from "./about-img-1.png";
+import about2 from "./about-img-2.png";
+import buildComm from "./building-community.png";
+import mission from "./mission-bg.png";
+import vision from "./vision-bg.png";
+
+export {
+  aaron,
+  emmy,
+  pamela,
+  catherine,
+  fred,
+  hudson,
+  ian,
+  james,
+  juma,
+  marlyn,
+  sharon,
+  waithaka,
+  about1,
+  about2,
+  buildComm,
+  mission,
+  vision,
+};
diff --git a/src/assets/images/icons/index.js b/src/assets/images/icons/index.js
new file mode 100644
index 00000000..37398a85
--- /dev/null
+++ b/src/assets/images/icons/index.js
@@ -0,0 +1,7 @@
+import bellIcon from "./bell-icon.svg";
+import cartIcon from "./cart-icon.svg";
+import closeIcon from "./close-icon.svg";
+import deleteIcon from "./delete-icon.svg";
+import searchIcon from "./search-icon.svg";
+
+export { bellIcon, cartIcon, closeIcon, deleteIcon, searchIcon };

From a6af5f4c976b4c5f9f84f5e35a1e0332655c2878 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Sat, 11 Nov 2023 20:11:39 +0300
Subject: [PATCH 02/10] add email.js component

---
 package.json                                  |  1 +
 .../aboutUs/sections/LeadershipSection.jsx    | 63 +++++++++++++++++--
 2 files changed, 60 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index 68e28409..17289342 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
     "date-fns": "^2.30.0",
+    "@emailjs/browser": "^3.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",
diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 8284b16d..78f7d63a 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -1,5 +1,6 @@
-import { Fragment, useState } from "react";
+import { Fragment, useState, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+import emailjs from "@emailjs/browser";
 
 import { Caroussel } from "../../../components";
 import { closeIcon } from "../../../../assets/images/icons";
@@ -8,6 +9,13 @@ import { buildComm } from "../../../../assets/images/aboutPage";
 
 function LeadershipSection() {
   const [isOpen, setIsOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+
+  const formRef = useRef();
 
   function closeModal() {
     setIsOpen(false);
@@ -17,6 +25,41 @@ function LeadershipSection() {
     setIsOpen(true);
   }
 
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    emailjs
+      .send(
+        "service_rvx6y2h",
+        "template_8fq0b3l",
+        {
+          from_name: name,
+          to_name: "SYT Admin",
+          from_email: email,
+          to_email: "felix5olali@gmail.com",
+          message,
+        },
+        "maz5XYDLGqV1Eo4h7"
+      )
+      .then(
+        (result) => {
+          setLoading(false);
+          alert("Thank you. I will get back to you as soon possible.");
+
+          console.log(result.text);
+          setName("");
+          setEmail("");
+          setMessage("");
+        },
+        (error) => {
+          setLoading(false);
+          console.log(error.text);
+          alert("Sorry, something went wrong! 💀");
+        }
+      )
+      .finally(closeModal());
+  };
   return (
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl">
       <h1 className="md:text-3xl text-2xl font-semibold title-font text-[#323433] text-center">
@@ -91,7 +134,11 @@ function LeadershipSection() {
                           className="object-contain w-4 h-4"
                         />
                       </button>
-                      <form className="flex flex-col gap-6 w-full">
+                      <form
+                        className="flex flex-col gap-6 w-full"
+                        onSubmit={handleSubmit}
+                        ref={formRef}
+                      >
                         <Dialog.Title
                           as="h3"
                           className="text-lg font-medium leading-6 text-gray-900 pl-2"
@@ -103,27 +150,35 @@ function LeadershipSection() {
                           <input
                             type="text"
                             placeholder="Your name"
+                            required
                             className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
                           />
                           <input
                             type="email"
                             placeholder="Your email"
+                            required
                             className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
                           />
                           <textarea
                             cols="30"
                             rows="10"
                             placeholder="Your name"
+                            required
                             className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            value={message}
+                            onChange={(e) => setMessage(e.target.value)}
                           />
                         </div>
 
                         <button
                           type="submit"
                           className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-[#009975] px-6 py-3 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
-                          onClick={closeModal}
                         >
-                          Send message
+                          {loading ? "Sending message..." : "Send message"}
                         </button>
                       </form>
                     </Dialog.Panel>

From d99360e42ac07e809f79fdbfab4fbdc543530613 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Sun, 12 Nov 2023 09:41:04 +0300
Subject: [PATCH 03/10] -

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 17289342..ad00269e 100644
--- a/package.json
+++ b/package.json
@@ -15,12 +15,12 @@
     "pretty": "prettier --write ."
   },
   "dependencies": {
+    "@emailjs/browser": "^3.11.0",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@headlessui/react": "^1.7.15",
     "date-fns": "^2.30.0",
-    "@emailjs/browser": "^3.11.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.11.2",

From 43f73eb010734b0f98a58e2f4d71d013e83d396a Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Wed, 15 Nov 2023 00:07:33 +0300
Subject: [PATCH 04/10] redesign form modal

---
 .../aboutUs/sections/LeadershipSection.jsx    | 51 +++++++++++++------
 1 file changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 78f7d63a..24259ea1 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -14,6 +14,7 @@ function LeadershipSection() {
   const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [message, setMessage] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
 
   const formRef = useRef();
 
@@ -39,26 +40,29 @@ function LeadershipSection() {
           from_email: email,
           to_email: "felix5olali@gmail.com",
           message,
+          phoneNumber,
         },
         "maz5XYDLGqV1Eo4h7"
       )
       .then(
         (result) => {
-          setLoading(false);
           alert("Thank you. I will get back to you as soon possible.");
 
           console.log(result.text);
+          setLoading(false);
           setName("");
           setEmail("");
           setMessage("");
+          setPhoneNumber("");
+          closeModal();
         },
         (error) => {
           setLoading(false);
           console.log(error.text);
+          closeModal();
           alert("Sorry, something went wrong! 💀");
         }
-      )
-      .finally(closeModal());
+      );
   };
   return (
     <section className="pt-16 sm:pt-0 pb-10 mx-auto w-full max-w-screen-2xl">
@@ -126,7 +130,7 @@ function LeadershipSection() {
                     leaveFrom="opacity-100 scale-100"
                     leaveTo="opacity-0 scale-95"
                   >
-                    <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-xl bg-white p-6 text-left align-middle shadow-xl transition-all flex flex-col items-end gap-4">
+                    <Dialog.Panel className="w-full max-w-2xl transform overflow-hidden rounded-md bg-white p-4 md:p-6 text-left align-middle shadow-xl transition-all flex flex-col items-end gap-4">
                       <button type="button" onClick={closeModal}>
                         <img
                           src={closeIcon}
@@ -135,38 +139,55 @@ function LeadershipSection() {
                         />
                       </button>
                       <form
-                        className="flex flex-col gap-6 w-full"
+                        className="flex flex-col gap-4 md:gap-6 w-full"
                         onSubmit={handleSubmit}
                         ref={formRef}
                       >
                         <Dialog.Title
                           as="h3"
-                          className="text-lg font-medium leading-6 text-gray-900 pl-2"
+                          className="text-base md:text-lg font-medium leading-5 md:leading-6 text-gray-900 pl-2"
                         >
-                          Write a message
+                          Let’s build something great together!
                         </Dialog.Title>
 
+                        <p className="pl-2 text-sm md:text-[15px] font-normal leading-5 md:leading-7 my-0 md:my-2">
+                          We are excited about the possibility of partnering
+                          with you. Share a few details with us and let’s
+                          explore how we can collaborate for mutual success{" "}
+                        </p>
+
                         <div className="flex flex-col gap-4">
                           <input
                             type="text"
-                            placeholder="Your name"
+                            placeholder="Company name"
                             required
-                            className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            className="w-full outline-none text-base font-normal placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
                             value={name}
                             onChange={(e) => setName(e.target.value)}
                           />
+
                           <input
                             type="email"
-                            placeholder="Your email"
+                            placeholder="Email address"
                             required
-                            className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            className="w-full outline-none text-base font-normal placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
                             value={email}
                             onChange={(e) => setEmail(e.target.value)}
                           />
+
+                          <input
+                            type="telephone"
+                            placeholder="Phone number"
+                            required
+                            className="w-full outline-none text-base font-normal placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
+                            value={phoneNumber}
+                            onChange={(e) => setPhoneNumber(e.target.value)}
+                          />
+
                           <textarea
                             cols="30"
-                            rows="10"
-                            placeholder="Your name"
+                            rows="5"
+                            placeholder="Brief description of partnership proposal "
                             required
                             className="w-full outline-none text-base placeholder:text-gray-600 border border-[#79747E] rounded-[4px] pl-4 py-2"
                             value={message}
@@ -176,9 +197,9 @@ function LeadershipSection() {
 
                         <button
                           type="submit"
-                          className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-[#009975] px-6 py-3 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
+                          className="w-fit inline-flex justify-center rounded-lg border border-transparent bg-[#009975] px-8 py-2 text-base font-medium text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-green-500 focus-visible:ring-offset-2"
                         >
-                          {loading ? "Sending message..." : "Send message"}
+                          {loading ? "Submitting..." : "Submit"}
                         </button>
                       </form>
                     </Dialog.Panel>

From a5c00d85f9c463754ceb89235cfe74af8af4e7ff Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Wed, 15 Nov 2023 00:14:56 +0300
Subject: [PATCH 05/10] hover on partner with us btn

---
 src/APP/pages/aboutUs/sections/LeadershipSection.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 24259ea1..38dfc8a8 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -97,7 +97,7 @@ function LeadershipSection() {
             from their hard work.
           </p>
           <button
-            className="font-semibold text-white bg-[#009975] border-0 py-3 px-8 w-full md:w-auto focus:outline-none rounded-lg text-lg"
+            className="font-semibold text-white bg-[#009975] hover:border-[#009975] hover:border hover:text-[#009975] hover:bg-transparent border py-3 px-8 w-full md:w-auto focus:outline-none rounded-lg text-lg transition-all ease-in duration-150"
             type="button"
             onClick={openModal}
           >

From 165de3d7e4d0c5d3bde28c98bfb38201c2822da8 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Wed, 15 Nov 2023 20:34:58 +0300
Subject: [PATCH 06/10] setup SYT email

---
 .../aboutUs/sections/LeadershipSection.jsx     | 18 +++++++++++-------
 src/main.jsx                                   | 18 +-----------------
 2 files changed, 12 insertions(+), 24 deletions(-)

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 38dfc8a8..5d35a1d9 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -1,4 +1,4 @@
-import { Fragment, useState, useRef } from "react";
+import React, { Fragment, useState, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import emailjs from "@emailjs/browser";
 
@@ -32,17 +32,17 @@ function LeadershipSection() {
 
     emailjs
       .send(
-        "service_rvx6y2h",
-        "template_8fq0b3l",
+        "",
+        "",
         {
           from_name: name,
           to_name: "SYT Admin",
           from_email: email,
-          to_email: "felix5olali@gmail.com",
+          to_email: "partnerships@spaceyatech.com",
           message,
           phoneNumber,
         },
-        "maz5XYDLGqV1Eo4h7"
+        ""
       )
       .then(
         (result) => {
@@ -106,7 +106,11 @@ function LeadershipSection() {
 
           {/* Email us Modal */}
           <Transition appear show={isOpen} as={Fragment}>
-            <Dialog as="div" className="relative z-10" onClose={closeModal}>
+            <Dialog
+              as="div"
+              className="relative z-10"
+              onClose={() => closeModal()}
+            >
               <Transition.Child
                 as={Fragment}
                 enter="ease-out duration-300"
@@ -153,7 +157,7 @@ function LeadershipSection() {
                         <p className="pl-2 text-sm md:text-[15px] font-normal leading-5 md:leading-7 my-0 md:my-2">
                           We are excited about the possibility of partnering
                           with you. Share a few details with us and let’s
-                          explore how we can collaborate for mutual success{" "}
+                          explore how we can collaborate for mutual success.
                         </p>
 
                         <div className="flex flex-col gap-4">
diff --git a/src/main.jsx b/src/main.jsx
index 6817046f..78f19352 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -2,26 +2,10 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
 import "./index.css";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import router from "./router";
-import { AuthContextProvider } from "./utils/AuthContext";
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: 1000 * 10,
-    },
-  },
-});
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AuthContextProvider>
-      <QueryClientProvider client={queryClient}>
-        <RouterProvider router={router} />
-        <ReactQueryDevtools position="bottom-right" />
-      </QueryClientProvider>
-    </AuthContextProvider>
+    <RouterProvider router={router} />
   </React.StrictMode>
 );

From d26c8e2aed061b9e06cf290c2cad40d97413adb1 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Wed, 15 Nov 2023 20:37:09 +0300
Subject: [PATCH 07/10] -

---
 src/APP/pages/aboutUs/sections/LeadershipSection.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 5d35a1d9..af296e20 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -32,7 +32,9 @@ function LeadershipSection() {
 
     emailjs
       .send(
+        // SERVICE_ID
         "",
+        //  TEMPLATE_ID
         "",
         {
           from_name: name,
@@ -42,6 +44,7 @@ function LeadershipSection() {
           message,
           phoneNumber,
         },
+        // PUBLIC_ID
         ""
       )
       .then(

From c1fc35f0744da518465befc7c94bc719ef5bf4ce Mon Sep 17 00:00:00 2001
From: Sonia Lomo <49971500+sonylomo@users.noreply.github.com>
Date: Thu, 16 Nov 2023 13:15:14 +0300
Subject: [PATCH 08/10] refactor: env var config

---
 .../aboutUs/sections/LeadershipSection.jsx    | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
index 40a11390..894e1dcc 100644
--- a/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
+++ b/src/APP/pages/aboutUs/sections/LeadershipSection.jsx
@@ -1,4 +1,3 @@
-
 import React, { Fragment, useState, useRef } from "react";
 import { Dialog, Transition } from "@headlessui/react";
 import emailjs from "@emailjs/browser";
@@ -8,6 +7,13 @@ import { closeIcon } from "../../../../assets/images/icons";
 import { LeadershipData } from "../data";
 import { buildComm } from "../../../../assets/images/aboutPage";
 
+// env var
+const SERVICE_ID =
+  import.meta.env.VITE_SERVICE_ID || window._env_.VITE_SERVICE_ID;
+const TEMPLATE_ID =
+  import.meta.env.VITE_TEMPLATE_ID || window._env_.VITE_TEMPLATE_ID;
+const PUBLIC_ID = import.meta.env.VITE_PUBLIC_ID || window._env_.VITE_PUBLIC_ID;
+
 function LeadershipSection() {
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -33,10 +39,8 @@ function LeadershipSection() {
 
     emailjs
       .send(
-        // SERVICE_ID
-        "",
-        //  TEMPLATE_ID
-        "",
+        `${SERVICE_ID}`,
+        `${TEMPLATE_ID}`,
         {
           from_name: name,
           to_name: "SYT Admin",
@@ -45,14 +49,12 @@ function LeadershipSection() {
           message,
           phoneNumber,
         },
-        // PUBLIC_ID
-        ""
+        `${PUBLIC_ID}`
       )
       .then(
         (result) => {
-          alert("Thank you. I will get back to you as soon possible.");
+          alert("Thank you. We will get back to you as soon possible.");
 
-          console.log(result.text);
           setLoading(false);
           setName("");
           setEmail("");
@@ -220,7 +222,6 @@ function LeadershipSection() {
         </div>
         <div className="md:w-1/2">
           <img src={buildComm} alt="Space ya Tech Community" />
-
         </div>
       </div>
     </section>

From c52d0d63a7f18f0f0cfa2bfcb6177cf7098f39a7 Mon Sep 17 00:00:00 2001
From: Sonia Lomo <49971500+sonylomo@users.noreply.github.com>
Date: Thu, 16 Nov 2023 13:17:07 +0300
Subject: [PATCH 09/10] fix: correct image url

---
 src/assets/images/aboutPage/index.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/assets/images/aboutPage/index.js b/src/assets/images/aboutPage/index.js
index c6456adb..9c42b6a7 100644
--- a/src/assets/images/aboutPage/index.js
+++ b/src/assets/images/aboutPage/index.js
@@ -1,16 +1,16 @@
-import aaron from "./creativeTeam/aaron-abubakar.png";
-import emmy from "./creativeTeam/emmy-akinyi.png";
+import aaron from "./creativeTeam/aaron-abubakar.jpeg";
+import emmy from "./creativeTeam/emmy-akinyi.jpeg";
 import pamela from "./creativeTeam/pamela-owino.png";
 
-import catherine from "./leadership/catherine-kiiru.png";
-import fred from "./leadership/fred-ouko.png";
+import catherine from "./leadership/catherine-kiiru.jpeg";
+import fred from "./leadership/fred-ouko.jpeg";
 import hudson from "./leadership/hudson-obai.png";
 import ian from "./leadership/ian-mugenya.png";
-import james from "./leadership/james-otieno.png";
+import james from "./leadership/james-otieno.jpeg";
 import juma from "./leadership/juma-lawrence.png";
 import marlyn from "./leadership/marlyn-mayienga.png";
-import sharon from "./leadership/sharon-jebitok.png";
-import waithaka from "./leadership/waithaka-waweru.png";
+import sharon from "./leadership/sharon-jebitok.jpeg";
+import waithaka from "./leadership/waithaka-waweru.jpeg";
 
 import about1 from "./about-img-1.png";
 import about2 from "./about-img-2.png";

From 2e51156696a0769acf52e38f7cc28edc6d5c454a Mon Sep 17 00:00:00 2001
From: Sonia Lomo <49971500+sonylomo@users.noreply.github.com>
Date: Thu, 16 Nov 2023 13:19:44 +0300
Subject: [PATCH 10/10] refactor: correct package json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 2731d431..8ceb52ac 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@tanstack/react-query-devtools": "^4.35.3",
     "axios": "^1.6.1",
     "date-fns": "^2.30.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.48.2",