From 6e0d90c9f0f3cdc047d2ecf8d169508736085139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Ckebean=E2=80=9D?= <“chenqiua@gmail.com”>
Date: Mon, 28 Oct 2024 13:53:23 +0200
Subject: [PATCH] Testimonials redesign

---
 src/pages/About.tsx | 220 +++++++++++++++++++++++++++-----------------
 1 file changed, 135 insertions(+), 85 deletions(-)

diff --git a/src/pages/About.tsx b/src/pages/About.tsx
index 13082cfdf..62643dacb 100644
--- a/src/pages/About.tsx
+++ b/src/pages/About.tsx
@@ -10,51 +10,97 @@ import person from '../assets/person.png';
 import person2 from '../assets/person2.png';
 import ur from '../assets/ur.png';
 
+const testimonials = [
+  {
+    id: 1,
+    name: 'Bernard Dushimimana',
+    role: 'Sr.Manager',
+    organization: 'Andela',
+    image: person,
+    content: `I'm extremely impressed with Pulse and their performance management platform.
+        Since using their services, it has been a game-changer for our organization.
+        The platform is intuitive, easy to navigate, and packed with powerful features.`,
+  },
+  {
+    id: 2,
+    name: 'Susan',
+    role: 'Sr.Manager',
+    organization: 'Andela',
+    image: person2,
+    content: `I'm delighted to share my positive experience with Pulse and their exceptional
+        performance management platform. Implementing their services has led to remarkable
+        improvements in our performance tracking and management processes.`,
+  },
+  {
+    id: 3,
+    name: 'Dr. Jack',
+    role: 'Director',
+    organization: 'University of Rwanda',
+    image: ur,
+    content: `
+        We are thrilled with the services provided by Pulse. Their performance management platform
+        has exceeded our expectations in every way. The user-friendly interface and comprehensive
+        features have made tracking and monitoring our performance metrics a breeze.
+        `,
+  },
+  {
+    id: 4,
+    name: 'Dr. Jack',
+    role: 'Director',
+    organization: 'University of Rwanda',
+    image: ur,
+    content: `
+        We are thrilled with the services provided by Pulse. Their performance management platform
+        has exceeded our expectations in every way. The user-friendly interface and comprehensive
+        features have made tracking and monitoring our performance metrics a breeze.
+        `,
+  },
+  {
+    id: 5,
+    name: 'Dr. Jack',
+    role: 'Director',
+    organization: 'University of Rwanda',
+    image: ur,
+    content: `
+        We are thrilled with the services provided by Pulse. Their performance management platform
+        has exceeded our expectations in every way. The user-friendly interface and comprehensive
+        features have made tracking and monitoring our performance metrics a breeze.
+        `,
+  },
+  {
+    id: 6,
+    name: 'Dr. Jack',
+    role: 'Director',
+    organization: 'University of Rwanda',
+    image: ur,
+    content: `
+        We are thrilled with the services provided by Pulse. Their performance management platform
+        has exceeded our expectations in every way. The user-friendly interface and comprehensive
+        features have made tracking and monitoring our performance metrics a breeze.
+        `,
+  },
+];
+
 function Testimonial() {
-  const { t } = useTranslation();
   const [currentIndex, setCurrentIndex] = useState(0);
 
-  const testimonials = [
-    {
-      id: 1,
-      name: 'Bernard Dushimimana',
-      role: t('Sr.Manager'),
-      organization: t('Andela'),
-      image: person,
-      content: t('Content1'),
-    },
-    {
-      id: 2,
-      name: 'Susan',
-      role: t('Sr.Manager'),
-      organization: t('Andela'),
-      image: person2,
-      content: t('Content2'),
-    },
-    {
-      id: 3,
-      name: 'Dr. Jack',
-      role: t('Director'),
-      organization: t('University of Rwanda'),
-      image: ur,
-      content: t('Content3'),
-    },
-  ];
-
   const prevTestimonial = () => {
-    setCurrentIndex(
-      (prevIndex) =>
-        (prevIndex - 1 + testimonials.length) % testimonials.length,
+    setCurrentIndex((prevIndex) =>
+      prevIndex === 0 ? testimonials.length - 1 : prevIndex - 1
     );
   };
 
   const nextTestimonial = () => {
-    setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+    setCurrentIndex((prevIndex) =>
+      prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
+    );
   };
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCurrentIndex((prevIndex) => (prevIndex + 1) % testimonials.length);
+      setCurrentIndex((prevIndex) =>
+        prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1
+      );
     }, 10000);
 
     return () => clearInterval(interval);
