Home images updated

components/homes/home-1/About.jsx

@@ -33,7 +33,7 @@ export default function About() {
               <div className="col-lg-6">
                 <div className="about-image">
                   <Image
-                    src="/assets/img/about/01.jpg"
+                    src="/assets/img/home/about/about-big-image.webp"
                     alt="img"
                     width={485}
                     height={592}

components/homes/home-1/Blogs.jsx

@@ -7,7 +7,7 @@ export default function Blogs() {
   return (
     <section
       id="blog"
-      className="news-section fix section-padding fix section-bg-2  scrollSpySection"
+      className="news-section fix section-padding fix scrollSpySection"
     >
       <div className="shape-1 float-bob-y">
         <Image

components/homes/home-1/Cta.jsx

@@ -8,7 +8,7 @@ export default function Cta() {
       <div className="container">
         <div
           className="cta-banner-wrapper fix bg-cover"
-          style={{ backgroundImage: 'url("/assets/img/cta-bg.jpg")' }}
+          style={{ backgroundImage: 'url("/assets/img/home/launch/ready-to-launch-bg.webp")' }}
         >
           <h2 className="splt-txt wow">
             <AnimatedText text="Ready to Launch Your " /> <br />
@@ -20,19 +20,19 @@ export default function Cta() {
           </h2>
           <div className="cta-img wow fadeInUp" data-wow-delay=".4s">
             <Image
-              src="/assets/img/cta-img.png"
+              src="/assets/img/home/launch/build-on-innovation-right.webp"
               width={223}
               height={256}
               alt="img"
             />
-            <div className="shape-img">
+            {/* <div className="shape-img">
               <Image
                 src="/assets/img/cta-shape.png"
                 width={225}
                 height={242}
                 alt="img"
               />
-            </div>
+            </div> */}
           </div>
           <Link
             href={`/contact`}

components/homes/home-1/Faq.jsx

@@ -6,7 +6,7 @@ export default function Faq() {
   return (
     <section
       className="faq-section fix section-padding section-bg-2 bg-cover"
-      style={{ backgroundImage: 'url("/assets/img/faq/bg-shape.png")' }}
+      style={{ backgroundImage: 'url("/assets/img/faq/faq-bg.webp")' }}
     >
       <div className="track-shape float-bob-x">
         <Image src="/assets/img/track.png" width={163} height={79} alt="img" />

components/homes/home-1/Hero.jsx

@@ -25,7 +25,7 @@ export default function Hero() {
   const slides = [
     {
       id: 1,
-      image: "/assets/img/cta-bg.jpg",
+      image: "/assets/img/home/banner/banner-1.webp",
       title: "Smart Coconut",
       subtitle: "Solutions",
       text: "Efficient machines for deshelling to drying coconut.",
@@ -34,7 +34,7 @@ export default function Hero() {
     },
     {
       id: 2,
-      image: "/assets/img/cta-bg.jpg",
+      image: "/assets/img/home/banner/banner-2.webp",
       title: "Future-Ready",
       subtitle: "Engineering",
       text: "Automation and precision for coconut processing plants.",
@@ -43,7 +43,7 @@ export default function Hero() {
     },
     {
       id: 3,
-      image: "/assets/img/cta-bg.jpg",
+      image: "/assets/img/home/banner/banner-3.webp",
       title: "Global Processing",
       subtitle: "Impact",
       text: "Trusted coconut machinery in 20+ countries worldwide.",

components/homes/home-1/Skills.jsx

@@ -33,7 +33,7 @@ export default function Skills() {
                 <div className="col-lg-7 wow fadeInUp" data-wow-delay=".2s">
                   <div className="skills-image">
                     <Image
-                      src="/assets/img/skills/01.jpg"
+                      src="/assets/img/home/build/build-on-innovation-left.webp"
                       width={324}
                       height={520}
                       alt="img"
@@ -51,7 +51,7 @@ export default function Skills() {
                 <div className="col-lg-5 wow fadeInUp" data-wow-delay=".4s">
                   <div className="skills-image">
                     <Image
-                      src="/assets/img/skills/02.jpg"
+                      src="/assets/img/home/build/build-on-innovation-right.webp"
                       width={227}
                       height={520}
                       alt="img"

components/homes/home-1/Testimonials.jsx

@@ -39,7 +39,7 @@ export default function Testimonials() {
       </div>
       <div className="testimonial-image">
         <Image
-          src="/assets/img/testimonial/testimonial-image.jpg"
+          src="/assets/img/home/testimonial/testimonial-right.webp"
           width={745}
           height={708}
           alt="img"
@@ -89,7 +89,7 @@ export default function Testimonials() {
                   <div className="client-image-area">
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-1.png"
+                        src="/assets/img/home/testimonial/testimonial-1.webp"
                         alt="img"
                         width={81}
                         height={89}
@@ -97,7 +97,7 @@ export default function Testimonials() {
                     </div>
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-2.png"
+                        src="/assets/img/home/testimonial/testimonial-2.webp"
                         alt="img"
                         width={81}
                         height={89}
@@ -105,7 +105,7 @@ export default function Testimonials() {
                     </div>
                     <div className="client-img">
                       <Image
-                        src="/assets/img/testimonial/client-3.png"
+                        src="/assets/img/home/testimonial/testimonial-3.webp"
                         alt="img"
                         width={81}
                         height={89}

data/projects.js

@@ -46,19 +46,19 @@ export const projectItems = [
 export const projects = [
   {
     id: 7,
-    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    images: ["/assets/img/home/who-we-are/who-we-are-1.webp", "/assets/img/home/who-we-are/who-we-are-1.webp"],
     title: "Mission",
     delay: ".2s",
   },
   {
     id: 8,
-    images: ["/assets/img/project/10.jpg", "/assets/img/project/10.jpg"],
+    images: ["/assets/img/home/who-we-are/who-we-are-2.webp", "/assets/img/home/who-we-are/who-we-are-2.webp"],
     title: "Vission",
     delay: ".4s",
   },
   {
     id: 9,
-    images: ["/assets/img/project/11.jpg", "/assets/img/project/11.jpg"],
+    images: ["/assets/img/home/who-we-are/who-we-are-3.webp", "/assets/img/home/who-we-are/who-we-are-3.webp"],
     title: "Core Values",
     delay: ".6s",
   },
@@ -66,7 +66,7 @@ export const projects = [
   export const projects2 = [
   {
     id: 7,
-    images: ["/assets/img/project/09.jpg", "/assets/img/project/09.jpg"],
+    images: ["/assets/img/project/09.jpg"],
     title: "Mission",
     delay: ".2s",
   },

data/services.js

@@ -1,64 +1,64 @@
 export const serviceItems = [
   {
     id: 1,
-    imgSrc: "/assets/img/service/01.jpg",
-    iconSrc: "/assets/img/icon/01.svg",
+    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
+    iconSrc: "/assets/img/home/explore/icon-1.webp",
     number: "01",
     title: "Coconut Shell Removal System",
     description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
   },
   {
     id: 2,
-    imgSrc: "/assets/img/service/02.jpg",
-    iconSrc: "/assets/img/icon/02.svg",
+    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
+    iconSrc: "/assets/img/home/explore/icon-2.webp",
     number: "02",
     title: "Energy-Efficient Coconut Dryer",
     description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
   },
   {
     id: 3,
-    imgSrc: "/assets/img/service/03.jpg",
-    iconSrc: "/assets/img/icon/03.svg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
+    iconSrc: "/assets/img/home/explore/icon-3.webp",
     number: "03",
     title: "Coconut Processing Machinery",
     description: "Custom-engineered coconut processing machinery tailored to your production line.",
   },
   {
     id: 4,
-    imgSrc: "/assets/img/service/04.jpg",
-    iconSrc: "/assets/img/icon/04.svg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
+    iconSrc: "/assets/img/home/explore/icon-4.webp",
     number: "04",
     title: "Coconut Processing Equipment",
     description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",
   },
   {
     id: 5,
-    imgSrc: "/assets/img/service/01.jpg",
-    iconSrc: "/assets/img/icon/01.svg",
+    imgSrc: "/assets/img/home/explore/coconut-shell-removal.webp",
+    iconSrc: "/assets/img/home/explore/icon-1.webp",
     number: "01",
     title: "Coconut Shell Removal System",
     description: "Remove shells effortlessly with coconut deshelling machines. Built for durability and speed.",
   },
   {
     id: 6,
-    imgSrc: "/assets/img/service/02.jpg",
-    iconSrc: "/assets/img/icon/02.svg",
+    imgSrc: "/assets/img/home/explore/energy-efficient-coconut-dryer.webp",
+    iconSrc: "/assets/img/home/explore/icon-2.webp",
     number: "02",
     title: "Energy-Efficient Coconut Dryer",
     description: "Accelerate your drying process with coconut dryers designed for uniform moisture removal.",
   },
   {
     id: 7,
-    imgSrc: "/assets/img/service/03.jpg",
-    iconSrc: "/assets/img/icon/03.svg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-machinery.webp",
+    iconSrc: "/assets/img/home/explore/icon-3.webp",
     number: "03",
     title: "Coconut Processing Machinery",
     description: "Custom-engineered coconut processing machinery tailored to your production line.",
   },
   {
     id: 8,
-    imgSrc: "/assets/img/service/04.jpg",
-    iconSrc: "/assets/img/icon/04.svg",
+    imgSrc: "/assets/img/home/explore/coconut-processing-equipment.webp",
+    iconSrc: "/assets/img/home/explore/icon-4.webp",
     number: "04",
     title: "Coconut Processing Equipment",
     description: "Reliable and compact coconut processing equipment suitable for small to large-scale industries.",

public/assets/scss/_news.scss

@@ -58,28 +58,28 @@
         gap: 25px;
         justify-content: space-between;
 
-        @include breakpoint (max-xxl){
+        @include breakpoint (max-xxl) {
             flex-wrap: wrap;
             gap: 0;
         }
 
         .news-image {
-            @include breakpoint (max-xxl){
+            @include breakpoint (max-xxl) {
                 padding-left: 30px;
                 padding-bottom: 30px;
             }
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 padding: 0;
             }
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 padding-left: 30px;
                 padding-bottom: 30px;
             }
         }
 
-        &:not(:last-child){
+        &:not(:last-child) {
             margin-bottom: 30px;
         }
 
@@ -128,6 +128,10 @@
 
 .news-section {
     position: relative;
+    background-image: url('/assets/img/home/blog/blog-bg.webp');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
 
     .shape-1 {
         position: absolute;
@@ -234,7 +238,8 @@
         }
     }
 
-    &:hover,&.active {
+    &:hover,
+    &.active {
         background-color: #0b2273;
 
         .news-image {
@@ -247,7 +252,7 @@
                     filter: blur(0)
                 }
 
-                &:nth-child(2){
+                &:nth-child(2) {
                     -webkit-transform: translateX(-50%) scaleX(2);
                     transform: translateX(-50%) scaleX(2);
                     opacity: 0;
@@ -277,6 +282,7 @@
 
             .author-items {
                 border-top: 1px solid $white;
+
                 .author-info {
                     .content {
                         h6 {
@@ -352,7 +358,7 @@
                     width: 70px;
                     font-size: 18px;
                     height: 100%;
-                    background-color:$theme-color;
+                    background-color: $theme-color;
                     color: $white;
                     text-align: center;
                     transition: all .3s ease-in-out;
@@ -387,7 +393,7 @@
                         color: $header-color;
                     }
 
-                    &:not(:last-child){
+                    &:not(:last-child) {
                         margin-bottom: 12px;
                     }
 
@@ -424,7 +430,7 @@
                 @include flex;
                 gap: 20px;
 
-                &:not(:last-child){
+                &:not(:last-child) {
                     margin-bottom: 20px;
                     border-bottom: 1px solid $border-color;
                     padding-bottom: 20px;
@@ -486,7 +492,7 @@
             @include flex;
             justify-content: space-between;
 
-            &:not(:last-child){
+            &:not(:last-child) {
                 margin-bottom: 30px;
             }
 
@@ -511,7 +517,8 @@
                 color: $white;
                 @include transition;
 
-                &:hover,&.active {
+                &:hover,
+                &.active {
                     background-color: $theme-color;
                 }
 
@@ -529,11 +536,11 @@
             padding: 60px 45px;
             text-align: center;
 
-            @include breakpoint (max-xl){
+            @include breakpoint (max-xl) {
                 padding: 50px 30px;
             }
 
-            @include breakpoint (max-lg){
+            @include breakpoint (max-lg) {
                 padding: 50px 30px;
             }
 
@@ -549,7 +556,7 @@
             }
 
             .theme-btn {
-                @include breakpoint (max-xxl){
+                @include breakpoint (max-xxl) {
                     padding: 22px 30px;
                 }
             }
@@ -563,7 +570,7 @@
         position: relative;
         margin-bottom: 50px;
 
-        @include breakpoint (max-md){
+        @include breakpoint (max-md) {
             margin-bottom: 30px;
         }
 
@@ -602,7 +609,7 @@
             position: relative;
             z-index: 9;
 
-            @include breakpoint (max-md){
+            @include breakpoint (max-md) {
                 padding: 30px;
             }
 
@@ -611,7 +618,7 @@
                 gap: 40px;
                 margin-bottom: 15px;
 
-                @include breakpoint (max-xl){
+                @include breakpoint (max-xl) {
                     gap: 20px;
                     flex-wrap: wrap;
                 }
@@ -638,11 +645,11 @@
                     }
                 }
 
-                @include breakpoint (max-md){
+                @include breakpoint (max-md) {
                     font-size: 27px;
                 }
 
-                @include breakpoint (max-sm){
+                @include breakpoint (max-sm) {
                     font-size: 25px;
                 }
             }
@@ -654,7 +661,7 @@
         }
 
         .array-button {
-            @include breakpoint (max-xl){
+            @include breakpoint (max-xl) {
                 display: none;
             }
 
@@ -716,7 +723,7 @@
                 margin-bottom: 20px;
                 font-size: 30px;
 
-                @include breakpoint (max-sm){
+                @include breakpoint (max-sm) {
                     font-size: 24px;
                 }
 
@@ -770,6 +777,7 @@
                 color: $header-color;
                 margin-right: 15px;
             }
+
             a {
                 display: inline-block;
                 padding: 12px 26px;
@@ -783,7 +791,7 @@
                 transition: all 0.4s ease-in-out;
                 border-radius: 0;
 
-                @include breakpoint (max-sm){
+                @include breakpoint (max-sm) {
                     margin-bottom: 5px;
                 }
 
@@ -805,7 +813,7 @@
                 font-size: 16px;
                 color: $header-color;
 
-                &:not(:last-child){
+                &:not(:last-child) {
                     margin-right: 10px;
                 }
 
@@ -822,7 +830,7 @@
         .comments-heading {
             margin-bottom: 30px;
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 margin-bottom: 20px;
             }
 
@@ -830,7 +838,7 @@
                 font-size: 24px;
                 font-weight: 700;
 
-                @include breakpoint (max-sm){
+                @include breakpoint (max-sm) {
                     font-size: 22px;
                 }
             }
@@ -839,7 +847,7 @@
         .blog-single-comment {
             border-bottom: 1px solid #F2F5FA;
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 flex-wrap: wrap;
                 gap: 20px;
             }
@@ -855,6 +863,7 @@
                             font-size: 20px;
                         }
                     }
+
                     .star {
                         i {
                             color: $theme-color;
@@ -892,7 +901,7 @@
             font-size: 24px;
             margin-bottom: 30px;
 
-            @include breakpoint (max-sm){
+            @include breakpoint (max-sm) {
                 margin-bottom: 20px;
             }
         }
@@ -904,7 +913,8 @@
                 margin-bottom: 10px;
             }
 
-            input,textarea {
+            input,
+            textarea {
                 width: 100%;
                 outline: none;
                 border: none;
@@ -926,6 +936,7 @@
         }
     }
 }
+
 .blog-description ul {
     list-style-type: disc;
     padding-left: 1.5rem;

utlis/constant.utils.js

@@ -2,7 +2,7 @@ export const newsItems = [
   {
     id: 1,
     slug: "deshelling-machine-upgrades-what-you-need-to-know",
-    imgSrc: "/assets/img/news/02.jpg",
+    imgSrc: "/assets/img/home/blog/blog-1.webp",
     title: "Deshelling Machine Upgrades: What You Need to Know",
     description: "If you're still using outdated deshellers, you may be losing time and...",
     author: "By Admin",
@@ -12,7 +12,7 @@ export const newsItems = [
   {
     id: 2,
     slug: "dry-smarter-choosing-the-right-coconut-dryer-facility",
-    imgSrc: "/assets/img/news/03.jpg",
+    imgSrc: "/assets/img/home/blog/blog-2.webp",
     title: "Dry Smarter: Choosing the Right Coconut Dryer Facility",
     description: "Selecting the wrong dryer can lead to uneven drying and product rejection...",
     author: "By Admin",
@@ -25,7 +25,7 @@ export const newsImageItems = [
   {
     id: 3,
     slug: "revolutionizing-coconut-processing-the-rise-of-turnkey-plants",
-    backgroundImage: "/assets/img/news/01.jpg",
+    backgroundImage: "/assets/img/home/blog/blog-3.webp",
     title: "Revolutionizing Coconut Processing: The Rise of Turnkey Plants",
     description: "Turnkey coconut processing plants are helping manufacturers scale faster and reduce operational...",
     author: "By Admin",