Food What We Offer - Copy this React, Tailwind Component to your project

Export function FoodWhatWeOffer() { return ( <div className="bg white py 20"> <div className="w [90%] md:max w 7xl mx auto"> <h2 className="text center font bold text 3xl md:text 5xl text transparent bg clip text bg gradient to r from [#1E3A8A] to sky 600 mb 8"> What <span className="text green 600">We Offer</span> </h2> <div className="grid grid cols 4 gap 6"> <div className="bg blue 50"> <img src="/food_box.jpg" alt="food_box" className="w full" /> <div className="p 2"> <h2 className="font bold text green 600 text lg">Y&G Fresh</h2> <p> Our selection of farm fresh fruits and vegetables, handpicked for their quality and flavor, offering you the best that each season has to offer. </p> </div> </div> <div className="bg blue 50"> <img src="/food_box2.jpg" alt="food_box" className="w full" /> <div className="p 2"> <h2 className="font bold text green 600 text lg">Y&G Frozen</h2> <p> A premium range of frozen fruits and vegetables, RTEs that locks in freshness and nutrients, providing healthy, delicious options year round. </p> </div> </div> <div className="bg blue 50"> <img src="/food_box3.jpg" alt="food_box" className="w full" /> <div className="p 2"> <h2 className="font bold text green 600 text lg">Y&G Horticulture</h2> <p> Sustainable farming practices that ensure our produce is fresh, delicious, and grown with care for the environment. </p> </div> </div> <div className="bg blue 50"> <img src="/food_box4.jpg" alt="food_box" className="w full" /> <div className="p 2"> <h2 className="font bold text green 600 text lg">Y&G Value Adds</h2> <p> A variety of value added products, including pre cut veggies, mixed fruit packs, and gourmet dips, making healthy eating convenient and tasty. </p> </div> </div> </div> </div> </div> ) } please re desgin this component