3 files changed, 41 insertions, 8 deletions
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 9a62465d..64838b85 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -39,16 +39,28 @@ const HeroBanner = () => {
     pagination: { dynamicBullets: false, clickable: true },
   };
 
+  const customLoader = ({ src }) => {
+    return src; // Loader yang mengembalikan URL gambar asli
+  };
+
   const BannerComponent = useMemo(() => {
-    return heroBanner.data?.map((banner, index) => (
+    if (!heroBanner.data) return null;
+
+    return heroBanner.data.map((banner, index) => (
       <SwiperSlide key={index}>
         <Link href={banner.url} className='w-full h-auto'>
           <Image
+            loader={customLoader}
             src={banner.image}
             alt={banner.name}
             width={1152}
             height={768}
             className='w-full h-auto'
+            priority={index === 0} 
+            loading={index === 0 ? 'eager' : 'lazy'} 
+            placeholder="blur" 
+            blurDataURL="/images/indoteknik-placeholder.png" 
+            sizes="(max-width: 768px) 100vw, 50vw" 
           />
         </Link>
       </SwiperSlide>
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index b1023990..a7b32a4a 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -18,18 +18,22 @@ const HeroBannerSecondary = () => {
   if (heroBannerSecondary.isLoading) return <HeroBannerSkeleton />
 
   return (
-    heroBannerSecondary.data && (
-      <Link href={heroBannerSecondary.data[randomIndex].url} className='h-full'>
+    heroBannerSecondary.data && randomIndex !== null && (
+      <Link href={heroBannerSecondary.data[randomIndex].url} className="h-full">
         <Image
           src={heroBannerSecondary.data[randomIndex].image}
           width={512}
           height={1024}
           alt={heroBannerSecondary.data[randomIndex].name}
-          className='object-cover object-center h-full'
+          className="object-cover object-center h-full"
+          loading="lazy" 
+          placeholder="blur" 
+          blurDataURL="/images/indoteknik-placeholder.png" 
+          sizes="(max-width: 768px) 100vw, 50vw" 
         />
       </Link>
     )
-  )
+  );
 }
 
 export default HeroBannerSecondary
diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
index bbbd18bc..92b2a1b6 100644
--- a/src/components/ui/PopularProduct.jsx
+++ b/src/components/ui/PopularProduct.jsx
@@ -5,6 +5,7 @@ import { useQuery } from 'react-query'
 import { PopularProductSkeleton } from '../skeleton/PopularProductSkeleton'
 import DesktopView from '@/core/components/views/DesktopView'
 import ProductCard from '@/lib/product/components/ProductCard'
+import Link from '@/core/components/elements/Link/Link'
 
 const PopularProduct = () => {
   const popularProduct = useQuery('popularProduct', popularProductApi())
@@ -16,15 +17,31 @@ const PopularProduct = () => {
       <>
         <MobileView>
           <div className='px-4'>
-            <div className='font-semibold mb-4'>Produk Banyak Dilihat</div>
+          <div className='font-semibold mb-4 flex justify-between items-center'><p>
+              Produk Ready Stock
+              </p> 
+              <Link
+                href='/shop/search?orderBy=stock'
+                className=''
+              >
+                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
+                </Link></div>
             <ProductSlider products={popularProduct.data} simpleTitle />
           </div>
         </MobileView>
 
         <DesktopView>
           <div className='border border-gray_r-6 h-full overflow-auto'>
-            <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10'>
-              Produk Banyak Dilihat
+          <div className='font-semibold text-center p-4 bg-gray_r-1 border-b border-gray_r-6 sticky top-0 z-10 flex justify-between items-center'>
+             <p>
+              Produk Ready Stock
+              </p> 
+              <Link
+                href='/shop/search?orderBy=stock'
+                className=''
+              >
+                <p className='text-danger-500 font-semibold'>Lihat Semua</p>
+                </Link>
             </div>
             <div className='h-full divide-y divide-gray_r-6'>
               {popularProduct.data &&