The categories slowly transform in.

Zoom for collections updated.

src/app/globals.css

@@ -105,8 +105,31 @@ body {
   @apply transition-[opacity,transform] duration-700 ease-out;
 }
 .zoom.pre {
-  @apply opacity-0 scale-95;
+  opacity: 0;
+  transform: scale(1.05);
 }
 .zoom.post {
-  @apply opacity-100 scale-100;
+  opacity: 1;
+  transform: scale(1);
+}
+
+.fadeImage {
+  /* scale: 0.8;
+  opacity: 0.2; */
+  animation: fadeInKf linear forwards;
+  animation-timeline: view();
+  /* animation-range-start: contain;
+animation-range-end: contain; */
+  /* animation-range: entry 100px; */
+}
+
+@keyframes fadeInKf {
+  from {
+    scale: 0.8;
+    opacity: 0.2;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
 }

src/components/animated-link.tsx

@@ -0,0 +1,41 @@
+'use client';
+import React from 'react';
+import { ReactNode } from 'react';
+import useInView from '@/hooks/useInView';
+
+interface AnimatedLiProps {
+  children: ReactNode;
+  className?: string;
+  startClass?: string;
+  finishClass?: string;
+  threshold?: number;
+  // Additional props if needed
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+}
+
+export function AnimatedLi({
+  children,
+  className = '',
+  startClass,
+  finishClass,
+  threshold,
+  ...props
+}: AnimatedLiProps) {
+  const [ref, isVisible] = useInView({
+    threshold: threshold ?? 0.1,
+    triggerOnce: true,
+  });
+
+  return (
+    <li
+      ref={ref as unknown as React.RefObject<HTMLLIElement>}
+      className={`transition-[opacity, transform] ease-out duration-1000 ${
+        isVisible ? 'opacity-100' : 'opacity-0'
+      }  ${isVisible ? finishClass : startClass}  ${className}`}
+      {...props}
+    >
+      {children}
+    </li>
+  );
+}

src/components/category-slider.tsx

@@ -2,6 +2,7 @@
 import { useState } from 'react';
 import Image from 'next/image';
 import styles from './category-slider.module.css';
+import { AnimatedLi } from './animated-link';
 
 const categories = [
   { name: 'Bars', image: '/images/categories/bars.jpg' },
@@ -14,15 +15,19 @@ const categories = [
 
 export function ChocolateCategories() {
   const [currentImage, setCurrentImage] = useState(categories[0].image);
+  const startClass = 'translate-x-8';
+  const finishClass = 'translate-x-0 delay-300';
 
   return (
     <section className='flex flex-col md:flex-row bg-white py-12 px-4 sm:px-6 lg:px-8'>
       <ul className='w-full md:w-1/2 bg-white h-auto m-8 space-y-10 text-[#5a352a] text-left'>
         {categories.map((category) => (
-          <li
+          <AnimatedLi
             key={category.name}
             onMouseEnter={() => setCurrentImage(category.image)}
             className='hover:text-[#c19a6b] cursor-pointer font-montera font-normal text-s-headline'
+            startClass={startClass}
+            finishClass={finishClass}
           >
             <img
               className={styles.productImage}
@@ -30,7 +35,7 @@ export function ChocolateCategories() {
               src={category.image}
             />
             <span>{category.name}</span>
-          </li>
+          </AnimatedLi>
         ))}
       </ul>
 

src/components/our-collection.tsx

@@ -17,19 +17,18 @@ const collections = [
 
 export function Collections() {
   return (
-    <div className='flex flex-row max-w-7xl mx-auto grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3'>
+    <div className='flex flex-col md:flex-row justify-center items-center gap-6'>
       {collections.map((collection, index) => (
-        <div
+        <div key={index} className='basis-1/3'>
-          key={index}
+          <div className='overflow-hidden'>
-          className='block rounded-lg overflow-hidden shadow-lg bg-white transition transform hover:scale-105 duration-300'
+            <Image
-        >
+              src={collection.image}
-          <Image
+              alt={collection.title}
-            src={collection.image}
+              width={500}
-            alt={collection.title}
+              height={300}
-            width={500}
+              className='w-full h-auto object-cover transition transform hover:scale-110 duration-[1400ms] linear'
-            height={300}
+            />
-            className='w-full h-auto object-cover'
+          </div>
-          />
           <div className='p-4'>
             <h3 className='text-center font-light'>{collection.title}</h3>
           </div>