Shared useinview

src/app/(static)/page.tsx

@@ -1,6 +1,3 @@
-'use client';
-import { useRef } from 'react';
-import Image from 'next/image';
 import brandStoryPic from '/public/images/homepage/brand-story.jpg';
 import { HomepageVideo } from '@/components/homepage-video';
 import { HeroSwiper } from '@/components/swiper';
@@ -9,15 +6,9 @@ import { ChocolateCategories } from '@/components/category-slider';
 import { InstagramFeed } from '@/components/instagram';
 import { Spotlight } from '@/components/spotlight';
 import { AnimatedText } from '@/components/animated-text';
-import useInView from '@/hooks/useInView';
+import { AnimatedImage } from '@/components/animated-image';
 
 export default function HomePage() {
-  const brandStoryPicRef = useRef<HTMLImageElement>(null);
-  const isBrandStoryPic = useInView(brandStoryPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-
   return (
     <div className='overflow-x-hidden'>
       <HeroSwiper />
@@ -53,16 +44,17 @@ export default function HomePage() {
         </div>
         {/* Right Column - Image */}
         <div className='w-full md:w-1/2'>
-          <Image
-            ref={brandStoryPicRef}
+          <AnimatedImage
+            // ref={brandStoryPicRef}
             src={brandStoryPic}
             alt='Right Side Image'
-            className={`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
+            className='w-full h-auto'
+            // {`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
+            // sizes='100vw'
+            // style={{
+            //   width: '100%',
+            //   height: 'auto',
+            // }}
           />
         </div>
       </section>