Merge pull request #78 from SpaceyaTech/partner-with-us-btn-functiona…

…lity

Partner-with-us-btn-functionality

src/APP/components/index.js

@@ -3,6 +3,8 @@ 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";
 import { default as PodcastCard } from "./PodcastCard";
 
-export { FAQ, Footer, Footer2, Header, Header2, PodcastCard };
+export { FAQ, Footer, Footer2, Header, Header2, Caroussel, Counter, PodcastCard};

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,
+  },
+];

src/APP/pages/aboutUs/sections/LeadershipSection.jsx

@@ -1,70 +1,75 @@
-import FredOuko from "../../../../assets/images/aboutPage/leadership/fred-ouko.jpeg";
-import CatherineKiiru from "../../../../assets/images/aboutPage/leadership/catherine-kiiru.jpeg";
-import JamesOtieno from "../../../../assets/images/aboutPage/leadership/james-otieno.jpeg";
-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.jpeg";
-import WaithakaWaweru from "../../../../assets/images/aboutPage/leadership/waithaka-waweru.jpeg";
-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 RachelMurabula from "../../../../assets/images/aboutPage/leadership/rachel-murabula.jpeg";
-
-const LeadershipData = [
-  {
-    name: "Fred Ouko",
-    title: "Founder",
-    image: FredOuko,
-  },
-  {
-    name: "Catherine Kiiru",
-    title: "Dev Relations & Opensource Programs",
-    image: CatherineKiiru,
-  },
-  {
-    name: "Otieno James",
-    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,
-  },
-  {
-    name: "Rachel Murabula",
-    title: "Lead Android Engineering",
-    image: RachelMurabula,
-  },
-];
+import React, { 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";
+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);
+
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [message, setMessage] = useState("");
+  const [phoneNumber, setPhoneNumber] = useState("");
+
+  const formRef = useRef();
+
+  function closeModal() {
+    setIsOpen(false);
+  }
+
+  function openModal() {
+    setIsOpen(true);
+  }
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    setLoading(true);
+
+    emailjs
+      .send(
+        `${SERVICE_ID}`,
+        `${TEMPLATE_ID}`,
+        {
+          from_name: name,
+          to_name: "SYT Admin",
+          from_email: email,
+          to_email: "[email protected]",
+          message,
+          phoneNumber,
+        },
+        `${PUBLIC_ID}`
+      )
+      .then(
+        (result) => {
+          alert("Thank you. We will get back to you as soon possible.");
+
+          setLoading(false);
+          setName("");
+          setEmail("");
+          setMessage("");
+          setPhoneNumber("");
+          closeModal();
+        },
+        (error) => {
+          setLoading(false);
+          console.log(error.text);
+          closeModal();
+          alert("Sorry, something went wrong! 💀");
+        }
+      );
+  };
   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">
@@ -97,12 +102,126 @@ 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">
+
+          <button
+            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}
+          >
             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-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}
+                          alt="close"
+                          className="object-contain w-4 h-4"
+                        />
+                      </button>
+                      <form
+                        className="flex flex-col gap-4 md:gap-6 w-full"
+                        onSubmit={handleSubmit}
+                        ref={formRef}
+                      >
+                        <Dialog.Title
+                          as="h3"
+                          className="text-base md:text-lg font-medium leading-5 md:leading-6 text-gray-900 pl-2"
+                        >
+                          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="Company name"
+                            required
+                            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="Email address"
+                            required
+                            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="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}
+                            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-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 ? "Submitting..." : "Submit"}
+                        </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>

src/assets/images/aboutPage/index.js

@@ -0,0 +1,39 @@
+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.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.jpeg";
+import juma from "./leadership/juma-lawrence.png";
+import marlyn from "./leadership/marlyn-mayienga.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";
+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,
+};

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 };