From 04c1ca729214962ca35e93fa0412dd93251727ee Mon Sep 17 00:00:00 2001
From: monilprajapati <monillprajapatii@gmail.com>
Date: Thu, 1 Feb 2024 21:24:00 +0530
Subject: [PATCH 1/3] Added animation in feature section

---
 components/useElementOnScreen.jsx | 30 ++++++++++++++++++
 pages/index.js                    | 52 ++++++++++++++++++++++++-------
 tailwind.config.js                | 27 ++++++++++++++++
 3 files changed, 97 insertions(+), 12 deletions(-)
 create mode 100644 components/useElementOnScreen.jsx

diff --git a/components/useElementOnScreen.jsx b/components/useElementOnScreen.jsx
new file mode 100644
index 00000000000..1b3d64441bb
--- /dev/null
+++ b/components/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;
diff --git a/pages/index.js b/pages/index.js
index f5401ec0319..7a4c16e80e9 100644
--- a/pages/index.js
+++ b/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 "@components/useElementOnScreen";
 
 export async function getStaticProps() {
   const pageConfig = config.isr.homepage;
@@ -160,6 +161,14 @@ export default function Home({
     },
   ];
 
+  const featureRefs = featuresDetails.map(() => {
+    return useElementOnScreen({
+      root: null,
+      rootMargin: "0px",
+      threshold: 0.4,
+    });
+  });
+
   return (
     <>
       <PageHead />
@@ -275,16 +284,26 @@ 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(
+                  className={`
+                  ${
                     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 ${
+                          featureRefs[featureIdx][1]
+                            ? "animate-fade-right"
+                            : ""
+                        }`
+                      : `lg:col-start-8 xl:col-start-9 ${
+                          featureRefs[featureIdx][1]
+                            ? "animate-fade-left"
+                            : ""
+                        }`
+                  }
+                  mt-6 lg:mt-0 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">
                     {feature.name}
@@ -299,12 +318,21 @@ 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={`
+                    ${
+                      featureIdx % 2 === 0
+                        ? `lg:col-start-6 xl:col-start-5 ${
+                            featureRefs[featureIdx][1]
+                              ? "animate-fade-left"
+                              : ""
+                          }`
+                        : `lg:col-start-1 ${
+                            featureRefs[featureIdx][1]
+                              ? "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
diff --git a/tailwind.config.js b/tailwind.config.js
index 936c775b246..dd5d86ff97d 100644
--- a/tailwind.config.js
+++ b/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: {

From 7336feba9d91bd413c984c3d30a79102c9f00a49 Mon Sep 17 00:00:00 2001
From: monilprajapati <monillprajapatii@gmail.com>
Date: Wed, 3 Apr 2024 15:26:04 +0530
Subject: [PATCH 2/3] Animation feature: Made some required changes

---
 {components => hooks}/useElementOnScreen.jsx |  0
 pages/index.js                               | 48 ++++++++++----------
 2 files changed, 23 insertions(+), 25 deletions(-)
 rename {components => hooks}/useElementOnScreen.jsx (100%)

diff --git a/components/useElementOnScreen.jsx b/hooks/useElementOnScreen.jsx
similarity index 100%
rename from components/useElementOnScreen.jsx
rename to hooks/useElementOnScreen.jsx
diff --git a/pages/index.js b/pages/index.js
index 7a4c16e80e9..3a2224bcb60 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -21,7 +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 "@components/useElementOnScreen";
+import useElementOnScreen from "../hooks/useElementOnScreen.jsx";
 
 export async function getStaticProps() {
   const pageConfig = config.isr.homepage;
@@ -161,13 +161,11 @@ export default function Home({
     },
   ];
 
-  const featureRefs = featuresDetails.map(() => {
-    return useElementOnScreen({
-      root: null,
-      rootMargin: "0px",
-      threshold: 0.4,
-    });
-  });
+  const featureRefs = featuresDetails.map(() => useElementOnScreen({
+    root: null,
+    rootMargin: "0px",
+    threshold: 0.4,
+  }));
 
   return (
     <>
@@ -289,7 +287,7 @@ export default function Home({
                 className="flex flex-col-reverse overflow-x-hidden lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
               >
                 <div
-                  className={`
+                  className={classNames(`
                   ${
                     featureIdx % 2 === 0
                       ? `lg:col-start-1 ${
@@ -303,7 +301,7 @@ export default function Home({
                             : ""
                         }`
                   }
-                  mt-6 lg:mt-0 opacity-0 lg:row-start-1 lg:col-span-5 xl:col-span-4`}
+                  mt-6 lg:mt-0 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">
                     {feature.name}
@@ -318,21 +316,21 @@ export default function Home({
                   )}
                 </div>
                 <div
-                  className={`
-                    ${
-                      featureIdx % 2 === 0
-                        ? `lg:col-start-6 xl:col-start-5 ${
-                            featureRefs[featureIdx][1]
-                              ? "animate-fade-left"
-                              : ""
-                          }`
-                        : `lg:col-start-1 ${
-                            featureRefs[featureIdx][1]
-                              ? "animate-fade-right"
-                              : ""
-                          }`
-                    }
-                    flex-auto lg:row-start-1 opacity-0 lg:col-span-7 xl:col-span-8`}
+                  className={classNames(`
+                  ${
+                    featureIdx % 2 === 0
+                      ? `lg:col-start-6 xl:col-start-5 ${
+                          featureRefs[featureIdx][1]
+                            ? "animate-fade-left"
+                            : ""
+                        }`
+                      : `lg:col-start-1 ${
+                          featureRefs[featureIdx][1]
+                            ? "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

From 6981ce9719adbea166276530c6212086f3f3dccf Mon Sep 17 00:00:00 2001
From: monilprajapati <monillprajapatii@gmail.com>
Date: Sun, 14 Apr 2024 00:50:48 +0530
Subject: [PATCH 3/3] Changed the ternaries with classNames() method

---
 pages/index.js | 50 +++++++++++++++++++++-----------------------------
 1 file changed, 21 insertions(+), 29 deletions(-)

diff --git a/pages/index.js b/pages/index.js
index 3a2224bcb60..379396d2beb 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -287,21 +287,17 @@ export default function Home({
                 className="flex flex-col-reverse overflow-x-hidden lg:grid lg:grid-cols-12 lg:items-center lg:gap-x-8"
               >
                 <div
-                  className={classNames(`
-                  ${
+                  className={classNames(
                     featureIdx % 2 === 0
-                      ? `lg:col-start-1 ${
-                          featureRefs[featureIdx][1]
-                            ? "animate-fade-right"
-                            : ""
-                        }`
-                      : `lg:col-start-8 xl:col-start-9 ${
-                          featureRefs[featureIdx][1]
-                            ? "animate-fade-left"
-                            : ""
-                        }`
-                  }
-                  mt-6 lg:mt-0 opacity-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">
                     {feature.name}
@@ -316,21 +312,17 @@ export default function Home({
                   )}
                 </div>
                 <div
-                  className={classNames(`
-                  ${
-                    featureIdx % 2 === 0
-                      ? `lg:col-start-6 xl:col-start-5 ${
-                          featureRefs[featureIdx][1]
-                            ? "animate-fade-left"
-                            : ""
-                        }`
-                      : `lg:col-start-1 ${
-                          featureRefs[featureIdx][1]
-                            ? "animate-fade-right"
-                            : ""
-                        }`
-                  }
-                  flex-auto lg:row-start-1 opacity-0 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