<section class="bg-gray-100 py-8">
    <div class="container mx-auto px-6">
        <h2 class="text-3xl font-semibold mb-4">Featured Categories</h2>
        <div class="flex space-x-6 overflow-x-scroll no-scrollbar">
            <% if(locals.categories ) { %>
                <% categories.forEach(category=> { %> 
                    <div class="bg-white shadow-lg rounded-lg p-4 w-80">
                        <a href="/user/category/<%= category.id %>">
                            <img src="<%= category.image %>" alt="<%= category.name %>" class="h-24 w-full object-cover rounded-t-lg">
                            <h3 class="text-lg font-semibold mt-2">
                                <%= category.name %>
                            </h3>
                            <p class="text-gray-500">
                                <%= category.items %> items
                            </p>
                        </a>
                    </div>
                        <% }); %>
                        <% } else { %>
                            <p>No categories available</p>
                        <% } %>
            </div>
    </div>
</section>