home page about section updated

components/ServiceSectionS2/ServiceSectionS2.js

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from "reactstrap";
 import classnames from "classnames";
 import Link from "next/link";
@@ -10,7 +10,7 @@ const ClickHandler = () => {
 };
 
 const ServiceSectionS2 = () => {
-  const { t } = useTranslation("services");  // Assuming your translations are in services.json
+  const { t, i18n } = useTranslation("services");
 
   // Get campaigns array from the translation JSON
   const campaigns = t("campaigns", { returnObjects: true });
@@ -18,9 +18,21 @@ const ServiceSectionS2 = () => {
   // Extract unique categories from the campaigns dynamically
   const categories = [...new Set(campaigns.map((service) => service.category))];
 
-  // Default active tab is the first category
+  // Default active tab is the first category, but we will set it dynamically based on the language
   const [activeTab, setActiveTab] = useState(categories[0]);
 
+  // Function to change the active tab based on the selected language
+  const changeActiveTabOnLanguageChange = () => {
+    // Set the active tab to the first category whenever the language changes
+    setActiveTab(categories[0]);
+  };
+
+  // Track language changes using the `useEffect` hook
+  useEffect(() => {
+    // Whenever the language changes, reset the active tab
+    changeActiveTabOnLanguageChange();
+  }, [i18n.language]); // `i18n.language` triggers the effect when the language changes
+
   const toggle = (tab) => {
     if (activeTab !== tab) setActiveTab(tab);
   };
@@ -31,7 +43,7 @@ const ServiceSectionS2 = () => {
         <div className="wpo-campaign-wrap">
           {/* Tab Navigation */}
           <Nav tabs>
-            {categories.map((cat, idx) => (
+            {categories.slice(0, 5).map((cat, idx) => (
               <NavItem key={idx}>
                 <NavLink
                   className={classnames({ active: activeTab === cat })}
@@ -79,7 +91,7 @@ const ServiceSectionS2 = () => {
                                   dangerouslySetInnerHTML={{
                                     __html:
                                       service.description.length > 100
-                                        ? service.description.substring(0, 100) + '...'
+                                        ? service.description.substring(0, 100) + "..."
                                         : service.description,
                                   }}
                                 ></p>

components/header2/Header2.js

@@ -83,7 +83,7 @@ const Header2 = (props) => {
                                 <div className="header-right d-flex align-items-center justify-content-end">
                                     <div className="language me-4">
                                         <select onChange={handleLanguageChange} value={router.locale}>
-                                            <option value="es">Español</option>
+                                            <option value="es">Spanish</option>
                                             <option value="en">English</option>
                                         </select>
                                     </div>

next-i18next.config.js

@@ -5,7 +5,7 @@ module.exports = {
         locales: ['en', 'es'],
         localeDetection: false,
     },
-    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'ourMission', 'racialJustice', 'services', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'contact'],
+    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'ourMission', 'racialJustice', 'services', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'OurApproach', 'contact'],
     defaultNS: 'common',
     //   localePath: './public/locales',
 };