templates/pages/home.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Cor Tennisclub Rheda e.V.{% endblock %}
  5. {# Home #}
  6. {% block content %}
  8.     {# Video #}
  9.     <div class="video--holder overflow-x--hidden">
  10.         <div class="video--filter"></div>
  11.         <div class="arrow">
  12.             <svg width="22" height="13" viewBox="0 0 22 13" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  13.                 <path fill-rule="evenodd" clip-rule="evenodd" d="M11 9.29309L20.293 9.44138e-05L21.707 1.41409L11 12.1211L0.292969 1.41409L1.70697 9.44138e-05L11 9.29309Z" fill="currentColor"/>
  14.             </svg>
  15.         </div>
  16.         <video class="hero--video" preload="auto" poster="{{ asset('assets/images/home/membership.png') }}" autoplay loop muted playsinline>
  17.             <source src="{{ asset('assets/videos/home/home-video.mp4') }}" type="video/mp4">
  18.             <img src="{{ asset('assets/images/home/membership.png') }}" alt="Video image fallback"/>
  19.         </video>
  20.     </div>
  22.     {# News #}
  23.     <section class="section--news" id="news">
  24.         <div class="section--inner">
  26.             {# Slider #}
  27.             {% if sliderItems %}
  28.                 <div class="row justify-content--center">
  29.                     <div class="col col-12">
  30.                         <div class="col-inner">
  31.                             <div class="owl-carousel owl-theme owl-loaded owl-drag">
  33.                                 {% for sliderItem in sliderItems %}
  34.                                     {% if sliderItem.active %}
  35.                                         {% if sliderItem.title|length > 1 or sliderItem.subTitle|length > 1 or sliderItem.ctaTitle|length > 1 %}
  36.                                             <div class="slider--item" style="background-image:url('https://api.ctc-rheda.de/{{ sliderItem.image.path }}');">
  37.                                                 <div class="slider-item--inner display--flex justify-content--center">
  38.                                                     <div class="content--holder text-align--center">
  39.                                                         <h2 class="tb1 tb4-xs tb5-s color--white mb1">{{ sliderItem.title|u.truncate(30, '...') }}</h2>
  40.                                                         {% if sliderItem.subTitle %}
  41.                                                             <p class="tm-1 tm-xs tm1-s color--white mb2">{{ sliderItem.subTitle|u.truncate(80, '...') }}</p>
  42.                                                         {% endif %}
  43.                                                         {% if sliderItem.ctaUrl and sliderItem.ctaTitle %}
  44.                                                             <a href="{{ sliderItem.ctaUrl }}" class="btn is--white is--s"{% if sliderItem.targetBlank %} target="_blank"{% endif %}>{{ sliderItem.ctaTitle }}</a>
  45.                                                         {% endif %}
  46.                                                     </div>
  47.                                                 </div>
  48.                                             </div>
  49.                                         {% elseif sliderItem.ctaUrl %}
  50.                                             <a class="slider--item no--overlay" href="{{ sliderItem.ctaUrl }}" {% if sliderItem.targetBlank %} target="_blank"{% endif %} style="background-image:url('https://api.ctc-rheda.de/{{ sliderItem.image.path }}');"></a>
  51.                                         {% endif %}
  52.                                     {% endif %}
  53.                                 {% endfor %}
  54.                             </div>
  55.                         </div>
  56.                     </div>
  57.                 </div>
  58.             {% endif %}
  60.             {# Newsposts #}
  61.             <div class="row justify-content--center">
  62.                 {% for newsItem in newsItems|sort((a, b) => a.publishDate|date("Y-m-d") <=> b.publishDate|date("Y-m-d"))|reverse|slice(0, 4) %}
  63.                     {% if newsItem.active %}
  64.                         <div class="col col-12 col-s-6 col-xl-3 news--item">
  65.                             <div class="col-inner">
  66.                                 <div class="image--holder">
  67.                                     <a href="/news/{{ newsItem.slug }}/" title="{{ newsItem.title }}">
  68.                                         {% if newsItem.image.path is defined %}
  69.                                             <img src="https://api.ctc-rheda.de/{{ newsItem.image.path }}">
  70.                                         {% else %}
  71.                                             <img src="https://api.ctc-rheda.de/news/ctc-general.png">
  72.                                         {% endif %}
  73.                                     </a>
  74.                                 </div>
  75.                                 <div class="text--holder mt1">
  76.                                     <div class="title">
  77.                                         <a href="/news/{{ newsItem.slug }}/" title="{{ newsItem.title }}">
  78.                                             <h3 class="tm1 color--black">{{ newsItem.title|u.truncate(80, '...') }}</h3>
  79.                                         </a>
  80.                                     </div>
  81.                                     <div class="details">
  82.                                         <h4 class="t-1">{{ newsItem.publishDate|date("d.m.Y") }} – {{ newsItem.author }}</h4>
  83.                                     </div>
  84.                                 </div>
  85.                             </div>
  86.                         </div>
  87.                     {% endif %}
  88.                 {% endfor %}
  89.             </div>
  90.             <div class="row justify-content--center mt2">
  91.                 <div class="col col-12">
  92.                     <div class="col-inner text-align--center">
  93.                         <a class="btn" href="{{ path('news_index') }}" title="Alle News lesen">Alle News</a>
  94.                     </div>
  95.                 </div>
  96.             </div>
  97.         </div>
  98.     </section>
  100.     {# Membership #}
  101. {#    <section class="section--membership">#}
  102. {#        <div class="section--inner">#}
  103. {#            <div class="row justify-content--center">#}
  104. {#                <div class="col col-12">#}
  105. {#                    <div class="col-inner">#}
  106. {#                        <div class="membership--holder">#}
  107. {#                            <div class="title">#}
  108. {#                                <h2 class="tb2 tb4-m color--white mb2 mb0-m">Du möchtest Mitglied im Cor Tennisclub werden?</h2>#}
  109. {#                            </div>#}
  110. {#                            <div class="button">#}
  111. {#                                <a class="btn is--white" href="{{ path('membership_index') }}" title="Mitglied werden">Mitglied werden</a>#}
  112. {#                            </div>#}
  113. {#                        </div>#}
  114. {#                    </div>#}
  115. {#                </div>#}
  116. {#            </div>#}
  117. {#        </div>#}
  118. {#    </section>#}
  120.     {# Advertisement #}
  121.     <section class="section--advertisement">
  122.         <div class="section--inner">
  123.             <div class="row justify-content--center">
  124.                 <div class="col col-12 text-align--center">
  125.                     <a rel="sponsored" href="https://www.awin1.com/cread.php?s=3085103&v=10984&q=324870&r=764023">
  126.                         <img src="https://www.awin1.com/cshow.php?s=3085103&v=10984&q=324870&r=764023" border="0">
  127.                     </a>
  128.                 </div>
  129.             </div>
  130.         </div>
  131.     </section>
  133.     {# Sponsors #}
  134.     <section class="section--sponsors">
  135.         <div class="section--inner">
  137.             {# Title #}
  138.             <div class="row justify-content--center">
  139.                 <div class="col col-12">
  140.                     <div class="col-inner text-align--center">
  141.                         <h2 class="tb3 color--black">Sponsoren</h2>
  142.                     </div>
  143.                 </div>
  144.             </div>
  146.             {# Logos #}
  147.             <div class="row justify-content--center">
  148.                 {% for sponsorItem in sponsorItems %}
  149.                     {% if sponsorItem.active %}
  150.                         <div class="col col-12 col-xs-10 col-s-6 col-m-4 col-l-3">
  151.                             <div class="col-inner">
  152.                                 <div class="logo--holder">
  153.                                     <img src="https://api.ctc-rheda.de/{{ sponsorItem.logo.path }}" alt="{{ sponsorItem.name }}">
  154.                                 </div>
  155.                             </div>
  156.                         </div>
  157.                     {% endif %}
  158.                 {% endfor %}
  159.             </div>
  161.             {# Button #}
  162.             <div class="row justify-content--center">
  163.                 <div class="col col-12">
  164.                     <div class="col-inner text-align--center">
  165.                         <a class="btn variant--link is--underlined" href="{{ path('sponsors_index') }}" title="Zu den Sponsoren">Mehr über die Sponsoren erfahren</a>
  166.                     </div>
  167.                 </div>
  168.             </div>
  169.         </div>
  170.     </section>
  171. {% endblock %}