templates/includes/blocks/swipeSection.html.twig line 1

Open in your IDE?
  1. {% import "./macros_typography.html.twig" as macrosTypography %}
  2. {% import "./macros_button.html.twig" as macrosButton %}
  4. {% set background = content.bagroundSection %}
  6. <section
  7.   class="swipe-section relative {{ background == 'white' ? 'bg-gray text-blue' : 'bg-blue text-white'}} cursor-section"
  8.   section-shade="{{background == 'white' ? 'light' : 'dark'}}">
  9.   {% if content.swipeSectionTitle %}
  10.   <div class="container pt-10 md:pt-[90px]">
  11.     <h2 class="h2 md:text-center max-w-2xl mx-auto mb-10 md:mb-20"
  12.       split-direction="top"
  13.       split-trigger="scroll">{{content.swipeSectionTitle}}</h2>
  14.   </div>
  15.   {% endif %}
  16.  
  17.   {# swipe Slider #}
  18.   <div class="swipe-slider swiper-container w-full">
  19.     <div class="swiper-wrapper divide-x {{ background == 'white' ? 'divide-blue/10' : 'divide-white/10'}}">
  20.       {% for slide in content.similarProjects %}
  21.       {% set item = sulu_content_load(slide.similarProject,{'id': 'id'}) %}
  22.       {% set projet = sulu_content_load(item.id,{'title': 'title', 'image' : 'image', 'price' : 'price', 'location' : 'location', 'url' : 'url', 'surface' : 'surface', 'area' : 'area'}) %}
  24.       <div class="swipe-slide swiper-slide grid grid-rows-[auto_1fr] w-3/4 lg:w-2/5 xl:w-1/3 group">
  26.         <div class="swipe-slide__img-fade trigger-cursor translate-y-12 opacity-0 overflow-hidden">
  27.           <div
  28.             class="swipe-slide__img h-[60vh] min-h-[310px] max-h-[310px] md:max-h-[560px] scale-110 img-clip select-none">
  29.             {# image size 720x840 #}
  30.             {% if projet.content.image|length > 0 %}
  31.             {% set image = projet.content.image.thumbnails['720x840'] %}
  32.             <img src="{{ image }}"
  33.               width="100"
  34.               height="560"
  35.               alt="{{projet.content.title}}"
  36.               loading="lazy">
  37.             {% endif %}
  39.             {% if projet.content.image|length > 0 %}
  40.             {% set image = projet.content.image.thumbnails['720x840'] %}
  41.             <img src="{{ image }}"
  42.               width="100"
  43.               height="560"
  44.               alt="{{projet.content.title}}"
  45.               loading="lazy">
  46.             {% endif %}
  47.           </div>
  48.         </div>
  50.         <div
  51.           class="swipe-slide__content relative flex flex-col p-4 md:p-10 {{ background == 'white' ? 'text-blue' : 'bg-blue text-white'}} duration-500 {{ background == 'white' ? 'group-hover:bg-blue group-hover:text-white' : 'group-hover:bg-white group-hover:text-blue'}} group">
  52.           <a class="absolute inset-0 text-[0px] z-10"
  53.             href="{{ sulu_content_path(projet.content.url) }}">{{projet.content.title}}</a>
  55.           {% if slideNumbers %}
  56.           <div class="swipe-slide__num swipe-num text-sm text-siver-light {{ background == 'white' ? 'group-hover:text-white' : 'group-hover:text-blue'}} duration-500"
  57.             split-direction="bottom"
  58.             split-trigger="none">
  59.             Project <span class="number ml-1"></span>
  60.           </div>
  61.           {% endif %}
  63.           {% if projet.content.location %}
  64.           <div class="swipe-slide__eyebrow text-sm"
  65.             split-direction="bottom"
  66.             split-trigger="none">
  67.             <span>{{projet.content.location}}</span>
  68.             {% if projet.content.area %}
  69.             <span class="inline-block px-2 opacity-50">•</span>
  70.             <span>{{projet.content.area}}m<sup>2</sup>
  71.             </span>
  72.             {% endif %}
  73.           </div>
  74.           {% endif %}
  76.           {% if projet.content.title %}
  77.           <h3 class="swipe-slide__title h4 pr-6 mt-3 mb-5"
  78.             split-direction="bottom"
  79.             split-trigger="none">{{projet.content.title}}</h3>
  80.           {% else %}
  81.           <h2 class="swipe-slide__title h4 pr-6 mt-3 mb-5"
  82.             split-direction="bottom"
  83.             split-trigger="none">{{projet.content.title}}</h2>
  84.           {% endif %}
  86.           {% if projet.content.price %}
  87.           <div class="swipe-slide__price text-sm"
  88.             split-direction="bottom"
  89.             split-trigger="none">
  90.             <span>{{projet.content.price}}</span>
  91.           </div>
  92.           {% endif %}
  94.           {{macrosButton.arrowDiagonal({
  95.           'class': 'swipe-slide__arrow mt-auto ml-auto'
  96.           })
  97.           }}
  98.         </div>
  99.       </div>
  100.       {% endfor %}
  101.     </div>
  102.   </div>
  104.   {% if content.swipeSectionMoreLink %}
  105.   <div
  106.     class="flex justify-center py-9 md:py-12 border-y {{ background == 'white' ? 'border-blue/10' : 'border-white/10'}}">
  107.     <a class="text-xl md:text-2xl flex items-center gap-6 group"
  108.       href="{{content.swipeSectionMoreLink}}"
  109.       fade
  110.       fade-trigger="scroll">
  111.       <span>
  112.         {{content.swipeSectionMoreLinkText}}
  113.       </span>
  114.       <svg class="w-6 md:w-9 group-hover:translate-x-3 duration-300 ease-basic-ease"
  115.         viewBox="0 0 37 14">
  116.         <use xlink:href="#arrow-next"></use>
  117.       </svg>
  118.     </a>
  119.   </div>
  120.   {% endif %}
  122. </section>