Home page hero banner language updated

components/hero/hero.js

@@ -1,6 +1,9 @@
+'use client'; // If this component is client-side only
+
 import React from "react";
 import Slider from "react-slick";
-import Link from 'next/link'
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 
@@ -16,24 +19,26 @@ const settings = {
 };
 
 const Hero = () => {
+    const { t } = useTranslation('homeHero'); // Use 'home' namespace
+
     return (
         <section className="wpo-hero-slider">
             <div className="hero-container">
                 <div className="hero-wrapper">
                     <Slider {...settings}>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-1.webp'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-1.webp)` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Family Immigration Assistance</h2>
+                                            <h2>{t('hero.slide1.title')}</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>Reuniting loved ones, one case at a time.</p>
+                                            <p>{t('hero.slide1.text')}</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">About</Link>
+                                            <Link href="/about" className="theme-btn">{t('hero.slide1.button')}</Link>
                                         </div>
                                     </div>
                                 </div>
@@ -41,54 +46,56 @@ const Hero = () => {
                         </div>
 
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-2.webp'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-2.webp)` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Employment & Work Visa Solutions</h2>
+                                            <h2>{t('hero.slide2.title')}</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>Your career deserves a global gateway.</p>
+                                            <p>{t('hero.slide2.text')}</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/our-approach" className="theme-btn">Our Approach</Link>
+                                            <Link href="/our-approach" className="theme-btn">{t('hero.slide2.button')}</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-3.webp'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-3.webp)` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Investor & Business Immigration</h2>
+                                            <h2>{t('hero.slide3.title')}</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>Building futures through business opportunities.</p>
+                                            <p>{t('hero.slide3.text')}</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/services" className="theme-btn">Services</Link>
+                                            <Link href="/services" className="theme-btn">{t('hero.slide3.button')}</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-4.webp'})` }}>
+                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-4.webp)` }}>
                                 <div className="container-fluid">
                                     <div className="slide-content">
                                         <div data-swiper-parallax="300" className="slide-title">
-                                            <h2>Deportation Defense & Legal Representation</h2>
+                                            <h2>{t('hero.slide4.title')}</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>Fighting for your right to stay.</p>
+                                            <p>{t('hero.slide4.text')}</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/contact" className="theme-btn">Contact</Link>
+                                            <Link href="/contact" className="theme-btn">{t('hero.slide4.button')}</Link>
                                         </div>
                                     </div>
                                 </div>
@@ -103,7 +110,7 @@ const Hero = () => {
                 </svg>
             </div>
         </section>
-    )
+    );
-}
+};
 
 export default Hero;

next-i18next.config.js

@@ -4,7 +4,19 @@ module.exports = {
         locales: ['en', 'es'],
         localeDetection: false,
     },
-    ns: ['common', 'menu'],
+    ns: ['common', 'menu', 'homeHero'],
     defaultNS: 'common',
     //   localePath: './public/locales',
 };
+
+// aakash
+
+
+// Selvi
+
+
+// Vidhya
+
+
+// Alagu Raj
+

pages/about/index.js

@@ -21,6 +21,7 @@ import TestimonialSection from '../../components/aboutPage/TestimonialSection';
 import TestimonialSection2 from '../../components/aboutPage/TestimonialSection2';
 import bg from '/public/images/about/about-banner.webp'
 
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 const AboutPage = () => {
     return (
         <Fragment>
@@ -42,3 +43,13 @@ const AboutPage = () => {
     )
 };
 export default AboutPage;
+
+// ✅ This enables translations (menu, and more if you add other namespaces)
+export async function getStaticProps({ locale }) {
+    return {
+        props: {
+            ...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
+        },
+    };
+}
+

pages/contact/index.js

@@ -5,6 +5,7 @@ import Contactpage from '../../components/Contactpage/Contactpage'
 import Scrollbar from '../../components/scrollbar/scrollbar'
 import Footer from '../../components/footer/Footer';
 import contact from '/public/images/contact/contact-banner.webp';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const ContactPage =() => {
     return(
@@ -19,3 +20,12 @@ const ContactPage =() => {
 };
 export default ContactPage;
 
+// ✅ This enables translations (menu, and more if you add other namespaces)
+export async function getStaticProps({ locale }) {
+    return {
+        props: {
+            ...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
+        },
+    };
+}
+

pages/index.js

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

public/locales/en/homeHero.json

@@ -0,0 +1,24 @@
+{
+    "hero": {
+        "slide1": {
+            "title": "Family Immigration Assistance",
+            "text": "Reuniting loved ones, one case at a time.",
+            "button": "About"
+        },
+        "slide2": {
+            "title": "Employment & Work Visa Solutions",
+            "text": "Your career deserves a global gateway.",
+            "button": "Our Approach"
+        },
+        "slide3": {
+            "title": "Investor & Business Immigration",
+            "text": "Building futures through business opportunities.",
+            "button": "Services"
+        },
+        "slide4": {
+            "title": "Deportation Defense & Legal Representation",
+            "text": "Fighting for your right to stay.",
+            "button": "Contact"
+        }
+    }
+}

public/locales/es/homeHero.json

@@ -0,0 +1,24 @@
+{
+    "hero": {
+        "slide1": {
+            "title": "Asistencia de Inmigración Familiar",
+            "text": "Reuniendo a seres queridos, un caso a la vez.",
+            "button": "Acerca de"
+        },
+        "slide2": {
+            "title": "Soluciones de Visa de Trabajo y Empleo",
+            "text": "Tu carrera merece una puerta al mundo.",
+            "button": "Nuestro Enfoque"
+        },
+        "slide3": {
+            "title": "Inmigración para Inversores y Negocios",
+            "text": "Construyendo futuros a través de oportunidades empresariales.",
+            "button": "Servicios"
+        },
+        "slide4": {
+            "title": "Defensa Contra Deportación y Representación Legal",
+            "text": "Luchando por tu derecho a permanecer.",
+            "button": "Contacto"
+        }
+    }
+}