updates

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/home/Story.tsx

@@ -273,7 +273,9 @@ const Story = () => {
                         </Link>
                       </p>
                       <h5 className="fw-4 mt-12 mb-12 text-white">
-                        {item.title}
+                        <Link href={`/case-study/${item.slug}`} className="text-white">
+                          {item.title}
+                        </Link>
                       </h5>
                       <p className="text-xs">{item.excerpt || item.description?.substring(0, 150) + '...'}</p>
                     </div>
@@ -300,32 +302,34 @@ const Story = () => {
                       className={`tp-story-thumb ${isActive ? "thumb-active" : ""}`}
                       data-loaded={isLoaded}
                     >
-                      <Image
-                        src={imageUrl}
-                        width={600}
-                        height={300}
-                        className="w-100 mh-300"
-                        alt={item.title || "Case Study"}
-                        priority={index === 0}
-                        loading={index === 0 ? 'eager' : 'lazy'}
-                        style={{ 
-                          display: 'block',
-                          width: '100%',
-                          height: 'auto',
-                          objectFit: 'cover',
-                          opacity: isLoaded ? 1 : 0,
-                          transition: 'opacity 0.3s ease'
-                        }}
-                        onLoad={() => {
-                          if (!isLoaded) {
-                            setImagesLoaded((prev) => {
-                              const newSet = new Set(prev);
-                              newSet.add(index);
-                              return newSet;
-                            });
-                          }
-                        }}
-                      />
+                      <Link href={`/case-study/${item.slug}`} className="w-100">
+                        <Image
+                          src={imageUrl}
+                          width={600}
+                          height={300}
+                          className="w-100 mh-300"
+                          alt={item.title || "Case Study"}
+                          priority={index === 0}
+                          loading={index === 0 ? 'eager' : 'lazy'}
+                          style={{ 
+                            display: 'block',
+                            width: '100%',
+                            height: 'auto',
+                            objectFit: 'cover',
+                            opacity: isLoaded ? 1 : 0,
+                            transition: 'opacity 0.3s ease'
+                          }}
+                          onLoad={() => {
+                            if (!isLoaded) {
+                              setImagesLoaded((prev) => {
+                                const newSet = new Set(prev);
+                                newSet.add(index);
+                                return newSet;
+                              });
+                            }
+                          }}
+                        />
+                      </Link>
                     </div>
                   );
                 })}