service images updated

api/campaign.js

@@ -251,7 +251,6 @@ const Campaign = [
         sImgS: sImgS7,
         description: "We help reunite you with your spouse, children, and parents in the U.S. quickly and safely.",
         category: "Family",
-        sImgS: sImgS2,
         cSimg: cSimg3,
         descriptiondetail: `
             <p>Reuniting with family members in the United States is one of the most meaningful and emotional aspects of immigration law. For many, the ability to bring a spouse, children, parents, or siblings to live together in the US represents not just a legal milestone, but a deeply personal achievement that shapes the future of entire families. Our legal team is dedicated to helping US citizens and lawful permanent residents navigate the complex and often lengthy family immigration process with clarity and confidence. We assist with preparing and filing family-based petitions, such as Form I-130, managing consular processing, and pursuing adjustment of status applications. We also handle challenging cases that involve inadmissibility waivers, prior visa denials, or documentation complications, ensuring that every step of the process is handled with precision and care. Whether it’s bringing a spouse from overseas, reuniting with children, or securing visas for elderly parents, our mission is to bridge distances and make family unity a reality.</p>

api/service.js

@@ -26,6 +26,11 @@ import develop1 from '/public/images/service/develop/img-1.jpg'
 import develop2 from '/public/images/service/develop/img-2.jpg'
 import develop3 from '/public/images/service/develop/img-3.jpg'
 
+import iconImg1 from '/public/images/home/banner/icons/family-immigration.webp'
+import iconImg2 from '/public/images/home/banner/icons/employment-visa.webp'
+import iconImg3 from '/public/images/home/banner/icons/deportation-defense.webp'
+import iconImg4 from '/public/images/home/banner/icons/citizenship-services.webp'
+
 
 
 
@@ -37,7 +42,7 @@ const Services = [
         slug: 'family-immigration',
         description: 'Reunite with loved ones via green cards, fiancé visas, and petitions from filing to processing.',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-credit',
+        iconImg: iconImg1,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -49,7 +54,7 @@ const Services = [
         description: 'Build your U.S. career with H-1B, L-1, O-1, EB visas, expert support for professionals, investors.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-job',
+        iconImg: iconImg2,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -61,7 +66,7 @@ const Services = [
         description: 'Protect your stay with removal cancellation, asylum claims, and strong representation.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-team-work',
+        iconImg: iconImg3,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -73,7 +78,7 @@ const Services = [
         description: 'Achieve citizenship with naturalization help, test, and guidance on residency requirements.',
         des2: 'Lacus, etiam sed est eu tempus need Temer diam congue laoret .',
         des3: 'One way to categorize the activities is in terms of the professional’s area of expertise such as competitive analysis, corporate strategy the activities',
-        icon: 'flaticon-bus',
+        iconImg: iconImg4,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },

components/Features/Features.js

@@ -5,6 +5,7 @@ import "slick-carousel/slick/slick-theme.css";
 import Link from 'next/link'
 import SectionTitle from "../SectionTitle/SectionTitle";
 import Services from '../../api/service'
+import Image from "next/image";
 
 
 const settings = {
@@ -74,8 +75,14 @@ const Features = (props) => {
                             <div className="grid" key={srv}>
                                 <div className="wpo-service-item">
                                     <div className="wpo-service-text">
+                                        
                                           <div className="service-icon">
-                                            <i className={`fi ${service.icon}`}></i>
+                                            <Image
+                                                src={service.iconImg}
+                                                alt={service.sTitle}
+                                                width={50}
+                                                height={50}
+                                            />
                                         </div>
                                         {/* <h2><Link onClick={ClickHandler} href={'/service-single/[slug]'} as={`/service-single/${service.slug}`}>{service.sTitle}</Link></h2> */}
                                         <h2 className="text-white">{service.sTitle}</h2>

components/FunFactVideo/FunFactVideo.js

@@ -1,12 +1,12 @@
 import React from 'react'
 import VideoModal from '../ModalVideo/VideoModal';
-import fImg from '/public/images/funfact3.jpg'
+import videoImg from '/public/images/home/video.webp'
 import Image from 'next/image';
 
 const FunFactVideo = (props) => {
     return (
         <div className="funfact-video mt-0">
-            <Image src={fImg} alt="" />
+            <Image src={videoImg} alt="" />
             <VideoModal />
         </div>
     )

components/ServiceSection/ServiceSection.js

@@ -79,7 +79,11 @@ const ServiceSection = (props) => {
                                             <div className="features-dot">
                                                 <div className="dots"></div>
                                             </div>
-                                            <i className={feature.icon}></i>
+                                            <img
+                                            src={feature.img.src}
+                                            alt={`${feature.title} icon`}
+                                            className="feature-img"
+                                        />
                                         </div>
                                         <div className="feature-text">
                                             {/* <h2>

components/Testimonial/Testimonial.js

@@ -10,7 +10,7 @@ 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 testimonialImage from '/public/images/about.png'
+import testiImage from '/public/images/home/quotes.webp'
 
 
 
@@ -58,7 +58,7 @@ const Testimonial = (props) => {
                                     <div className="left-slide">
 
                                         <div className="testimonial-img">
-                                            <Image src={testimonialImage} alt="" />
+                                            <Image src={testiImage} alt="" />
                                         </div>
 
                                     </div>

components/about/about.js

@@ -11,7 +11,7 @@ const About = (props) => {
                     <div className="row align-items-center">
                         <div className="col-lg-6 col-md-12 col-12 order-2 order-lg-1">
                             <div className="wpo-about-img">
-                                <Image src={props.abimg} alt="" />
+                                <Image src={props.introImg} alt="" />
                                 <div className="wpo-about-img-text">
                                     <h4>1998</h4>
 

components/hero/hero.js

@@ -22,18 +22,18 @@ const Hero = () => {
                 <div className="hero-wrapper">
                     <Slider {...settings}>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-1.jpg'})` }}>
