Enhanced Component - Copy this React, Tailwind Component to your project

<motion.div initial={{ opacity: 0, x: 10 }} whileInView={{ opacity: 1, x: 0 }} transition={{ duration: 0.6, delay: 0.6 }} className=" w [100%] md:w [50%] lg:w [45%] max md:absolute max md:z 10 max md:px 10 max md:py 20 max sm:py 10" > <span className="font jura text 4xl md:text 5xl lg:text 6xl xl:text [64px] font [600] tracking wide leading snug"> Our Mission </span> <br /> <span className="font montserrat text base lg:text base xl:text base max md:font [600] max md:tracking wide max md:leading relaxed "> We position ourselves to provide affordable IT solutions for all sorts of business sizes, so you don’t have to worry if you’re an SME. Our budget is tailored according to the size of your business. </span> <br /> <Button radius="full" size="sm" variant="ghost" className="border 1 border black hover:!bg transparent hover:scale 105 flex items center justify center" endContent={ICONS.arrow_right} > <div className=" py 4"> <span className="text base">Lets have a Chat</span> </div> </Button> </motion.div> ''' make this more cool and responsive to all screesns