From 80135e36bcad38e1e4197cd250ba199902a14d94 Mon Sep 17 00:00:00 2001
From: akash <akash@metatroncube.com>
Date: Mon, 18 Aug 2025 19:04:57 +0530
Subject: [PATCH] Services Language Updated

---
 components/services/ServicesSection.js | 119 +++++++-------
 next-i18next.config.js                 |   6 +-
 pages/services/[slug].js               | 213 ++++++++++++++-----------
 pages/services/index.js                |  41 +++--
 public/locales/en/services.json        |  21 +++
 public/locales/es/services.json        |  21 +++
 6 files changed, 254 insertions(+), 167 deletions(-)
 create mode 100644 public/locales/en/services.json
 create mode 100644 public/locales/es/services.json

diff --git a/components/services/ServicesSection.js b/components/services/ServicesSection.js
index 1b9a696..15ec345 100644
--- a/components/services/ServicesSection.js
+++ b/components/services/ServicesSection.js
@@ -1,72 +1,79 @@
 import React from "react";
-import Link from 'next/link';
+import Link from "next/link";
 import SectionTitle from "../SectionTitle/SectionTitle";
-import Campaign from '../../api/campaign';
 import Image from "next/image";
+import { useTranslation } from "next-i18next";
 
 const ClickHandler = () => {
+  if (typeof window !== "undefined") {
     window.scrollTo(10, 0);
-}
+  }
+};
 
 const ServicesSection = (props) => {
-    return (
-        <div className={`wpo-campaign-area section-padding ${props.cmClass}`}>
-            <div className="container">
-                <SectionTitle subTitle={'Campaign'} Title={'Our Upcoming Campaign'} />
-                <div className="wpo-campaign-wrap">
-                    <div className="row">
-                        {Campaign.map((campaign, cam) => (
-                            <div className="col-lg-4 col-md-6 col-12" key={cam}>
-                                <div className="wpo-campaign-single">
-                                    <div className="wpo-campaign-item">
-                                        <div className="wpo-campaign-img">
-                                            <Image src={campaign.sImgS} alt="" />
-                                        </div>
-                                        <div className="wpo-campaign-content">
-                                            <div className="wpo-campaign-text-top data-theem">
-                                                {/* <p><i className="fi flaticon-calendar"></i> {campaign.date}</p> */}
-                                                {/* <h3 style={{
-                                                    whiteSpace: 'nowrap',
-                                                    overflow: 'hidden',
-                                                    textOverflow: 'ellipsis',
-                                                    width: '100%',
-                                                    display: 'block',
-                                                }}> */}
-                                                <h3>
-                                                    <Link
-                                                        onClick={ClickHandler}
-                                                        href={`/services/${campaign.slug}`}
-                                                    >
-                                                        {campaign.sTitle}
-                                                    </Link>
+  const { t } = useTranslation("services");
 
+  // campaigns from translations
+  const campaigns = t("campaigns", { returnObjects: true });
 
+  return (
+    <div className={`wpo-campaign-area section-padding ${props.cmClass || ""}`}>
+      <div className="container">
+        {/* Section Title */}
+        <SectionTitle
+          subTitle={t("page.subtitle")}
+          Title={t("page.title")}
+        />
 
-                                                </h3>
-                                                <p>
-                                                    {campaign.description}
-                                                </p>
-                                                <div className="services-btn">
-                                                    <Link
-                                                        onClick={ClickHandler}
-                                                        href={`/services/${campaign.slug}`}
-                                                        className="theme-btn full-width-btn"
-                                                    >
-                                                        View Services
-                                                    </Link>
-                                                </div>
-
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        ))}
+        <div className="wpo-campaign-wrap">
+          <div className="row">
+            {campaigns.map((campaign, cam) => (
+              <div className="col-lg-4 col-md-6 col-12" key={cam}>
+                <div className="wpo-campaign-single">
+                  <div className="wpo-campaign-item">
+                    <div className="wpo-campaign-img">
+                      <Image
+                        src={campaign.sImgS}
+                        alt={campaign.sTitle}
+                        width={400}
+                        height={250}
+                        unoptimized
+                      />
                     </div>
+
+                    <div className="wpo-campaign-content">
+                      <div className="wpo-campaign-text-top data-theem">
+                        <h3>
+                          <Link
+                            onClick={ClickHandler}
+                            href={`/services/${campaign.slug}`}
+                          >
+                            {campaign.sTitle}
+                          </Link>
+                        </h3>
+
+                        <p>{campaign.description}</p>
+
+                        <div className="services-btn">
+                          <Link
+                            onClick={ClickHandler}
+                            href={`/services/${campaign.slug}`}
+                            className="theme-btn full-width-btn"
+                          >
+                            {t("page.viewButton")}
+                          </Link>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
                 </div>
-            </div>
+              </div>
+            ))}
+          </div>
         </div>
-    );
-}
+      </div>
+    </div>
+  );
+};
 
 export default ServicesSection;
