inner banenr created

components/pagetitle/PageTitle.js

@@ -1,7 +1,9 @@
 import React from 'react'
 import Link from 'next/link'
+import { useTranslation } from 'next-i18next';
 
 const PageTitle = (props) => {
+     const { t } = useTranslation('innerBanner');
     return (
         <section
             className="wpo-page-title"
@@ -15,7 +17,7 @@ const PageTitle = (props) => {
                         <div className="wpo-breadcumb-wrap">
                             <h2>{props.pageTitle}</h2>
                             <ol className="wpo-breadcumb-wrap">
-                                <li><Link href="/">Home</Link></li>
+                                <li><Link href="/">{t('home.pageTitle')}</Link></li>
                                 <li><span>{props.pagesub}</span></li>
                             </ol>
                         </div>

pages/about/index.js

@@ -21,12 +21,14 @@ 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';
+import { useTranslation } from 'next-i18next';
 
 const AboutPage = () => {
+    const { t } = useTranslation('innerBanner');
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'About Us'} backgroundImage={bg} pagesub={'About'} />
+            <PageTitle pageTitle={t('about.pageTitle')}  backgroundImage={bg} pagesub={t('about.pageSub')}  />
             <AboutSection abimg={abimg} abClass={'wpo-about-section-s2'} />
             <ServicesSection />
             {/* <CampaignSection /> */}
@@ -48,7 +50,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'footer', 'innerBanner'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/about/our-mission.js

@@ -5,14 +5,16 @@ import Scrollbar from '../../components/scrollbar/scrollbar'
 import Footer from '../../components/footer/Footer';
 import OurMission from '../../components/our-mission';
 import mission from '/public/images/about/our-mission-banner.png';
+import { useTranslation } from 'next-i18next';
 
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const AboutPage = () => {
+    const { t } = useTranslation('innerBanner');
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'Our Mission'} backgroundImage={mission} pagesub={'Our Mission'} />
+            <PageTitle pageTitle={t('ourMission.pageTitle')} backgroundImage={mission} pagesub={t('ourMission.pageSub')} />
             <OurMission />
             <Footer />
             <Scrollbar />
@@ -24,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'ourMission', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'ourMission', 'footer'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/about/racial-justice.js

@@ -5,14 +5,16 @@ import Scrollbar from '../../components/scrollbar/scrollbar'
 import Footer from '../../components/footer/Footer';
 import RacialJuctice from '../../components/racial-justice';
 import racial from '/public/images/about/racial-justice-banner.png';
+import { useTranslation } from 'next-i18next';
 
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 
 const AboutPage = () => {
+    const { t } = useTranslation('innerBanner');
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'Racial-Justice'} backgroundImage={racial} pagesub={'Racial-Justice'} />
+            <PageTitle pageTitle={t('racialJustice.pageTitle')} backgroundImage={racial} pagesub={t('racialJustice.pageSub')} />
             <RacialJuctice />
             <Footer />
             <Scrollbar />
@@ -24,7 +26,7 @@ export default AboutPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'racialJustice', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'racialJustice', 'footer'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/blog/index.js

@@ -6,12 +6,14 @@ import Footer from '../../components/footer/Footer';
 import Scrollbar from '../../components/scrollbar/scrollbar'
 import bg from '/public/images/blog/blog-banner.webp'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
 
 const BlogPage = () => {
+    const { t } = useTranslation('innerBanner');
     return (
         <Fragment>
             <Navbar2 />
-            <PageTitle pageTitle={'Blog'} backgroundImage={bg} pagesub={'Blog'} />
+            <PageTitle pageTitle={t('blog.pageTitle')} backgroundImage={bg} pagesub={t('blog.pageSub')} />
             <BlogList />
             <Footer />
             <Scrollbar />
@@ -24,7 +26,7 @@ export default BlogPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'blog', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'innerBanner', 'blog', 'footer'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/contact/index.js

@@ -6,12 +6,14 @@ 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';
+import { useTranslation } from 'next-i18next';
 
 const ContactPage =() => {
+        const { t } = useTranslation('innerBanner');
     return(
         <Fragment>
             <Navbar2/>
-            <PageTitle pageTitle={'Contact Us'} backgroundImage={contact} pagesub={'Contact'}/> 
+            <PageTitle pageTitle={t('contact.pageTitle')} backgroundImage={contact} pagesub={t('contact.pageSub')}/> 
             <Contactpage/>
             <Footer/>
             <Scrollbar/>
@@ -24,7 +26,7 @@ export default ContactPage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'contact', 'footer'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu','innerBanner', 'contact', 'footer'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

pages/our-approach/index.js

@@ -6,15 +6,17 @@ import approach from "/public/images/about/our-approach-banner.webp";
 import Footer from "../../components/footer/Footer";
 import OurApproachSection from "../../components/our-approach/OurApproachSection";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useTranslation } from 'next-i18next';
 
 const OurApproach = () => {
+   const { t } = useTranslation('innerBanner');
   return (
     <Fragment>
       <Navbar2 />
       <PageTitle
-        pageTitle={"Our Approach"}
+        pageTitle={t('ourApproach.pageTitle')}
         backgroundImage={approach}
-        pagesub={"Our Approach"}
+        pagesub={t('ourApproach.pageSub')}
       />
       <OurApproachSection />
       <Footer />
@@ -28,7 +30,7 @@ export default OurApproach;
 export async function getStaticProps({ locale }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer"])),
+      ...(await serverSideTranslations(locale, ['menu',"common","ourApproach","footer", 'innerBanner'])),
     },
   };
 }

public/locales/en/innerBanner.json

@@ -0,0 +1,32 @@
+{
+    "home": {
+        "pageTitle": "Home"
+    },
+    "ourApproach": {
+        "pageTitle": "Our Approach",
+        "pageSub": "Our Approach"
+    },
+    "about": {
+        "pageTitle": "About Us",
+        "pageSub": "About"
+    },
+    "racialJustice": {
+        "pageTitle": "Racial-Justice",
+        "pageSub": "Racial-Justice"
+    },
+    "ourMission": {
+        "pageTitle": "Our Mission",
+        "pageSub": "Our Mission"
+    },
+    "services": {
+        "pageSub": "Our Services"
+    },
+    "blog": {
+        "pageTitle": "Blog",
+        "pageSub": "Blog"
+    },
+    "contact": {
+        "pageTitle": "Contact Us",
+        "pageSub": "Contact"
+    }
+}

public/locales/es/innerBanner.json

@@ -0,0 +1,32 @@
+{
+    "home": {
+        "pageTitle": "Inicio"
+    },
+    "ourApproach": {
+        "pageTitle": "Nuestro Enfoque",
+        "pageSub": "Nuestro Enfoque"
+    },
+    "about": {
+        "pageTitle": "Sobre Nosotros",
+        "pageSub": "Acerca de"
+    },
+    "racialJustice": {
+        "pageTitle": "Justicia Racial",
+        "pageSub": "Justicia Racial"
+    },
+    "ourMission": {
+        "pageTitle": "Nuestra Misión",
+        "pageSub": "Nuestra Misión"
+    },
+    "services": {
+        "pageSub": "Nuestros Servicios"
+    },
+    "blog": {
+        "pageTitle": "Blog",
+        "pageSub": "Blog"
+    },
+    "contact": {
+        "pageTitle": "Contáctanos",
+        "pageSub": "Contacto"
+    }
+}