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

Open in your IDE?
  1. <section class="contacts-section pt-16 pb-14 text-blue bg-white"
  2.   map-lat="46.19760877427521"
  3.   map-lng="6.159961683891776"
  4.   section-shade="light">
  5.   <div class="container flex flex-col lg:flex-row gap-8 justify-between">
  6.     <div class="lg:w-5/12">
  7.       <h2 class="h2"
  8.         split-direction="top"
  9.         split-trigger="scroll">{{content.contactsSectionTitle}}</h2>
  11.       {# Text content #}
  12.       <div class="flex flex-col gap-8 mt-8">
  14.         <div fade
  15.           fade-trigger="scroll">
  16.           <p class="uppercase text-[10px] font-extrabold">{{content.contactsAdressTitle}}</p>
  18.           <address class="text-sm not-italic">
  19.             <p class="font-extrabold">{{content.contactsCompanyName}}</p>
  20.             <p class="mt-1">
  21.               <span>{{content.contactsCompanyAdress}}</span>
  22.             </p>
  23.           </address>
  24.         </div>
  26.         <div fade
  27.           fade-trigger="scroll">
  28.           <p class="uppercase text-[10px] font-extrabold">{{content.contactsPhoneText}}</p>
  29.           <p class="mt-1">
  30.             <a class=""
  31.               href="tel:{{content.contactsPhone}}">{{content.contactsPhone}}</a>
  32.           </p>
  33.         </div>
  35.         <div fade
  36.           fade-trigger="scroll">
  37.           <p class="uppercase text-[10px] font-extrabold">{{content.contactsEmailText}}</p>
  38.           <p class="mt-1">
  39.             {% include 'partials/layout/contact_email.html.twig' with { email: content.contactsEmail } %}
  40.           </p>
  41.         </div>
  42.       </div>
  44.       {# Socials #}
  45.       <div class="grid grid-cols-4 mt-8 border-x border-y border-gray divide-x divide-gray"
  46.         fade
  47.         fade-trigger="scroll">
  48.         {% for social in content.socials %}
  49.         <div class="h-16 md:h-24 xl:h-[120px] hover:bg-blue hover:text-white duration-500 ease-basic-ease group">
  50.           <a href="{{social.socialUrl}}"
  51.             class="flex items-center justify-center w-full h-full text-[0px]"
  52.             target="blank">
  53.             {{social.socialName}}
  54.             <svg class="block w-4 h-4 group-hover:scale-125 transition-transform duration-500 ease-basic-ease">
  55.               <use xlink:href="#{{social.socialName}}"></use>
  56.             </svg>
  57.           </a>
  58.         </div>
  59.         {% endfor %}
  61.       </div>
  62.     </div>
  64.     <div class="lg:w-6/12 h-full"
  65.       fade
  66.       fade-trigger="scroll">
  67.       <div class="h-full min-h-[470px] md:min-h-[640px]"
  68.         contact-map></div>
  69.     </div>
  70.   </div>
  71. </section>