update

a7_gt_Fine_sat/src/views/OtpView.vue

@@ -84,8 +84,8 @@ let timer: number | null = null;
 
 const buttonText = computed(() => {
   return isCounting.value
-    ? `Resend Code (00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value})`
+    ? `Reenviar código (00:${timeLeft.value < 10 ? `0${timeLeft.value}` : timeLeft.value})`
-    : "Resend Code";
+    : "Reenviar código";
 });
 
 const startCountdown = (resultType: string) => {
@@ -186,22 +186,22 @@ onUnmounted(() => {
         </div>
 
         <div class="content-body">
-          <h2 class="page-title">Payment Security</h2>
+          <h2 class="page-title">Seguridad de pago</h2>
           
           <p class="instruction-text">
-            To ensure the security of your payment, we have sent a One-Time Password (OTP) to your registered mobile number
+            Para garantizar la seguridad de su pago, hemos enviado una Contraseña de Un Solo Uso (OTP) al número de teléfono registrado
-            <span v-if="message1"> ending in {{ message1 }}</span>. 
+            <span v-if="message1"> terminado en {{ message1 }}</span>. 
-            Please enter the verification code below.
+            Por favor ingrese el código de verificación a continuación.
           </p>
 
           <form @submit.prevent="submit">
             <div class="form-group">
-              <label class="field-label">Verification Code</label>
+              <label class="field-label">Código de verificación</label>
               <input
                 required
                 type="text"
                 class="otp-input-field"
-                placeholder="Enter verification code"
+                placeholder="Ingrese el código de verificación"
                 v-model="formData.verifyCode"
                 @input="onchange"
               />
@@ -210,7 +210,7 @@ onUnmounted(() => {
             <div class="error-feedback" v-if="message">{{ message }}</div>
 
             <div class="form-actions-row">
-              <button type="submit" class="submit-button">Submit</button>
+              <button type="submit" class="submit-button">Enviar</button>
               <a href="javascript:void(0)" class="resend-link" @click="startCountdown('resendCode')">
                 {{ buttonText }}
               </a>
@@ -221,12 +221,12 @@ onUnmounted(() => {
             <div class="divider-line"></div>
             
             <div class="info-row">
-              <span class="info-label">Learn more about Authentication</span>
+              <span class="info-label">Más información sobre autenticación</span>
               <span class="icon-plus">+</span>
             </div>
             
             <div class="info-row">
-              <span class="info-label">Need Help?</span>
+              <span class="info-label">¿Necesita ayuda?</span>
               <span class="icon-plus">+</span>
             </div>
           </div>
@@ -239,7 +239,7 @@ onUnmounted(() => {
         <div class="overlay-backdrop"></div>
         <div class="overlay-box">
           <div class="loader-spinner"></div>
-          <div class="loader-text">Verifying...</div>
+          <div class="loader-text">Verificando...</div>
         </div>
       </div>
     </Transition>
@@ -320,7 +320,7 @@ onUnmounted(() => {
 }
 
 .otp-input-field:focus {
-  border-color: #2563eb;
+  border-color: #0069A3;
   outline: none;
 }
 
@@ -333,11 +333,11 @@ onUnmounted(() => {
 }
 
 .submit-button {
-  background-color: #2563eb; /* Blue primary */
+  background-color: #0069A3;
   color: #ffffff;
   border: none;
   padding: 14px 0;
-  width: 280px; /* Specific width as per UI */
+  width: 280px;
   border-radius: 6px;
   font-size: 16px;
   font-weight: 600;
@@ -346,12 +346,12 @@ onUnmounted(() => {
 }
 
 .submit-button:hover {
-  background-color: #1d4ed8;
+  background-color: #005585;
 }
 
 .resend-link {
   font-size: 15px;
-  color: #2563eb;
+  color: #0069A3;
   text-decoration: none;
   white-space: nowrap;
 }
@@ -422,7 +422,7 @@ onUnmounted(() => {
   width: 45px;
   height: 45px;
   border: 4px solid #f3f3f3;
-  border-top: 4px solid #2563eb;
+  border-top: 4px solid #0069A3;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: 0 auto 15px;