diff --git a/next-i18next.config.js b/next-i18next.config.js
index 6cebf12..3d90dba 100644
--- a/next-i18next.config.js
+++ b/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: {
@@ -11,14 +11,14 @@ module.exports = {
     //   localePath: './public/locales',
 };
 
-// aakash -  ourMission, racialJustice
+// aakash -  'ourMission', 'racialJustice', 'services'
 
 
 // Selvi
 
 
 // Vidhya
-OurApproach
+// OurApproach
 
 // Alagu Raj  - 'common', 'menu', 'home4card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'
 
diff --git a/pages/services/[slug].js b/pages/services/[slug].js
index 8554e24..5b78cd4 100644
--- a/pages/services/[slug].js
+++ b/pages/services/[slug].js
@@ -1,101 +1,126 @@
-import React, { Fragment } from 'react';
-import Navbar2 from '../../components/Navbar2/Navbar2';
-import PageTitle from '../../components/pagetitle/PageTitle';
-import Scrollbar from '../../components/scrollbar/scrollbar';
-import { useRouter } from 'next/router';
-import Campaign from '../../api/campaign';
-import Footer from '../../components/footer/Footer';
-import Image from 'next/image';
-import Link from 'next/link';
-import services from '/public/images/service/service-details-banner.webp';
+import React, { Fragment } from "react";
+import Navbar2 from "../../components/Navbar2/Navbar2";
+import PageTitle from "../../components/pagetitle/PageTitle";
+import Scrollbar from "../../components/scrollbar/scrollbar";
+import Footer from "../../components/footer/Footer";
+import Image from "next/image";
+import Link from "next/link";
+import servicesBanner from "/public/images/service/service-details-banner.webp";
+import { useTranslation } from "next-i18next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 
-const ServiceDetailsPage = () => {
-    const router = useRouter();
-    const { slug } = router.query;
-
-    const service = Campaign.find(item => item.slug === slug);
-
-    if (!service) {
-        return (
-            <Fragment>
-                <Navbar2 />
-                <div className="container text-center py-5">
-                    <h2>Service not found!</h2>
-                    <Link href="/">Back to Home</Link>
-                </div>
-                <Footer />
-                <Scrollbar />
-            </Fragment>
-        );
-    }
+const ServiceDetailsPage = ({ service }) => {
+  const { t } = useTranslation("services");
 
+  if (!service) {
     return (
-        <Fragment>
-            <Navbar2 />
-            <PageTitle pageTitle={service.sTitle} backgroundImage={services} pagesub={'Services Details'} />
-
-            <section className="wpo-blog-single-section section-padding">
-                <div className="container">
-                    <div className="row">
-                        <div className="col-12">
-                            <div className="wpo-blog-content">
-                                <div className="post format-standard-image">
-
-                                    <div className="entry-media">
-                                        <div style={{ width: "100%", height: "650px", position: "relative" }}>
-                                            <Image
-                                                src={service.sImgS}
-                                                alt={service.sTitle}
-                                                fill
-                                                style={{ objectFit: "cover" }}
-                                            />
-                                        </div>
-                                    </div>
-
-
-                                    <div className="entry-meta">
-                                        <ul>
-                                            <li>
-                                                {/* <i className="fi flaticon-user"></i>{' '}
-                                                <span>{service.author || 'Admin'}</span> */}
-                                            </li>
-                                            {/* <li>
-                                                <i className="fi flaticon-calendar"></i> {service.date}
-                                            </li> */}
-                                        </ul>
-                                    </div>
-
-                                    <h2>{service.sTitle}</h2>
-
-                                    <div dangerouslySetInnerHTML={{ __html: service.descriptiondetail }} />
-
-                                    {service.blockquotes && service.blockquotes.map((quote, idx) => (
-                                        <blockquote key={idx}>{quote}</blockquote>
-                                    ))}
-
-                                    {service.gallery && (
-                                        <div className="gallery">
-                                            {service.gallery.map((img, i) => (
-                                                <div key={i}>
-                                                    <Image src={img} alt={`Gallery ${i}`} width={400} height={300} />
-                                                </div>
-                                            ))}
-                                        </div>
-                                    )}
-
-                                    {/* {service.extraText && <p className="mt-4">{service.extraText}</p>} */}
-
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <Footer />
-            <Scrollbar />
-        </Fragment>
+      <Fragment>
+        <Navbar2 />
+        <div className="container text-center py-5">
+          <h2>{t("page.serviceNotFound", "Service not found!")}</h2>
+          <Link href="/">{t("page.backHome", "Back to Home")}</Link>
+        </div>
+        <Footer />
+        <Scrollbar />
+      </Fragment>
     );
+  }
+
+  return (
+    <Fragment>
+      <Navbar2 />
+      <PageTitle
+        pageTitle={service.sTitle}
+        backgroundImage={servicesBanner}
+        pagesub={t("page.subtitle")}
+      />
+
+      <section className="wpo-blog-single-section section-padding">
+        <div className="container">
+          <div className="row">
+            <div className="col-12">
+              <div className="wpo-blog-content">
+                <div className="post format-standard-image">
+                  {/* Banner Image */}
+                  <div className="entry-media">
+                    <div style={{ width: "100%", height: "650px", position: "relative" }}>
+                      <Image
+                        src={service.sImgS}
+                        alt={service.sTitle}
+                        fill
+                        style={{ objectFit: "cover" }}
+                        unoptimized
+                      />
+                    </div>
+                  </div>
+
+                  <h2>{service.sTitle}</h2>
+
+                  <div
+                    dangerouslySetInnerHTML={{ __html: service.descriptiondetail }}
+                  />
+
+                  {service.blockquotes &&
+                    service.blockquotes.map((quote, idx) => (
+                      <blockquote key={idx}>{quote}</blockquote>
+                    ))}
+
+                  {service.gallery && (
+                    <div className="gallery">
+                      {service.gallery.map((img, i) => (
+                        <div key={i}>
+                          <Image
+                            src={img}
+                            alt={`Gallery ${i}`}
+                            width={400}
+                            height={300}
+                            unoptimized
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <Footer />
+      <Scrollbar />
+    </Fragment>
+  );
 };
 
 export default ServiceDetailsPage;
+
+export async function getStaticPaths({ locales }) {
+  const services = (await import("../../public/locales/en/services.json")).campaigns;
+
+  const paths = services.flatMap((service) =>
+    locales.map((locale) => ({
+      params: { slug: service.slug },
+      locale,
+    }))
+  );
+
+  return {
+    paths,
+    fallback: false,
+  };
+}
+
+export async function getStaticProps({ params, locale }) {
+  const services = (await import(`../../public/locales/${locale}/services.json`))
+    .campaigns;
+
+  const service = services.find((item) => item.slug === params.slug) || null;
+
+  return {
+    props: {
+      service,
+      ...(await serverSideTranslations(locale, ["common", "menu", "services"])),
+    },
+  };
+}
diff --git a/pages/services/index.js b/pages/services/index.js
index 0f9a82e..3ba22a3 100644
--- a/pages/services/index.js
+++ b/pages/services/index.js
@@ -1,24 +1,37 @@
-import React, { Fragment } from 'react';
-import Navbar2 from '../../components/Navbar2/Navbar2';
-import PageTitle from '../../components/pagetitle/PageTitle'
-import Scrollbar from '../../components/scrollbar/scrollbar'
-import Donors from '../../components/Donors/Donors';
-import PartnerSection from '../../components/PartnerSection/PartnerSection';
-import Footer from '../../components/footer/Footer';
-import ServicesSection from '../../components/services/ServicesSection';
-import services from '/public/images/service/service-banner.webp';
+import React, { Fragment } from "react";
+import Navbar2 from "../../components/Navbar2/Navbar2";
+import PageTitle from "../../components/pagetitle/PageTitle";
+import Scrollbar from "../../components/scrollbar/scrollbar";
+import Footer from "../../components/footer/Footer";
+import ServicesSection from "../../components/services/ServicesSection";
+import services from "/public/images/service/service-banner.webp";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from "next-i18next";
 
 const Services = () => {
+    const { t } = useTranslation("services");
+
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'Services'} backgroundImage={services} pagesub={'Services'} />
-            <ServicesSection cmClass={'wpo-campaign-area-s5'}/>
-            {/* <Donors /> */}
-            {/* <PartnerSection/> */}
+            <PageTitle
+                pageTitle={t("page.title")}
+                backgroundImage={services}
+                pagesub={t("page.subtitle")}
+            />
+            <ServicesSection cmClass={"wpo-campaign-area-s5"} />
             <Footer />
             <Scrollbar />
         </Fragment>
-    )
+    );
 };
+
 export default Services;
+
+export async function getStaticProps({ locale }) {
+    return {
+        props: {
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'services'])), // Add 'home', 'footer', etc.
+        },
+    };
+}
diff --git a/public/locales/en/services.json b/public/locales/en/services.json
new file mode 100644
index 0000000..14449ee
--- /dev/null
+++ b/public/locales/en/services.json
@@ -0,0 +1,21 @@
+{
+  "page": {
+    "subtitle": "Our Services",
+    "title": "Explore Immigration Services",
+    "viewButton": "View Details",
+    "serviceNotFound": "Service not found!",
+    "backHome": "Back to Home"
+  },
+  "campaigns": [
+    {
+      "id": "1",
+      "sTitle": "Family Immigration Assistance",
+      "slug": "family-immigration-assistance",
+      "description": "We offer expert guidance on family-based US immigration, from petition filing to visa approval",
+      "sImgS": "/public/images/service/category/business/family/family-1.webp",
+      "cSimg": "/public/images/service/category/business/family/family-1.webp",
+      "category": "Family",
+      "descriptiondetail": "<p>Family immigration is one of the most personal and critical areas of US immigration law, touching the lives of millions of individuals who seek to reunite with their loved ones. At Janahan Law, we specialize in assisting US citizens and lawful permanent residents in petitioning for their spouses, children, parents, and siblings. Navigating the immigration system can be complex, but our dedicated team guides clients through each stage with precision and care. From preparing and submitting Form I-130 petitions to managing consular processing, adjustment of status applications, and waivers for inadmissibility, we ensure all documentation is meticulously prepared to prevent delays or denials. Our expertise extends beyond paperwork; we provide strategic advice for interviews, appeals, and other critical steps to maximize approval rates and reduce the emotional stress families may face during the process. By staying up-to-date with USCIS policies, travel restrictions, and legal reforms, we offer our clients reliable guidance every step of the way. </p><blockquote>“Reuniting families is not just our job; it’s our mission. Every petition we handle is a step towards bringing loved ones together.”</blockquote><p>Family immigration cases often involve sensitive and emotional circumstances. We understand the challenges of separating families, especially when it involves minor children, aging parents, or spouses living abroad. Our compassionate approach ensures that each client receives personalized solutions tailored to their unique circumstances. Whether it’s assisting a spouse in joining their partner in the United States, helping minor children immigrate to be with their parents, or supporting parents in obtaining lawful permanent residence, we are committed to making the process as smooth and stress-free as possible. </p><div class='gallery'><div><img src='/images/services/gallery1.jpg' alt='Gallery 1'/></div><div><img src='/images/services/gallery2.jpg' alt='Gallery 2'/></div></div><p>Our services encompass a full spectrum of family immigration support. This includes evaluating eligibility, compiling required documents, filing petitions, liaising with government agencies, preparing clients for interviews, and providing guidance during appeals or requests for reconsideration. We also address complex situations, such as inadmissibility issues, waivers, and special humanitarian cases, ensuring that every possible avenue is explored for a positive outcome. With Janahan Law, clients receive not just legal representation, but a partner who truly understands the human side of immigration. </p><blockquote>\"At the heart of every case we take lies a promise—to help families reconnect, to turn hope into reality, and to make distance disappear one step at a time.\"</blockquote><p>Family immigration is more than legal paperwork—it’s about building futures together. Our goal is to provide comprehensive, empathetic, and effective legal support to help families overcome the bureaucratic hurdles of US immigration. By combining deep legal knowledge with personalized attention, we empower families to reunite and thrive in the United States. </p>"
+    }
+  ]
+}
diff --git a/public/locales/es/services.json b/public/locales/es/services.json
new file mode 100644
index 0000000..85d9b47
--- /dev/null
+++ b/public/locales/es/services.json
@@ -0,0 +1,21 @@
+{
+  "page": {
+    "subtitle": "Nuestros Servicios",
+    "title": "Explorar Servicios de Inmigración",
+    "viewButton": "Ver Detalles",
+    "serviceNotFound": "¡Servicio no encontrado!",
+    "backHome": "Volver al Inicio"
+  },
+  "campaigns": [
+    {
+      "id": "1",
+      "sTitle": "Asistencia en Inmigración Familiar",
+      "slug": "family-immigration-assistance",
+      "description": "Ofrecemos orientación experta en inmigración familiar a EE.UU., desde la presentación de la petición hasta la aprobación de la visa",
+      "sImgS": "/public/images/service/category/business/family/family-1.webp",
+      "cSimg": "/public/images/service/category/business/family/family-1.webp",
+      "category": "Familia",
+      "descriptiondetail": "<p>La inmigración familiar es una de las áreas más personales y críticas de la ley de inmigración de EE.UU., que afecta la vida de millones de personas que buscan reunirse con sus seres queridos. En Janahan Law, nos especializamos en ayudar a ciudadanos estadounidenses y residentes permanentes legales a presentar peticiones para sus cónyuges, hijos, padres y hermanos. Navegar por el sistema de inmigración puede ser complejo, pero nuestro equipo dedicado guía a los clientes en cada etapa con precisión y cuidado. Desde la preparación y presentación de las peticiones I-130 hasta la gestión del procesamiento consular, solicitudes de ajuste de estatus y exenciones por inadmisibilidad, aseguramos que toda la documentación esté meticulosamente preparada para evitar retrasos o negaciones. Nuestra experiencia va más allá del papeleo; brindamos asesoramiento estratégico para entrevistas, apelaciones y otros pasos críticos para maximizar las tasas de aprobación y reducir el estrés emocional que las familias pueden enfrentar durante el proceso. Al mantenernos actualizados con las políticas de USCIS, restricciones de viaje y reformas legales, ofrecemos a nuestros clientes orientación confiable en cada paso del camino. </p><blockquote>“Reunir familias no es solo nuestro trabajo; es nuestra misión. Cada petición que manejamos es un paso hacia acercar a los seres queridos.”</blockquote><p>Los casos de inmigración familiar a menudo implican circunstancias delicadas y emocionales. Entendemos los desafíos de separar familias, especialmente cuando involucra a niños pequeños, padres mayores o cónyuges que viven en el extranjero. Nuestro enfoque compasivo garantiza que cada cliente reciba soluciones personalizadas adaptadas a sus circunstancias únicas. Ya sea ayudar a un cónyuge a reunirse con su pareja en Estados Unidos, ayudar a los hijos menores a inmigrar para estar con sus padres o apoyar a los padres en la obtención de la residencia permanente legal, estamos comprometidos a hacer que el proceso sea lo más fluido y libre de estrés posible. </p><div class='gallery'><div><img src='/images/services/gallery1.jpg' alt='Galería 1'/></div><div><img src='/images/services/gallery2.jpg' alt='Galería 2'/></div></div><p>Nuestros servicios abarcan un espectro completo de apoyo en inmigración familiar. Esto incluye evaluar la elegibilidad, compilar los documentos requeridos, presentar peticiones, interactuar con agencias gubernamentales, preparar a los clientes para entrevistas y brindar orientación durante apelaciones o solicitudes de reconsideración. También abordamos situaciones complejas, como problemas de inadmisibilidad, exenciones y casos humanitarios especiales, asegurando que se explore cada posible vía para un resultado positivo. Con Janahan Law, los clientes reciben no solo representación legal, sino un socio que realmente comprende el lado humano de la inmigración. </p><blockquote>\"En el corazón de cada caso que tomamos hay una promesa: ayudar a las familias a reconectarse, convertir la esperanza en realidad y hacer que la distancia desaparezca paso a paso.\"</blockquote><p>La inmigración familiar es más que papeleo legal: se trata de construir futuros juntos. Nuestro objetivo es proporcionar un apoyo legal integral, empático y efectivo para ayudar a las familias a superar los obstáculos burocráticos de la inmigración en EE.UU. Al combinar un profundo conocimiento legal con atención personalizada, empoderamos a las familias para reunirse y prosperar en Estados Unidos. </p>"
+    }
+  ]
+}
\ No newline at end of file