update: testimonials sections mobile view

internxt · Dec 23, 2024 · ef1806d · ef1806d
1 parent 771aa3a
commit ef1806d
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 20 deletions.
diff --git a/src/assets/lang/de/business.json b/src/assets/lang/de/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "Was Experten über uns sagen",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/en/business.json b/src/assets/lang/en/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "What experts are saying about us",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/es/business.json b/src/assets/lang/es/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "Lo que los expertos dicen sobre nosotros",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/fr/business.json b/src/assets/lang/fr/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "Ce que les experts disent de nous",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/it/business.json b/src/assets/lang/it/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "Cosa dicono gli esperti di noi",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/ru/business.json b/src/assets/lang/ru/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "Что говорят о нас эксперты",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/lang/zh-tw/business.json b/src/assets/lang/zh-tw/business.json
@@ -111,6 +111,7 @@
   },
   "TestimonialsSection": {
     "title": "專家對我們的評價",
+    "betweenDots": "...",
     "testimonials": [
       {
         "imageBrandName": "techradar",

diff --git a/src/assets/types/business.ts b/src/assets/types/business.ts
@@ -82,6 +82,7 @@ export interface TestimonialsSection {
 
 export interface Testimonial {
   imageBrandName: string;
+  betweenDots: string;
   brand: string;
   review: string;
 }

diff --git a/src/components/business/TestimonialsSectionForBusiness.tsx b/src/components/business/TestimonialsSectionForBusiness.tsx
@@ -17,6 +17,7 @@ export const TestimonialsSectionForBusiness = ({ textContent }: TestimonialsSect
 
   const [currentIndex, setCurrentIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [mobileIndex, setMobileIndex] = useState(0);
 
   const onLeftArrowClick = () => {
     const newIndex = currentIndex === 0 ? testimonialsParts.length - 1 : currentIndex - 1;
@@ -27,6 +28,15 @@ export const TestimonialsSectionForBusiness = ({ textContent }: TestimonialsSect
     const newIndex = currentIndex === testimonialsParts.length - 1 ? 0 : currentIndex + 1;
     onTabSelectorButtonClicked(newIndex);
   };
+  const onLeftMobileArrowClick = () => {
+    const newIndex = mobileIndex === 0 ? textContent.testimonials.length - 1 : mobileIndex - 1;
+    setMobileIndex(newIndex);
+  };
+
+  const onRightMobileArrowClick = () => {
+    const newIndex = mobileIndex === textContent.testimonials.length - 1 ? 0 : mobileIndex + 1;
+    setMobileIndex(newIndex);
+  };
 
   const onTabSelectorButtonClicked = (index: number) => {
     if (currentIndex !== index) {
@@ -80,28 +90,35 @@ export const TestimonialsSectionForBusiness = ({ textContent }: TestimonialsSect
         </div>
 
         {/*Mobile/Tablet View*/}
-        <div className="scrollbar-thumb-primary scrollbar-track-white flex w-full snap-x snap-mandatory flex-row justify-start gap-6 overflow-scroll xl:hidden">
-          {textContent.testimonials.map((testimonial) => (
-            <div
-              className="mx-auto flex w-full max-w-[375px] shrink-0 snap-center flex-col justify-start rounded-3xl bg-white p-8"
-              key={testimonial.review}
-            >
-              <div className="flex h-full flex-col justify-between gap-3" key={testimonial.review}>
-                <div className="flex flex-col gap-3">
-                  <FiveStars totalStars={5} />
-                  <p className="text-xl text-gray-80">{testimonial.review}</p>
-                </div>
-                <div className="flex h-full items-end">
-                  <Image
-                    src={getImage(`/images/business/logos-b2b/${testimonial.imageBrandName}.svg`)}
-                    alt={testimonial.imageBrandName}
-                    width={185}
-                    height={30}
-                  />
-                </div>
+        <div className="flex w-full snap-x snap-mandatory flex-row flex-col justify-start gap-6 xl:hidden">
+          <div className="flex items-center justify-center space-x-2 text-center">
+            <button onClick={onLeftMobileArrowClick} className="flex items-center">
+              <CaretLeft size={24} />
+              <span className="ml-2 text-gray-100">{textContent.betweenDots}</span>
+            </button>
+            <button onClick={onRightMobileArrowClick} className="flex items-center">
+              <CaretRight size={24} />
+            </button>
+          </div>
+
+          <div className="mx-auto flex w-full max-w-[375px] shrink-0 snap-center flex-col justify-start rounded-3xl bg-white p-8">
+            <div className="flex h-full flex-col justify-between gap-3">
+              <div className="flex flex-col gap-3">
+                <FiveStars totalStars={5} />
+                <p className="text-xl text-gray-80">{textContent.testimonials[mobileIndex].review}</p>
+              </div>
+              <div className="flex h-full items-end">
+                <Image
+                  src={getImage(
+                    `/images/business/logos-b2b/${textContent.testimonials[mobileIndex].imageBrandName}.svg`,
+                  )}
+                  alt={textContent.testimonials[mobileIndex].imageBrandName}
+                  width={185}
+                  height={30}
+                />
               </div>
             </div>
-          ))}
+          </div>
         </div>
       </div>
     </section>