diff --git a/components/hero/hero.js b/components/hero/hero.js
index 0a7d45e..144fcbe 100644
--- a/components/hero/hero.js
+++ b/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;
\ No newline at end of file
+export default Hero;
diff --git a/next-i18next.config.js b/next-i18next.config.js
index 15ce4af..34240d4 100644
--- a/next-i18next.config.js
+++ b/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
+
diff --git a/pages/about/index.js b/pages/about/index.js
index 7c9d004..50c3782 100644
--- a/pages/about/index.js
+++ b/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
+        },
+    };
+}
+
diff --git a/pages/contact/index.js b/pages/contact/index.js
index a89c45e..c0e970d 100644
--- a/pages/contact/index.js
+++ b/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
+        },
+    };
+}
+
diff --git a/pages/index.js b/pages/index.js
index a53d047..2820601 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -16,31 +16,31 @@ import introImg from '/public/images/home/expert-immigration-guidance.webp';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const HomePage = () => {
-  return (
-    <Fragment>
-      <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
-      <Hero />
-      <Features sClass={'wpo-service-section-s2'} />
-      <About introImg={introImg} abClass={'wpo-about-section-s2'} />
-      <ServiceSection />
-      <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
-      <ServiceSectionS2 />
-      <Testimonial />
-      <Donors />
-      <BlogSection />
-      <Footer />
-      <Scrollbar />
-    </Fragment>
-  );
+    return (
+        <Fragment>
+            <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
+            <Hero />
+            <Features sClass={'wpo-service-section-s2'} />
+            <About introImg={introImg} abClass={'wpo-about-section-s2'} />
+            <ServiceSection />
+            <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
+            <ServiceSectionS2 />
+            <Testimonial />
+            <Donors />
+            <BlogSection />
+            <Footer />
+            <Scrollbar />
+        </Fragment>
+    );
 };
 
 export default HomePage;
 
 // ✅ 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
-    },
-  };
+    return {
+        props: {
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero'])), // Add 'home', 'footer', etc. if needed
+        },
+    };
 }
diff --git a/public/locales/en/homeHero.json b/public/locales/en/homeHero.json
new file mode 100644
index 0000000..6eba476
--- /dev/null
+++ b/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"
+        }
+    }
+}
\ No newline at end of file
diff --git a/public/locales/es/homeHero.json b/public/locales/es/homeHero.json
new file mode 100644
index 0000000..226150b
--- /dev/null
+++ b/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"
+        }
+    }
+}
\ No newline at end of file