contact language updated

components/ContactFrom/ContactForm.js

@@ -3,8 +3,11 @@ import React, { useState, useRef } from "react";
 import SimpleReactValidator from "simple-react-validator";
 import ReCAPTCHA from "react-google-recaptcha";
 import axios from "axios";
+import { useTranslation } from 'next-i18next';
 
 const ContactForm = () => {
+  const { t } = useTranslation("contact");
+  const subjectOptions = t("form.subjectOptions", { returnObjects: true });
   const [forms, setForms] = useState({
     name: "",
     email: "",
@@ -64,7 +67,7 @@ const ContactForm = () => {
           { headers: { "Content-Type": "application/json" } }
         );
 
-        alert(response?.data?.message || "Message sent successfully!");
+        alert(t("form.successMessage"));
 
         setForms({
           name: "",
@@ -84,7 +87,7 @@ const ContactForm = () => {
         }
         setRecaptchaToken(null);
       } catch (err) {
-        alert("Failed to send message. Please try again later.");
+        alert(t("form.failedMessage"));
       }
     } else {
       validator.showMessages();
@@ -103,9 +106,14 @@ const ContactForm = () => {
               name="name"
               onBlur={changeHandler}
               onChange={changeHandler}
-              placeholder="Your Name"
+              placeholder={t("form.namePlaceholder")}
             />
-            {validator.message("name", forms.name, "required|alpha_space")}
+            {validator.message(
+              "name",
+              forms.name,
+              "required|alpha_space",
+              { messages: { required: t("form.requiredMessages.name") } }
+            )}
           </div>
         </div>
 
@@ -117,9 +125,14 @@ const ContactForm = () => {
               name="email"
               onBlur={changeHandler}
               onChange={changeHandler}
-              placeholder="Your Email"
+              placeholder={t("form.emailPlaceholder")}
             />
-            {validator.message("email", forms.email, "required|email")}
+            {validator.message(
+              "email",
+              forms.email,
+              "required|email",
+              { messages: { required: t("form.requiredMessages.email") } }
+            )}
           </div>
         </div>
 
@@ -131,9 +144,14 @@ const ContactForm = () => {
               name="phone"
               onBlur={changeHandler}
               onChange={changeHandler}
-              placeholder="Your phone"
+              placeholder={t("form.phonePlaceholder")}
             />
-            {validator.message("phone", forms.phone, "required|phone")}
+            {validator.message(
+              "phone",
+              forms.phone,
+              "required|phone",
+              { messages: { required: t("form.requiredMessages.phone") } }
+            )}
           </div>
         </div>
 
@@ -145,26 +163,37 @@ const ContactForm = () => {
               value={forms.subject}
               name="subject"
             >
-              <option value="">Select Subject</option>
+              <option value="">{t("form.subjectPlaceholder")}</option>
-              <option>River Development</option>
+              {Array.isArray(subjectOptions) &&
-              <option>Village Development</option>
+                subjectOptions.map((opt, idx) => (
-              <option>Road Development</option>
+                  <option key={idx}>{opt}</option>
-              <option>Town Development</option>
+                ))}
-              <option>Social Development</option>
             </select>
-            {validator.message("subject", forms.subject, "required")}
+
+            {validator.message(
+              "subject",
+              forms.subject,
+              "required",
+              { messages: { required: t("form.requiredMessages.subject") } }
+            )}
           </div>
         </div>
 
+
         <div className="col col-lg-12 col-12">
           <textarea
             onBlur={changeHandler}
             onChange={changeHandler}
             value={forms.message}
             name="message"
-            placeholder="Message"
+            placeholder={t("form.messagePlaceholder")}
           ></textarea>
-          {validator.message("message", forms.message, "required")}
+          {validator.message(
+            "message",
+            forms.message,
+            "required",
+            { messages: { required: t("form.requiredMessages.message") } }
+          )}
         </div>
 
         <div className="col col-lg-12 col-12" style={{ marginTop: 12 }}>
@@ -178,7 +207,7 @@ const ContactForm = () => {
 
       <div className="submit-area" style={{ marginTop: 12 }}>
         <button type="submit" className="theme-btn">
-          Submit Now
+          {t("form.submitButton")}
         </button>
       </div>
     </form>

components/Contactpage/Contactpage.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import ContactForm from '../ContactFrom/ContactForm'
+import { useTranslation } from 'next-i18next';
 
 
 const Contactpage = () => {
-
+    const { t } = useTranslation("contact");
-    return(
+    return (
         <section className="wpo-contact-pg-section section-padding">
             <div className="container">
                 <div className="row">
@@ -32,12 +33,11 @@ const Contactpage = () => {
                                             </div>
                                         </div>
                                         <div className="office-info-text">
-                                            <h2>Email Us</h2>
+                                            <h2>{t("contactInfo.emailTitle")}</h2>
-                                            <p>info@janahanlaw.com</p>
+                                            <p>{t("contactInfo.email")}</p>
-                                            {/* <p>helloyou@gmail.com</p> */}
                                         </div>
                                     </div>
-                                </div> 
+                                </div>
                                 <div className="col col-xl-6 col-lg-6 col-md-6 col-12">
                                     <div className="office-info-item">
                                         <div className="office-info-icon">
@@ -46,32 +46,31 @@ const Contactpage = () => {
                                             </div>
                                         </div>
                                         <div className="office-info-text">
-                                            <h2>Call Now</h2>
+                                            <h2>{t("contactInfo.callTitle")}</h2>
-                                            <p>+1 (305) 330-7413</p>
+                                            <p>{t("contactInfo.phone")}</p>
-                                            {/* <p>+1 800 123 654 987</p> */}
                                         </div>
                                     </div>
-                                </div> 
+                                </div>
                             </div>
                         </div>
                         <div className="wpo-contact-title">
-                            <h2>Have Any Question?</h2>
+                            <h2>{t('contactInfo.questionTitle')}</h2>
-                            <p>We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today.</p>
+                            <p>{t('contactInfo.questionDesc')}</p>
                         </div>
                         <div className="wpo-contact-form-area">
-                            <ContactForm/>
+                            <ContactForm />
                         </div>
-                    </div>                
+                    </div>
                 </div>
-            </div> 
+            </div>
             {/* <section className="wpo-contact-map-section">
                 <div className="wpo-contact-map">
                     <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.9147703055!2d-74.11976314309273!3d40.69740344223377!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sbd!4v1547528325671"></iframe>
                 </div>
             </section> */}
         </section>
-     )
+    )
-        
+
 }
 
 export default Contactpage;

next-i18next.config.js

@@ -1,4 +1,4 @@
-const { default: OurApproach } = require("./pages/our-approach");
+// const { default: OurApproach } = require("./pages/our-approach");
 
 module.exports = {
     i18n: {
@@ -6,18 +6,18 @@ module.exports = {
         locales: ['en', 'es'],
         localeDetection: false,
     },
-    ns: ['common', 'menu', 'homeHero', 'home4Card'],
+    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'ourMission', 'racialJustice', 'contact', 'ourApproach', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor' ],
     defaultNS: 'common',
     //   localePath: './public/locales',
 };
 
-// aakash -  'ourMission', 'racialJustice'
+// aakash -  ourMission, racialJustice
 
 
-// Selvi  - 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor'
+// Selvi - 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor'
 
 
-// Vidhya - OurApproach
+// Vidhya
-
+// OurApproach
-// Alagu Raj  - 'common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'
 
+// Alagu Raj  - 'common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'

pages/contact/index.js

@@ -24,7 +24,7 @@ export default ContactPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'contact'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

public/locales/en/contact.json

@@ -0,0 +1,35 @@
+{
+  "contactInfo": {
+    "emailTitle": "Email Us",
+    "email": "info@janahanlaw.com",
+    "callTitle": "Call Now",
+    "phone": "+1 (305) 330-7413",
+    "questionTitle": "Have Any Question?",
+    "questionDesc": "We’re here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today."
+  },
+  "form": {
+    "namePlaceholder": "Your Name",
+    "emailPlaceholder": "Your Email",
+    "phonePlaceholder": "Your Phone",
+    "subjectPlaceholder": "Select Subject",
+    "subjectOptions": [
+      "River Development",
+      "Village Development",
+      "Road Development",
+      "Town Development",
+      "Social Development"
+    ],
+    "messagePlaceholder": "Message",
+    "submitButton": "Submit Now",
+    "successMessage": "Message sent successfully!",
+    "failedMessage": "Failed to send message. Please try again later.",
+    "requiredMessages": {
+      "name": "Name is required",
+      "email": "Valid email is required",
+      "phone": "Phone number is required",
+      "subject": "Please select a subject",
+      "message": "Message is required",
+      "recaptcha": "Please complete the ReCAPTCHA"
+    }
+  }
+}

public/locales/es/contact.json

@@ -0,0 +1,35 @@
+{
+  "contactInfo": {
+    "emailTitle": "Envíanos un correo",
+    "email": "info@janahanlaw.com",
+    "callTitle": "Llama ahora",
+    "phone": "+1 (305) 330-7413",
+    "questionTitle": "¿Tienes alguna pregunta?",
+    "questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy."
+  },
+  "form": {
+    "namePlaceholder": "Tu Nombre",
+    "emailPlaceholder": "Tu Correo Electrónico",
+    "phonePlaceholder": "Tu Teléfono",
+    "subjectPlaceholder": "Selecciona Asunto",
+    "subjectOptions": [
+      "Desarrollo de Ríos",
+      "Desarrollo de Aldeas",
+      "Desarrollo de Carreteras",
+      "Desarrollo de Ciudades",
+      "Desarrollo Social"
+    ],
+    "messagePlaceholder": "Mensaje",
+    "submitButton": "Enviar Ahora",
+    "successMessage": "¡Mensaje enviado con éxito!",
+    "failedMessage": "Error al enviar el mensaje. Por favor, inténtalo de nuevo más tarde.",
+    "requiredMessages": {
+      "name": "El nombre es obligatorio",
+      "email": "Correo electrónico válido es obligatorio",
+      "phone": "El teléfono es obligatorio",
+      "subject": "Por favor selecciona un asunto",
+      "message": "El mensaje es obligatorio",
+      "recaptcha": "Por favor completa el ReCAPTCHA"
+    }
+  }
+}