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

Open in your IDE?
  1. <section class="relative bg-white text-blue pt-32 lg:pt-52 pb-6 lg:pb-16" section-shade="light">
  2.   <div class="big-container">
  3.     {# Top info #}
  4.     <div class="flex flex-col gap-6 lg:flex-row justify-between">
  6.       {# Content #}
  7.       <div class="flex flex-col lg:w-10/12 xl:w-9/12 max-w-[930px]">
  8.         <div class="flex gap-6 text-sm md:text-base whitespace-nowrap">
  9.           {% if globalContent.projectType %}
  10.             <div class="bg-gray rounded-full py-2 px-6 text-blue w-max">
  11.               {{globalContent.projectType}}
  12.             </div>
  13.           {% endif %}
  15.           {% if globalContent.location %}
  16.             <div class="flex items-center gap-2 md:gap-4 group">
  17.               <svg class="w-4 h-4 opacity-50 text-blue group-hover:-translate-y-1 duration-150">
  18.                 <use xlink:href="#location"></use>
  19.               </svg>
  21.               {{globalContent.location}}
  22.             </div>
  23.           {% endif %}
  24.         </div>
  26.         <h1 class="title text-[2.5rem] lg:text-6xl xl:text-7xl mt-6">{{content.heroSectionTitle}}</h1>
  27.         
  28.         {% if globalContent.heroInfo == true %}
  29.           {% if globalContent.price or globalContent.area or globalContent.rooms or globalContent.lots %}
  30.             <div class="grid sm:grid-cols-2 lg:flex flex-wrap lg:flex-nowrap border border-gray divide-y lg:divide-y-0 sm:divide-x divide-gray mt-6 w-full lg:w-max max-w-full" batch-wrapp>
  32.               {% if globalContent.price %}
  33.                 <div class="flex items-center sm:justify-center w-full sm:min-w-[50%] lg:min-w-[auto] px-8 py-6 xl:py-7">
  34.                   <p class="lg:text-lg xl:text-2xl whitespace-nowrap">{{globalContent.price}}</p>
  35.                 </div>
  36.               {% endif %}
  38.               {% if globalContent.area %}
  39.                 <div class="flex items-center sm:justify-center w-full sm:min-w-[50%] lg:min-w-[auto] px-8 py-6 xl:py-7">
  40.                   <p class="lg:text-lg xl:text-2xl whitespace-nowrap">{{globalContent.area}} m<sup>2</sup>
  41.                   </p>
  42.                 </div>
  43.               {% endif %}
  45.               {% if globalContent.rooms %}
  46.                 <div class="flex items-center sm:justify-center w-full sm:min-w-[50%] lg:min-w-[auto] px-8 py-6 xl:py-7">
  47.                   <p class="lg:text-lg xl:text-2xl whitespace-nowrap">{{globalContent.rooms}}</p>
  48.                 </div>
  49.               {% endif %}
  51.               {% if globalContent.lots %}
  52.                 <div class="flex items-center sm:justify-center w-full sm:min-w-[50%] lg:min-w-[auto] px-8 py-6 xl:py-7">
  53.                   <p class="lg:text-lg xl:text-2xl border-b border-dashed">{{globalContent.lots}}</p>
  54.                 </div>
  55.               {% endif %}
  57.             </div>
  58.           {% endif %}
  59.         {% endif %}
  61.       </div>
  64.       {# Socials #}
  65.       <div class="flex lg:flex-col border border-gray divide-x lg:divide-x-0 lg:divide-y divide-gray w-max h-max">
  66.         {# {% if socials.facebook %} #}
  67.           <a class="flex items-center justify-center w-12 h-12 hover:bg-blue/10 duration-500" href="https://www.facebook.com/sharer.php?u={{globalContent.url|getShare}}" aria-label="Facebook">
  68.             <svg class="block w-4 h-4 duration-500 ease-basic-ease">
  69.               <use xlink:href="#facebook"></use>
  70.             </svg>
  71.           </a>
  72.         {# {% endif %}
  73.         {% if socials.linkedin %} #}
  74.           <a class="flex items-center justify-center w-12 h-12 hover:bg-blue/10 duration-500" href="https://www.linkedin.com/sharing/share-offsite/?url={{globalContent.url|getShare}}"  aria-label="Linked In">
  75.             <svg class="block w-4 h-4 duration-500 ease-basic-ease">
  76.               <use xlink:href="#linkedin"></use>
  77.             </svg>
  78.           </a>
  79.         {# {% endif %}
  80.         {% if socials.whatsapp %} #}
  81.           <a class="flex items-center justify-center w-12 h-12 hover:bg-blue/10 duration-500" href="https://api.whatsapp.com/send?text={{globalContent.url|getShare}}" aria-label="Whats App">
  82.             <svg class="block w-4 h-4 duration-500 ease-basic-ease">
  83.               <use xlink:href="#whatsapp"></use>
  84.             </svg>
  85.           </a>
  86.         {# {% endif %}
  87.         {% if socials.email %} #}
  88.           <a class="flex items-center justify-center w-12 h-12 hover:bg-blue/10 duration-500" href="mailto:?subject={{globalContent.title}}&body={{globalContent.url|getShare}}" aria-label="Email">
  89.             <svg class="block w-4 h-4 duration-500 ease-basic-ease">
  90.               <use xlink:href="#email"></use>
  91.             </svg>
  92.           </a>
  93.         {# {% endif %} #}
  94.       </div>
  96.     </div>
  97.   </div>
  98. </section>
  100. <section class="gallery-section h-80 md:h-96 lg:min-h-[650px] lg:h-[85vh]" fade fade-trigger="none">
  101.   <div class="big-container-mob-zero h-full">
  102.     <div class="gallery-slider swiper-container relative md:overflow-hidden h-full">
  103.       <div class="gallery-slider-wrapper swiper-wrapper">
  105.         {% for photo in content.heroSectionImages %}
  107.           {% if photo|length > 0 %}
  108.               {% set image = photo.thumbnails['1920x1080'] %}
  109.           {% else %}
  110.               {% set image = '' %}
  111.           {% endif %}
  113.           <div class="gallery-slide swiper-slide"
  114.              data-src="{{image}}"
  115.                data-external-thumb-image="{{image}}"
  116.              >
  117.             {# Image size 1920*1080 #}
  119.             <img class="swiper-lazy w-full h-full object-cover select-none"
  120.                data-src="{{image}}"
  121.                data-external-thumb-image="{{image}}"
  122.                alt="{{content.heroSectionTitle}}">
  124.             <div class="swiper-lazy-preloader"></div>
  125.           </div>
  127.         {% endfor %}
  129.       </div>
  130.       <button class="swiper-button-prev flex items-center pl-2 lg:pl-4 absolute top-0 left-0 bottom-0 z-10 cursor-pointer" aria-label="Prev Slide">
  131.         <div class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  132.           <svg class="w-6" viewBox="0 0 37 14">
  133.             <use xlink:href="#arrow-prev"></use>
  134.           </svg>
  135.         </div>
  136.       </button>
  138.       <button class="swiper-button-next flex items-center pr-2 lg:pr-4 absolute top-0 right-0 bottom-0 z-10 cursor-pointer" aria-label="Next Slide">
  139.         <div class="flex items-center justify-center rounded-full bg-white text-[#111] w-[52px] h-[52px] lg:w-14 lg:h-14">
  140.           <svg class="w-6" viewBox="0 0 37 14">
  141.             <use xlink:href="#arrow-next"></use>
  142.           </svg>
  143.         </div>
  144.       </button>
  146.       <div class="gallery-count-wrapp absolute bottom-0 md:bottom-6 left-1/2 -translate-x-1/2 translate-y-1/2 md:translate-y-0 bg-[#111] text-sm text-white rounded-full flex items-center px-4 py-2 z-10 opacity-0">
  147.         <span class="gallery-count__current"></span>
  148.         <span class="opacity-30">&#160;/&#160;</span>
  149.         <span class="gallery-count__all opacity-30"></span>
  150.       </div>
  151.     </div>
  152.   </div>
  153. </section>