Image and text animation

diwali

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

@@ -1,3 +1,5 @@
+'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';
@@ -5,8 +7,40 @@ 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';
 
 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'>
@@ -25,9 +59,10 @@ export default function AboutUsPage() {
         </div>
         <div className='w-full'>
           <Image
+            ref={pralinePicRef}
             src={pralinePic}
             alt='Praline'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isPralinePic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -40,9 +75,10 @@ export default function AboutUsPage() {
         {/* Left Column - Image */}
         <div className='w-full md:w-1/2'>
           <Image
+            ref={prAmPicRef}
             src={prAmPic}
             alt='Left Side Image'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isPrAmPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -92,9 +128,10 @@ export default function AboutUsPage() {
         </div>
         <div className='w-full md:w-1/2'>
           <Image
+            ref={dryingPicRef}
             src={dryingPic}
             alt='Beans Drying'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isDryingPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -107,9 +144,10 @@ export default function AboutUsPage() {
       <section className='flex flex-col md:flex-row items-center'>
         <div className='w-full md:w-1/2'>
           <Image
+            ref={chefPicRef}
             src={chefPic}
             alt='Beans Drying'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isChefPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -119,9 +157,10 @@ export default function AboutUsPage() {
         </div>
         <div className='w-full md:w-1/2'>
           <Image
+            ref={barkPicRef}
             src={barkPic}
             alt='Beans Drying'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isBarkPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -150,9 +189,10 @@ export default function AboutUsPage() {
         </div>
         <div className='flex w-full'>
           <Image
+            ref={italyPicRef}
             src={italyPic}
             alt='Training'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isItalyPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',