public/themes/karen/modules/categories.html.twig line 1

Open in your IDE?
  1. {% set productCategories = getProductCategories() %}
  2.         {% if productCategories|length > 0 %}
  3.             <section class="mx-4 lg:container mt-20">
  5.                 <div
  6.                         class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">
  7.                     <div class="flex items-center gap-x-2 sm:gap-x-4">
  8.                     <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">
  9.                         <svg class="size-7 text-gray-700 dark:text-gray-100">
  10.                             <use href="#squares"></use>
  11.                         </svg>
  12.                     </span>
  13.                         <div class="space-y-1 md:space-y-1">
  14.                             <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">دسـته
  15.                                 بندی
  16.                                 هـای
  17.                                 <span class="text-blue-600 dark:text-blue-500">محبوب</span>
  18.                             </h3>
  19.                             <p class="text-sm text-gray-500 dark:text-gray-300">جدیدترین و بروزترین دسته بندی ها</p>
  20.                         </div>
  21.                     </div>
  22.                     <div class="w-full xs:w-auto flex justify-center items-center gap-x-2">
  23.                         <a href="{{ path('app_shop_site_products') }}"
  24.                            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">
  25.                             <p>مشاهده همه</p>
  26.                             <span
  27.                                     class="w-7 h-7 rounded-full bg-blue-500 flex-center md:group-hover:-translate-x-1 transition-transform duration-300">
  28.                             <svg class="size-5">
  29.                                 <use href="#arrow"/>
  30.                             </svg>
  31.                         </span>
  32.                         </a>
  33.                     </div>
  34.                 </div>
  36.                 <div class="flex items-center justify-evenly flex-wrap mt-12 child:mb-8 gap-x-8 child:items-center child:flex-col child:duration-300 child:cursor-pointer child:gap-y-1 child:text-gray-800 child:dark:text-gray-300 child:relative">
  37.             {% for category in productCategories %}
  38.                     <a href="{{ path('app_shop_site_product_category' , {'urlSlug' : category.urlSlug}) }}" class="group flex">
  39.                         <img src="{{ category.imageUrl }}"
  40.                              class="w-[100px] h-[100px] lg:w-[120px] lg:h-[120px] object-cover group-hover:grayscale group-hover:opacity-90 duration-300"
  41.                              alt="category1"/>
  42.                         <p class="pt-1 text-sm lg:text-lg line-clamp-1">
  43.                             {{ category.name }}
  44.                         </p>
  45.                     </a>
  46.             {% endfor %}
  47.                 </div>
  48.             </section>
  49.         {% endif %}