Added animation in feature section

hooks/useElementOnScreen.jsx

@@ -0,0 +1,30 @@
+import { useRef, useEffect, useState } from "react";
+
+const useElementOnScreen = (options) => {
+    const containerRef = useRef(null);
+    const [isVisible, setIsVisible] = useState(false);
+
+    const callbackFunction = (entries) => {
+        const [entry] = entries;
+        setIsVisible(entry.isIntersecting);
+    };
+
+    useEffect(() => {
+        const observer = new IntersectionObserver(callbackFunction, options);
+        const currentRef = containerRef.current;
+
+        if (currentRef) {
+            observer.observe(currentRef);
+        }
+
+        return () => {
+            if (currentRef) {
+                observer.unobserve(currentRef);
+            }
+        };
+    }, [options]);
+
+    return [containerRef, isVisible];
+};
+
+export default useElementOnScreen;

pages/index.js

@@ -21,6 +21,7 @@ import ThemedImage from "@components/ThemedImage";
 import { serverEnv } from "@config/schemas/serverSchema";
 import { PROJECT_NAME } from "@constants/index";
 import Button from "@components/Button";
+import useElementOnScreen from "../hooks/useElementOnScreen.jsx";
 
 export async function getStaticProps() {
   const pageConfig = config.isr.homepage;
@@ -160,6 +161,12 @@ export default function Home({
     },
   ];
 
+  const featureRefs = featuresDetails.map(() => useElementOnScreen({
+    root: null,
+    rootMargin: "0px",
+    threshold: 0.4,
+  }));
+
   return (
     <>
       <PageHead />
@@ -275,15 +282,21 @@ export default function Home({
           <div className="mt-16 mb-8 space-y-16">
             {featuresDetails.map((feature, featureIdx) => (
               <div
+                ref={featureRefs[featureIdx][0]}
                 key={feature.name}
-                className="flex flex-col-reverse lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
+                className="flex flex-col-reverse overflow-x-hidden lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
               >
                 <div
                   className={classNames(
                     featureIdx % 2 === 0
-                      ? "lg:col-start-1"
-                      : "lg:col-start-8 xl:col-start-9",
-                    "mt-6 lg:mt-0 lg:row-start-1 lg:col-span-5 xl:col-span-4",
+                    ? "lg:col-start-1 mt-6 lg:mt-0"
+                    : "lg:col-start-8 xl:col-start-9",
+                  featureRefs[featureIdx][1] && featureIdx % 2 === 0
+                    ? "animate-fade-right"
+                    : featureRefs[featureIdx][1] && featureIdx % 2 !== 0
+                    ? "animate-fade-left"
+                    : "",
+                  "opacity-0 lg:row-start-1 lg:col-span-5 xl:col-span-4"
                   )}
                 >
                   <h3 className="text-lg sm:text-2xl font-bold text-primary-low">
@@ -299,12 +312,17 @@ export default function Home({
                   )}
                 </div>
                 <div
-                  className={classNames(
-                    featureIdx % 2 === 0
-                      ? "lg:col-start-6 xl:col-start-5"
-                      : "lg:col-start-1",
-                    "flex-auto lg:row-start-1 lg:col-span-7 xl:col-span-8",
-                  )}
+                      className={classNames(
+                        featureIdx % 2 === 0
+                          ? "lg:col-start-6 xl:col-start-5"
+                          : "lg:col-start-1",
+                        featureRefs[featureIdx][1] && featureIdx % 2 === 0
+                          ? "animate-fade-left"
+                          : featureRefs[featureIdx][1] && featureIdx % 2 !== 0
+                          ? "animate-fade-right"
+                          : "",
+                        "flex-auto lg:row-start-1 opacity-0 lg:col-span-7 xl:col-span-8"
+                    )}
                 >
                   <div className="aspect-w-5 aspect-h-2 overflow-hidden rounded-lg bg-primary-low relative">
                     <ThemedImage

tailwind.config.js

@@ -35,6 +35,33 @@ module.exports = {
           high: "#770d14",
         },
       },
+      keyframes: {
+        "fade-left": {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(100px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+        "fade-right": {
+          "0%": {
+            opacity: "0",
+            transform: "translateX(-100px)",
+          },
+          "100%": {
+            opacity: "1",
+            transform: "translateX(0)",
+          },
+        },
+      },
+      animation: {
+        "fade-left": "fade-left 0.5s both",
+        "fade-right": "fade-right 0.5s both",
+      },
+
     },
   },
   corePlugins: {