templates/partials/layout/footer.html.twig line 1

Open in your IDE?
  1. {% set contactInformations = sulu_snippet_load_by_area('ContactInformations_area',null, app.ContactInformations) %}
  2.   {% set logos = sulu_snippet_load_by_area('logos_area',null) %}
  3. <footer class="footer relative bg-blue text-white h-[900px] overflow-hidden"
  4.   section-shade="dark">
  5.   <div class="footer-translate lg:h-full max-lg:!transform-none">
  6.     <div class="grid grid-cols-1 lg:grid-cols-[2fr_1.5fr] xl:grid-cols-3 lg:h-full">
  7.       {# left col #}
  8.       <div class="hidden xl:block overflow-hidden relative">
  9.         <div
  10.           class="absolute bottom-10 left-0 translate-x-[155px] -rotate-90 origin-bottom-left leading-[0.8] pointer-events-none">
  11.           <div class="text-[155px] whitespace-nowrap uppercase tracking-[0.13em]">{{ logos.content.footerLogoText }}</div>
  12.         </div>
  13.       </div>
  15.       {# center col #}
  16.       <div class="border-x border-white/5 pt-16  lg:pt-60">
  18.         <div class="flex flex-col justify-end lg:h-full">
  19.           {# Text content #}
  20.           <div class="flex flex-col gap-8 px-8 xl:px-12 pb-8 lg:pb-14">
  22.             <div>
  23.               <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsAdressTitle}}</p>
  25.               <address class="text-sm not-italic">
  26.                 <p class="font-extrabold">{{contactInformations.content.contactsCompanyName}}</p>
  27.                 <p class="mt-1">
  28.                   <span>{{contactInformations.content.contactsCompanyAdress}}</span>
  29.                 </p>
  30.               </address>
  31.             </div>
  33.             <div>
  34.               <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsPhoneText}}</p>
  35.               <p class="mt-1">
  36.                 <a class=""
  37.                   href="tel:{{contactInformations.content.contactsPhone}}">{{contactInformations.content.contactsPhone}}</a>
  38.               </p>
  39.             </div>
  41.             <div>
  42.               <p class="uppercase text-[10px] font-extrabold">{{contactInformations.content.contactsEmailText}}</p>
  43.               <p class="mt-1">
  44.                 {% include 'partials/layout/contact_email.html.twig' with { email: contactInformations.content.contactsEmail } %}
  45.               </p>
  46.             </div>
  47.           </div>
  49.           {# Socials #}
  50.           <div
  51.             class="grid grid-cols-4 mx-8 lg:mx-0 mb-8 border-x lg:border-x-0 border-y border-white/5 divide-x divide-white/5">
  52.             {% for social in contactInformations.content.socials %}
  53.             <div class="h-16 md:h-24 xl:h-[120px] hover:bg-white/25 duration-500 ease-basic-ease group">
  54.               <a href="{{social.socialUrl}}"
  55.                 class="flex items-center justify-center w-full h-full text-[0px]"
  56.                 target="blank">
  57.                 {{social.socialName}}
  58.                 <svg class="block w-4 h-4 group-hover:scale-125 duration-500 ease-basic-ease">
  59.                   <use xlink:href="#{{social.socialName}}"></use>
  60.                 </svg>
  61.               </a>
  62.             </div>
  63.             {% endfor %}
  65.           </div>
  67.           {# Footer menu #}
  68.           <div class="px-8 xl:px-12 pb-14 lg:mt-auto text-white/80">
  69.             <nav>
  70.               <ul class="flex flex-col md:flex-row gap-6 md:gap-8 text-sm tracking-tight whitespace-nowrap">
  71.               {% for item in sulu_navigation_root_tree('footer', 4) %}
  72.                 <li>
  73.                   <a class="text-white/80"
  74.                     href="{{ sulu_content_path(item.url) }}">{{item.title}}</a>
  75.                 </li>
  76.               {% endfor %}
  77.               </ul>
  78.             </nav>
  80.             <div class="text-sm tracking-tight mt-8">
  81.               <p class="text-white/80">
  82.                 <span>
  83.                   
  84.                    © {{ 'now' | date('Y') }}. {{ "OAKS GROUP SA. All rights reserved." | trans }}
  85.                 </span>
  86.                 <span class="block mt-2 whitespace-nowrap">
  87.                   {{ "Designed by" | trans }}
  88.                   <a class="text-white/80 underline"
  89.                     href="https://ewm.swiss/"
  90.                     target="blank">{{ "EWM Agency" | trans }}</a>
  91.                 </span>
  92.               </p>
  94.             </div>
  95.           </div>
  96.         </div>
  97.       </div>
  99.       {# right col #}
  100.       <div class="absolute right-0 bottom-0 flex items-center justify-end overflow-hidden pointer-events-none z_bg">
  101.         <svg
  102.           class="relative aspect-square min-w-[100vw] lg:min-w-[55vw] right-[0vw] translate-x-1/2 text-white/5 pointer-events-none yellow_bg">
  103.           <use xlink:href="#circle"></use>
  104.         </svg>
  105.       </div>
  106.     </div>
  107.   </div>
  108. </footer>