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

can you make this component more amazing and beautiful import RotatingText from '@/components/ui/RotatingText'; const Text = () => { return ( <div className="flex flex-col items-center justify-center text-center space-y-3 sm:space-y-4 relative group"> {/* Decorative elements */} <div className="absolute -inset-4 rounded-2xl bg-gradient-to-r from-green-400/10 to-emerald-400/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" /> <div className="absolute inset-0 border border-green-400/20 rounded-2xl scale-95 group-hover:scale-100 transition-transform duration-500" /> {/* Upper text */} <p className="text-gray-400/80 text-lg sm:text-xl font-medium tracking-wider transform group-hover:-translate-y-0.5 transition-all duration-300"> We are dedicated </p> {/* Main Text */} <div className="flex items-center justify-center space-x-3 sm:space-x-4 text-3xl sm:text-4xl font-bold"> <span className="text-gray-200 font-light opacity-90 group-hover:opacity-100 transition-opacity duration-300"> To </span> <RotatingText texts={['Design', 'Develop', 'Deliver']} mainClassName="px-4 py-1.5 sm:px-5 sm:py-2 bg-gradient-to-br from-green-300 to-emerald-500 text-black rounded-lg shadow-2xl shadow-emerald-500/20 hover:shadow-emerald-500/30 transition-all duration-300 group-hover:-translate-y-0.5" staggerFrom="last" initial={{ y: "120%", opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: "-120%", opacity: 0 }} staggerDuration={0.03} splitLevelClassName="overflow-hidden pb-1" transition={{ type: "spring", damping: 25, stiffness: 350, mass: 0.5 }} rotationInterval={2200} textClassName="hover:scale-[1.02] transition-transform duration-300" /> </div> {/* Animated underline */} <div className="w-24 h-1 bg-gradient-to-r from-green-400/0 via-emerald-400 to-green-400/0 opacity-50 group-hover:opacity-80 transition-opacity duration-300" /> </div> ); }; export default Text;