Shared useinview

src/app/(static)/about-us/page.tsx

@@ -1,46 +1,13 @@
 'use client';
-import { useRef } from 'react';
-import Image from 'next/image';
 import pralinePic from '/public/images/about-us/01-praline.jpg';
 import prAmPic from '/public/images/about-us/02-priyanka-amritanshu.jpg';
 import dryingPic from '/public/images/about-us/03-drying.jpg';
 import chefPic from '/public/images/about-us/04-chef.jpg';
 import barkPic from '/public/images/about-us/05-bark.jpg';
 import italyPic from '/public/images/about-us/06-italy.jpg';
-import useInView from '@/hooks/useInView';
+import { AnimatedImage } from '@/components/animated-image';
 
 export default function AboutUsPage() {
-  const pralinePicRef = useRef<HTMLImageElement>(null);
-  const isPralinePic = useInView(pralinePicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-  const prAmPicRef = useRef<HTMLImageElement>(null);
-  const isPrAmPic = useInView(prAmPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-  const dryingPicRef = useRef<HTMLImageElement>(null);
-  const isDryingPic = useInView(dryingPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-  const chefPicRef = useRef<HTMLImageElement>(null);
-  const isChefPic = useInView(chefPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-  const barkPicRef = useRef<HTMLImageElement>(null);
-  const isBarkPic = useInView(barkPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-  const italyPicRef = useRef<HTMLImageElement>(null);
-  const isItalyPic = useInView(italyPicRef, {
-    threshold: 0.1,
-    triggerOnce: true,
-  });
-
   return (
     <div className='overflow-x-hidden bg-white pt-28'>
       <section className='flex flex-col items-center'>
@@ -58,27 +25,27 @@ export default function AboutUsPage() {
           chocolate-making.
         </div>
         <div className='w-full'>
-          <Image
-            ref={pralinePicRef}
+          <AnimatedImage
             src={pralinePic}
             alt='Praline'
-            className={`w-full h-auto zoom ${isPralinePic ? 'post' : 'pre'}`}
-            sizes='100vw'
-            style={{
-              width: '100%',
-              height: 'auto',
-            }}
+            className='w-full h-auto'
+            loading='lazy'
+            // {`w-full h-auto zoom ${isPralinePic ? 'post' : 'pre'}`}
+            // sizes='100vw'
+            // style={{
+            //   width: '100%',
+            //   height: 'auto',
+            // }}
           />
         </div>
       </section>
       <section className='flex flex-col md:flex-row items-center'>
         {/* Left Column - Image */}
         <div className='w-full md:w-1/2'>
-          <Image
-            ref={prAmPicRef}
+          <AnimatedImage
             src={prAmPic}
             alt='Left Side Image'
-            className={`w-full h-auto zoom ${isPrAmPic ? 'post' : 'pre'}`}
+            className='w-full h-auto'
             sizes='100vw'
             style={{
               width: '100%',
@@ -127,11 +94,10 @@ export default function AboutUsPage() {
           </div>
         </div>
         <div className='w-full md:w-1/2'>
-          <Image
-            ref={dryingPicRef}
+          <AnimatedImage
             src={dryingPic}
             alt='Beans Drying'
-            className={`w-full h-auto zoom ${isDryingPic ? 'post' : 'pre'}`}
+            className='w-full h-auto'
             sizes='100vw'
             style={{
               width: '100%',
@@ -143,11 +109,10 @@ export default function AboutUsPage() {
       {/* Fourth Three-Column Layout (Collections) */}
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
-          <Image
-            ref={chefPicRef}
+          <AnimatedImage
             src={chefPic}
             alt='Beans Drying'
-            className={`w-full h-auto zoom ${isChefPic ? 'post' : 'pre'}`}
+            className='w-full h-auto'
             sizes='100vw'
             style={{
               width: '100%',
@@ -156,11 +121,11 @@ export default function AboutUsPage() {
           />
         </div>
         <div className='w-full md:w-1/2'>
-          <Image
-            ref={barkPicRef}
+          <AnimatedImage
             src={barkPic}
             alt='Beans Drying'
-            className={`w-full h-auto zoom ${isBarkPic ? 'post' : 'pre'}`}
+            className='w-full h-auto'
+            loading='lazy'
             sizes='100vw'
             style={{
               width: '100%',
@@ -188,11 +153,11 @@ export default function AboutUsPage() {
           that define the world of chocolate making.
         </div>
         <div className='flex w-full'>
-          <Image
-            ref={italyPicRef}
+          <AnimatedImage
             src={italyPic}
             alt='Training'
-            className={`w-full h-auto zoom ${isItalyPic ? 'post' : 'pre'}`}
+            className='w-full h-auto'
+            loading='lazy'
             sizes='100vw'
             style={{
               width: '100%',

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>