feat: change the testimonials text

Author: Jonath-z

src/components/cards/Story.tsx

@@ -50,8 +50,8 @@ export default function Story({ story, position, gridPosition, count, showingBub
   /**
    * Hook from use-onclickoutside.
    * it takes two arguments, the ref of the element, which are:
-   *    - The ref of the element on which the out side click will be detected
-   *    - The callback to be executed when the out side click is detected
+   *    - The ref of the element on which the outside click will be detected
+   *    - The callback to be executed when the outside click is detected
    */
   useOnClickOutside(bubbleRef, () => {
     if (showBubble) {
@@ -104,7 +104,7 @@ export default function Story({ story, position, gridPosition, count, showingBub
     <div
       ref={bubbleRef}
       onClick={() => showStoryBubble()}
-      className="absolute border border-solid border-gray-200 bg-gray-50 rounded-full p-1 top-2/4 left-2/4 -m-7 flex flex-row-reverse"
+      className={`absolute border border-solid border-gray-200 bg-gray-50 rounded-full p-1 top-2/4 left-2/4 -m-7 flex flex-row-reverse ${showBubble && "z-50"}`}
       style={{
         transform: getPosition(),
       }}

src/components/sections/homepage/Testimonials.tsx

@@ -41,14 +41,23 @@ const stories = (t: TFunction<"translation", undefined, "translation">): Testimo
     },
     {
       icon: "/assets/img/user_jet.png",
-      content: `${t("testimonials.text")}`,
+      content: `Thanks for your support, love and care on Dacade(Telegram and Website) it has being an awesome experience. I have learnt a lot and am still learning a lot. Thanks a lot`,
     },
     {
       icon: "/assets/img/user_tosin_edit.png",
-      content: `${t("testimonials.text")}`,
+      content: `I just made submission of my quote deapp on dacade.org 
+
+I'm so excited i took the course really enjoyed and learnt more 
+
+Please your feedback is welcome 😊
+`,
     },
     {
       icon: "/assets/img/user_susen.png",
+      content: `Dacade is really encouraging, I didn't realize the little that I know would matter. Thank you for making us learn more and to make research too.`,
+    },
+    {
+      icon: "/assets/img/yannick.png",
       content: `${t("testimonials.text")}`,
     },
     {

src/components/sections/homepage/_partials/testimonials/Stories.tsx

@@ -64,7 +64,7 @@ export default function TestimonialsSection({ list }: TestimonialsSectionProps):
   };
 
   /**
-   * Clear the icon which is showing the popup/buble
+   * Clear the icon which is showing the popup/bubble
    * @date 4/4/2023 - 11:56:53 AM
    *
    * @param {number} card
@@ -95,30 +95,32 @@ export default function TestimonialsSection({ list }: TestimonialsSectionProps):
 
   return (
     <div className="relative w-full top-0 h-screen left-0 z-0 hidden md:block md:max-h-3xl lg:max-h-4xl xl:max-h-7.1xl">
-      {grids.map((grid, gridIndex) => (
-        <span
-          key={gridIndex}
-          className="border border-solid border-gray-200 m-auto rounded-full absolute inset-0 xl:max-w-6xl xl:max-h-6xl md:max-h-.5xl md:max-w-.5xl lg:max-w-3xl lg:max-h-3xl"
-          style={{
-            width: `${getSize(gridIndex)}vh`,
-            height: `${getSize(gridIndex)}vh`,
-            zIndex: showingBubble.grid === gridIndex ? 99 : grids.length - gridIndex,
-          }}
-        >
-          {grid.map((story, storyIndex) => (
-            <Story
-              key={storyIndex}
-              story={story}
-              position={storyIndex}
-              count={grid.length}
-              gridPosition={gridIndex}
-              showingBubble={showingBubble}
-              onShowBubble={() => onBubbleShow(storyIndex, gridIndex)}
-              onHideBubble={() => onBubbleHide(storyIndex, gridIndex)}
-            />
-          ))}
-        </span>
-      ))}
+      {grids.map((grid, gridIndex) => {
+        return (
+          <span
+            key={gridIndex}
+            className="border border-solid border-gray-200 m-auto rounded-full absolute inset-0 xl:max-w-6xl xl:max-h-6xl md:max-h-.5xl md:max-w-.5xl lg:max-w-3xl lg:max-h-3xl"
+            style={{
+              width: `${getSize(gridIndex)}vh`,
+              height: `${getSize(gridIndex)}vh`,
+              zIndex: showingBubble.grid === gridIndex ? 99 : grids.length - gridIndex,
+            }}
+          >
+            {grid.map((story, storyIndex) => (
+              <Story
+                key={storyIndex}
+                story={story}
+                position={storyIndex}
+                count={grid.length}
+                gridPosition={gridIndex}
+                showingBubble={showingBubble}
+                onShowBubble={() => onBubbleShow(storyIndex, gridIndex)}
+                onHideBubble={() => onBubbleHide(storyIndex, gridIndex)}
+              />
+            ))}
+          </span>
+        );
+      })}
     </div>
   );
 }