templates/includes/blocks/aboutSection.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 contactInformations = sulu_snippet_load_by_area('ContactInformations_area',null, app.ContactInformations) %}
  6. <section class="about-section relative pt-16 pb-12"
  7.   section-shade="light">
  8.   <div class="fixed-lines">
  9.     <div></div>
  10.     <div></div>
  11.     <div></div>
  12.   </div>
  14.   <div class="relative grid lg:grid-cols-[1fr_2fr] gap-10 lg:gap-0 z-10 lg:z-0 text-blue">
  15.     <div class="overflow-hidden px-8 xl:px-12">
  16.       <h2 class="h2"
  17.         split-direction="top"
  18.         split-trigger="scroll">
  19.         {{ content.AlpineTitle|raw }}
  20.       </h2>
  21.       <div class="mt-8 w-full sm:w-1/2 lg:w-full"
  22.         fade
  23.         fade-trigger="scroll">
  24.         {{ content.AlpineDescription|raw }}
  25.       </div>
  26.       
  27.       {% set btnText = content.AlpineButtonText %}
  28.       {% set btnUrl = content.AlpineButtonLink %}
  30.       {{macrosButton.arrowLink({
  31.       'wrappClass': 'mt-12',
  32.       'href': btnUrl,
  33.       'text': btnText,
  34.       'trigger': 'scroll'
  35.       })}}
  37.     </div>
  39.     <div class="relative overflow-hidden px-8 xl:px-12 bg-white">
  40.       <div class="relative w-full lg:h-screen min-h-[500px] clip-path-top-right-bottom-left">
  41.         {# image size 1300x1110 #}
  42.         {% if content.AlpineMedia|length > 0 %}
  43.         {% set image = content.AlpineMedia.thumbnails['1300x1110'] %}
  44.         <img class="absolute object-cover w-full h-full"
  45.           fade
  46.           fade-trigger="scroll"
  47.           src="{{image}}"
  48.           alt="About"
  49.           loading="lazy">
  50.         {% endif %}
  51.         <div class="lg:hidden absolute top-0 bottom-0 left-1/2 w-px bg-white"></div>
  52.       </div>
  53.     </div>
  54.   </div>
  56.   <div class="text-transform-wrapp absolute bottom-12 grid grid-cols-2 lg:grid-cols-3 text-[23vw] md:text-[17vw] text-blue leading-[0.85] whitespace-nowrap uppercase tracking-[0.13em] pointer-events-none z-10 lg:z-0">
  57.       <div class="overflow-hidden bg-white">
  58.          <div class="about-text-transform about-text-transform-1" style="translate: none; rotate: none; scale: none; transform: translate(30%, 0px);">
  59.             {{contactInformations.content.contactsCompanyName}}
  60.          </div>
  61.       </div>
  62.       <div class="overflow-hidden hidden lg:block bg-white">
  63.          <div class="about-text-transform about-text-transform-2" style="translate: none; rotate: none; scale: none; transform: translate(30%, -3.264px) scale(1.05, 1.05);">
  64.             {{contactInformations.content.contactsCompanyName}}
  65.          </div>
  66.       </div>
  67.       <div class="overflow-hidden">
  68.          <div class="about-text-transform about-text-transform-3 stroke-text" style="translate: none; rotate: none; scale: none; transform: translate(30%, 0px);">
  69.             {{contactInformations.content.contactsCompanyName}}
  70.          </div>
  71.       </div>
  72.    </div>
  73. </section>