updates

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";
 
@@ -16,20 +14,25 @@ const Transform = ({ service }: TransformProps) => {
 
   useEffect(() => {
     gsap.registerPlugin(ScrollTrigger);
-    gsap.set(".foot-fade", {
-      x: -100,
-      opacity: 0,
-    });
+    
+    // Check if elements exist before animating
+    const footFadeElements = document.querySelectorAll(".foot-fade");
+    if (footFadeElements.length > 0) {
+      gsap.set(".foot-fade", {
+        x: -100,
+        opacity: 0,
+      });
 
-    ScrollTrigger.batch(".foot-fade", {
-      start: "-100px bottom",
-      onEnter: (elements) =>
-        gsap.to(elements, {
-          x: 0,
-          opacity: 1,
-          stagger: 0.3,
-        }),
-    });
+      ScrollTrigger.batch(".foot-fade", {
+        start: "-100px bottom",
+        onEnter: (elements) =>
+          gsap.to(elements, {
+            x: 0,
+            opacity: 1,
+            stagger: 0.3,
+          }),
+      });
+    }
   }, []);
 
   return (
@@ -55,7 +58,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}