From e10f5e0d6618e93215b94aa48498f1c34609d4c3 Mon Sep 17 00:00:00 2001
From: Uthra karuankaran <uthra0864@gmail.com>
Date: Wed, 28 Aug 2024 16:52:31 +0530
Subject: [PATCH 1/2] feat(navbar): added icons to the navbar

---
 components/basic/ProfileImageInput.js |  6 ++--
 components/layout/Header.js           | 48 +++++++++++++++++++++------
 package.json                          |  2 +-
 3 files changed, 42 insertions(+), 14 deletions(-)

diff --git a/components/basic/ProfileImageInput.js b/components/basic/ProfileImageInput.js
index c07b98bc..44636e81 100644
--- a/components/basic/ProfileImageInput.js
+++ b/components/basic/ProfileImageInput.js
@@ -78,7 +78,7 @@ function ProfileImageInput({ image, setImage, className }) {
         {/* image input with label */}
         <div>
           <label
-            htmlFor="mentorProfile"
+            htmlFor="mentorProfileOne"
             className="mentorFormButton theme-button-color !tw-font-medium"
           >
             {!image ? "Upload Image" : "Change Image"}
@@ -86,11 +86,11 @@ function ProfileImageInput({ image, setImage, className }) {
           <input
             type="file"
             accept="image/*"
-            id="mentorProfile"
+            id="mentorProfileOne"
             className="mentorFormInput"
             name="mentorProfileImage"
-            onChange={(e) => handleImageChange(e)}
             hidden
+            onChange={(e) => handleImageChange(e)}
             required
             aria-label="Upload your image"
             aria-required="true"
diff --git a/components/layout/Header.js b/components/layout/Header.js
index aef1f064..d3e24ac7 100644
--- a/components/layout/Header.js
+++ b/components/layout/Header.js
@@ -10,6 +10,13 @@ import { useAuth } from "../../context/AuthContext";
 import { ButtonLink } from "../UI";
 import clsx from "clsx";
 import { useTheme } from "../../hook/use-theme";
+import { ImUsers } from "react-icons/im";
+import { GiTeacher } from "react-icons/gi";
+import { PiStepsFill } from "react-icons/pi";
+import { HiHome } from "react-icons/hi2";
+import { AiFillContacts } from "react-icons/ai";
+import { FaSignInAlt } from "react-icons/fa";
+import { LiaBlogSolid } from "react-icons/lia";
 
 function Header() {
   const {
@@ -101,23 +108,43 @@ function Header() {
         {/* For Desktop Navigation*/}
         <div className="sm:tw-flex tw-hidden">
           <div className="tw-flex tw-gap-3 tw-justify-between tw-items-center md:tw-gap-5 tw-cursor-pointer">
-            <Link href="/" className="hover:tw-text-primary-100">
-              Home
+            <Link
+              href="/"
+              className=" tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <HiHome className="tw-mr-2" /> Home
             </Link>
-            <Link href="/mentor/list" className="hover:tw-text-primary-100">
+            <Link
+              href="/mentor/list"
+              className="tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <GiTeacher className="tw-mr-2" />
               Mentor
             </Link>
-            <Link href="/blogs" className="hover:tw-text-primary-100">
-              Blogs
+            <Link
+              href="/blogs"
+              className="tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <LiaBlogSolid className="tw-mr-2" /> Blogs
             </Link>
-            <Link href="/community" className="hover:tw-text-primary-100">
+            <Link
+              href="/community"
+              className="tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <ImUsers />
               Community
             </Link>
-            <Link href="/career" className="hover:tw-text-primary-100">
-              Career
+            <Link
+              href="/career"
+              className="tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <PiStepsFill className="tw-mr-2" /> Career
             </Link>
-            <Link href="/contact" className="hover:tw-text-primary-100">
-              Contact
+            <Link
+              href="/contact"
+              className="tw-flex tw-items-center hover:tw-text-primary-100"
+            >
+              <AiFillContacts className="tw-mr-2" /> Contact
             </Link>
             {/* show profile card if user is logged in else show signin link */}
             {isUserLoggedIn || isMentorLoggedIn ? (
@@ -203,6 +230,7 @@ function Header() {
                     href="/auth/login?entityType=user"
                     className="tw-text-xl tw-p-2 tw-font-inter tw-text-base-400  hover:tw-text-base-500 tw-font-medium"
                   >
+                    <FaSignInAlt />
                     Sign In
                   </Link>
                 )}
diff --git a/package.json b/package.json
index 072da7da..dddc15a5 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "react-cookie": "^4.1.1",
     "react-dom": "18.2.0",
     "react-easy-crop": "^4.7.4",
-    "react-icons": "^4.10.1",
+    "react-icons": "^4.12.0",
     "react-owl-carousel": "^2.3.3",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.14.1",

From 2d87a895158625fc5a95f26244488fb235e6c1f3 Mon Sep 17 00:00:00 2001
From: Shahharshii <shahharshi694@gmail.com>
Date: Fri, 11 Oct 2024 12:57:18 +0530
Subject: [PATCH 2/2] feat(carousel): add testimonial carousel component

---
 .../mentorPage/components/Testimonials.js     | 134 ++++++++++--------
 1 file changed, 76 insertions(+), 58 deletions(-)

diff --git a/components/mentorPage/components/Testimonials.js b/components/mentorPage/components/Testimonials.js
index 4e68ce7e..2e0229c5 100644
--- a/components/mentorPage/components/Testimonials.js
+++ b/components/mentorPage/components/Testimonials.js
@@ -9,85 +9,103 @@ import { RxDotFilled } from "react-icons/rx";
 
 const Testimonials = ({ data }) => {
   const [currentIndex, setCurrentIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
 
   const prevSlide = () => {
-    if (currentIndex === 0) return setCurrentIndex(data.length - 1);
-    setCurrentIndex((currentIndex - 1) % data.length);
+    if (isAnimating) return; // Prevent clicks during animation
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) =>
+        prevIndex === 0 ? data.length - 1 : prevIndex - 1
+      );
+      setIsAnimating(false);
+    }, 1000); // Match the duration of the CSS animation
   };
 
   const nextSlide = () => {
-    setCurrentIndex((currentIndex + 1) % data.length);
+    if (isAnimating) return; // Prevent clicks during animation
+    setIsAnimating(true);
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) => (prevIndex + 1) % data.length);
+      setIsAnimating(false);
+    }, 1000);
   };
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentIndex((currentIndex + 1) % data.length);
-    }, 5000);
+      nextSlide(); // Trigger the next slide automatically
+    }, 2000); // Slides every 5 seconds
+
     return () => clearInterval(interval);
