Contact Form - Copy this React, Tailwind Component to your project

import { useEffect, useState } from "react"; const CustomerReview = () => { const [isVisible, setIsVisible] = useState(false); useEffect(() => { setTimeout(() => { setIsVisible(true); }, 300); }, []); const ratings = [ { stars: 5, percent: 83 }, { stars: 4, percent: 74 }, { stars: 3, percent: 45 }, { stars: 2, percent: 21 }, { stars: 1, percent: 8 }, ]; return ( <section className="p-10 flex flex-col gap-12 md:max-w-[1400px] md:mx-auto md:gap-32"> <div className="flex flex-col md:flex-row w-full justify-between items-start"> <div className="flex flex-col w-full md:w-1/2"> <h2 className="text-4xl font-bold">Customer Reviews</h2> <div className="flex flex-wrap items-center mt-4 mb-3 space-x-4"> {/* Dynamic stars can be added here if needed */} </div> <p className="text-lg text-gray-500">861 global ratings</p> </div> {/* Ratings Progress Bars */} <div className={`flex flex-col w-full md:w-1/2 transition-all transform duration-500 ease-out ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-6" }`} > {ratings.map((rating) => ( <div key={rating.stars} className="flex items-center space-x-4 mt-6"> <span className="flex-shrink-0 w-16 text-lg">{rating.stars} stars</span> <div className="flex-1 h-6 bg-gray-200 rounded-full overflow-hidden"> <div className="bg-yellow-500 h-6 transition-all duration-500" style={{ width: `${rating.percent}%` }} ></div> </div> <span className="flex-shrink-0 w-16 text-lg text-right">{rating.percent}%</span> </div> ))} </div> </div> </section> ); }; export default CustomerReview; This is CustomerReview.jsx. Change this completely. Looks absolutely despicable and amateurish