templates/content/boaWerbung.html.twig line 1

Open in your IDE?
  1. {% set logo = pimcore_image('logo') %}
  2. {% set logoType = pimcore_image('logoType') %}
  3. {% set bg = pimcore_image('bg') %}
  4. {% set phonesHands = pimcore_image('phonesHands') %}
  5. {% set phones = pimcore_image('phones') %}
  6. {% set btnPlay = pimcore_image('btnPlay') %}
  7. {% set btnApp = pimcore_image('btnApp') %}
  8. {% set linkPlay = pimcore_input('linkPlay') %}
  9. {% set linkApp = pimcore_input('linkApp') %}
  10. {% set text = pimcore_wysiwyg('text') %}
  11. {% if editmode %}
  12.         {% block scripts %}
  13.             {{ encore_entry_script_tags('app') }}
  14.         {% endblock %}
  15.         {% block stylesheets %}
  16.             {{ encore_entry_link_tags('style') }}
  17.         {% endblock %}
  18.         {% block head_links %}
  19.             {{ pimcore_head_link() }}
  20.         {% endblock %}
  21. {% endif %}
  22. <div class="overflow-x-clip">
  23.     <div class="container px-5 my-10 lg:my-20">
  24.         {% if editmode %}
  25.             <div class="grid grid-cols-6 gap-5">
  26.                 <div>Hintergrund:</div>
  27.                 <div class="col-span-5">
  28.                     {{ bg | raw }}
  29.                 </div>
  31.                 <div>Text</div>
  32.                 <div class="col-span-5">
  33.                     {{ text | raw }}
  34.                 </div>
  36.                 <div>Telefone</div>
  37.                 <div class="col-span-5">
  38.                     {{ phones | raw }}
  39.                 </div>
  41.                 <div>Telefone mit Händen:</div>
  42.                 <div class="col-span-5">
  43.                     {{ phonesHands | raw }}
  44.                 </div>
  46.                 <div>Btn Play:</div>
  47.                 <div class="col-span-5">
  48.                     {{ btnPlay | raw }}
  49.                 </div>
  51.                 <div>Link Play:</div>
  52.                 <div class="col-span-5">
  53.                     {{ linkPlay | raw }}
  54.                 </div>
  56.                 <div>Btn iOS</div>
  57.                 <div class="col-span-5">
  58.                     {{ btnApp | raw }}
  59.                 </div>
  61.                 <div>Link Play:</div>
  62.                 <div class="col-span-5">
  63.                     {{ linkApp| raw }}
  64.                 </div>
  66.                 <div>Icon:</div>
  67.                 <div class="col-span-5">
  68.                     {{ logo | raw }}
  69.                 </div>
  71.                 <div>Logo:</div>
  72.                 <div class="col-span-5">
  73.                     {{ logoType | raw }}
  74.                 </div>
  75.             </div>
  76.         {% endif %}
  77.         <div class="hidden lg:block border-2 border-[#127C94] text-[#127C94] hover:border-t-orange hover:border-x-amber-600 hover:border-b-amber-700 transition-all bg-cover bg-top relative" style="background-image: url({{ bg and bg.getSrc ? bg.getSrc : '' }});">
  78.             <div class="flex gap-10 h-full">
  79.                 <div class="flex-initial flex flex-col">
  80.                     <div class="flex-1 pt-10 pl-5">
  81.                         {% if not editmode %}
  82.                             <img src="{{ logoType.getSrc }}" alt="boa - bayerische oberland app" style="max-width: 312px">
  83.                         {% endif %}
  84.                     </div>
  85.                     <div class="flex-initial flex flex-row justify-start gap-5 pl-5 pb-5">
  86.                         <div>
  87.                             <a href="{{ linkPlay.value }}" alt="Im Play Store laden" target="_blank" class="cursor-pointer inline-block"><img src="{{ btnPlay.getSrc }}" alt="Im Play Store laden"></a>
  88.                         </div>
  89.                         <div>
  90.                             <a href="{{ linkApp.value }}" alt="Im App Store laden" target="_blank" class="cursor-pointer inline-block"><img src="{{ btnApp.getSrc }}" alt="Im App Store laden"></a>
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.                 <div class="flex-1 overflow-hidden max-h-full relative">
  95.                     <img src="{{ phonesHands.getSrc }}" alt="preview" class="w-full absolute fade-in" loading="lazy">
  96.                 </div>
  97.                 <div class="flex-1 self-center py-10 text-3xl 2xl:text-5px font-mont-heavy {% if not editmode %}fade-in delay-300{% endif %}">
  98.                     <div>{{ text.value | raw }}</div>
  99.                 </div>
  100.                 <div class="flex-initial relative">
  101.                     <div class="p-5 text-sm">WERBUNG</div>
  102.                     {% if not editmode %}
  103.                         <img width="64" height="64" style="max-width: none;" class="absolute bottom-5 right-5 border rounded-lg shadow-lg" src="{{ logo.getSrc }}" alt="Logo">
  104.                     {% endif %}
  105.                 </div>
  106.             </div>
  107.             <div class="hidden absolute left-5 top-0 -translate-y-1/2 font-mont-heavy">
  108.                 <div class="relative bg-orange text-white px-3 pt-2 pb-1">JETZT NEU</div>
  109.             </div>
  110.         </div>
  111.         <div class="lg:hidden bg-white border-2 border-[#127C94] text-[#127C94] bg-right-bottom bg-no-repeat" style="background-image: url({{ bg and bg.getSrc ? bg.getSrc : '' }});">
  112.             <div class="relative pt-10">
  113.                 <div class="px-5">
  114.                     {% if not editmode %}
  115.                         <img src="{{ logoType.getSrc }}" alt="boa - bayerische oberland app" style="max-width: 180px">
  116.                     {% endif %}
  117.                 </div>
  118.                 <div class="px-5 pt-5 font-mont-heavy text-2xl sm:w-2/3">
  119.                     {{ text.value | raw }}
  120.                 </div>
  121.                 <div class="grid grid-cols-2 sm:grid-cols-3 gap-0 mt-10">
  122.                     <div class="pl-5 pb-5 sm:col-span-2">
  123.                         <div class="flex flex-col sm:flex-row justify-start gap-5 mt-10">
  124.                             <div>
  125.                                 <a href="{{ linkPlay.value }}" alt="Im Play Store laden" target="_blank"><img src="{{ btnPlay.getSrc }}" alt="Im Play Store laden"></a>
  126.                             </div>
  127.                             <div>
  128.                                 <a href="{{ linkApp.value }}" alt="Im App Store laden" target="_blank"><img src="{{ btnApp.getSrc }}" alt="Im App Store laden"></a>
  129.                             </div>
  130.                         </div>
  131.                     </div>
  132.                     <div class="relative fade-in delay-500">
  133.                         <img src="{{ phones.getSrc }}" alt="preview" class="w-full absolute left-0 bottom-0 translate-y-10 translate-x-5" loading="lazy">
  134.                     </div>
  135.                 </div>
  136.                 {% if not editmode %}
  137.                     <img width="48" height="48" style="max-width: none;" class="absolute top-5 right-5 border rounded-lg shadow-lg" src="{{ logo.getSrc }}" alt="Logo">
  138.                 {% endif %}
  139.                 <div class="absolute bg-orange text-white px-3 pt-2 pb-1 left-5 top-0 -translate-y-1/2 font-mont-heavy">JETZT NEU</div>
  140.             </div>
  141.         </div>
  142.         <div class="lg:hidden pt-1 text-[#127C94] text-sm">WERBUNG</div>
  143.     </div>
  144. </div>