Cars We Provide - Copy this React, Tailwind Component to your project

Import React, { useEffect } from 'react'; import Slider from 'react slick'; import AOS from 'aos'; import "slick carousel/slick/slick.css"; import "slick carousel/slick/slick theme.css"; import 'aos/dist/aos.css'; // Import AOS animation library const CarsWeProvide = () => { useEffect(() => { AOS.init({ duration: 1000, // Animation duration offset: 120, // Trigger point for the animation }); }, []); const vehicles = [ { name: 'Honda City', price: '₹2200 for 8 hours', image: '/assets/hondacity.png' }, { name: 'Crysta', price: '₹2500 for 8 hours', image: '/assets/crysta.png' }, { name: 'Dzire', price: '₹1800 for 8 hours', image: '/assets/dzire.png' }, { name: 'Inova', price: '₹2400 for 8 hours', image: '/assets/innova.png' }, { name: 'Etios', price: '₹2000 for 8 hours', image: '/assets/etios.png' }, ]; const settings = { dots: true, infinite: true, speed: 500, slidesToShow: 3, slidesToScroll: 1, autoplay: true, autoplaySpeed: 2000, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 2, slidesToScroll: 1, infinite: true, dots: true, } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }; return ( <div className="py 12 bg gray 100"> {/* Heading */} <h2 className="text center text 4xl font bold mb 8 relative z 10" data aos="fade up" > <span className="relative inline block"> <span className="bg gradient to r from yellow 400 to red 500 text transparent bg clip text"> Vehicles We Provide </span> <span className="absolute bottom 0 left 0 right 0 h 1 bg yellow 500 transform scale x 0 origin left transition transform duration 500"></span> </span> </h2> {/* Slider */} <Slider {...settings} className="px 6" data aos="fade up"> {vehicles.map((vehicle, index) => ( <div key={vehicle.name} className="p 4"> <div className="relative bg white rounded lg shadow lg p 4 flex flex col items center group transition transform transform hover:scale 105 hover:shadow 2xl" data aos="zoom in" data aos delay={`${index * 100}`} > <img className="w 48 h 32 object cover mb 4 rounded md shadow md" src={vehicle.image} alt={vehicle.name} /> <h3 className="text xl font bold mb 2 text gray 800">{vehicle.name}</h3> <p className="text lg font medium text gray 700 mb 4">{vehicle.price}</p> {/* Overlay and Book Now Button */} <div className="absolute inset 0 bg black bg opacity 70 flex justify center items center opacity 0 group hover:opacity 100 transition opacity duration 300"> <button className="bg green 500 hover:bg green 600 text white py 2 px 6 rounded full font bold transform scale 0 group hover:scale 100 transition transform duration 300 ease out"> Book Now </button> </div> </div> </div> ))} </Slider> </div> ); }; export default CarsWeProvide; improve the ui of this