modification of scroll effect on faq section

templates/landing-page/model2/src/app/root/pages/faq.tsx

@@ -3,8 +3,22 @@ import { PageComponent } from "rasengan";
 import teams from "@/assets/images/teams.png";
 import cloud from "@/assets/images/cloud.png";
 import analytics from "@/assets/images/analytics.png";
+import { motion } from "framer-motion";
 
 const Faq: PageComponent = () => {
+  const sectionVariants = {
+    hidden: { opacity: 0, translateY: 20 },
+    visible: { opacity: 1, translateY: 0 },
+  };
+  // Parent container for staggered animations
+  const containerVariants = {
+    hidden: {},
+    visible: {
+      transition: {
+        staggerChildren: 0.3, // Delay each child animation by 0.3 seconds
+      },
+    },
+  };
   return (
     <section id="faq" className="bg-custom-gradient-2">
       <div className="flex flex-col items-center text-center gap-6 px-4 pt-8 lg:flex-row lg:justify-between lg:items-start lg:text-left lg:px-[130px] lg:pt-[130px]">
@@ -23,8 +37,18 @@ const Faq: PageComponent = () => {
       </div>
 
       <div className="pt-12 px-4 lg:px-[130px]">
-        <div className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3">
-          <div className="flex flex-col items-center text-center">
+        <motion.div
+          className="grid grid-cols-1 gap-10 md:grid-cols-2 lg:grid-cols-3"
+          variants={containerVariants}
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, amount: 0.3 }}
+        >
+          <motion.div
+            className="flex flex-col items-center text-center"
+            variants={sectionVariants}
+            transition={{ duration: 0.7, ease: "easeInOut" }}
+          >
             <img
               src={teams}
               alt="Collaboration Teams"
@@ -36,9 +60,13 @@ const Faq: PageComponent = () => {
             <p className="text-[#A6A6A6] text-sm md:text-base mt-2">
               Handle projects together with your team virtually.
             </p>
-          </div>
+          </motion.div>
 
-          <div className="flex flex-col items-center text-center">
+          <motion.div
+            className="flex flex-col items-center text-center"
+            variants={sectionVariants}
+            transition={{ duration: 0.7, ease: "easeInOut" }}
+          >
             <img
               src={cloud}
               alt="Cloud Storage"
@@ -50,9 +78,13 @@ const Faq: PageComponent = () => {
             <p className="text-[#A6A6A6] text-sm md:text-base mt-2">
               No need to worry about storage as we provide up to 2 TB.
             </p>
-          </div>
+          </motion.div>
 
-          <div className="flex flex-col items-center text-center">
+          <motion.div
+            className="flex flex-col items-center text-center"
+            variants={sectionVariants}
+            transition={{ duration: 0.7, ease: "easeInOut" }}
+          >
             <img
               src={analytics}
               alt="Daily Analytics"
@@ -64,8 +96,8 @@ const Faq: PageComponent = () => {
             <p className="text-[#A6A6A6] text-sm md:text-base mt-2">
               Get useful information daily to make your work easier.
             </p>
-          </div>
-        </div>
+          </motion.div>
+        </motion.div>
       </div>
     </section>
   );