-  }, [currentIndex]);
+  }, []);
 
   return (
     <div className="tw-group tw-max-w-[1300px] tw-flex tw-flex-col tw-w-full tw-h-full tw-relative tw-px-4 tw-items-center tw-justify-center">
-      <div className="tw-flex tw-w-[200px] tw-h-[100px] tw-justify-center tw-items-center  tw-transition-all tw-duration-200 tw-ease-in-out">
-        <Image
-          src={data[currentIndex].testimonialUserImage}
-          alt={data[currentIndex].testimonialUserName}
-          width={100}
-          height={100}
-          className="tw-rounded-full tw-object-cover tw-object-center"
-        />
+      <div className="tw-relative tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-justify-center">
+        <div
+          className="tw-flex tw-transition-transform tw-duration-500 tw-ease-in-out"
+          style={{
+            transform: `translateX(-${currentIndex * 100}%)`,
+          }}
+        >
+          {data.map((testimonial, index) => (
+            <div
+              key={index}
+              className="tw-flex-shrink-0 tw-w-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-h-full"
+            >
+              <div className="tw-flex tw-w-[200px] tw-h-[100px] tw-justify-center tw-items-center tw-transition-all tw-duration-200 tw-ease-in-out">
+                <Image
+                  src={testimonial.testimonialUserImage}
+                  alt={testimonial.testimonialUserName}
+                  width={100}
+                  height={100}
+                  className="tw-rounded-full tw-object-cover tw-object-center"
+                />
+              </div>
+              <h1 className="tw-text-2xl tw-font-bold max-[637px]:tw-text-xl tw-text-gray-800">
+                {testimonial.testimonialUserName}
+              </h1>
+              <h2 className="tw-text-lg max-[637px]:tw-text-sm tw-text-gray-500">
+                {testimonial.testimonialUserHeadline}
+              </h2>
+              <div className="tw-flex tw-items-center tw-justify-center tw-mt-5">
+                {[...Array(5)].map((star, i) => (
+                  <BsStarFill
+                    key={i}
+                    className="tw-cursor-pointer tw-text-yellow-400 tw-text-xl max-[637px]:tw-text-sm tw-mx-1"
+                  />
+                ))}
+              </div>
+              <p className="tw-text-gray-600 tw-mt-5 tw-max-w-[990px] max-[637px]:tw-text-xs">
+                {testimonial.testimonialDescription}
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
-      {/* left arraow */}
-      <div className=" tw-hidden max-[640px]:tw-block group-hover:tw-block tw-absolute tw-top-[35%] max-[637px]:tw-top-[87%] -tw-mx-10 -tw-translate-x-0 tw-translate-y-[50%] tw-left-5 tw-text-2xl tw-rounded-full tw-p-2 tw-bg-[#00C9A7]/10 tw-cursor-pointer hover:tw-bg-gray-200 tw-transition-all tw-duration-200 tw-ease-in-out tw-text-primary-100">
+
+      {/* Left arrow */}
+      <div className="tw-hidden max-[640px]:tw-block group-hover:tw-block tw-absolute tw-top-[35%] max-[637px]:tw-top-[87%] -tw-mx-10 -tw-translate-x-0 tw-translate-y-[50%] tw-left-5 tw-text-2xl tw-rounded-full tw-p-2 tw-bg-[#00C9A7]/10 tw-cursor-pointer hover:tw-bg-gray-200 tw-transition-all tw-duration-200 tw-ease-in-out tw-text-primary-100">
         <BsChevronCompactLeft size={30} onClick={prevSlide} />
       </div>
 
-      {/* right arrow */}
+      {/* Right arrow */}
       <div className="hover:tw-bg-gray-200 tw-transition-all tw-duration-200 tw-ease-in-out tw-hidden max-[640px]:tw-block group-hover:tw-block tw-absolute tw-top-[35%] max-[637px]:tw-top-[87%] -tw-mx-10 tw-translate-x-0 tw-translate-y-[50%] tw-right-5 tw-text-2xl tw-rounded-full tw-p-2 tw-bg-[#00C9A7]/10 tw-cursor-pointer tw-text-primary-100">
         <BsChevronCompactRight size={30} onClick={nextSlide} />
       </div>
-      <div>
-        <div className="tw-flex tw-flex-col tw-items-center tw-justify-center tw-text-center tw-mt-5">
-          <h1 className="tw-text-2xl tw-font-bold max-[637px]:tw-text-xl tw-text-gray-800">
-            {data[currentIndex].testimonialUserName}
-          </h1>
-          <h2 className="tw-text-lg max-[637px]:tw-text-sm tw-text-gray-500">
-            {data[currentIndex].testimonialUserHeadline}
-          </h2>
-          <div className="tw-flex tw-items-center tw-justify-center tw-mt-5">
-            {[...Array(5)].map((star, i) => {
-              const ratingValue = i + 1;
-              return (
-                <label key={i}>
-                  <input
-                    type="radio"
-                    name="rating"
-                    value={ratingValue}
-                    className="tw-hidden"
-                  />
-                  <BsStarFill className="tw-cursor-pointer tw-text-yellow-400 tw-text-xl max-[637px]:tw-text-sm tw-mx-1" />
-                </label>
-              );
-            })}
-          </div>
-          <p className="tw-text-gray-600 tw-mt-5 tw-max-w-[990px] max-[637px]:tw-text-xs">
-            {data[currentIndex].testimonialDescription}
-          </p>
-        </div>
-      </div>
+
+      {/* Dots */}
       <div className="tw-flex tw-justify-center tw-items-center tw-mt-5">
-        {data.map((testimonial, index) => {
-          return (
-            <RxDotFilled
-              key={index}
-              size={30}
-              className={`tw-cursor-pointer tw-mx-2 ${
-                index === currentIndex ? "tw-text-gray-600" : "tw-text-gray-400"
-              }`}
-              onClick={() => setCurrentIndex(index)}
-            />
-          );
-        })}
+        {data.map((testimonial, index) => (
+          <RxDotFilled
+            key={index}
+            size={30}
+            className={`tw-cursor-pointer tw-mx-2 ${
+              index === currentIndex ? "tw-text-gray-600" : "tw-text-gray-400"
+            }`}
+            onClick={() => setCurrentIndex(index)}
+          />
+        ))}
       </div>
     </div>
   );