@@ -62,72 +108,74 @@ function Testimonial() {
 
   return (
     <>
-      <div className="block md:hidden flex-col lg:mx-10 md:mx-20 my-20 gap-10 relative font-serif">
-        {testimonials.map((testimonial, index) => (
-          <div
-            key={testimonial.id}
-            className={`bg-indigo-100 dark:bg-dark-bg  dark:text-slate-300 lg:w-1/3 p-8 md:w-full rounded-b-3xl sm:mx-3 rounded-t-3xl ${
-              currentIndex === index ? 'visible' : 'hidden'
-            }`}
+      <div className="block md:hidden relative font-serif my-20">
+        <div className="overflow-hidden">
+          <div 
+            className="flex transition-transform duration-500 ease-in-out"
+            style={{ transform: `translateX(-${currentIndex * 100}%)` }}
           >
-            <div className="flex flex-col sm:flex-row  mb-6 items-center">
-              <img className="sm:w-1/4" src={testimonial.image} alt="" />
-
-              <ul>
-                <li className="text-xs ml-3  dark:text-slate-300 text-neutral-600">
-                  {testimonial.name}
-                </li>
-                <li className="text-xs mt-2  dark:text-slate-300 ml-3">
-                  {testimonial.role}, {testimonial.organization}
-                </li>
-              </ul>
-            </div>
-            <p className="text-base  dark:text-slate-300 text-neutral-900">
-              {testimonial.content}
-            </p>
+            {testimonials.map((testimonial) => (
+              <div
+                key={testimonial.id}
+                className="flex-shrink-0 w-full bg-indigo-100 dark:bg-dark-bg dark:text-slate-300 p-8 rounded-3xl mx-3"
+              >
+                <div className="flex flex-col sm:flex-row mb-6 items-center">
+                  <img className="sm:w-1/4" src={testimonial.image} alt="" />
+                  <ul>
+                    <li className="text-xs ml-3 dark:text-slate-300 text-neutral-600">
+                      {testimonial.name}
+                    </li>
+                    <li className="text-xs mt-2 dark:text-slate-300 ml-3">
+                      {testimonial.role}, {testimonial.organization}
+                    </li>
+                  </ul>
+                </div>
+                <p className="text-base dark:text-slate-300 text-neutral-900">
+                  {testimonial.content}
+                </p>
+              </div>
+            ))}
           </div>
-        ))}
+        </div>
 
-        <span className="absolute top-1/2 left-3 transform -translate-y-1/2  text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 ">
-          <AiOutlineLeft
-            size={20}
-            onClick={prevTestimonial}
-            className="cursor-pointer"
-          />
-        </span>
-
-        <span className="absolute top-1/2 right-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 ">
-          <AiOutlineRight
-            size={20}
-            onClick={nextTestimonial}
-            className="cursor-pointer"
-          />
-        </span>
+        <button
+          className="absolute top-1/2 left-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 hover:opacity-75 transition-opacity z-10"
+          onClick={prevTestimonial}
+        >
+          <AiOutlineLeft size={20} />
+        </button>
+
+        <button
+          className="absolute top-1/2 right-3 transform -translate-y-1/2 text-neutral-600 rounded-full bg-slate-50 p-1 drop-shadow-2xl opacity-50 hover:opacity-75 transition-opacity z-10"
+          onClick={nextTestimonial}
+        >
+          <AiOutlineRight size={20} />
+        </button>
       </div>
 
-      <div className="hidden md:flex md:flex-row flex-col  lg:mx-0 md:mx-0 my-20 gap-10 md:flex-wrap lg:flex-nowrap font-serif">
-        {testimonials.map((testimonial, index) => (
+      {/* Desktop view remains the same */}
+      <div className="hidden md:flex overflow-x-auto md:flex-row flex-col lg:mx-0 md:mx-0 my-20 gap-10 font-serif">
+        {testimonials.map((testimonial) => (
           <div
             key={testimonial.id}
-            className="bg-indigo-100  dark:bg-dark-bg lg:w-1/3 p-8 md:w-full  rounded-b-3xl sm:mx-3 rounded-t-3xl "
+            className="bg-indigo-100 dark:bg-dark-bg lg:w-1/3 p-8 md:w-full rounded-b-3xl sm:mx-3 rounded-t-3xl flex-shrink-0"
           >
-            <div className="flex flex-col sm:flex-row  mb-6 items-center">
+            <div className="flex flex-col sm:flex-row mb-6 items-center">
               <img
                 className="md:w-1/5 sm:w-1/3"
                 src={testimonial.image}
                 alt=""
               />
-
               <ul>
-                <li className="text-sm ml-3  dark:text-slate-300  text-neutral-600">
+                <li className="text-sm ml-3 dark:text-slate-300 text-neutral-600">
                   {testimonial.name}
                 </li>
-                <li className="text-sm  dark:text-slate-300  mt-2 ml-3">
+                <li className="text-sm dark:text-slate-300 mt-2 ml-3">
                   {testimonial.role}, {testimonial.organization}
                 </li>
               </ul>
             </div>
-            <p className="text-base dark:text-slate-300  text-neutral-900">
+            <p className="text-base dark:text-slate-300 text-neutral-900">
               {testimonial.content}
             </p>
           </div>
@@ -168,10 +216,10 @@ function About({ styles }: any) {
   ];
 
   return (
-    <div className=" bg-white   mt-auto dark:bg-dark-frame-bg font-serif">
-      <div className=" justify-between w-full h-full pb-5">
+    <div className="bg-white mt-auto dark:bg-dark-frame-bg font-serif">
+      <div className="justify-between w-full h-full pb-5">
         <div>
-          <h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4  dark:text-slate-100">
+          <h1 className="text-center text-neutral-700 mb-5 font lg:text-4xl md:text-2xl pt-10 pb-4 dark:text-slate-100">
             {t('hero2')}
           </h1>
         </div>
@@ -179,9 +227,9 @@ function About({ styles }: any) {
         {aboutCards.map(({ title, body, img, orientation }) => (
           <div
             key={body}
-            className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation} `}
+            className={`mt-10 card-image lg:mx-10 sm:mx-5 md:flex ${orientation}`}
           >
-            <div className="shadow-md sm:shadow-none mx-auto md:mx-0 bg-indigo-100  items-center  md:items-start flex-col dark:bg-dark-bg md:w-[45%] md:py-10 md:px-4 max-w-[35em] sm:w-full   sm:rounded-3xl  md:mr-2">
+            <div className="shadow-md sm:shadow-none mx-auto md:mx-0 bg-indigo-100 items-center md:items-start flex-col dark:bg-dark-bg md:w-[45%] md:py-10 md:px-4 max-w-[35em] sm:w-full sm:rounded-3xl md:mr-2">
               <h2 className="pt-3 header-style lg:px-5 lg:text-2xl sm:text-xl lg:text-start sm:text-center md:text-start dark:text-slate-200">
                 {title}
               </h2>
@@ -207,7 +255,7 @@ function About({ styles }: any) {
         <div className="px-5 mt-20">
           <h1 className="font text-center text-neutral-700 lg:text-4xl sm:text-2xl dark:text-slate-100">
             {' '}
-            {t('Come shape the future together')}
+            Come shape the future together{' '}
           </h1>
         </div>
         <Testimonial />
@@ -215,4 +263,6 @@ function About({ styles }: any) {
     </div>
   );
 }
+
 export { About };
+