public/themes/karen/modules/brand-bar.html.twig line 1

Open in your IDE?
  1. {% set brands = getPostTypesOnTheme('brands') %}
  2.         {% if brands|length > 0 %}
  3.             <section class="mx-4 lg:container mt-10 lg:mt-20">
  4.                 <div class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">
  5.                     <div class="flex items-center gap-x-2 sm:gap-x-4">
  6.                     <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">
  7.                         <svg class="size-7 text-gray-700 dark:text-gray-100">
  8.                             <use href="#check-badge"></use>
  9.                         </svg>
  10.                     </span>
  11.                         <div class="space-y-1 md:space-y-1">
  12.                             <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">
  13.                                 محبوب‌ترین
  14.                                 <span class="text-blue-600 dark:text-blue-500">برندها</span>
  15.                             </h3>
  16.                             <p class="text-sm text-gray-500 dark:text-gray-300">جدیدترین و بروزترین برندها</p>
  17.                         </div>
  18.                     </div>
  19.                     <div class="w-full xs:w-auto flex justify-between xs:justify-end  items-center gap-x-2">
  20.                         <div class="flex items-center gap-x-2">
  21.                             <button class="slider-navigate_btn brand-prev-slide">
  22.                                 <svg class="size-6 -rotate-90">
  23.                                     <use href="#chevron"/>
  24.                                 </svg>
  25.                             </button>
  26.                             <button class="slider-navigate_btn brand-next-slide">
  27.                                 <svg class="size-6 rotate-90">
  28.                                     <use href="#chevron"/>
  29.                                 </svg>
  30.                             </button>
  31.                         </div>
  32.                         <a href="{{ path('app_shop_site_products') }}"
  33.                            class="group shadow-xl text-sm md:text-base flex gap-x-1.5 items-center px-2 h-10 md:px-3 text-white bg-blue-600 rounded-xl">
  34.                             <p>مشاهده همه</p>
  35.                             <span
  36.                                     class="w-7 h-7 rounded-full bg-blue-500 flex-center md:group-hover:-translate-x-1 transition-transform duration-300">
  37.                             <svg class="size-5">
  38.                                 <use href="#arrow"/>
  39.                             </svg>
  40.                         </span>
  41.                         </a>
  42.                     </div>
  43.                 </div>
  45.                 <div class="swiper BrandSlider mt-5 w-full">
  46.                     <div class="swiper-wrapper py-5 w-full">
  47.                         {% for item in brands %}
  48.                         <div class="swiper-slide brand-card group">
  49.                             <img src="{{ getPostTypeMetaOnTheme(item , 'image') }}" alt="{{ getPostTypeMetaOnTheme(item , 'title') }}">
  50.                         </div>
  51.                         {% endfor %}
  52.                     </div>
  53.                 </div>
  54.             </section>
  55.         {% endif %}