templates/includes/blocks/heroNews.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 article = sulu_content_load(content.heroSectionArticle, {'title': 'title', 'url': 'url', 'image': 'image', 'date': 'date'}) %}
  6. <section
  7.   class="news-hero-section relative h-auto sm:h-[90vh] lg:h-screen sm:min-h-[600px] bg-white text-blue pt-[88px] lg:pt-28 pb-12 sm:pb-0">
  8.   <div class="grid grid-rows-[auto_1fr] lg:grid-rows-none lg:grid-cols-[1fr_2fr] h-full"
  9.     section-shade="light">
  10.     <div class="relative flex flex-col pl-8 xl:pl-12 pt-8 xl:pt-12 border-r border-gray">
  11.       <div class="news-hero-uppertitle uppertitle"
  12.         fade
  13.         fade-trigger="none">
  14.         <i></i>
  15.         {{ content.heroSectionSubTitle }}
  16.       </div>
  18.       <h1 class="news-hero-title h1 mt-6"
  19.         split-direction="bottom"
  20.         split-trigger="none">
  21.         {{ content.heroSectionTitle }}
  22.       </h1>
  23.     </div>
  24.  
  25.     <div class="relative hidden sm:flex items-end justify-end p-8 xl:p-12 overflow-hidden">
  26.       <div class="absolute inset-8 xl:inset-12 overflow-hidden">
  27.         {# Image size 1700*1000 #}
  28.         {% if article.content.image|length > 0 %}
  29.         {% set image = article.content.image.thumbnails['1700x1000'] %}
  30.         <img class="news-hero-img w-full h-full object-cover opacity-0 scale-[1.4]"
  31.           src="{{ article.content.image.url }}"
  32.           alt="News">
  33.         {% endif %}
  34.       </div>
  36.       <div class="news-hero-content relative w-2/3 xl:w-1/2 bg-white z-10 pt-7 pl-12 pb-3 -mr-px -mb-px">
  37.         <div class="flex justify-between items-center gap-8"
  38.           fade
  39.           fade-trigger="none">
  40.           <time class="text-sm">
  41.           {% set activeLanguage = request.resourceLocatorPrefix|replace({'/': ''}) %}
  42.           {% if activeLanguage == 'fr' %}
  43.               {{ article.content.date|date('d M, Y')|replace({'Jan': 'Jan', 'Feb': 'Fév', 'Mar': 'Mar', 'Apr': 'Avr', 'May': 'Mai', 'Jun': 'Juin', 'Jul': 'Juil', 'Aug': 'Août', 'Sep': 'Sep', 'Oct': 'Oct', 'Nov': 'Nov', 'Dec': 'Déc'}) }}
  44.           {% elseif activeLanguage == 'en' %}
  45.               {{ article.content.date|date('d M, Y') }}
  46.           {% endif %}
  47.           </time>
  49.           {% set facebook = article.content.url|getShare %}
  50.           {% set linkedin = article.content.url|getShare %}
  51.           {% set whatsapp = article.content.url|getShare %}
  52.           {% set email = article.content.url|getShare %}
  54.           {{ macrosButton.share({
  55.           'facebook': {
  56.           'url': facebook,
  57.           },
  59.           'whatsapp': {
  60.           'text': 'Oaks Lane',
  61.           'url': whatsapp,
  62.           },
  64.           'linkedin': {
  65.           'url': linkedin,
  66.           },
  68.           'email': {
  69.           'title': 'Oaks Lane',
  70.           'url': email,
  71.           },
  72.           })}}
  73.         </div>
  75.         <a class="group outline-none"
  76.           href="{{ sulu_content_path(article.content.url) }}">
  77.           {# Title #}
  78.           <div class="title text-[2rem] mt-8 group-hover:underline group-focus-visible:underline"
  79.             fade
  80.             fade-trigger="none">
  81.             {{ article.content.title }}
  82.           </div>
  84.           {# Arrow #}
  85.           <div class="relative flex justify-start w-6 h-2 mt-8 overflow-hidden"
  86.             fade
  87.             fade-trigger="none">
  88.             <div
  89.               class="flex gap-6 -translate-x-12 group-hover:translate-x-0 group-focus-visible:translate-x-0 duration-500">
  90.               <svg class="shrink-0 w-6 h-2 stroke-2">
  91.                 <use xlink:href="#arrow-next"></use>
  92.               </svg>
  93.               <svg class="shrink-0 w-6 h-2 stroke-2">
  94.                 <use xlink:href="#arrow-next"></use>
  95.               </svg>
  96.             </div>
  97.           </div>
  98.         </a>
  99.       </div>
  100.     </div>
  101.   </div>
  102. </section>