Merge pull request Anjaliavv51#243 from angadnagar/master

[feature]: added auto sliding feature in testimonial section

src/components/testimonial-section/Testimonial.jsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { BsChevronLeft, BsChevronRight } from "react-icons/bs";
 import { RxDotFilled } from "react-icons/rx";
@@ -7,30 +7,39 @@ import person01 from "../../assets/Images/person01.png";
 import person02 from "../../assets/Images/person02.png";
 import person03 from "../../assets/Images/person03.png";
 import testimonialbg from "../../assets/Images/testimonialbg.png";
+
 const slides = [
   {
     url: person01,
     name: "Deman",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "The platform is user-friendly with a clean design, but the loading times could be faster. Adding personalized content recommendations would enhance the overall experience. Great work so far!",
   },
   {
     url: person02,
     name: "Darla",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "I love the simplicity and ease of use on the site. However, it would be great to see quicker page load times and more interactive features, like real-time notifications. Keep up the good work!",
   },
   {
     url: person03,
     name: "Hedrik",
     paragraph:
-      "some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.some dummy testimonials can be writteen here.",
+      "The interface is intuitive and visually appealing. One suggestion would be to add a dark mode option for better accessibility during nighttime use. Overall, it's a solid platform with great potential!",
   },
 ];
 
 const Testimonial = () => {
   const [slide, setSlide] = useState(0);
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      handleRightSlide();
+    }, 3000);
+
+    return () => clearInterval(interval);
+  }, [slide]);
+
   function handleRightSlide() {
     const isLastSlide = slide === slides.length - 1;
     const nextSlide = isLastSlide ? 0 : slide + 1;
@@ -60,7 +69,7 @@ const Testimonial = () => {
             alt="image"
           />
         </div>
-        <div className="flex justify-center items-center w-72 h-72 sm:w-96 sm:h-96 rounded-full overflow-hidden py-3 bg-center bg-cover duration-500">
+        <div className="flex justify-center items-center w-56 h-56 sm:w-96 sm:h-96 rounded-full overflow-hidden py-3 bg-center bg-cover duration-500 hover:scale-110 cursor-pointer">
           <img src={slides[slide].url} alt="image" />
         </div>
         <div className="flex justify-center items-center w-40 h-40 sm:w-40 sm:h-40 rounded-full overflow-hidden py-3 bg-center bg-cover duration-500">
@@ -71,7 +80,7 @@ const Testimonial = () => {
         </div>
       </div>
       <div className="flex flex-col mx-auto w-[70%] justify-center text-center text-textWhite font-medium">
-        <small>{slides[slide].name}</small>
+        <h2>{slides[slide].name}</h2>
         <p className="py-4">{slides[slide].paragraph}</p>
       </div>