Code Detail
Prompt
Quero um aplicativo completo e moderno
de supermercado, igual o do gBarbosa já com as imagens e preços ilustrativos
Generated Result
import React from 'react'; const App = () => { return ( <div className="App bg-gray-100 min-h-screen"> <header className="bg-green-600 text-white p-6"> <h1 className="text-3xl font-bold">Supermarket App</h1> </header> <main className="p-6"> <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$10.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$15.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$20.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> </section> <section className="mt-12"> <h2 className="text-2xl font-bold mb-6">Featured Products</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$25.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$30.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$35.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$40.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> </div> </section> <section className="mt-12"> <h2 className="text-2xl font-bold mb-6">Special Offers</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$45.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$50.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$55.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> </div> </section> <section className="mt-12"> <h2 className="text-2xl font-bold mb-6">New Arrivals</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$60.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$65.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$70.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$75.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> </div> </section> <section className="mt-12"> <h2 className="text-2xl font-bold mb-6">Best Sellers</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$80.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$85.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <img src="https://placehold.co/300x300" alt="Product" className="w-full h-48 object-cover rounded-md" /> <h2 className="text-xl font-semibold mt-4">Product Name</h2> <p className="text-gray-600">$90.00</p> <button className="mt-4 bg-green-600 text-white px-4 py-2 rounded-md hover:bg-green-700">Add to Cart</button> </div> </div> </section> <section className="mt-12"> <h2 className="text-2xl font-bold mb-6">Customer Reviews</h2> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="bg-white p-6 rounded-lg shadow-lg"> <h2 className="text-xl font-semibold">John Doe</h2> <p className="text-gray-600">Great products and fast delivery!</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h2 className="text-xl font-semibold">Jane Smith</h2> <p className="text-gray-600">Excellent customer service!</p> </div> <div className="bg-white p-6 rounded-lg shadow-lg"> <h2 className="text-xl font-semibold">Mike Johnson</h2> <p className="text-gray-600">High-quality products at affordable prices.</p> </div> </div> </section> </main> <footer className="bg-green-600 text-white p-6 mt-12"> <p className="text-center">© 2025 Supermarket App. All rights reserved.</p> </footer> </div> ); }; export default App;