Merge branch 'main' into feat-sustainability-LP

src/assets/lang/es/business.json

@@ -33,35 +33,35 @@
     "description": "Optimiza la gestión de archivos, seguridad y privacidad de tu organización con nuestro almacenamiento en la nube para empresas.",
     "cards": [
       {
-        "imagePathname": "internxt_b2b_feature1",
+        "imagePathname": "almacenamiento_en_la_nube_para_empresas_feature_1_es",
         "selectorTab": "Gestiona tu organización",
         "description": "Internxt ofrece a las empresas funciones para administrar a los miembros de tu organización, personalizar espacios de trabajo y administrar la facturación y los pagos de tu cuenta.  Cambia fácilmente entre tus cuentas comerciales y personales de Internxt para optimizar la productividad y la organización de archivos."
       },
       {
-        "imagePathname": "internxt_b2b_feature2",
+        "imagePathname": "almacenamiento_en_la_nube_para_empresas_feature_2_es",
         "selectorTab": "Comparte archivos de forma segura",
         "description": "El servicio de almacenamiento en la nube incluye funciones seguras para compartir archivos dentro de diferentes departamentos para colaborar de forma privada entre equipos. Protege con contraseña y restringe el acceso de archivos confidenciales para garantizar el control total sobre tu seguridad."
       },
       {
-        "imagePathname": "internxt_b2b_feature3",
+        "imagePathname": "almacenamiento_en_la_nube_para_empresas_feature_3_es",
         "selectorTab": "Gestión de sesiones",
         "description": "El almacenamiento en la nube para empresas de Internxt ofrece gestión avanzada de sesiones, proporcionando notificaciones de inicio de sesión en tiempo real y monitoreo remoto detallado de la sesión (cliente, sistema operativo, IP, ubicación, última hora activa). Esta seguridad de alto nivel permite al administrador de cuentas detectar accesos no autorizados, administrar sesiones de manera eficiente y proteger datos confidenciales."
       },
       {
-        "imagePathname": "internxt_b2b_feature4",
+        "imagePathname": "almacenamiento_en_la_nube_para_empresas_feature_4_es",
         "selectorTab": "Almacenamiento flexible",
         "description": "Internxt ofrece a los equipos una asignación de almacenamiento totalmente flexible para actualizar tu almacenamiento según tus necesidades. Con nuestros planes, puedes agregar usuarios, asignar almacenamiento y aumentar la capacidad según tus necesidades, lo que garantiza rentabilidad, escalabilidad y utilización óptima de los recursos."
       },
       {
-        "imagePathname": "internxt_b2b_feature5",
+        "imagePathname": "almacenamiento_en_la_nube_para_empresas_feature_5_es",
         "selectorTab": "Registros de Acceso",
         "description": "Supervisa fácilmente la actividad de tu equipo con un registro de actividad completo que ofrece una visualización de las interacciones de archivos y el acceso de los usuarios. Realiza un seguimiento de quién inició sesión, subió o modificó archivos, y disfruta de un control y seguridad total de los datos de tu empresa."
       }
     ]
   },
   "PriceTable": {
     "planTitles": {
-      "business": "Planes para negocios"
+      "business": "Planes para empresa"
     },
     "businessDescription2": "Asegura la seguridad de los datos de tu negocio con los planes de almacenamiento en la nube cifrados de Internxt.",
     "billingFrequency": {

src/assets/types/business.ts

@@ -82,6 +82,7 @@ export interface TestimonialsSection {
 
 export interface Testimonial {
   imageBrandName: string;
+
   brand: string;
   review: string;
 }

src/components/business/TestimonialsSectionForBusiness.tsx

@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { FiveStars } from '../shared/StarsRate';
 import { getImage } from '@/lib/getImage';
 import { useState } from 'react';
-import { CaretLeft, CaretRight } from '@phosphor-icons/react';
+import { CaretLeft, CaretRight, DotsThree } from '@phosphor-icons/react';
 import { Transition } from '@headlessui/react';
 
 interface TestimonialsSectionForBusinessProps {
@@ -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} />
+            </button>
+            <DotsThree size={24} />
+            <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>

src/components/business/WhatCanWeDo.tsx

@@ -1,10 +1,9 @@
 import { getImage } from '@/lib/getImage';
-import { Transition } from '@headlessui/react';
 import Image from 'next/image';
 import { Fragment, useState } from 'react';
 import RevealX from '../components/RevealX';
 import ReactMarkdown from 'react-markdown';
-import { CaretRight } from '@phosphor-icons/react';
+import { CaretLeft, CaretRight, DotsThree } from '@phosphor-icons/react';
 
 interface WhatCanWeDoProps {
   textContent: any;
@@ -14,6 +13,16 @@ export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
   const [selectedTab, setSelectedTab] = useState<number>(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
 
+  const onRightArrowClick = () => {
+    const newIndex = selectedTab === textContent.cards.length - 1 ? 0 : selectedTab + 1;
+    onTabSelectorButtonClicked(newIndex);
+  };
+
+  const onLeftArrowClick = () => {
+    const newIndex = selectedTab === 0 ? textContent.cards.length - 1 : selectedTab - 1;
+    onTabSelectorButtonClicked(newIndex);
+  };
+
   const onTabSelectorButtonClicked = (tabId: number) => {
     if (selectedTab !== tabId) {
       setIsTransitioning(true);
@@ -23,6 +32,7 @@ export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
       }, 200);
     }
   };
+  const isLastTab = selectedTab === textContent.cards.length - 1;
 
   return (
     <section
@@ -78,29 +88,46 @@ export const WhatCanWeDo = ({ textContent }: WhatCanWeDoProps): JSX.Element => {
         </div>
 
         {/*Mobile/Tablet View*/}
-        <div className="flex w-full snap-x snap-mandatory flex-row justify-start gap-6 overflow-scroll  xl:hidden">
-          {textContent.cards.map((testimonial, index) => (
-            <div
-              key={testimonial.selectorTab}
-              className="flex w-full shrink-0 snap-center flex-col justify-end rounded-3xl p-2"
-            >
-              <button
-                className={`flex ${
-                  selectedTab === index ? 'border-primary' : 'border-transparent'
-                } w-full max-w-[300px] translate-y-1 flex-col items-center justify-center border-b-4 p-5 text-center`}
-                onClick={() => {
-                  onTabSelectorButtonClicked(index);
-                }}
+        <div className="relative w-full snap-x snap-mandatory flex-row justify-start gap-6 lg:hidden">
+          <div className="flex w-full snap-x snap-mandatory space-y-5">
+            {textContent.cards.map((testimonial) => (
+              <div
+                key={testimonial.selectorTab}
+                className="rounded- flex w-full shrink-0 snap-center flex-col justify-end px-5"
               >
-                <p className="text-center text-3xl font-medium text-white">{testimonial.selectorTab}</p>
-              </button>
-              <div className="items- flex h-full flex-col space-y-10" key={testimonial.review}>
-                <div className="flex w-full max-w-[890px] flex-col">
-                  <p className="text-center text-xl text-white">{testimonial.description}</p>
+                <div className="flex h-full flex-col">
+                  <div className="flex min-h-[110px] w-full max-w-[890px] flex-col items-end justify-end">
+                    <p className="py-5 text-center text-3xl font-medium text-white">
+                      {textContent.cards[selectedTab].selectorTab}
+                    </p>
+                  </div>
+
+                  <div className="flex flex-row items-center justify-center space-x-2 py-4">
+                    {selectedTab !== 0 && (
+                      <>
+                        <button onClick={onLeftArrowClick} className="flex items-center text-white">
+                          <CaretLeft size={24} />
+                        </button>
+                        <DotsThree size={24} className="text-white"></DotsThree>
+                      </>
+                    )}
+
+                    <button
+                      onClick={onRightArrowClick}
+                      disabled={isLastTab}
+                      className={`${isLastTab ? 'text-gray-400 cursor-not-allowed' : 'hover:text-gray-300 text-white'}`}
+                    >
+                      <CaretRight size={24} />
+                    </button>
+                  </div>
+
+                  <div className="flex w-full max-w-[890px] flex-col">
+                    <p className="text-center text-xl text-white">{textContent.cards[selectedTab].description}</p>
+                  </div>
                 </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
       </div>
     </section>

src/components/layout/footers/Footer.tsx

@@ -160,7 +160,7 @@ export default function Footer({
         <footer className="flex max-w-[896px] items-center justify-center">
           {/* Desktop version */}
           <div className="hidden w-full flex-col items-center justify-center md:space-y-16 lg:flex">
-            <div className="flex w-full flex-row justify-between md:justify-center lg:space-x-20">
+            <div className="flex w-full flex-row justify-between space-x-20 md:justify-center md:space-x-12">
               <div className="flex flex-1 flex-col items-center lg:flex-none">
                 <div className="flex flex-shrink-0 flex-col space-y-3">
                   <h3 className="text-lg font-medium">{textContent.FooterSection.sections.products.title}</h3>

src/pages/business.tsx

@@ -46,6 +46,7 @@ export const BusinessPage = ({
     stripeService.redirectToCheckout(planId, currencyValue, 'business', isCheckoutForLifetime, businessCoupon?.name);
   };
   const onButtonClick = () => (window.location.href = '#priceTable');
+  const imagePath = lang === 'es' ? 'almacenamiento_en_la_nube_para_empresas_header' : 'Internxt_b2b_business_solution';
 
   return (
     <Layout title={metatags.title} description={metatags.description}>
@@ -66,7 +67,7 @@ export const BusinessPage = ({
           background: 'radial-gradient(50% 50% at 50% 50%, #0058DB 0%, #161616 100%)',
         }}
         imageProperties={{
-          src: getImage('/images/business/Internxt_b2b_business_solution.webp'),
+          src: getImage(`/images/business/${imagePath}.webp`),
           alt: 'Internxt B2B Business Solution',
           width: 671,
           height: 563,