fix rbuild

src/components/Steps.tsx

@@ -1,16 +1,10 @@
 'use client'
 
-import React, { useEffect, useMemo, useRef, useState } from 'react'
-import clsx from 'clsx'
-import { useInView } from 'framer-motion'
-import { Container } from '@/components/Container'
+import React, { useRef } from 'react'
+import { motion, useInView } from 'framer-motion'
 import { H2, P, CT, CP } from '@/components/Texts'
 import { TbCircleNumber1Filled, TbCircleNumber2Filled, TbCircleNumber3Filled } from 'react-icons/tb'
 
-
-
-
-
 const features = [
   {
     name: 'Choose Your Intelligence',
@@ -32,29 +26,45 @@ const features = [
 ]
 
 export function Steps() {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once: true });
+
   return (
-    <section id="benefits" className="bg-white pt-0 pb-24 dark:bg-gray-900">
+    <section id="benefits" ref={ref} className="bg-white pt-0 pb-24 dark:bg-gray-900">
       <div className="mx-auto max-w-7xl px-6 lg:px-0">
-        <div className="mx-auto max-w-5xl lg:mx-0">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+          transition={{ duration: 0.8, delay: 0.1 }}
+          className="mx-auto max-w-5xl lg:mx-0"
+        >
           <H2 className="text-3xl font-medium tracking-tight">
             Deploy Scalable LLMs and AI Agents in Seconds
           </H2>
           <P className="mt-6 text-lg" color="custom">
             Launch and scale intelligence on your own terms. Mycelium Cloud makes it simple to deploy models, integrate knowledge, and run everything on a network you control.
           </P>
-        </div>
-        <ul className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-          {features.map((feature) => (
-            <li
+        </motion.div>
+        <motion.ul
+          initial={{ opacity: 0 }}
+          animate={isInView ? { opacity: 1 } : { opacity: 0 }}
+          transition={{ duration: 0.5, delay: 0.2, staggerChildren: 0.2 }}
+          className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base/7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3"
+        >
+          {features.map((feature, index) => (
+            <motion.li
               key={feature.name}
+              initial={{ opacity: 0, y: 20 }}
+              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
+              transition={{ duration: 0.5, delay: 0.3 + index * 0.2 }}
               className="rounded-2xl border border-gray-200 p-8 dark:border-gray-700"
             >
               <feature.icon className="h-8 w-8 mb-4 text-[#2F3178]" />
               <CT as="span" className="font-semibold">{feature.name}</CT>
               <CP className="mt-2 text-sm" color="custom">{feature.description}</CP>
-            </li>
+            </motion.li>
           ))}
-        </ul>
+        </motion.ul>
       </div>
     </section>
   )