{{ partial:partials.navbar.navbarBlog }}
<main>
    <!-- Section 1 -->
    <section id="section-1">
        <div class="flex flex-col w-full">
            <div class="bg-gray-100 h-[240px] flex items-center">
                <div class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full">
                    <h1
                        class="text-[40px] md:text-[70px] xl:text-[80px] font-bold text-black px-10"
                    >
                        {{title}}
                    </h1>
                </div>
            </div>
            <article
                class="max-w-3xl lg:max-w-5xl xl:max-w-7xl mx-auto w-full pt-[25px] lg:pt-[46px] px-10 pb-[40px]"
            >
                <div class="mb-8">{{partial:breadcrumbs}}</div>
                <div class="flex flex-col gap-2">
                    {{ taxonomy:product_categories }}{{entries paginate="10"
                    as="posts" }} {{posts}}
                    <div class="flex flex-col gap-2">
                        <a href="{{url}}" class="p-3 border-2 rounded">
                            <h4 class="text-base">{{title}}</h4>
                        </a>
                        <!--  -->
                    </div>
                    {{/posts}} {{/entries}} {{ paginate }}
                    {{partial:pagination}} {{ /paginate }}

                    <!--  -->
                    {{ /taxonomy:product_categories }}
                </div>
            </article>
        </div>
    </section>
</main>