Merge pull request #43 from ms-club-sliit/dev

Dev

package.json

@@ -10,12 +10,16 @@
     "preview": "vite preview"
   },
   "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.14",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.0"
+    "react-router-dom": "^6.11.0",
+    "react-toastify": "^9.1.2",
+    "react-youtube": "^10.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",

src/components/CarouselCard/CarouselCard.jsx

@@ -4,7 +4,7 @@ export default function CarouselCard({ mentor }) {
   return (
     <div>
       <div
-        className="block z-0 bg-center bg-cover relative w-[340px] h-[450px] rounded-[12px] drop-shadow-md before:absolute before:z-[-1] before:inset-x-0 before:bottom-0 before:w-[100%] before:h-[25%] before:bg-gradient-to-t before:from-[#48093f] to-[transparant] before:transition ease before:duration-[0.5s] before:rounded-b-[10px] hover:before:bg-[#48093f] dark:before:bg-gradient-to-t dark:before:from-[black] to-[transparant] dark:hover:before:bg-[black]"
+        className="block z-0 bg-center bg-cover relative w-[340px] h-[450px] rounded-[12px] drop-shadow-md before:absolute before:z-[-1] before:inset-x-0 before:bottom-0 before:w-[100%] before:h-[35%] before:bg-gradient-to-t before:from-[#48093f] to-[transparant] before:transition ease before:duration-[0.5s] before:rounded-b-[10px] hover:before:bg-[#48093f] dark:before:bg-gradient-to-t dark:before:from-[black] to-[transparant] dark:hover:before:bg-[black]"
         style={{
           backgroundImage: `url(${mentor.image})`,
         }}

src/components/Header/index.jsx

@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faBars } from '@fortawesome/free-solid-svg-icons';
+import { useState, useEffect } from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons";
 
 const Header = () => {
-  const [activeLink, setActiveLink] = useState('home');
+  const [activeLink, setActiveLink] = useState("home");
   const [isScrolledOutOfHome, setIsScrolledOutOfHome] = useState(false);
   const [hamClicked, setHamClicked] = useState(false);
 
@@ -13,17 +13,17 @@ const Header = () => {
 
   useEffect(() => {
     const handleScroll = () => {
-      const homeSection = document.querySelector('#home');
+      const homeSection = document.querySelector("#home");
       if (homeSection) {
         const homeSectionRect = homeSection.getBoundingClientRect();
         setIsScrolledOutOfHome(window.scrollY >= homeSectionRect.bottom);
       }
     };
 
-    window.addEventListener('scroll', handleScroll);
+    window.addEventListener("scroll", handleScroll);
 
     return () => {
-      window.removeEventListener('scroll', handleScroll);
+      window.removeEventListener("scroll", handleScroll);
     };
   }, []);
 
@@ -36,13 +36,13 @@ const Header = () => {
       className={
         `fixed z-50 w-full ${
           isScrolledOutOfHome
-            ? 'bg-purple-900 dark:bg-gray-900 '
-            : 'md:bg-transparent '
+            ? "bg-purple-900 dark:bg-gray-900 "
+            : "md:bg-transparent "
         }` +
         `${
           hamClicked && window.innerWidth < 768
-            ? 'bg-purple-900 dark:bg-gray-900'
-            : ''
+            ? "bg-purple-900 dark:bg-gray-900"
+            : ""
         }`
       }
     >
@@ -53,41 +53,41 @@ const Header = () => {
         <FontAwesomeIcon
           icon={faBars}
           className={
-            'md:hidden text-3xl cursor-pointer absolute right-5 top-5 text-white '
+            "md:hidden text-3xl cursor-pointer absolute right-5 top-5 text-white "
           }
           onClick={handleHamClick}
         />
         <nav
           className={
-            (hamClicked ? 'block  ' : 'hidden ') +
-            'md:block bg-gray-50 md:m-5 shadow-lg md:rounded-full w-full md:w-auto inline-flex justify-center mr-5 md:mr-20 select-none md:select-text'
+            (hamClicked ? "block  " : "hidden ") +
+            "md:block bg-gray-50 md:m-5 shadow-lg md:rounded-full w-full md:w-auto inline-flex justify-center mr-5 md:mr-20 select-none md:select-text"
           }
         >
           <div className=" px-2 py-1 flex items-center justify-between relative">
             <div className="flex flex-col m-5 md:m-auto md:flex-row items-center">
               <a
                 href="#home"
                 className={`mt-2 md:mt-0 font-normal text-gray-800 font-bold mr-2 md:mr-4 ${
-                  activeLink === 'home'
-                    ? ' bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2'
-                    : ''
+                  activeLink === "home"
+                    ? " bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2"
+                    : ""
                 }`}
-                onClick={() => handleLinkClick('home')}
+                onClick={() => handleLinkClick("home")}
               >
                 Home
               </a>
               <a
                 href="#mentors"
                 className={`mt-2 md:mt-0 font-normal text-gray-800 font-bold mr-2 md:mr-4 ${
-                  activeLink === 'mentors'
-                    ? 'bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2'
-                    : ''
+                  activeLink === "mentors"
+                    ? "bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2"
+                    : ""
                 }`}
-                onClick={() => handleLinkClick('mentors')}
+                onClick={() => handleLinkClick("mentors")}
               >
                 Our Mentors
               </a>
-              <a
+              {/* <a
                 href="#members"
                 className={`mt-2 md:mt-0 font-normal text-gray-800 font-bold mr-2 md:mr-4 ${
                   activeLink === 'team'
@@ -97,26 +97,26 @@ const Header = () => {
                 onClick={() => handleLinkClick('team')}
               >
                 Our Team
-              </a>
+              </a> */}
               <a
                 href="#ourwork"
                 className={`mt-2 md:mt-0 font-normal text-gray-800 font-bold mr-2 md:mr-4 ${
-                  activeLink === 'work'
-                    ? 'bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2'
-                    : ''
+                  activeLink === "work"
+                    ? "bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2"
+                    : ""
                 }`}
-                onClick={() => handleLinkClick('work')}
+                onClick={() => handleLinkClick("work")}
               >
                 Our Work
               </a>
               <a
                 href="#contactus"
                 className={`mt-2 md:mt-0 font-normal text-gray-800 font-bold mr-2 md:mr-4 ${
-                  activeLink === 'contact'
-                    ? 'bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2'
-                    : ''
+                  activeLink === "contact"
+                    ? "bg-purple-900 dark:bg-gray-900 text-white rounded-full px-4 py-2"
+                    : ""
                 }`}
-                onClick={() => handleLinkClick('contact')}
+                onClick={() => handleLinkClick("contact")}
               >
                 Contact Us
               </a>

src/data/heroImages.js

@@ -1,18 +1,13 @@
-import img1 from '../assets/images/Hero/img1.webp';
-import img2 from '../assets/images/Hero/img2.webp';
-import img3 from '../assets/images/Hero/img3.webp';
+import img1 from "../assets/images/Hero/img1.webp";
+import img3 from "../assets/images/Hero/img3.webp";
 
 export const imageArray = [
   {
-    id: 'heroImg1',
-    src: img1,
-  },
-  {
-    id: 'heroImg2',
-    src: img2,
+    id: "heroImg3",
+    src: img3,
   },
   {
-    id: 'heroImg3',
-    src: img3,
+    id: "heroImg1",
+    src: img1,
   },
 ];

src/data/mentors.js

@@ -1,37 +1,57 @@
+import kalpani from "../assets/mentors/kalpani.jpg";
+import nuwan from "../assets/mentors/nuwan.jpg";
+import jagath from "../assets/mentors/jagath.png";
+import anjana from "../assets/mentors/anjana.png";
+import devanshi from "../assets/mentors/devanshi.jpg";
+import didula from "../assets/mentors/didula.jpg";
+import aruna from "../assets/mentors/aruna.jpg";
+
 export const mentors = [
   {
     id: 1,
-    name: "Mentor 1",
-    designation: "Designation 1",
-    image:
-      "https://s3-alpha-sig.figma.com/img/f13a/0a5d/f8d483010852bb5acd7cad27cc3f1ca3?Expires=1684108800&Signature=GvrQEBS2iXtAsfjojnd3QJqd3cbWolSCcGCZ3vuxnzOPisACPwi-C--0pWabJXh~Iiufq4ueKFenOVXErFlD0Th35ZeKfmWud0~zgoMHi7u6m5HCN3T5T35zeap4Q2irz68slXCn3KvqGdT5GhTror8mcOIeCCC320vDzM2aUSbGXDVAM2RLq21c4dEVcDw~LLWnqdHV2lsCe23SRKUDRg086NnoI5OSSMpBEsK2xP2NhX4YyXqjco1jH2GroTISJtIuB4DByR29u91xlAMq66QzzCH0s0nUeZZBSRTogqfdvrTg0cJEzKBYcHrltV0Q6blrNDYYULDE9gLH2Et2vA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+    name: "Dr Nuwan Kodagoda",
+    designation: "Dean - Computing (FOC)",
+    image: nuwan,
   },
   {
     id: 2,
-    name: "Mentor 2",
-    designation: "Designation 2",
-    image:
-      "https://s3-alpha-sig.figma.com/img/e119/8bf9/2f2d99603d06965d9f53e57b8becee78?Expires=1684108800&Signature=h8QOSSXAde9DvnATMzF0ElUFqFjmOASfBcHc6GYHf6lF9m4o-Ho014GctxUtqUhL07od71fgpgvGu4oaKRAzQpdO2Ofr~8i2BgfydbeTVyiky-gJ17tudt6Ql2L~xehx7VGsPeG8WDtqdw-fSd4Hvai1d0agQqxNbHhhk3OqBJmibsAN1U4o5sU4Dz~3POPuNtp2sGljYxABIjxf7cAw2ya3rPvGyf6oGEI8nHAHNv54zu75cVIOKsv9M0iowGp~QVMfx0YDZJ9nvy3xoifiaabW8pPLSHwTidUqu4dY3gWWh8EaLNZoL4GLdqPLO2~DrrNyQFD5gSLYNP486A8bSQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+    name: "Dr Kalpani Manathunga",
+    designation:
+      "Head of Department - Computer Science and Software Engineering - Computing (FOC)",
+    image: kalpani,
   },
   {
     id: 3,
-    name: "Mentor 3",
-    designation: "Designation 3",
-    image:
-      "https://s3-alpha-sig.figma.com/img/61b6/1f8e/dc0e378651dc1d4c720dd245c97b987e?Expires=1684108800&Signature=URSZyWTnGTL4UcCqxwKQMXldZO5CEc4okRlkmlRooDW9-SEcd4dc1NsiWxqR9YQDpZBdQ6jo51N1Tf1TEBqPaD2hVn1GglMUKiC-BH3Lfd2Yhvqp3yL9oQGWzbiv5r3tH1UQgX1UqgcvMsqrs9Ay732228dcmHDFveFDYsjuDIADQ~Exf-8emFSGMfQbk9QXPcMUAc7AyZqDOIHVTx0OjKFJY~kukhjIODGL81W9FltYYoroRSXOTAIrPElC8ezmfennZrwkIie2bpO439kHYwSZ4j7xB9SUQEEEw~NdofKLS0T0bSZoA-g5V9h67-YIjykR5tQaEPmX~DofIlyHgg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+    name: "Mr Jagath Wickramarathne",
+    designation:
+      "Senior Lecturer - Computer Science and Software Engineering - Computing (FOC)",
+    image: jagath,
   },
   {
     id: 4,
-    name: "Mentor 4",
-    designation: "Designation 4",
-    image:
-      "https://s3-alpha-sig.figma.com/img/d09d/8122/9665517fa5cefbff16f349e581afb394?Expires=1684108800&Signature=hLvP-mCR4KPQ3siSjMDHdA8i3gC66a4nJxUsUC62snOqhQMC1l7MJBEoduJoi714QMyq5k5dunCdFNU7yQcAZntP9eMdH5rpk5rQzoc59iU52RVAdAEddQkKCUmyQTsOsi42Wp8-9l7q626wU~9RO97y-yOK9~KUpYHhOgDH0VvC4GE759emn1r9--b4GXwtGhrpXayq3Ileeo0GMG4BZRwB9DO5qQHglOM~Ojsr2uCfC36s1bqyNZsttBM19aC4LFbXamFs~HSrjaxHSbPLb5HPRKkRpPuXXvDAjtehTKyJA13hn8WKT8~xSlYCuI0UFga-rX7qbA7OM1kS6egHAA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+    name: "Mr Aruna Ishara",
+    designation:
+      "Lecturer - Computer Science and Software Engineering - Computing (FOC)",
+    image: aruna,
   },
   {
     id: 5,
-    name: "Mentor 5",
-    designation: "Designation 5",
-    image:
-      "https://s3-alpha-sig.figma.com/img/66aa/2bd9/1718342b137b52fd91e5d208318c9907?Expires=1684108800&Signature=UD6Tv4FRaomMfEkChD0gtdrZNscXaY1AJPm2v5Sun5vJANtkMYVv~7zYXh1RA1vOqGinabNFM008byPs7NkLv~cbZmU-X912S7ZU2MFIlZa4yPLj3JH2lM4fxo2zKcCyt-F9WngmeQL9rKrrT9EMu8ozZkSlWY8a7LX3NTohgt2KQGZyEqRHqnjKgPiKiiJyNqecphocKSkUrv42MPOTddlhorKheQiGO7zllS3NF0mgwiv2z8RPFvs9Cik2gbI1u35JgqW98ptzmWbalmWVS~s4GD8eX0TLM-1WRSFzVr0uHGfZJfIQNfISByAH6mbZeD70LRWHwon8xvTWrcx4UA__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4",
+    name: "Mr Didula Chamara",
+    designation:
+      "Lecturer - Computer Science and Software Engineering - Computing (FOC)",
+    image: didula,
+  },
+  {
+    id: 6,
+    name: "Ms Devanshi Ganegoda",
+    designation:
+      "Lecturer - Computer Science and Software Engineering - Computing (FOC)",
+    image: devanshi,
+  },
+  {
+    id: 7,
+    name: "Mr Anjana Chanakya",
+    designation: "Instructor - Information Technology - Computing (FOC)",
+    image: anjana,
   },
 ];

src/routes/app-routes.jsx

@@ -1,7 +1,7 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 // Pages
-import { Home, Team } from "../views";
+import { Home } from "../views";
 
 const AppRoutes = () => {
   return (
@@ -10,7 +10,7 @@ const AppRoutes = () => {
         <Routes>
           {/* Public Routes */}
           <Route path="/" element={<Home />} />
-          <Route path="/team" element={<Team />} />
+          {/* <Route path="/team" element={<Team />} /> */}
         </Routes>
       </Router>
     </div>

src/views/Feedback/index.jsx

@@ -1,21 +1,79 @@
 /**
  * Feedback Section
  */
+import React, { useRef } from "react"
+import emailjs from "@emailjs/browser"
+import { toast, ToastContainer } from "react-toastify"
+import "react-toastify/dist/ReactToastify.css"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
 const Feedback = () => {
+
+  const form = useRef()
+
+  const sendEmail = (e) => {
+    e.preventDefault()
+
+    emailjs.sendForm("service_pb70vim", "template_cvjq8sh", form.current, "7u6tl6iu95lDeujnX").then(
+      (result) => {
+        console.log(result.text)
+        toastNotification("Succesfully sent", "success")
+        e.target.reset()
+      },
+      (error) => {
+        console.log(error.text)
+        toastNotification("Something went wrong. Please try again", "error")
+      }
+    )
+  }
+
+  const toastNotification = (message, status) => {
+    if (status === "success") {
+      toast.success(message, {
+        position: "bottom-center",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined
+      })
+    } else if (status === "error") {
+      toast.error(message, {
+        position: "bottom-center",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined
+      })
+    } else {
+      toast.info(message, {
+        position: "bottom-center",
+        autoClose: 3000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined
+      })
+    }
+  }
+
   return (
     <div className="flex flex-col items-center justify-center h-screen bg-white dark:bg-neutral-900 px-10">
       <div className="flex lg:flex-row max-md:flex-col space-x-4 w-full max-w-4xl">
         <div className="w-1/2 max-md:w-full">
           <h1 className="text-3xl dark:text-white max-md:text-center">Leave Your Valuable Feedback</h1>
         </div>
-        <div className="flex flex-col space-y-2 w-1/2 max-w-4xl max-md:w-full">
-          <input type="text" placeholder="Your Email" className="bg-white border-2 border-black dark:border-white dark:bg-neutral-900 dark:text-white rounded-md px-4 py-2 my-3" />
-          <textarea placeholder="Your Feedback" className="resize-none bg-white border-2 border-black dark:border-white dark:bg-neutral-900 dark:text-white rounded-md px-4 py-2 my-3 h-48" />
+        <form ref={form}
+          onSubmit={sendEmail} className="flex flex-col space-y-2 w-1/2 max-w-4xl max-md:w-full">
+          <input name= "email" type="text" placeholder="Your Email" className="bg-white border-2 border-black dark:border-white dark:bg-neutral-900 dark:text-white rounded-md px-4 py-2 my-3" />
+          <textarea name="feedback" placeholder="Your Feedback" className="resize-none bg-white border-2 border-black dark:border-white dark:bg-neutral-900 dark:text-white rounded-md px-4 py-2 my-3 h-48" />
           <div className="flex justify-end">
-            <button className="w-44 bg-fuchsia-950 dark:bg-white text-white dark:text-black rounded-full px-6 py-4 my-3 hover:bg-fuchsia-900 dark:hover:bg-neutral-200">
+            <button type="submit" className="w-44 bg-fuchsia-950 dark:bg-white text-white dark:text-black rounded-full px-6 py-4 my-3 hover:bg-fuchsia-900 dark:hover:bg-neutral-200">
               <div className="float-left text-sm">
                 Send
               </div>
@@ -24,7 +82,19 @@ const Feedback = () => {
               </div>
             </button>
           </div>
-        </div>
+        </form>
+        <ToastContainer
+        position="bottom-center"
+        autoClose={3001}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick={false}
+        rtl={false}
+        pauseOnFocusLoss
+        draggable={false}
+        pauseOnHover={false}
+        theme="colored"
+      />
       </div>
     </div>
   );