Image and text animation

diwali

src/app/(static)/page.tsx

@@ -1,3 +1,5 @@
+'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';
@@ -6,8 +8,16 @@ import { Collections } from '@/components/our-collection';
 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';
 
 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 />
@@ -16,30 +26,38 @@ export default function HomePage() {
         {/* Left Column - Text with Header */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h1 className='text-6xl font-normal text-justify font-montera'>
-              Brand Story
-            </h1>
-            <p className='text-xl text-justify'>
-              Mozimo&apos;s journey is a passionate pursuit of crafting
-              exceptional chocolate that celebrates the origin of each cocoa
-              bean.
-            </p>
-            <p className='text-xl text-justify'>
-              We meticulously roast, crack, winnow, and refine beans in-house,
-              using modern techniques to highlight their natural flavors.
-            </p>
-            <p className='text-xl text-justify'>
-              Each chocolate is a masterpiece, capturing the essence of cocoa in
-              its purest form.
-            </p>
+            <AnimatedText finishClass='delay-300'>
+              <h2 className='text-6xl font-normal text-justify font-montera'>
+                Brand Story
+              </h2>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify'>
+                Mozimo&apos;s journey is a passionate pursuit of crafting
+                exceptional chocolate that celebrates the origin of each cocoa
+                bean.
+              </p>
+              <p className='text-xl text-justify'>
+                We meticulously roast, crack, winnow, and refine beans in-house,
+                using modern techniques to highlight their natural flavors.
+              </p>
+              <p className='text-xl text-justify'>
+                Each chocolate is a masterpiece, capturing the essence of cocoa
+                in its purest form.
+              </p>
+            </AnimatedText>
           </div>
         </div>
         {/* Right Column - Image */}
         <div className='w-full md:w-1/2'>
           <Image
+            ref={brandStoryPicRef}
             src={brandStoryPic}
             alt='Right Side Image'
-            className='w-full h-auto'
+            className={`w-full h-auto zoom ${isBrandStoryPic ? 'post' : 'pre'}`}
             sizes='100vw'
             style={{
               width: '100%',
@@ -60,19 +78,26 @@ export default function HomePage() {
         {/* Right Column - Text */}
         <div className='w-full md:w-1/2'>
           <div className='m-8 space-y-10'>
-            <h2 className='text-6xl font-normal text-justify font-montera'>
-              Discover the delicate art of our
-            </h2>
-            <h3 className='text-8xl font-normal text-justify font-samantha'>
-              Chocolate Tempering
-            </h3>
-            <p className='text-xl text-justify'>
-              Crafted to perfection Mozimo delivers a sublime sensory experience
-              with every bite. Experience the epitome of indulgence with our
-              perfectly tempered chocolate: velvety smooth, exquisitely rich,
-              and artfully balanced. Each bite offers a symphony of nuanced
-              cocoa flavors, melting luxuriously!
-            </p>
+            <AnimatedText finishClass='delay-300'>
+              <h2 className='text-6xl font-normal text-justify font-montera'>
+                Discover the delicate art of our
+              </h2>
+              <h3 className='text-8xl font-normal text-justify font-samantha'>
+                Chocolate Tempering
+              </h3>
+            </AnimatedText>
+            <AnimatedText
+              startClass='translate-y-8'
+              finishClass='translate-y-0'
+            >
+              <p className='text-xl text-justify'>
+                Crafted to perfection Mozimo delivers a sublime sensory
+                experience with every bite. Experience the epitome of indulgence
+                with our perfectly tempered chocolate: velvety smooth,
+                exquisitely rich, and artfully balanced. Each bite offers a
+                symphony of nuanced cocoa flavors, melting luxuriously!
+              </p>
+            </AnimatedText>
           </div>
         </div>
       </section>
@@ -97,6 +122,9 @@ export default function HomePage() {
           In the Spotlight
         </div>
         <Spotlight />
+        {/* <a href='#' className='pill-button'>
+          Button Text
+        </a> */}
       </section>
     </div>
   );