    <section class="container pb-5 mb-2 mb-sm-3 mb-lg-4 mb-xl-5">
            <h2 class="text-center pb-2 pb-sm-3">{{ __('weeks_highlights.this_weeks_highlights') }}</h2>

            <!-- Nav pills -->
            <div class="row g-0 overflow-x-auto pb-2 pb-sm-3 mb-3">
                <div class="col-auto pb-1 pb-sm-0 mx-auto">
                    <ul class="nav nav-pills flex-nowrap text-nowrap">
                        <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#!">{{ __('weeks_highlights.best_sellers') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#!">{{ __('weeks_highlights.new_arrivals') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#!">{{ __('weeks_highlights.sale_items') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#!">{{ __('weeks_highlights.top_rated') }}</a>
                        </li>
                    </ul>
                </div>
            </div>

            <!-- Products grid -->
            <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-4 gy-md-5 pb-xxl-3">

                <!-- Item -->
                @foreach ($products as $key => $product)
                <div class="col mb-2 mb-sm-3 mb-md-0">
                     <x-home.product-card :product="$product" />
                     </div>
                @endforeach

            </div>
        </section>
