Testimonials redesign

Author: “kebean”

package-lock.json

@@ -73,7 +73,7 @@
     "graphql-ws": "^5.16.0",
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^7.2.1",
-    "i18next-http-backend": "^2.6.0",
+    "i18next-http-backend": "^2.6.2",
     "i18next-xhr-backend": "^3.2.2",
     "istanbul": "^0.4.5",
     "jsonwebtoken": "^9.0.1",

package.json

@@ -347,7 +347,7 @@
   "Boost your organization": "Boost your organizations productivity with Pulse",
   "Please wait to be added to a program or cohort": "Please wait to be added to a program or cohort",
   "Are you sure you want to delete this user?": "Are you sure you want to delete this user?",
-  "Come shape the future together": "Come shape the future together",
+  "Come shape the future together": "Excellent human resources and companies come shape the future togetherr",
   "Content1": "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.",
   "Content2": "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.",
   "Content3": "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.",

public/locales/en/translation.json

@@ -466,7 +466,7 @@
   "Please wait to be added to a program or cohort": "Veuillez attendre d'être ajouté à un programme ou à une cohorte",
   "Enter all the required information": "Entrez toutes les informations requises",
   "Are you sure you want to delete this user?": "Êtes-vous sûr de vouloir supprimer cet utilisateur ?",
-  "Come shape the future together": "Venez former l'avenir ensemble",
+  "Come shape the future together": "Excellentes ressources humaines et entreprises venez façonner l'avenir ensemble",
   "Content1": "Je suis extrêmement impressionné par Pulse et leur plateforme de gestion de la performance. Depuis que nous utilisons leurs services, cela a été un véritable changement pour notre organisation. La plateforme est intuitive, facile à naviguer et riche en fonctionnalités puissantes",
   "Content2": "Je suis ravi de partager mon expérience positive avec Pulse et leur plateforme exceptionnelle de gestion de la performance. La mise en œuvre de leurs services a conduit à des améliorations remarquables dans nos processus de suivi et de gestion de la performance.",
   "Content3": "Nous sommes ravis des services fournis par Pulse. Leur plateforme de gestion de la performance a dépassé nos attentes à tous égards. L'interface conviviale et les fonctionnalités complètes ont facilité le suivi et la surveillance de nos indicateurs de performance",

public/locales/fr/translation.json

@@ -454,7 +454,7 @@
   "Please wait to be added to a program or cohort": "Tegereza tukongere muri porogarame cyangwa itsinda",
   "Enter all the required information": "Shyiramo amakuru yose asabwa",
   "Are you sure you want to delete this user?": "urashaka kwemeza ikigikorwa cyo gusiba uyumuntu ?",
-  "Come shape the future together": "Dufatanye kwubaka ejo Hazaza",
+  "Come shape the future together": "Abakozi beza n’ibigo by’ubushobozi bw’abakozi, muze duteze imbere ejo hazaza hamwe",
   "Content1": "Nshimishijwe cyane na Pulse n'ikoranabuhanga ryabo ryo gucunga imikorere. Kuva natangira gukoresha serivisi zabo, byabaye impinduka ikomeye mu kigo cyacu. iri koranabuhanga  riroroshye kurikoresha, kandi ryubakanye ubuhanga n' ubushobozi buhanitse.",
   "Content2": "Nshimishijwe no gusangiza uburambe bwanjye bwiza na Pulse n'ikoranabuhanga ryabo rihambaye ryo gucunga imikorere. Gushyira mu bikorwa serivisi zabo byazanye impinduka zikomeye mu gukurikirana no gucunga imikorere yacu",
   "Content3": "Turishimye cyane ku bwa Pulse. Ikoranabuhanga rya yo ryo gucunga imikorere ryarenze ibyifuzo byacu mu buryo bwose. Iroroshye kuyikoresha kandi yatumye tubasha gukurikirana no kugenzura imikorere yacu",

public/locales/kn/translation.json

@@ -62,13 +62,13 @@ function Testimonial() {
 
   return (
     <>
-      <div className="block md:hidden flex-col lg:mx-10 md:mx-20 my-20 gap-10 relative font-serif">
+      <div className="block md:hidden flex-col px-4 py-16 bg-gradient-to-b from-white to-indigo-50 dark:from-dark-frame-bg dark:to-dark-bg 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 ${
+            className={`group relative bg-white dark:bg-dark-bg rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
               currentIndex === index ? 'visible' : 'hidden'
-            }`}
+              }`}
           >
             <div className="flex flex-col sm:flex-row  mb-6 items-center">
               <img className="sm:w-1/4" src={testimonial.image} alt="" />
@@ -105,31 +105,40 @@ function Testimonial() {
         </span>
       </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">
+      <div className="hidden md:grid md:grid-cols-3 gap-6 max-w-6xl mx-auto px-4 py-16 bg-gradient-to-b from-white to-indigo-50 dark:from-dark-frame-bg dark:to-dark-bg">
         {testimonials.map((testimonial, index) => (
           <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="group relative bg-white dark:bg-dark-bg rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden "
           >
-            <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">
+            <div className="flex items-center space-x-4 mb-6">
+              <div className="relative">
+                <div className="w-16 h-16 rounded-full overflow-hidden ring-2 ring-indigo-100 dark:ring-indigo-900">
+                  <img
+                    src={testimonial.image}
+                    alt={testimonial.name}
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+                <div className="absolute -bottom-1 -right-1 w-5 h-5 bg-indigo-500 rounded-full border-2 border-white dark:border-dark-bg" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-gray-900 dark:text-gray-100">
                   {testimonial.name}
-                </li>
-                <li className="text-sm  dark:text-slate-300  mt-2 ml-3">
-                  {testimonial.role}, {testimonial.organization}
-                </li>
-              </ul>
+                </h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  {testimonial.role}
+                </p>
+                <p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
+                  {testimonial.organization}
+                </p>
+              </div>
+            </div>
+            <div className="relative">
+              <p className="text-gray-700 dark:text-gray-300 leading-relaxed">
+                {testimonial.content}
+              </p>
             </div>
-            <p className="text-base dark:text-slate-300  text-neutral-900">
-              {testimonial.content}
-            </p>
           </div>
         ))}
       </div>
@@ -215,4 +224,4 @@ function About({ styles }: any) {
     </div>
   );
 }
-export { About };
+export { About };

src/pages/About.tsx

@@ -17,4 +17,4 @@ describe('About page', () => {
 
     expect(elem.toJSON()).toMatchSnapshot();
   });
-});
+});