home page - banner, slider content, images, icons updated

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'
+
 
 
 
@@ -38,7 +43,7 @@ const Services = [
         description: 'Reunite with loved ones through marriage-based green cards, fiancé visas, and family preference petitions. We handle every step from petition filing to consular processing.',
         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-credit',
+        iconImg: iconImg1,
         ssImg1: sSingleimg1,
         ssImg2: sSingleimg2,
     },
@@ -50,7 +55,7 @@ const Services = [
         description: 'Secure your career in America with H-1B, L-1, O-1 visas, or permanent residency through EB-1, EB-2, and EB-3 categories. Expert guidance for professionals and 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,
     },
@@ -62,7 +67,7 @@ const Services = [
         description: 'Protect your right to remain in America. Our aggressive defense strategies include cancellation of removal, asylum claims, and appellate 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,
     },
@@ -74,7 +79,7 @@ const Services = [
         description: 'Complete your American journey with naturalization guidance, citizenship test preparation, and assistance with complex 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,9 +75,16 @@ 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>
                                         <p>
                                             {service.description.length > 100

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,
   },
 ]
+