animation fixed in section

src/components/ui/FeatureStatsRow.tsx

@@ -1,4 +1,8 @@
+"use client";
+
+import { motion } from "framer-motion";
 import { MaterialIcon } from "./MaterialIcon";
+import { fadeUp, staggerContainer, viewport } from "@/lib/animations";
 
 type FeatureStatsItem = {
   icon: string;
@@ -13,11 +17,18 @@ type FeatureStatsRowProps = {
 
 export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps) {
   return (
-    <div className={`w-full py-6 md:py-8 ${className}`}>
+    <motion.div
+      className={`w-full py-6 md:py-8 ${className}`}
+      variants={staggerContainer}
+      initial="hidden"
+      whileInView="visible"
+      viewport={viewport}
+    >
       <div className="grid grid-cols-2 lg:flex lg:flex-row items-center justify-between gap-y-6 gap-x-4 lg:gap-0">
         {items.map((item, index) => (
-          <div
+          <motion.div
             key={item.title}
+            variants={fadeUp}
             className={`flex items-center gap-3.5 lg:flex-1 px-3 lg:px-8 text-left ${
               index < items.length - 1
                 ? "lg:border-r lg:border-[#6330D6]/10"
@@ -37,9 +48,9 @@ export function FeatureStatsRow({ items, className = "" }: FeatureStatsRowProps)
                 </p>
               )}
             </div>
-          </div>
+          </motion.div>
         ))}
       </div>
-    </div>
+    </motion.div>
   );
 }