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

Open in your IDE?
  1. {% set contactInformations = sulu_snippet_load_by_area('ContactInformations_area',null, app.ContactInformations) %}
  3. <section class="cover_contact relative h-screen min-h-[600px] bg-blue text-white"
  4.   section-shade="transparent">
  5.   <div class="relative flex h-full pl-8 lg:pl-12">
  6.     <svg
  7.       class="absolute aspect-square bottom-4 right-20 lg:top-0 lg:left-0 h-[80%] lg:h-full xl:h-auto xl:w-7/12 text-white/5 pointer-events-none yellow_bg">
  8.       <use xlink:href="#circle"></use>
  9.     </svg>
  10.     {# Text side #}
  11.     <div class="relative flex flex-col justify-end h-full lg:w-7/12 pb-24 lg:pb-12 pt-[88px] lg:pt-28">
  13.       <div>
  14.         <p class="uppertitle">
  15.           <i></i>
  16.           {{ content.heroSectionSubTitle }}
  17.         </p>
  19.         <h1 class=" h1 mt-6">
  20.           {{ content.heroSectionTitle }}
  21.         </h1>
  22.       </div>
  23.  
  24.       <div class="flex flex-col gap-8 mt-6 lg:mt-16">
  26.         <div>
  27.           <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsAdressTitle}}</p>
  29.           <address class="text-sm not-italic">
  30.             <p class="font-extrabold">{{contactInformations.content.contactsCompanyName}}</p>
  31.             <p class="mt-1">
  32.               <span>{{contactInformations.content.contactsCompanyAdress}}</span>
  33.             </p>
  34.           </address>
  35.         </div>
  37.         <div>
  38.           <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsPhoneText}}</p>
  39.           <p class="mt-1">
  40.             <a class=""
  41.               href="tel:{{contactInformations.content.contactsPhone}}">{{contactInformations.content.contactsPhone}}</a>
  42.           </p>
  43.         </div>
  45.         <div>
  46.           <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsEmailText}}</p>
  47.           <p class="mt-1">
  48.             {% include 'partials/layout/contact_email.html.twig' with { email: contactInformations.content.contactsEmail } %}
  49.           </p>
  50.         </div>
  51.       </div>
  52.     </div>
  54.     {# Image #}
  55.     <div class="hidden lg:block relative h-full lg:w-5/12">
  56.       {# image size 900*1360 #}
  57.       {% if content.heroSectionImage|length > 0 %}
  58.       {% set image = content.heroSectionImage.thumbnails['900x1360'] %}
  59.       <img class="object-cover w-full h-full"
  60.         src="{{ image }}"
  61.         alt="Contact">
  62.       {% endif %}
  63.       <div class="hidden lg:block absolute inset-0 bg-blue/30 z-10"></div>
  64.     </div>
  65.   </div>
  66. </section>