home page services updated for language

components/ServiceSectionS2/ServiceSectionS2.js

@@ -3,17 +3,22 @@ import { TabContent, TabPane, Nav, NavItem, NavLink, Row } from "reactstrap";
 import classnames from "classnames";
 import Link from "next/link";
 import Image from "next/image";
-import { TabServices } from "../../utils/constant.utils"; // JSON array
+import { useTranslation } from "next-i18next";
-import Campaign from "../../api/campaign";
 
 const ClickHandler = () => {
-  window.scrollTo(10, 0);
+  window.scrollTo(0, 0);
 };
 
-// Extract unique categories from the JSON dynamically
-const categories = [...new Set(Campaign.map((service) => service.category))];
-
 const ServiceSectionS2 = () => {
+  const { t } = useTranslation("services");  // Assuming your translations are in services.json
+
+  // Get campaigns array from the translation JSON
+  const campaigns = t("campaigns", { returnObjects: true });
+
+  // Extract unique categories from the campaigns dynamically
+  const categories = [...new Set(campaigns.map((service) => service.category))];
+
+  // Default active tab is the first category
   const [activeTab, setActiveTab] = useState(categories[0]);
 
   const toggle = (tab) => {
@@ -43,15 +48,18 @@ const ServiceSectionS2 = () => {
             {categories.map((cat, idx) => (
               <TabPane tabId={cat} key={idx}>
                 <Row>
-                  {Campaign.filter((srv) => srv.category === cat).slice(0,3).map(
+                  {/* Filter campaigns based on category */}
-                    (service, srvIdx) => (
+                  {campaigns
+                    .filter((srv) => srv.category === cat)
+                    .slice(0, 3) // Limit to 3 services per category
+                    .map((service, srvIdx) => (
                       <div className="col-lg-4 col-md-6 col-12" key={srvIdx}>
                         <div className="wpo-campaign-single">
                           <div className="wpo-campaign-item">
                             <div className="wpo-campaign-img">
                               <Image
-                                src={service.sImgS}
+                                src={service.sImgS} // Service Image
-                                alt={service.sTitle}
+                                alt={service.sTitle} // Service Title for Alt text
                                 width={400}
                                 height={250}
                               />
@@ -62,19 +70,25 @@ const ServiceSectionS2 = () => {
                                   <Link
                                     onClick={ClickHandler}
                                     href={`/service-single/[slug]`}
-                                    as={`/service-single/${service.slug}`}
+                                    as={`/service-single/${service.slug}`} // Dynamic slug
                                   >
-                                    {service.sTitle}
+                                    {service.sTitle} {/* Service Title */}
                                   </Link>
                                 </h2>
-                                <p>{service.description}</p>
+                                <p
+                                  dangerouslySetInnerHTML={{
+                                    __html:
+                                      service.description.length > 100
+                                        ? service.description.substring(0, 100) + '...'
+                                        : service.description,
+                                  }}
+                                ></p>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
-                    )
+                    ))}
-                  )}
                 </Row>
               </TabPane>
             ))}

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'],
+    ns: ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog', 'footer', 'ourMission', 'racialJustice', 'services', 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'contact'],
     defaultNS: 'common',
     //   localePath: './public/locales',
 };

pages/index.js

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