Ptrboro
commented
2 weeks ago I asked Claude to design this page, I think it did a pretty good job:
Here is the HTML you can use but if you have a better idea how to implement this feel free to do it your way 👍
<div class="container mx-auto px-4 py-8">
<h1 class="text-3xl font-bold text-gray-800 mb-6">Planty Marketplace</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Plant Offer 1 -->
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover"
src="/assets/plant_1-8f2c7919d6f57e04d8d553f98e93639ad7aaf67667188bc2ea3de043f5c7bbad.jpeg"
alt="Monstera Deliciosa">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-2">Monstera Deliciosa</h2>
<p class="text-gray-600 mb-4">A beautiful, large-leafed plant perfect for bringing a tropical feel to your
home.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-green-600">$45</span>
<button class="btn btn-primary">View Offer</button>
</div>
</div>
</div>
<!-- Plant Offer 2 -->
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover"
src="/assets/plant_1-8f2c7919d6f57e04d8d553f98e93639ad7aaf67667188bc2ea3de043f5c7bbad.jpeg" alt="Snake Plant">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-2">Snake Plant</h2>
<p class="text-gray-600 mb-4">Low-maintenance plant known for its air-purifying qualities. Perfect for
beginners!</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-green-600">$30</span>
<button class="btn btn-primary">View Offer</button>
</div>
</div>
</div>
<!-- Plant Offer 3 -->
<div class="bg-white shadow-lg rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover"
src="/assets/plant_1-8f2c7919d6f57e04d8d553f98e93639ad7aaf67667188bc2ea3de043f5c7bbad.jpeg"
alt="Fiddle Leaf Fig">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-2">Fiddle Leaf Fig</h2>
<p class="text-gray-600 mb-4">Trendy plant with large, violin-shaped leaves. Great as a statement piece.</p>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-green-600">$60</span>
<button class="btn btn-primary">View Offer</button>
</div>
</div>
</div>
</div>
<div class="mt-8 flex justify-center">
<nav class="inline-flex rounded-md shadow">
<a href="#"
class="px-3 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
Previous
</a>
<a href="#"
class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
1
</a>
<a href="#"
class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
2
</a>
<a href="#"
class="px-3 py-2 border-t border-b border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
3
</a>
<a href="#"
class="px-3 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
Next
</a>
</nav>
</div>
</div>
While in https://github.com/Tomaszabc/Plants/issues/21 we implemented a list of all listings added by currently logged in user, now we want to have a page for other users to browse all available listings.
Add a new MarketplaceController with index action. It should display a paginated list of all available plants to trade. Add a link to "Market" link in the top-nav so it opens this new page.