{% if sectors|length > 0 %} <div class="container"> <p class="h3 text-center text-primary mb-0">Search by Sector</p> <div class="relative sector-slider-controls lg:border-secondary lg:border-b mb-8 lg:mb-12"> <div class="slider-80 overflow-x-hidden pt-8 pb-4 lg:pb-12 px-4"> <section class="slider"> <div class="sector-slider"> <div class="swiper-wrapper"> {% for sector in sectors %} <div class="swiper-slide"> <a class="w-full flex flex-col justify-center items-center bg-primary text-white py-6 px-8 text-center rounded-lg min-h-[155px]" href="{{ generatePath(app.request, sector.linkedPageId, {sector_slug: sector.slug}) }}"> <div class="text-5xl mb-2">{{ sector.icon|raw }}</div> <p class="font-light">{{ sector.title }}</p> </a> </div> {% endfor %} </div> </div> </section> </div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div>{% endif %}