add framer-motion and react-intersection-observer dependency

components/LargeInfoSection.js

@@ -1,12 +1,39 @@
 /* eslint-disable @next/next/no-img-element */
-import React from 'react';
+import React, { useEffect } from 'react';
+import { motion, useAnimation } from 'framer-motion';
 import { useContextTheme } from './ThemeContext';
+import { useInView } from 'react-intersection-observer';
 
 function LargeInfoSection({ isLeftLayout }) {
   const { cardsBackgroundColor, theme } = useContextTheme();
+  const { ref, inView } = useInView({ threshold: 0.4 });
+  const animation = useAnimation();
+  useEffect(() => {
+    const isMobile = window.innerWidth < 768;
+    if (!isMobile) {
+      if (inView) {
+        animation.start({
+          x: 0,
+          visibility: 1,
+          transition: {
+            type: 'spring',
+            duration: 1,
+            bounce: 0,
+          },
+        });
+      } else {
+        animation.start({
+          x: isLeftLayout ? '-300px' : '300px',
+          visibility: 0,
+        });
+      }
+    }
+    return () => animation.stop();
+  }, [inView, animation, isLeftLayout]);
   return (
     <div
       className={`py-10 lg:p-20  mb-10 h-full flex flex-col lg:flex-row items-center w-full relative ${cardsBackgroundColor}`}
+      ref={ref}
     >
       <img
         alt="large-info-section"
@@ -15,13 +42,14 @@ function LargeInfoSection({ isLeftLayout }) {
         }`}
         src="/images/large-info-section.png"
       />
-      <div
+      <motion.div
+        animate={animation}
         className={`relative md:absolute flex flex-col w-full lg:w-5/12 h-11/12 py-12  lg:bg-gradient-to-r items-left from-transparent ${
           theme === 'dark' ? 'via-[#1A2525]' : 'via-white'
         } z-10 ${
           isLeftLayout
             ? `p-4 lg:pl-28 lg:pr-8 lg:right-20 from-transparent  ${
-                theme === 'dark' ? 'to-[#1A2525]' : 'to-white'
+                theme === 'dark' ? 'to-[#1A2525]' : ':to-white'
               }  lg:text-right lg:items-end`
             : `pl-0 lg:pl-8 pr-0 lg:pr-28 lg:left-20 ${
                 theme === 'dark' ? 'from-[#1A2525]' : 'from-white'
@@ -30,7 +58,7 @@ function LargeInfoSection({ isLeftLayout }) {
       >
         <p className="font-bold text-3xl">{'Laptops for Families'}</p>
         <hr
-          className={`h-1 bg-teal-medium lg:bg-gradient-to-r border-none rounded-md w-full my-1 group-hover:w-full ${
+          className={`h-1 bg-gradient-to-r border-none rounded-md w-full my-1 ${
             isLeftLayout
               ? 'from-transparent to-teal-medium'
               : 'from-teal-medium to-transparent '
@@ -66,7 +94,7 @@ function LargeInfoSection({ isLeftLayout }) {
             </button>
           </a>
         </div>
-      </div>
+      </motion.div>
     </div>
   );
 }

package.json

@@ -19,12 +19,14 @@
     "contentful": "^9.0.0",
     "daisyui": "^1.14.0",
     "firebase-admin": "^9.11.1",
+    "framer-motion": "^5.5.1",
     "next": "latest",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-google-maps": "^9.4.5",
     "react-icons": "^4.3.1",
+    "react-intersection-observer": "^8.33.0",
     "react-lottie": "^1.2.3",
     "stripe": "^8.168.0"
   },