Landing Page - Copy this React, Tailwind Component to your project

Make it better import React, { useState } from 'react'; import { motion } from 'framer motion'; import { FaCode, FaPalette, FaMobileAlt, FaSearch, FaRocket, FaCogs } from 'react icons/fa'; const ServiceBox = ({ icon: Icon, title, description }) => { const [isHovered, setIsHovered] = useState(false); return ( <motion.div className="bg white rounded lg shadow lg p 6 flex flex col items center justify center transition all duration 300 transform hover:scale 105 hover:shadow xl" whileHover={{ y: 5 }} onHoverStart={() => setIsHovered(true)} onHoverEnd={() => setIsHovered(false)} > <motion.div className="text 4xl mb 4 text indigo 600" animate={{ rotate: isHovered ? 360 : 0 }} transition={{ duration: 0.5 }} > <Icon /> </motion.div> <h3 className="text xl font bold mb 2 text gray 800">{title}</h3> <p className="text gray 600 text center">{description}</p> </motion.div> ); }; const ServicesShowcase = () => { const services = [ { icon: FaCode, title: 'Web Development', description: 'Crafting robust and scalable web applications with cutting edge technologies.' }, { icon: FaPalette, title: 'UI/UX Design', description: 'Creating intuitive and visually stunning user interfaces for seamless experiences.' }, { icon: FaMobileAlt, title: 'Mobile App Development', description: 'Building powerful and feature rich mobile applications for iOS and Android platforms.' }, { icon: FaSearch, title: 'SEO Optimization', description: 'Enhancing your online presence with data driven SEO strategies for maximum visibility.' }, { icon: FaRocket, title: 'Performance Optimization', description: 'Supercharging your applications for lightning fast performance and efficiency.' }, { icon: FaCogs, title: 'API Integration', description: 'Seamlessly connecting your systems with third party services for enhanced functionality.' } ]; return ( <div className="bg gradient to br from indigo 500 to purple 600 min h screen py 16 px 4 sm:px 6 lg:px 8"> <div className="max w 7xl mx auto"> <h2 className="text 4xl font extrabold text center text white mb 12 animate pulse"> Our Exceptional Services </h2> <div className="grid grid cols 1 sm:grid cols 2 lg:grid cols 3 gap 8"> {services.map((service, index) => ( <motion.div key={index} initial={{ opacity: 0, y: 50 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: index * 0.1 }} > <ServiceBox {...service} /> </motion.div> ))} </div> </div> </div> ); }; export default ServicesShowcase;