+                            <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>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Family Immigration Assistance</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Reuniting loved ones, one case at a time.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/about" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
@@ -41,54 +41,54 @@ const Hero = () => {
                         </div>
 
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-2.jpg'})` }}>
+                            <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>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Employment & Work Visa Solutions</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Your career deserves a global gateway.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/our-approach" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-3.jpg'})` }}>
+                            <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>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Investor & Business Immigration</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Building futures through business opportunities.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/services" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                         <div className="hero-slide">
-                            <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/slider/slide-4.jpg'})` }}>
+                            <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>Wisdom. Freedom. Hope.</h2>
+                                            <h2>Deportation Defense & Legal Representation</h2>
                                         </div>
                                         <div data-swiper-parallax="400" className="slide-text">
-                                            <p>We can taking small steps and making small changes.</p>
+                                            <p>Fighting for your right to stay.</p>
                                         </div>
                                         <div className="clearfix"></div>
                                         <div className="slide-btns">
-                                            <Link href="/about" className="theme-btn">Join The Campaign</Link>
+                                            <Link href="/contact" className="theme-btn">View More</Link>
                                         </div>
                                     </div>
                                 </div>

pages/index.js

@@ -13,7 +13,7 @@ import BlogSection from '../components/BlogSection/BlogSection';
 import InstagramSection from '../components/InstagramSection/InstagramSection';
 import Donors from '../components/Donors/Donors';
 import PartnerSection from '../components/PartnerSection/PartnerSection';
-import abimg from '/public/images/about.jpg'
+import introImg from '/public/images/home/expert-immigration-guidance.webp'
 import FunFactVideo from '../components/FunFactVideo/FunFactVideo';
 import Footer from '../components/footer/Footer';
 import Scrollbar from '../components/scrollbar/scrollbar';
@@ -24,7 +24,7 @@ const HomePage = () => {
             <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
             <Hero />
             <Features sClass={'wpo-service-section-s2'} />
-            <About abimg={abimg} abClass={'wpo-about-section-s2'}/>
+            <About introImg={introImg} abClass={'wpo-about-section-s2'}/>
             <ServiceSection />
             <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
             <ServiceSectionS2 />

styles/sass/page/_home-style-3.scss

@@ -1,48 +1,48 @@
 /*======================================
 6. Home-style-3
- =======================================*/
+=======================================*/
 
 /* 6.1 wpo-features-s2 */
-
 .wpo-features-s2 {
   .features-wrap {
     .feature-item {
       padding: 44px 50px;
-            background: #d73a3e3d;
-            // box-shadow: 0px 2px 10px rgba(0, 18, 52, 0.15);
+      background: rgba(215, 58, 62, 0.24); // #d73a3e3d
       border-radius: 20px;
       text-align: center;
 
-            @media(max-width:1199px) {
+      @media (max-width: 1199px) {
         padding: 44px 30px;
       }
 
-            @media(max-width:991px) {
+      @media (max-width: 991px) {
         margin-bottom: 30px;
       }
 
       .icon {
         width: 130px;
         height: 130px;
-                line-height: 130px;
         border: 1px solid $theme-primary-color;
         margin: auto;
         border-radius: 50%;
         margin-bottom: 30px;
         position: relative;
 
-                .fi {
-                    &:before {
-                        font-size: 60px;
-                        background: $theme-primary-color-gradient;
-                        -webkit-background-clip: text;
-                        -webkit-text-fill-color: transparent;
-                    }
+        // Flexbox center for image
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff; // optional — keeps circle filled
+
+        .feature-img {
+          width: 60px; // adjust as needed
+          height: 60px;
+          object-fit: contain;
+          display: block;
         }
       }
 
       .feature-text {
-
         h2 {
           font-weight: 450;
           font-size: 30px;
@@ -51,6 +51,7 @@
 
           a {
             color: $dark-gray;
+            text-decoration: none;
 
             &:hover {
               color: $theme-primary-color;
@@ -66,17 +67,13 @@
   }
 
  .features-dot {
-        width: 100%;
-        height: 100%;
-        left: 56%;
-        top: 8%;
-    }
-
-    .icon i.fi {
   position: absolute;
-        left: 32px;
   top: 0;
-    }
+  left: 0;
+  width: 100%;  // same size as icon
+  height: 100%;
+  transform-origin: center center; // rotate around center
+}
 
   .dots {
     width: 15px;
@@ -86,154 +83,53 @@
     left: 25px;
     top: 0;
     position: relative;
-
   }
 
-    .features-content h2 {
+  .features-content {
+    h2 {
       font-size: 22px;
       font-weight: 600;
       margin-bottom: 15px;
       margin-top: 10px;
     }
+  }
 
   .features-dot:nth-child(1) {
-        -webkit-transform: rotate(0deg);
-        -moz-transform: rotate(0deg);
-        -ms-transform: rotate(0deg);
-        -o-transform: rotate(0deg);
     transform: rotate(0deg);
-        -webkit-animation: features-dot_1 2s infinite linear;
-        -moz-animation: features-dot_1 2s infinite linear;
-        -o-animation: features-dot_1 2s infinite linear;
     animation: features-dot_1 2s infinite linear;
-        -webkit-animation-play-state: paused;
-        -moz-animation-play-state: paused;
-        -o-animation-play-state: paused;
     animation-play-state: paused;
   }
 
   .feature-item .features-wrapper:hover .features-dot:nth-child(1) {
-        -webkit-animation-play-state: running;
-        -moz-animation-play-state: running;
-        -o-animation-play-state: running;
     animation-play-state: running;
   }
 
-
-    @-webkit-keyframes features-dot_1 {
-        0% {
-            -webkit-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @-moz-keyframes features-dot_1 {
-        0% {
-            -moz-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -moz-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
-    @-o-keyframes features-dot_1 {
-        0% {
-            -o-transform: rotate(0deg);
-            transform: rotate(0deg);
-        }
-
-        100% {
-            -o-transform: rotate(360deg);
-            transform: rotate(360deg);
-        }
-    }
-
   @keyframes features-dot_1 {
     0% {
-            -webkit-transform: rotate(0deg);
-            -moz-transform: rotate(0deg);
-            -o-transform: rotate(0deg);
       transform: rotate(0deg);
     }
-
     100% {
-            -webkit-transform: rotate(360deg);
-            -moz-transform: rotate(360deg);
-            -o-transform: rotate(360deg);
       transform: rotate(360deg);
     }
   }
 
-    @-webkit-keyframes features-dot_2 {
-        0% {
-            -webkit-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -webkit-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
-    @-moz-keyframes features-dot_2 {
-        0% {
-            -moz-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -moz-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
-    @-o-keyframes features-dot_2 {
-        0% {
-            -o-transform: rotate(180deg);
-            transform: rotate(180deg);
-        }
-
-        100% {
-            -o-transform: rotate(540deg);
-            transform: rotate(540deg);
-        }
-    }
-
   @keyframes features-dot_2 {
     0% {
-            -webkit-transform: rotate(180deg);
-            -moz-transform: rotate(180deg);
-            -o-transform: rotate(180deg);
       transform: rotate(180deg);
     }
-
     100% {
-            -webkit-transform: rotate(540deg);
-            -moz-transform: rotate(540deg);
-            -o-transform: rotate(540deg);
       transform: rotate(540deg);
     }
   }
 }
 
-
 /* 6.2 wpo-about-section-s3 */
-
 .wpo-about-section-s3 {
-    @media(max-width:991px) {
+  @media (max-width: 991px) {
     padding-top: 70px;
   }
 
-    @media(max-width:575px) {
+  @media (max-width: 575px) {
     padding-top: 50px;
   }
 
@@ -243,28 +139,26 @@
       border: 0;
       margin-left: -80px;
 
-            @media(max-width:991px) {
+      @media (max-width: 991px) {
         margin-left: 0;
       }
 
-            .wpo-about-img-text{
+      .wpo-about-img-text {
         display: none;
       }
     }
 
     .wpo-about-text {
-            @media(max-width:991px) {
+      @media (max-width: 991px) {
         margin-top: 30px;
       }
     }
   }
 }
 
-
 /* 6.3 wpo-fun-fact-section-s3 */
-
-.funfact-wrap-sec{
-    .funfact-video{
+.funfact-wrap-sec {
+  .funfact-video {
     display: none;
   }
 }
@@ -272,6 +166,7 @@
 .wpo-fun-fact-section-s3 {
   padding-bottom: 0;
   background: linear-gradient(90deg, #c12026 11.32%, #c12026 95.28%);
+  position: relative;
 
   &:before {
     position: absolute;
@@ -288,10 +183,11 @@
     .wpo-fun-fact-grids {
       padding: 80px 0 70px;
 
-            @media(max-width:1199px){
+      @media (max-width: 1199px) {
         padding: 50px 0 40px;
       }
-            .grid+.grid:before {
+
+      .grid + .grid:before {
         background: $white;
       }
     }
@@ -299,9 +195,9 @@
 }
 
 /* 6.4 wpo-campaign-area-s3 */
-
 .wpo-campaign-area-s3 {
   margin: 0;
+
   .shape-left,
   .shape-right {
     display: none;

utils/constant.utils.js

@@ -26,24 +26,27 @@ import develop1 from '/public/images/service/develop/img-1.jpg'
 import develop2 from '/public/images/service/develop/img-2.jpg'
 import develop3 from '/public/images/service/develop/img-3.jpg'
 
+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'
 
 export const featuresData = [
   {
-    icon: "fi flaticon-charity",
+    img: iconImg1,
     title: "Strategic Planning",
     link: "/team",
     description:
       "We create custom legal strategies based on immigration law, policy changes, and your needs."
   },
   {
-    icon: "fi flaticon-conference-1",
+    img: iconImg2,
     title: "Expert Preparation",
     link: "/campaign",
     description:
       "Careful document preparation, evidence gathering, and filing to boost your application success."
   },
   {
-    icon: "fi flaticon-community",
+    img: iconImg3,
     title: "Ongoing Support",
     link: "/volunteer",
     description:
@@ -51,7 +54,6 @@ export const featuresData = [
   }
 ];
 
-
 export const TabServices = [
   {
     sTitle: "Reunite With Loved Ones",
@@ -258,3 +260,4 @@ export const MissionVision = [
     ssImg2: sSingleimg2,
   },
 ]
+