updates

frontEnd/components/pages/career/Thrive.tsx

@@ -1,8 +1,4 @@
 import Image from "next/legacy/image";
-import time from "@/public/images/time.png";
-import trans from "@/public/images/trans.png";
-import support from "@/public/images/support.png";
-import skill from "@/public/images/skill.png";
 
 const Thrive = () => {
   return (
@@ -20,7 +16,7 @@ const Thrive = () => {
         <div className="row vertical-column-gap-lg mt-60">
           <div className="col-12 col-md-6 fade-top">
             <div className="thumb">
-              <Image src={time} alt="Image" width={80} height={80} />
+              <Image src="/images/time.png" alt="Image" width={80} height={80} />
             </div>
             <div className="content mt-40">
               <h4 className="mt-8 title-anim fw-7 text-white mb-16">
@@ -35,7 +31,7 @@ const Thrive = () => {
           </div>
           <div className="col-12 col-md-6 fade-top">
             <div className="thumb">
-              <Image src={trans} alt="Image" width={80} height={80} />
+              <Image src="/images/trans.png" alt="Image" width={80} height={80} />
             </div>
             <div className="content mt-40">
               <h4 className="mt-8 title-anim fw-7 text-white mb-16">
@@ -50,7 +46,7 @@ const Thrive = () => {
           </div>
           <div className="col-12 col-md-6 fade-top">
             <div className="thumb">
-              <Image src={support} alt="Image" width={80} height={80} />
+              <Image src="/images/support.png" alt="Image" width={80} height={80} />
             </div>
             <div className="content mt-40">
               <h4 className="mt-8 title-anim fw-7 text-white mb-16">Support</h4>
@@ -63,7 +59,7 @@ const Thrive = () => {
           </div>
           <div className="col-12 col-md-6 fade-top">
             <div className="thumb">
-              <Image src={skill} alt="Image" width={80} height={80} />
+              <Image src="/images/skill.png" alt="Image" width={80} height={80} />
             </div>
             <div className="content mt-40">
               <h4 className="mt-8 title-anim fw-7 text-white mb-16">

frontEnd/components/pages/case-study/CaseItems.tsx

@@ -3,7 +3,6 @@ import Image from "next/legacy/image";
 import Link from "next/link";
 import { useCaseStudies } from "@/lib/hooks/useCaseStudy";
 import { getImageUrl } from "@/lib/imageUtils";
-import one from "@/public/images/case/one.png";
 
 const CaseItems = () => {
   const { caseStudies, loading: casesLoading } = useCaseStudies();
@@ -56,7 +55,7 @@ const CaseItems = () => {
                         <div className="thumb mb-24">
                           <Link href={`/case-study/${caseStudy.slug}`} className="w-100">
                             <Image
-                              src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : one}
+                              src={caseStudy.thumbnail ? getImageUrl(caseStudy.thumbnail) : "/images/case/one.png"}
                               className="w-100 mh-300"
                               alt={caseStudy.title}
                               width={600}

frontEnd/components/pages/case-study/CaseSingle.tsx

@@ -5,8 +5,6 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
 import { getImageUrl } from "@/lib/imageUtils";
-import poster from "@/public/images/case/poster.png";
-import project from "@/public/images/case/project.png";
 
 interface CaseSingleProps {
   slug: string;

frontEnd/components/pages/case-study/RelatedCase.tsx

@@ -3,7 +3,6 @@ import Image from "next/image";
 import Link from "next/link";
 import { useCaseStudy } from "@/lib/hooks/useCaseStudy";
 import { getImageUrl } from "@/lib/imageUtils";
-import one from "@/public/images/case/one.png";
 
 interface RelatedCaseProps {
   slug: string;
@@ -34,7 +33,7 @@ const RelatedCase = ({ slug }: RelatedCaseProps) => {
                 <Link href={`/case-study/${relatedCase.slug}`} className="case-link">
                   <div className="case-image-wrapper">
                     <Image
-                      src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : one}
+                      src={relatedCase.thumbnail ? getImageUrl(relatedCase.thumbnail) : "/images/case/one.png"}
                       className="case-image"
                       alt={relatedCase.title}
                       width={400}

frontEnd/components/pages/contact/ContactSection.tsx

@@ -2,7 +2,6 @@
 import { usePathname } from "next/navigation";
 import { useState, useEffect, useRef } from "react";
 import Image from "next/legacy/image";
-import thumb from "@/public/images/contact-thumb.png";
 import { contactApiService, ContactFormData } from "@/lib/api/contactService";
 
 const ContactSection = () => {

frontEnd/components/pages/home/Overview.tsx

@@ -5,14 +5,15 @@ import Link from "next/link";
 import { useMemo } from "react";
 import { useServices } from "@/lib/hooks/useServices";
 import { serviceUtils } from "@/lib/api/serviceService";
-import one from "@/public/images/overview/one.png";
-import two from "@/public/images/overview/two.png";
-import three from "@/public/images/overview/three.png";
-import four from "@/public/images/overview/four.png";
-import five from "@/public/images/overview/five.png";
 
-// Default images array for fallback
-const defaultImages = [one, two, three, four, five];
+// Default images array for fallback - use string paths
+const defaultImages = [
+  "/images/overview/one.png",
+  "/images/overview/two.png",
+  "/images/overview/three.png",
+  "/images/overview/four.png",
+  "/images/overview/five.png"
+];
 
 const Overview = () => {
   // Memoize the parameters to prevent infinite re-renders

frontEnd/components/pages/home/ServiceIntro.tsx

@@ -1,6 +1,5 @@
 import Image from "next/legacy/image";
 import Link from "next/link";
-import thumb from "@/public/images/leading.jpg";
 
 const ServiceIntro = () => {
   return (
@@ -11,7 +10,7 @@ const ServiceIntro = () => {
           <div className="tp-service__thumb" style={{ maxWidth: '400px', border: 'none', padding: 0, margin: 0, overflow: 'hidden', borderRadius: '8px' }}>
             <Link href="services">
               <Image
-                src={thumb}
+                src="/images/leading.jpg"
                 alt="Enterprise Software Solutions"
                 width={400}
                 height={500}

frontEnd/components/pages/services/Transform.tsx

@@ -3,8 +3,6 @@ import { useEffect } from "react";
 import Image from "next/legacy/image";
 import gsap from "gsap";
 import ScrollTrigger from "gsap/dist/ScrollTrigger";
-import thumb from "@/public/images/transform-thumb.png";
-import teamThumb from "@/public/images/team-thumb.png";
 import { Service } from "@/lib/api/serviceService";
 import { serviceUtils } from "@/lib/api/serviceService";
 
@@ -55,7 +53,7 @@ const Transform = ({ service }: TransformProps) => {
                 <div className="transform__thumb">
                   <div className="enterprise-image-wrapper">
                     <Image
-                      src={serviceUtils.getServiceImageUrl(service) || thumb}
+                      src={serviceUtils.getServiceImageUrl(service) || "/images/transform-thumb.png"}
                       className="enterprise-service-image"
                       alt={service.title}
                       width={600}

frontEnd/components/shared/layout/header/OffcanvasMenu.tsx

@@ -4,7 +4,6 @@ import { usePathname } from "next/navigation";
 import AnimateHeight from "react-animate-height";
 import Image from "next/legacy/image";
 import Link from "next/link";
-import logoLight from "@/public/images/logo-light.png";
 
 interface OffcanvasMenuProps {
   isOffcanvasOpen: boolean;
@@ -67,7 +66,7 @@ const OffcanvasMenu = ({
           <div className="offcanvas-menu__header nav-fade">
             <div className="logo">
               <Link href="/" className="logo-img">
-                <Image src={logoLight} priority alt="Image" title="Logo" width={160} height={60} />
+                <Image src="/images/logo-light.png" priority alt="Image" title="Logo" width={160} height={60} />
               </Link>
             </div>
             <button