templates/areas/switch_header/view.html.twig line 1

Open in your IDE?
  1. <div class="toolbox-element toolbox-container {{ additionalClassesData|join(' ') }}">
  2.     <div class="relative">
  3.         <div class="mx-auto">
  4.             <div class="relative shadow-xl pt-10 h-[44rem]">
  5.                 <div class="absolute inset-0">
  6.                     <img class="absolute object-cover w-full h-full" x-bind:class="toggle ? 'animate__animated animate_slow animate__fadeIn' : 'animate__animated animate_slow animate__fadeOut'" src="{{ pimcore_image("background_image").getThumbnail('jumpstartImage') }}" alt="People working on laptops" />
  7.                     <img class="absolute object-cover w-full h-full" x-bind:class="toggle ?  'animate__animated animate_slow animate__fadeOut' : 'animate__animated animate_slow animate__fadeIn'" src="{{ pimcore_image("background_image_right").getThumbnail('jumpstartImage') }}" alt="People working on laptops" />
  8.                 </div>
  9.                 <div class="relative max-w-md px-4 sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8 mx-auto mt-10 mb-[20vh]">
  10.                     <h1 class="absolute text-4xl font-black text-center text-white font-sanslight sm:text-6xl" x-bind:class="toggle ? 'animate__animated animate_slow animate__fadeInRight' : 'animate__animated animate_slow animate__fadeOutRight'">
  11.                         <span class="text-left my-0.5 block bg-rs-red p-4 {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  12.                             {{ pimcore_input("headline_1") }}
  13.                         </span>
  14.                         <span class="text-left my-0.5 block bg-rs-red p-4 text-3xl sm:text-4xl {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  15.                             {{ pimcore_input("headline_2") }}
  16.                         </span>
  17.                         {% if editmode or pimcore_input("headline_3") != "" %}
  18.                             <span class="text-left my-0.5 block bg-rs-red p-4 text-3xl sm:text-4xl {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  19.                                 {{ pimcore_input("headline_3") }}
  20.                             </span>
  21.                         {% endif %}
  22.                     </h1>
  23.                     <h1 class="absolute text-4xl font-black text-center text-white font-sanslight sm:text-6xl" x-bind:class="toggle ? 'animate__animated animate_slow animate__fadeOutRight' : 'animate__animated animate_slow animate__fadeInRight'">
  24.                         <span class="text-left my-0.5 block bg-rs-red p-4 {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  25.                             {{ pimcore_input("headline_1_right") }}
  26.                         </span>
  27.                         <span class="text-left my-0.5 block bg-rs-red p-4 text-3xl sm:text-4xl {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  28.                             {{ pimcore_input("headline_2_right") }}
  29.                         </span>
  30.                         {% if editmode or pimcore_input("headline_3_right") != "" %}
  31.                             <span class="text-left my-0.5 block bg-rs-red p-4 text-3xl sm:text-4xl {% if not editmode %} max-w-max {% else %} min-w-[120px] {% endif %}">
  32.                                 {{ pimcore_input("headline_3_right") }}
  33.                             </span>
  34.                         {% endif %}
  35.                     </h1>
  36.                 </div>
  37.                 <div class="absolute bottom-0 left-0 right-0 max-w-md px-4 mx-auto sm:max-w-3xl sm:px-6 lg:max-w-7xl lg:px-8">
  38.                     <div class="relative mt-10 px-6 py-10 overflow-hidden shadow-xl sm:px-10 bg-gradient-to-t from-black to-[#373535]">
  39.                         <div class="grid grid-cols-1 gap-3 text-white sm:grid-cols-3">
  40.                             <div>
  41.                                 <h4 class="text-2xl sm:text-[1.75rem]">{{ pimcore_input("headline_mro") }}</h4><br>
  42.                                 <p class="text-xl">{{ pimcore_textarea("text_mro") }}</p>
  43.                             </div>
  44.                             <div class="text-center">
  45.                                 <label class="label">
  46.                                     <div class="toggle">
  47.                                         <input id="header-switch" class="toggle-state" type="checkbox" name="check" value="check" x-on:click="toggle = !toggle" />
  48.                                         <div class="toggle-inner">
  49.                                             <div class="indicator"></div>
  50.                                         </div>
  51.                                         <div class="active-bg"></div>
  52.                                     </div>
  53.                                 </label>
  54.                             </div>
  55.                             <div class="text-right sm:text-left">
  56.                                 <h4 class="text-2xl sm:text-[1.75rem] donthyphenate">{{ pimcore_input("headline_oem") }}</h4><br>
  57.                                 <p class="text-xl">{{ pimcore_textarea("text_oem") }}</p>
  58.                             </div>
  59.                         </div>
  60.                     </div>
  61.                 </div>
  62.             </div>
  63.         </div>
  64.     </div>
  65. </div>