Metaversus

 <div className="flex justify-center items-center flex-col relative z-10">

    <motion.div 
      variants={staggerContainer} 
      initial="hidden" 
      whileInView="show" 
      viewport={{ once: false, amount: 0.25 }} 
      className={`${styles.innerWidth} mx-auto ${styles.flexCenter} flex-col`} 
    >

    {Array.from(title).map((letter, index) => ( 
      <motion.span variants={textVariant2} key={index}> 
        {letter === ' ' ? '\u00A0' : letter} 
      </motion.span> 
    ))}

  const [active, setActive] = useState("world-2");

  <motion.div 
    variants={fadeIn('right', 'spring', index * 0.5, 0.75)} 
    className={`relative ${ 
      active === id ? 'lg:flex-[3.5] flex-[10]' : 'lg:flex-[0.5] flex-[2]' 
    } flex items-center justify-center min-w-[170px] h-[700px] transition-[flex] duration-[0.7s] ease-out-flex cursor-pointer`} 
    onClick={() => handleClick(id)} 
  >

 {startingFeatures.map((feature, index) => ( 
            <StartSteps 
              key={feature} 
              number={`${index < 10 ? '0' : ''} ${index + 1}`} 
              text={feature} 
            /> 
          ))}