home page feature, testimonial and call to action section language updated

components/Donors/Donors.js

@@ -1,11 +1,13 @@
 import React from 'react';
-import Link from 'next/link'
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
 
 const ClickHandler = () => {
     window.scrollTo(10, 0);
 }
 
 const Donors = () => {
+    const { t } = useTranslation('(home)/homeCalltoAction');
 
     return (
         <section className="wpo-donors-section no-padding">
@@ -13,12 +15,12 @@ const Donors = () => {
                 <div className="wpo-donors-wrap">
                     <div className="row align-items-center">
                         <div className="col-lg-6">
-                            <h2>Ready to take the first step toward your American future?</h2>
+                            <h2>{t('donorsTitle')}</h2>
                         </div>
                         <div className="col-lg-6">
                             <div className="donors-btn">
                                 {/* <Link onClick={ClickHandler} href="/donate">$10 Donation</Link> */}
-                                <Link  href="/contact">Call us Today</Link>
+                                <Link href="/contact">{t('donorsButton')}</Link>
                             </div>
                         </div>
                     </div>
@@ -28,4 +30,4 @@ const Donors = () => {
     );
 }
 
-export default Donors;
+export default Donors;

components/ServiceSection/ServiceSection.js

@@ -6,6 +6,12 @@ import Link from 'next/link'
 import SectionTitle from "../SectionTitle/SectionTitle";
 import Services from '../../api/service'
 import { featuresData, homeFeature } from "../../utils/constant.utils";
+import { useTranslation } from "next-i18next";
+import iconImg1 from '/public/images/home/icons/strategic-planning.webp'
+import iconImg2 from '/public/images/home/icons/expert-preparation.webp'
+import iconImg3 from '/public/images/home/icons/ongoing-support.webp'
+
+const iconMap = [iconImg1, iconImg2, iconImg3];
 
 
 const settings = {
@@ -65,13 +71,19 @@ const ClickHandler = () => {
 }
 
 const ServiceSection = (props) => {
+    const { t } = useTranslation("(home)/homeFeature");
+    const features = t("features", { returnObjects: true });
+
     return (
         <section className={`wpo-features-s2 section-padding ${props.sClass}`}>
             <div className="container">
-                <SectionTitle subTitle={`STRENGTHENING AMERICA'S FUTURE`} Title={'How We Build Better Futures Together'} />
+                <SectionTitle
+                    subTitle={t("sectionSubTitle")}
+                    Title={t("sectionTitle")}
+                />
                 <div className="features-wrap">
                     <div className="row">
-                        {featuresData.map((feature, index) => (
+                        {features.map((feature, index) => (
                             <div className="col-lg-4 col-md-6 col-12" key={index}>
                                 <div className="feature-item">
                                     <div className="features-wrapper">
@@ -80,21 +92,18 @@ const ServiceSection = (props) => {
                                                 <div className="dots"></div>
                                             </div>
                                             <img
-                                            src={feature.img.src}
+                                                src={iconMap[index].src}
-                                            alt={`${feature.title} icon`}
+                                                alt={`${feature.title} icon`}
-                                            className="feature-img"
+                                                className="feature-img"
-                                        />
+                                            />
                                         </div>
                                         <div className="feature-text">
-                                            {/* <h2>
+                                            <h2>{feature.title}</h2>
-                                                <Link onClick={ClickHandler} href={feature.link}>
+                                            <p>
-                                                    {feature.title}
+                                                {feature.description.length > 100
-                                                </Link>
+                                                    ? feature.description.slice(0, 100) + "..."
-                                            </h2> */}
+                                                    : feature.description}
-                                            <h2> {feature.title}</h2>
+                                            </p>
-                                            {feature.description.length > 100
-                                                ? feature.description.slice(0, 100) + "..."
-                                                : feature.description}
                                         </div>
                                     </div>
                                 </div>
@@ -102,10 +111,9 @@ const ServiceSection = (props) => {
                         ))}
                     </div>
                 </div>
-
             </div>
         </section>
     );
-}
+};
 
 export default ServiceSection;

components/Testimonial/Testimonial.js

@@ -2,106 +2,69 @@ import React, { useState } from 'react';
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
-import ts1 from '/public/images/testimonial/1.png'
-import ts2 from '/public/images/testimonial/2.png'
-import ts3 from '/public/images/testimonial/3.png'
-
-import thumb1 from '/public/images/testimonial/thumb1.png'
-import thumb2 from '/public/images/testimonial/thumb2.png'
-import thumb3 from '/public/images/testimonial/thumb3.png'
 import Image from 'next/image';
-import testiImage from '/public/images/home/quotes.webp'
+import { useTranslation } from 'next-i18next';
 
+import ts1 from '/public/images/testimonial/1.png';
+import ts2 from '/public/images/testimonial/2.png';
+import ts3 from '/public/images/testimonial/3.png';
+import testiImage from '/public/images/home/quotes.webp';
 
-
+const images = [ts1, ts2, ts3];
-const testimonial = [
-    {
-        id: '01',
-        tImg: ts1,
-        thumbImg: thumb1,
-        Des: "Janahan Law turned my dream of living in the United States into reality. They handled every step of my green card process with precision and care, making a complex journey feel simple and stress-free. Today, my family and I are proud to call America our home.",
-        Title: 'Robert Willum',
-        Sub: "President of BPT",
-    },
-    {
-        id: '01',
-        tImg: ts2,
-        thumbImg: thumb2,
-        Des: "I had almost lost hope of bringing my spouse to the United States. Janahan Law not only explained every option clearly but also worked tirelessly to reunite us. Their dedication and expertise made the impossible possible, and now we’re building our life together in America.",
-        Title: 'Leslie Alexander',
-        Sub: "President of TBP",
-    },
-    {
-        id: '01',
-        tImg: ts3,
-        thumbImg: thumb3,
-        Des: "When I was facing the risk of deportation, I felt my whole world collapsing. Janahan Law stood by me like a lifeline — fighting for my case with unmatched dedication and compassion. Thanks to their expertise, I now have the security to build a future in the U.S. without fear.",
-        Title: 'David Joy',
-        Sub: "President of AML",
-    }
-]
 
 const Testimonial = (props) => {
+  const { t } = useTranslation('(home)/testimonial');
+  const [nav1, setNav1] = useState();
+  const [nav2, setNav2] = useState();
 
-    const [nav1, setNav1] = useState();
+  const testimonials = t('testimonials', { returnObjects: true });
-    const [nav2, setNav2] = useState();
 
-
+  return (
-    return (
+    <section className={`wpo-testimonial-section section-padding ${props.tmClass}`}>
-        <section className={`wpo-testimonial-section section-padding  ${props.tmClass}`}>
+      <div className="container">
-            <div className="container">
+        <div className="wpo-testimonial-wrap">
-                <div className="wpo-testimonial-wrap">
+          <div className="row align-items-center">
-                    <div className="row align-items-center">
+            <div className="col-lg-6 col-12 order-lg-1 order-2">
-                        <div className="col-lg-6 col-12 order-lg-1 order-2">
+              <div className="testimonial-left">
-                            <div className="testimonial-left">
+                <div className="testimonial-left-inner">
-                                <div className="testimonial-left-inner">
+                  <div className="left-slide">
-                                    <div className="left-slide">
+                    <div className="testimonial-img">
-
+                      <Image src={testiImage} alt="testimonial quote image" />
-                                        <div className="testimonial-img">
-                                            <Image src={testiImage} alt="" />
-                                        </div>
-
-                                    </div>
-                                    {/* <div className="shape-1"></div>
-                                    <div className="border-s1"></div>
-                                    <div className="border-s2"></div>
-                                    <div className="border-s3"></div> */}
-                                </div>
-                            </div>
-                        </div>
-                        <div className="col-lg-6 col-12 order-lg-1 order-1">
-                            <div className="wpo-testimonial-items">
-                                <div className="right-slide">
-                                    <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
-                                        {
-                                            testimonial.map((tesmnl, tsm) => (
-                                                <div className="wpo-testimonial-item" key={tsm}>
-                                                    <div className="wpo-testimonial-text">
-                                                        <i className="fi flaticon-right-quote-sign"></i>
-                                                        <p>“{tesmnl.Des}”</p>
-                                                        {/* <div className="wpo-testimonial-text-btm">
-                                                            <div className="wpo-testimonial-text-btm-img">
-                                                                <Image src={tesmnl.thumbImg} alt="" />
-                                                            </div>
-                                                            <div className="wpo-testimonial-text-btm-info">
-                                                                <h3>{tesmnl.Title}</h3>
-                                                                <span>{tesmnl.Sub}</span>
-                                                            </div>
-                                                        </div> */}
-                                                    </div>
-                                                </div>
-                                            ))
-                                        }
-                                    </Slider>
-
-                                </div>
-                            </div>
-                        </div>
                     </div>
+                  </div>
                 </div>
+              </div>
             </div>
-        </section>
+            <div className="col-lg-6 col-12 order-lg-1 order-1">
-    );
+              <div className="wpo-testimonial-items">
-}
+                <div className="right-slide">
+                  <Slider asNavFor={nav2} ref={(slider1) => setNav1(slider1)} dots={true} arrows={false}>
+                    {testimonials.map((item, index) => (
+                      <div className="wpo-testimonial-item" key={index}>
+                        <div className="wpo-testimonial-text">
+                          <i className="fi flaticon-right-quote-sign"></i>
+                          <p>“{item.description}”</p>
+                          {/* <div className="wpo-testimonial-text-btm">
+                            <div className="wpo-testimonial-text-btm-img">
+                              <Image src={images[index]} alt={item.name} />
+                            </div>
+                            <div className="wpo-testimonial-text-btm-info">
+                              <h3>{item.name}</h3>
+                              <span>{item.position}</span>
+                            </div>
+                          </div> */}
+                        </div>
+                      </div>
+                    ))}
+                  </Slider>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
 
-export default Testimonial;
+export default Testimonial;

next-i18next.config.js

@@ -18,5 +18,5 @@ module.exports = {
 // Vidhya
 
 
-// Alagu Raj  - 'home4card', '(home)/homeAbout'
+// Alagu Raj  - 'common', 'menu', 'home4card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'
 

pages/index.js

@@ -23,7 +23,7 @@ const HomePage = () => {
             <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'} />
+            {/* <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} /> */}
             <ServiceSectionS2 />
             <Testimonial />
             <Donors />
@@ -40,7 +40,7 @@ export default HomePage;
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout'])), // Add 'home', 'footer', etc. if needed
+            ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'])), // Add 'home', 'footer', etc. if needed
         },
     };
 }

public/locales/en/(home)/homeCalltoAction.json

@@ -0,0 +1,4 @@
+{
+  "donorsTitle": "Ready to take the first step toward your American future?",
+  "donorsButton": "Call us Today"
+}

public/locales/en/(home)/homeFeature.json

@@ -0,0 +1,18 @@
+{
+  "sectionSubTitle": "STRENGTHENING AMERICA'S FUTURE",
+  "sectionTitle": "How We Build Better Futures Together",
+  "features": [
+    {
+      "title": "Strategic Planning",
+      "description": "We create custom legal strategies based on immigration law, policy changes, and your needs."
+    },
+    {
+      "title": "Expert Preparation",
+      "description": "Careful document preparation, evidence gathering, and filing to boost your application success."
+    },
+    {
+      "title": "Ongoing Support",
+      "description": "We monitor your case, provide updates, and represent you through your full immigration process."
+    }
+  ]
+}

public/locales/en/(home)/testimonial.json

@@ -0,0 +1,19 @@
+{
+  "testimonials": [
+    {
+      "description": "Janahan Law turned my dream of living in the United States into reality. They handled every step of my green card process with precision and care, making a complex journey feel simple and stress-free. Today, my family and I are proud to call America our home.",
+      "name": "Robert Willum",
+      "position": "President of BPT"
+    },
+    {
+      "description": "I had almost lost hope of bringing my spouse to the United States. Janahan Law not only explained every option clearly but also worked tirelessly to reunite us. Their dedication and expertise made the impossible possible, and now we’re building our life together in America.",
+      "name": "Leslie Alexander",
+      "position": "President of TBP"
+    },
+    {
+      "description": "When I was facing the risk of deportation, I felt my whole world collapsing. Janahan Law stood by me like a lifeline — fighting for my case with unmatched dedication and compassion. Thanks to their expertise, I now have the security to build a future in the U.S. without fear.",
+      "name": "David Joy",
+      "position": "President of AML"
+    }
+  ]
+}

public/locales/es/(home)/homeCalltoAction.json

@@ -0,0 +1,4 @@
+{
+    "donorsTitle": "¿Listo para dar el primer paso hacia tu futuro en Estados Unidos?",
+    "donorsButton": "Llámanos hoy"
+}

public/locales/es/(home)/homeFeature.json

@@ -0,0 +1,18 @@
+{
+  "sectionSubTitle": "FORTALECIENDO EL FUTURO DE ESTADOS UNIDOS",
+  "sectionTitle": "Cómo construimos mejores futuros juntos",
+  "features": [
+    {
+      "title": "Planificación Estratégica",
+      "description": "Creamos estrategias legales personalizadas basadas en la ley de inmigración, los cambios en las políticas y tus necesidades."
+    },
+    {
+      "title": "Preparación Experta",
+      "description": "Preparación cuidadosa de documentos, recopilación de pruebas y presentación para aumentar el éxito de tu solicitud."
+    },
+    {
+      "title": "Apoyo Continuo",
+      "description": "Monitoreamos tu caso, proporcionamos actualizaciones y te representamos durante todo tu proceso de inmigración."
+    }
+  ]
+}

public/locales/es/(home)/testimonial.json

@@ -0,0 +1,19 @@
+{
+    "testimonials": [
+        {
+            "description": "Janahan Law convirtió mi sueño de vivir en Estados Unidos en realidad. Manejaron cada paso de mi proceso de tarjeta verde con precisión y cuidado, haciendo que un camino complejo pareciera simple y sin estrés. Hoy, mi familia y yo estamos orgullosos de llamar hogar a América.",
+            "name": "Robert Willum",
+            "position": "Presidente de BPT"
+        },
+        {
+            "description": "Casi había perdido la esperanza de traer a mi cónyuge a los Estados Unidos. Janahan Law no solo explicó cada opción con claridad, sino que también trabajó incansablemente para reunirnos. Su dedicación y experiencia hicieron posible lo imposible, y ahora estamos construyendo nuestra vida juntos en América.",
+            "name": "Leslie Alexander",
+            "position": "Presidente de TBP"
+        },
+        {
+            "description": "Cuando enfrentaba el riesgo de deportación, sentí que mi mundo se derrumbaba. Janahan Law estuvo a mi lado como un salvavidas, luchando por mi caso con una dedicación y compasión inigualables. Gracias a su experiencia, ahora tengo la seguridad para construir un futuro en EE.UU. sin miedo.",
+            "name": "David Joy",
+            "position": "Presidente de AML"
+        }
+    ]
+}

styles/sass/components/_section-title.scss

@@ -98,4 +98,8 @@
 		font-size: 18px;
 	}
 
+}
+
+.wpo-features-s2{
+	padding: 0;
 }

styles/sass/page/_home-default.scss

@@ -2113,4 +2113,71 @@
     .no-padding {
         padding: 0 !important;
     }
+}
+
+.home-call-to-action h3 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 46px;
+    line-height: 58px;
+    color: $white;
+    margin: 0 0 0.2em;
+    font-family: $heading-font;
+    display: flex;
+    align-items: center;
+    justify-content: start;
+    text-align: start;
+
+    @include media-query(1200px) {
+        font-size: 50px;
+        ont-size: calc-rem-value(50);
+    }
+
+    @include media-query(991px) {
+        font-size: 40px;
+        font-size: calc-rem-value(40);
+    }
+
+    @include media-query(767px) {
+        font-size: 35px;
+        font-size: calc-rem-value(35);
+    }
+
+    span {
+        font-family: $heading-font;
+    }
+}
+
+.donors-btn {
+    text-align: right;
+
+    @media(max-width:991px) {
+        text-align: center;
+        margin-top: 40px;
+    }
+
+    @media(max-width:575px) {
+        margin-top: 30px;
+    }
+
+    a {
+        padding: 15px 20px;
+        background: $dark-gray;
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 27px;
+        text-align: center;
+        color: $white;
+        border-radius: 10px;
+
+        @media(max-width:575px) {
+            font-size: 15px;
+        }
+
+        &+a {
+            margin-left: 10px;
+            background: $white;
+            color: $theme-primary-color;
+        }
+    }
 }