Hero Section - Copy this React, Tailwind Component to your project

that's my button add to cart <button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-300"> Add to Cart </button> i want you to make disabled version for this button, make it compatible for this background: <div className={`bg-gray-800 rounded-lg overflow-hidden transform transition-all duration-300 ${ isHovered ? "scale-105 shadow-purple-500/50 shadow-lg" : "" }`} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)} > <div className="relative aspect-w-16 aspect-h-9"> <img src={product.imageUrl || "/default-product-image.jpg"} alt={product.name} className="object-cover w-full h-48" loading="lazy" /> <button onClick={handleToggleFavorite} className="absolute top-2 right-2 p-2 rounded-full bg-gray-800 bg-opacity-70 hover:bg-opacity-100 transition-all duration-300" > <FaHeart className={`w-5 h-5 ${product.favorite ? "text-red-500" : "text-gray-400"}`} /> </button> </div> <div className="p-4"> <h3 className="text-lg font-semibold text-white mb-2">{product.name}</h3> <div className="flex items-center justify-between mb-2"> <span className="text-purple-400 font-bold">${product.price}</span> <RatingStars rating={product.rating || 0} /> </div> <p className="text-gray-400 text-sm mb-4">{product.reviews || 0} reviews</p> <button className="w-full bg-purple-600 hover:bg-purple-700 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-300"> Add to Cart </button>