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

Open in your IDE?
  1. <section class="mx-4 {% if container is not defined %} lg:container {% endif %}mt-10 lg:mt-20">
  2.     <div class="flex flex-col gap-y-4 xs:flex-row items-center justify-between w-full text-center xs:text-start">
  3.         <div class="flex items-center gap-x-2 sm:gap-x-4">
  4.                     <span class="size-12 hidden xs:flex rounded-lg bg-white shadow-lg dark:bg-gray-800 flex-center">
  5.                         <svg class="size-7 text-gray-700 dark:text-gray-100">
  6.                        <use href="#squares"></use>
  7.                         </svg>
  8.                     </span>
  9.             <div class="space-y-1 md:space-y-1">
  10.                 {% set parts = title|split(' ') %}
  11.                 <h3 class="text-xl md:text-2xl font-MorabbaMedium text-gray-800 dark:text-gray-50">
  12.                     {{ parts|slice(0, parts|length - 1)|join(' ') }}
  13.                     <span class="text-blue-600 dark:text-blue-500">
  14.         {{ parts|last }}
  15.     </span>
  16.                 </h3>
  17.                 <p class="text-sm text-gray-500 dark:text-gray-300">{{ subtitle|default('') }}</p>
  18.             </div>
  19.         </div>
  20.         <div class="w-full xs:w-auto flex justify-between xs:justify-end  items-center gap-x-2">
  21.             <div class="flex items-center gap-x-2">
  22.                 <button class="slider-navigate_btn LatestProducts-prev-slide">
  23.                     <svg class="size-6 -rotate-90">
  24.                         <use href="#chevron"/>
  25.                     </svg>
  26.                 </button>
  27.                 <button class="slider-navigate_btn LatestProducts-next-slide">
  28.                     <svg class="size-6 rotate-90">
  29.                         <use href="#chevron"/>
  30.                     </svg>
  31.                 </button>
  32.             </div>
  33.             <a href="{{ path('app_shop_site_products') }}"
  34.                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">
  35.                 <p>مشاهده همه</p>
  36.                 <span
  37.                         class="w-7 h-7 rounded-full bg-blue-500 flex-center md:group-hover:-translate-x-1 transition-transform duration-300">
  38.                             <svg class="size-5">
  39.                                 <use href="#arrow"/>
  40.                             </svg>
  41.                         </span>
  42.             </a>
  43.         </div>
  44.     </div>
  45.     <div class="swiper LatestProducts mt-5 w-full">
  46.         <div class="swiper-wrapper py-5">
  47.             {% for product in products %}
  48.                 {% include getThemeDir('modules/cart-product.html.twig') with {'product' : product} %}
  49.             {% endfor %}
  50.         </div>
  51.     </div>
  52. </section>