import React from 'react'
import {motion} from "framer-motion"



const TextAnimation = () => {
    const textAnimation = {
        animate: {x: [0, -1000], transition: {x: {repeat: Infinity, repeatType: "loop", duration: 5, ease: "linear",},},},
      };

  return (
    <div className='w-full h-[30vh] md:h-[40vh] flex flex-col gap-10 md:gap-20 relative bg-[#68D2E8] rounded-t-3xl -mt-5'>
        <div className='mt-10 w-[100vw] max-w-[100%] overflow-x-hidden'>
          <motion.div className='absolute whitespace-nowrap' variants={textAnimation } animate="animate">
            <p className='mt-[30px] text-5xl md:text-9xl text-white font-bold tracking-wider uppercase overflow-hidden'>Donuts worry about things! Donuts worry about things! Donuts worry about things!</p>
          </motion.div>
      </div>
    </div>
  )
}

export default TextAnimation