templates/website/page/about.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  3. {% if page is defined and page is not empty %}
  4.     {% set metaParams = {
  5.         'title': page.metaTitle ? page.metaTitle : page.title,
  6.         'metaDescription': page.metaDescription,
  7.         'metaKeywords': page.metaKeywords,
  8.         'image':(page.metaImage is defined ? page.metaImage : page.image is defined ? page.image : null)
  9.     } %}
  10. {% else %}
  11.     {% set metaParams = {} %}
  12. {% endif %}
  14. {% block meta %}
  15.     {% include '@web/parts/meta.html.twig' with metaParams %}
  16. {% endblock meta %}
  18. {% block content %}
  19.     <section class="section-about" id="aboutPage">
  20.         {% if page is not null and page.image is not empty %}
  21.         <div class="header-bg">
  22.             <img src="{{ page.image|imagine_filter('thumbnail_view')}}" alt="{{ page.title }}">
  23.         </div>
  24.         {% endif %}
  25.         {% block header %}
  26.             {% include '@web/parts/header.html.twig' %}
  27.         {% endblock %}
  28.         <div class="our-hero-wrapper">
  29.             {% if page is not null %}
  30.             <div class="big-title color-darkblue text-center">{{ page.title }}</div>
  31.             {% endif %}
  33.             <div class="heros" data-scroll-container>
  34.                 {% for hero in heroes %}
  35.                 <div class="hero">
  36.                     <div class="img-big {{ loop.index % 2 == 0 ? 'right-scroll-image': 'left-scroll-image'}}"><img src="{{ hero.image }}" alt=""></div>
  37.                     <div class="info-wrapper">
  38.                         <div class="img-title">
  39.                             <div class="img-medium {{ loop.index % 2 == 0 ? 'right-scroll-image': 'left-scroll-image'}}"><img src="{{ hero.imageMedium  }}" alt="{{hero.title}}"></div>
  40.                             <div class="title scroll-title {{ loop.index % 2 == 0 ? 'left-scroll-title': 'right-scroll-title'}}" data-from="200vw" data-to="-200vw">{{hero.title}}</div>
  41.                         </div>
  42.                         <div class="img-small  {{ loop.index % 2 == 0 ? 'right-scroll-image': 'left-scroll-image'}}"><img src="{{ hero.imageSmall }}" alt="{{hero.title}}"></div>
  43.                         <div class="text">{{hero.description|raw}}</div>
  44.                     </div>
  45.                 </div>
  46.                 {% endfor %}
  47.             </div>
  48.         </div>
  50.         {% block footer %}
  51.                         {% include '@web/parts/footer.html.twig' %}
  52.         {% endblock %}
  53.     </section>
  54. {% endblock %}
  55. {% block javascripts %}
  56.     {{ parent() }}
  57.     <script src="{{ asset('scripts/animation.js') }}"></script>
  58.     <script>
  59.         window.addEventListener('DOMContentLoaded', function() {
  60.             const hash = window.location.hash;
  61.             if (hash) {
  62.                 const targetTab = document.querySelector(`[data-bs-target="${hash}"]`);
  64.                 if (targetTab) {
  65.                     const tabTrigger = new bootstrap.Tab(targetTab);
  66.                     tabTrigger.show(); // Show the selected tab
  67.                 }
  68.             }
  69.         });
  70.         $('.dropdown.about_dropdown a').click(function (){
  71.             const hash = $(this).attr('href').split('#')[1]
  72.             if (hash) {
  73.                 const targetTab = document.querySelector(`[data-bs-target="#${hash}"]`);
  74.                 if (targetTab) {
  75.                     const tabTrigger = new bootstrap.Tab(targetTab);
  76.                     tabTrigger.show();
  77.                 }
  78.             }
  79.         })
  81.     </script>
  83. {% endblock %}