4 files changed, 21 insertions, 45 deletions
diff --git a/src/components/ui/AnimateOnLoad.jsx b/src/components/ui/AnimateOnLoad.jsx
deleted file mode 100644
index fb9919e1..00000000
--- a/src/components/ui/AnimateOnLoad.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import classNames from 'classnames'
-import { motion } from 'framer-motion'
-
-/**
- * Animate On Load
- * @param {object} props
- * @param {string} props.className - Container class
- */
-const AnimateOnLoad = (props) => {
-  const { className: propsClassName, children } = props
-
-  const combinedClassName = classNames(propsClassName)
-
-  return (
-    <motion.div
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1, transition: { duration: 0.3 } }}
-      className={combinedClassName}
-    >
-      {children}
-    </motion.div>
-  )
-}
-
-export default AnimateOnLoad
diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 746de778..d7d3d854 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -9,11 +9,10 @@ import DesktopView from '@/core/components/views/DesktopView'
 import MobileView from '@/core/components/views/MobileView'
 import { useMemo } from 'react'
 import Link from '@/core/components/elements/Link/Link'
-import Image from '@/core/components/elements/Image/Image'
+import Image from 'next/image'
 import { useQuery } from 'react-query'
 import { bannerApi } from '@/api/bannerApi'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
-import AnimateOnLoad from './AnimateOnLoad'
 
 const swiperBanner = {
   autoplay: {
@@ -43,7 +42,13 @@ const HeroBanner = () => {
     return heroBanner.data?.map((banner, index) => (
       <SwiperSlide key={index}>
         <Link href={banner.url} className='w-full h-auto'>
-          <Image src={banner.image} alt={banner.name} className='w-full h-auto' />
+          <Image
+            src={banner.image}
+            alt={banner.name}
+            width={1152}
+            height={768}
+            className='w-full h-auto'
+          />
         </Link>
       </SwiperSlide>
     ))
@@ -53,7 +58,7 @@ const HeroBanner = () => {
 
   return (
     heroBanner.data && (
-      <AnimateOnLoad>
+      <>
         <MobileView>
           <Swiper {...swiperBannerMobile}>{BannerComponent}</Swiper>
         </MobileView>
@@ -61,7 +66,7 @@ const HeroBanner = () => {
         <DesktopView>
           <Swiper {...swiperBannerDesktop}>{BannerComponent}</Swiper>
         </DesktopView>
-      </AnimateOnLoad>
+      </>
     )
   )
 }
diff --git a/src/components/ui/HeroBannerSecondary.jsx b/src/components/ui/HeroBannerSecondary.jsx
index 50db69f8..b1023990 100644
--- a/src/components/ui/HeroBannerSecondary.jsx
+++ b/src/components/ui/HeroBannerSecondary.jsx
@@ -5,7 +5,6 @@ import { useMemo } from 'react'
 import { useQuery } from 'react-query'
 import { HeroBannerSkeleton } from '../skeleton/BannerSkeleton'
 import { bannerApi } from '@/api/bannerApi'
-import AnimateOnLoad from './AnimateOnLoad'
 
 const HeroBannerSecondary = () => {
   const heroBannerSecondary = useQuery('heroBannerSecondary', bannerApi({ type: 'index-a-2' }))
@@ -20,17 +19,15 @@ const HeroBannerSecondary = () => {
 
   return (
     heroBannerSecondary.data && (
-      <AnimateOnLoad className='h-full'>
-        <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'
-          />
-        </Link>
-      </AnimateOnLoad>
+      <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'
+        />
+      </Link>
     )
   )
 }
diff --git a/src/components/ui/PopularProduct.jsx b/src/components/ui/PopularProduct.jsx
index 9ca3e4ea..211291c8 100644
--- a/src/components/ui/PopularProduct.jsx
+++ b/src/components/ui/PopularProduct.jsx
@@ -5,7 +5,6 @@ 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 AnimateOnLoad from './AnimateOnLoad'
 
 const PopularProduct = () => {
   const popularProduct = useQuery('popularProduct', popularProductApi())
@@ -14,7 +13,7 @@ const PopularProduct = () => {
 
   return (
     popularProduct.data && (
-      <AnimateOnLoad className='h-full'>
+      <>
         <MobileView>
           <div className='px-4'>
             <div className='font-medium mb-4'>Produk Banyak Dilihat</div>
@@ -37,7 +36,7 @@ const PopularProduct = () => {
             </div>
           </div>
         </DesktopView>
-      </AnimateOnLoad>
+      </>
     )
   )
 }