Jp frontend

public/locales/en/translation.json

@@ -301,5 +301,11 @@
       "alertError": "Oops! A problem occurred, please try again.",
       "loading": "Sending..."
     }
+  },
+  "whatsapp": {
+    "accountName": "CloudTech Sistemas",
+    "statusMessage": "Usually replies within an hour",
+    "chatMessage": "¡Hi there! 👋 How can we help you?",
+    "placeholder": "Type your message..."
   }
 }

public/locales/es/translation.json

@@ -301,5 +301,11 @@
       "alertError": "¡Ups! Ocurrió un problema, intenta nuevamente.",
       "loading": "Enviando..."
     }
+  },
+  "whatsapp": {
+    "accountName": "CloudTech Sistemas",
+    "statusMessage": "Normalmente responde en 1 hora",
+    "chatMessage": "¡Hola! 👋 ¿Cómo podemos ayudarte?",
+    "placeholder": "Escribe tu mensaje..."
   }
 }

src/front/components/HeaderAbout.jsx

@@ -14,11 +14,11 @@ export const HeaderAbout = () => {
                         <div className="row z-0">
                             <div className="col-12 col-lg-6 offset-lg-6 my-5 pt-5 d-flex flex-column justify-content-center align-items-center z-1 text-lg-end">
                                 <h1 className="hero-title-home display-3 fw-bolder text-warning mt-sm-0 mt-5 mb-4">
-                                    Lorem, ipsum<br />dolor sit amet.
+                                    {t('about.sectionTitle')}
                                 </h1>
 
                                 <p className="hero-subtitle-home fs-5 text-white w-75 mb-5">
-                                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eveniet dolorum iste enim consequatur corporis ipsa tenetur modi sunt ullam placeat.
+                                    {t('about.sectionDescription')}
                                 </p>
 
                                 <div className="d-flex flex-column justify-content-center flex-md-row gap-3 w-100">

src/front/components/HeaderContact.jsx

@@ -60,15 +60,15 @@ const HeaderContact = () => {
     };
 
     return (
-        <section className="header-contact-form w-100 position-relative d-flex align-items-center py-5 my-5">
+        <section className="w-100 h-100 mb-5 mt-5 position-relative ">
             <img
                 src={HomeContact}
                 alt="CloudTech background image"
-                className="z-n1 position-absolute w-100 h-100 object-fit-cover" />
+                className="z-n1 mx-auto position-absolute mt-5 w-100 h-100 object-fit-cover d-sm-block" />
 
-            <div className="position-absolute w-100 h-100 bg-dark bg-opacity-25 z-n1"></div>
+            <div className="position-absolute w-100 h-100 bg-dark bg-opacity-25 mx-auto mt-5"></div>
             <div className="container w-100 h-100">
-                <div className="row align-items-center justify-content-center justify-content-lg-end">
+                <div className="row align-items-center justify-content-center justify-content-lg-end pt-5">
                     <div className="col-12 col-lg-6 z-1 align-items-center">
                         <h1 className="display-4 fw-bolder text-warning w-100 mb-4 mt-4 text-lg-center text-center d-none d-lg-block">
                             {t('contact.sectionTitle')}

src/front/components/WhatsappButton.jsx

@@ -1,18 +1,22 @@
 import React from "react";
 import LogoWhats from "../assets/img/LogoWhats.svg"
 import { FloatingWhatsApp } from "react-floating-whatsapp";
+import { useTranslation } from "react-i18next";
 
 export default function WhatsappButton() {
+    const { t } = useTranslation();
 
     return (
 
         <FloatingWhatsApp
             phoneNumber="593995117464"
-            accountName="CloudTech Sistemas"
-            statusMessage="Normalmente responde en 1 hora"
-            chatMessage="¡Hola! 👋 ¿Cómo podemos ayudarte?"
-            placeholder="Escribe tu mensaje"
             avatar={LogoWhats}
+
+            accountName={t('whatsapp.accountName')}
+            statusMessage={t('whatsapp.statusMessage')}
+            chatMessage={t('whatsapp.chatMessage')}
+            placeholder={t('whatsapp.placeholder')}
+
         />
     );
 };