templates/front/homepage.html.twig line 1

Open in your IDE?
  1. {% extends "front/base.html.twig" %}
  3. {% block title %}
  4.     {{ 'seo.home_title' | trans }}
  5. {% endblock %}
  7. {% block seo %}
  8.     <meta name="description" content="{{ 'seo.home_description' | trans }}">
  9. {% endblock %}
  11. {% block og %}
  12.     <meta property="og:type" content="website" />
  13.     <meta property="og:title" content="{{ 'seo.home_title' | trans }}" />
  14.     <meta property="og:image" content="{{ url('homepage_no_locale') }}images/open-graph.png"/>
  15.     <meta property="og:description" content="{{ 'seo.home_description' | trans }}"/>
  16. {% endblock %}
  18. {% form_theme form _self %}
  20. {%- block choice_widget_expanded -%}
  22. {%- for child in form %}
  23.     <div class="checkbox icheck-primary">
  24.         {{- form_widget(child) -}}
  25.     </div>
  26. {% endfor -%}{%- endblock choice_widget_expanded -%}
  28. {% block body %}
  30. <section class="screen-height overflow-hidden pt-0" id="hero-section">
  31.     <div class="home-sliders hide-mobile">
  32.         {% if sliders | length > 0 %}
  33.         
  34.         {% for slider in sliders %}
  35.             <div class="landing-slider-item" style="background-image: url('/images/header/{{ slider.image }}');">
  36.                 <div class="container-fluid">
  37.                     <div class="row slide-row">
  38.                         <div class="col-12 content">
  39.                             <h3 class="title">{{ slider.title }}</h3>
  40.                             <p class="text">
  41.                                 {{ slider.description }}
  42.                             </p>
  43.                             {% if slider.link %}
  44.                                 <a href="{{ slider.link }}" class="btn discover"  target="_blank">{{ 'homepage.discover' | trans }}</a>
  45.                             {% endif %}
  46.                         </div>
  47.                     </div>
  48.                 </div>
  49.             </div>
  50.         {% endfor %}
  51.         {% else %}
  52.             <div class="landing-slider-item" style="background-image: url('/images/hero-mobile.png');">
  53.                 <div class="container-fluid">
  54.                     <div class="row slide-row">
  55.                         <div class="col-12 content">
  56.                             <h3 class="title">Racket Trip</h3>
  57.                             <p class="text">
  58.                                 
  59.                             </p>
  60.                         </div>
  61.                     </div>
  62.                 </div>
  63.             </div>
  64.         {% endif %}
  65.     </div>
  67.     <div class="home-intro hide-desktop" style="background-image: url('/images/hero-mobile.png');"></div>
  69.     <div class="card search-card">
  70.         <h3 class="title">{{ "form.looking_for_what" | trans }}</h3>
  71.         {{ form_start(form, {'attr': {'class': 'home-search-form'}}) }}
  72.             <div class="input-group global destination">
  73.                 <div class="form-group">
  74.                     <input type="text" id="destination" autocomplete="off" placeholder="{{ "homepage.where_to" | trans }}" class="form-control">
  75.                 </div>
  76.                 {{ form_widget(form.place) }}
  77.             </div>
  78.             <div class="custom-dropdown-input short-input" id="sport-wrap">
  79.                 <span class="custom-dropdown-label" id="sport-checkbox-label">{{ "directory.sport" | trans }}</span>
  80.                 <div class="custom-dropdown-content" id="sport-checkbox">
  81.                     {{ form_widget(form.sports) }}
  82.                 </div>
  83.             </div>
  84.             <div class="custom-dropdown-input short-input" id="date-wrap">
  85.                 <span class="custom-dropdown-label" id="date-input-label">{{ "page_course_detail.from" | trans }}</span>
  86.                 <div class="custom-dropdown-content">
  87.                     <div id="datepicker"></div>
  88.                     {{ form_widget(form.begin) }}
  89.                 </div>
  90.             </div>
  91.             <div class="hide">
  92.                 {{ form_row(form.search) }}
  93.                 {{ form_rest(form) }}
  94.             </div>
  95.             <button type="submit" class="btn main-btn mx-auto">{{ "global.search" | trans }}</button>
  96.         {{ form_end(form) }}
  97.     </div>
  99.     <div class="landing-scroll" id="discover">
  100.         <span class="scroll-text">{{ 'homepage.discover_offers' | trans }}</span>
  101.         <i class="far fa-chevron-down"></i>
  102.     </div>
  104. </section>
  106. <div class="overflow-hidden">
  108.     {% if courses | length > 0 %}
  110.         <section class="home-courses" id="courses">
  111.             <div class="container-fluid home-courses-container">
  112.                 <div class="main-title">
  113.                     <h1 class="title-text">{{ 'homepage.current_courses' | trans }}</h1>
  114.                 </div>
  115.                 <div class="courses-slider-wrapper mt-4">
  116.                     {% for course in courses %}
  118.                     {% if course | nextdate(startingDate).begin != null %}
  120.                     {% include "front/course/_course-card.html.twig" %}
  122.                     {% endif %}
  124.                     {% endfor %}
  125.                 </div>
  126.             </div>
  127.         </section>
  129.     {% endif %}
  131.     {% if is_granted('ROLE_TRAINEE') and traineeCourses | length > 0 %}
  133.         <section id="trainee-courses">
  134.             <div class="container-fluid home-courses-container">
  135.                 <div class="main-title">
  136.                     <h1 class="title-text">{{ 'homepage.current_courses_trainee' | trans }}</h1>
  137.                 </div>
  138.                 <div class="courses-slider-wrapper mt-4">
  140.                     {% for course in traineeCourses %}
  141.                         {% if course | nextdate(startingDate).begin != null %}
  142.                             {% include "front/course/_course-card.html.twig" %}
  143.                         {% endif %}
  144.                     {% endfor %}
  146.                 </div>
  147.             </div>
  148.         </section>
  149.         
  150.     {% endif %}
  152.     <section id="countries">
  153.         <div class="container-fluid">
  154.             <h2 class="section-title-underline">{{ 'homepage.countries' | trans }}</h2>
  155.             <div class="countries-grid">
  156.             
  157.                 <div class="country-card">
  158.                     <img loading="lazy" src="{{ asset('/images/destinations/espagne.png') }}" alt="{{ 'homepage.spain' | trans }}">
  159.                     <a href="{{ path('courses') }}" data-place="ChIJi7xhMnjjQgwR7KNoB5Qs7KY" class="country-mobile-link search-country">
  160.                         <p class="country-title">{{ 'homepage.spain' | trans }}</p>
  161.                     </a>
  162.                     <a href="{{ path('courses') }}" data-place="ChIJi7xhMnjjQgwR7KNoB5Qs7KY" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  163.                 </div>
  165.                 <div class="country-card">
  166.                     <img loading="lazy" src="{{ asset('/images/destinations/senegal.png') }}" alt="{{ 'homepage.senegal' | trans }}">
  167.                     <a href="{{ path('courses') }}" data-place="ChIJcbvFs_VywQ4RQFlhmVClRlo" class="country-mobile-link search-country">
  168.                         <p class="country-title">{{ 'homepage.senegal' | trans }}</p>
  169.                     </a>
  170.                     <a href="{{ path('courses') }}" data-place="ChIJcbvFs_VywQ4RQFlhmVClRlo" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  171.                 </div>
  173.                 <div class="country-card">
  174.                     <img loading="lazy" src="{{ asset('/images/destinations/italie.png') }}" alt="{{ 'homepage.italy' | trans }}">
  175.                     <a href="{{ path('courses') }}" data-place="ChIJA9KNRIL-1BIRb15jJFz1LOI" class="country-mobile-link search-country">
  176.                         <p class="country-title">{{ 'homepage.italy' | trans }}</p>
  177.                     </a>
  178.                     <a href="{{ path('courses') }}" data-place="ChIJA9KNRIL-1BIRb15jJFz1LOI" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  179.                 </div>
  181.                 <div class="country-card">
  182.                     <img loading="lazy" src="{{ asset('/images/destinations/france.png') }}" alt="{{ 'homepage.france' | trans }}">
  183.                     <a href="{{ path('courses') }}" data-place="ChIJMVd4MymgVA0R99lHx5Y__Ws" class="country-mobile-link search-country">
  184.                         <p class="country-title">{{ 'homepage.france' | trans }}</p>
  185.                     </a>
  186.                     <a href="{{ path('courses') }}" data-place="ChIJMVd4MymgVA0R99lHx5Y__Ws" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  187.                 </div>
  189.                 <div class="country-card">
  190.                     <img loading="lazy" src="{{ asset('/images/destinations/belgique.png') }}" alt="{{ 'homepage.belgium' | trans }}">
  191.                     <a href="{{ path('courses') }}" data-place="ChIJl5fz7WR9wUcR8g_mObTy60c" class="country-mobile-link search-country">
  192.                         <p class="country-title">{{ 'homepage.belgium' | trans }}</p>
  193.                     </a>
  194.                     <a href="{{ path('courses') }}" data-place="ChIJl5fz7WR9wUcR8g_mObTy60c" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  195.                 </div>
  197.                 <div class="country-card">
  198.                     <img loading="lazy" src="{{ asset('/images/destinations/maroc.png') }}" alt="{{ 'homepage.morocco' | trans }}">
  199.                     <a href="{{ path('courses') }}" data-place="ChIJjcVRlmGICw0Rw_8sxIGT09k" class="country-mobile-link search-country">
  200.                         <p class="country-title">{{ 'homepage.morocco' | trans }}</p>
  201.                     </a>
  202.                     <a href="{{ path('courses') }}" data-place="ChIJjcVRlmGICw0Rw_8sxIGT09k" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  203.                 </div>
  205.                 {#
  206.                 <div class="country-card">
  207.                     <img loading="lazy" src="{{ asset('/images/destinations/espagne.png') }}" alt="{{ 'homepage.spain' | trans }}">
  208.                     <a href="{{ path('courses', {'place': 'ChIJi7xhMnjjQgwR7KNoB5Qs7KY', 'search': 'true'}) }}" class="country-mobile-link search-country">
  209.                         <p class="country-title">{{ 'homepage.spain' | trans }}</p>
  210.                     </a>
  211.                     <a href="{{ path('courses', {'place': 'ChIJi7xhMnjjQgwR7KNoB5Qs7KY', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  212.                 </div>
  213.                 <div class="country-card">
  214.                     <img loading="lazy" src="{{ asset('/images/destinations/senegal.png') }}" alt="{{ 'homepage.senegal' | trans }}">
  215.                     <a href="{{ path('courses', {'place': 'ChIJcbvFs_VywQ4RQFlhmVClRlo', 'search': 'true'}) }}" class="country-mobile-link search-country">
  216.                         <p class="country-title">{{ 'homepage.senegal' | trans }}</p>
  217.                     </a>
  218.                     <a href="{{ path('courses', {'place': 'ChIJcbvFs_VywQ4RQFlhmVClRlo', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  219.                 </div>
  220.                 <div class="country-card">
  221.                     <img loading="lazy" src="{{ asset('/images/destinations/italie.png') }}" alt="{{ 'homepage.italy' | trans }}">
  222.                     <a href="{{ path('courses', {'place': 'ChIJA9KNRIL-1BIRb15jJFz1LOI', 'search': 'true'}) }}" class="country-mobile-link search-country">
  223.                         <p class="country-title">{{ 'homepage.italy' | trans }}</p>
  224.                     </a>
  225.                     <a href="{{ path('courses', {'place': 'ChIJA9KNRIL-1BIRb15jJFz1LOI', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  226.                 </div>
  227.                 <div class="country-card">
  228.                     <img loading="lazy" src="{{ asset('/images/destinations/france.png') }}" alt="{{ 'homepage.france' | trans }}">
  229.                     <a href="{{ path('courses', {'place': 'ChIJMVd4MymgVA0R99lHx5Y__Ws', 'search': 'true'}) }}" class="country-mobile-link search-country">
  230.                         <p class="country-title">{{ 'homepage.france' | trans }}</p>
  231.                     </a>
  232.                     <a href="{{ path('courses', {'place': 'ChIJMVd4MymgVA0R99lHx5Y__Ws', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  233.                 </div>
  234.                 <div class="country-card">
  235.                     <img loading="lazy" src="{{ asset('/images/destinations/belgique.png') }}" alt="{{ 'homepage.belgium' | trans }}">
  236.                     <a href="{{ path('courses', {'place': 'ChIJl5fz7WR9wUcR8g_mObTy60c', 'search': 'true'}) }}" class="country-mobile-link search-country">
  237.                         <p class="country-title">{{ 'homepage.belgium' | trans }}</p>
  238.                     </a>
  239.                     <a href="{{ path('courses', {'place': 'ChIJl5fz7WR9wUcR8g_mObTy60c', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  240.                 </div>
  241.                 <div class="country-card">
  242.                     <img loading="lazy" src="{{ asset('/images/destinations/maroc.png') }}" alt="{{ 'homepage.morocco' | trans }}">
  243.                     <a href="{{ path('courses', {'place': 'ChIJjcVRlmGICw0Rw_8sxIGT09k', 'search': 'true'}) }}" class="country-mobile-link search-country">
  244.                         <p class="country-title">{{ 'homepage.morocco' | trans }}</p>
  245.                     </a>
  246.                     <a href="{{ path('courses', {'place': 'ChIJjcVRlmGICw0Rw_8sxIGT09k', 'search': 'true'}) }}" class="country-link search-country">{{ 'homepage.discover' | trans }}</a>
  247.                 </div>
  248.                 #}
  249.             
  250.             </div>
  251.         </section>
  252.         
  253.         {% if medias | length > 0 %}
  254.         
  255.         <section id="talks">
  256.             <div class="container-fluid">
  257.                 <div class="main-title mb-5">
  258.                     <h2 class="title-text">{{ 'homepage.sponsors' | trans }}</h2>
  259.                 </div>
  260.                 <div class="logos-wrap">
  261.                     
  262.                     {% for media in medias %}
  263.                     {% if media.link != null %}
  264.                     <a href="{{media.link}}" target="_blank">
  265.                     {% endif %}
  266.                     <div class="logo-item">
  267.                         <img loading="lazy" src="{{ asset('/images/media/' ~ media.image) }}" alt="Sport Eco">
  268.                         <span class="logo-text">"{{ media.name }}"</span>
  269.                     </div>
  270.                     {% if media.link != null %}
  271.                     </a>
  272.                     {% endif %}
  273.                     {% endfor %}
  274.                 
  275.                 </div>
  276.             </div>
  277.         </section>
  279.         {% endif %}
  281.         {% if articles | length > 0 %}
  282.             <section class="blog-section" id="articles">
  283.                 <div class="container-fluid" id="news">
  284.                     <h2 class="section-title-underline">{{ 'homepage.community' | trans }}</h2>
  285.                     <div class="row">
  286.                         {% for article in articles %}
  287.                             <div class="col-xl-3 col-lg-4 col-md-6 col-sm-12 blog-col">
  288.                                 {% include "front/blog/_blog-card.html.twig" %}
  289.                             </div>
  290.                         {% endfor %}
  291.                     </div>
  292.                     <div class="text-center">
  293.                         <a href="{{ path('blog') }}">
  294.                             <button class="btn main-btn mx-auto">{{ 'homepage.see_blog' | trans }}</button>
  295.                         </a>
  296.                     </div>
  297.                 </div>
  298.             </section>
  299.         {% endif %}
  303.         <section id="" class="pb-5">
  304.             <div class="container-fluid">
  305.                 <div class="main-title mb-5">
  306.                     <h2 class="title-text">{{ 'homepage.pros' | trans }}</h2>
  307.                 </div>
  308.                 <div class="partners-wrap">
  309.                     <div class="partner-item">
  310.                         <img loading="lazy" src="{{ asset('/images/coach.png') }}" alt="Coachs">
  311.                         <a href="{{ path('directory', {'type[]': 'coach'}) }}" class="btn partner-btn coach">{{ 'global.coachs' | trans }}</a>
  312.                     </div>
  313.                     <div class="partner-item">
  314.                         <img loading="lazy" src="{{ asset('/images/club.png') }}" alt="Clubs">
  315.                         <a href="{{ path('directory', {'type[]': 'club'}) }}" class="btn partner-btn club">{{ 'global.clubs' | trans }}</a>
  316.                     </div>
  317.                     <div class="partner-item">
  318.                         <img loading="lazy" src="{{ asset('/images/operator.png') }}" alt="Opérateurs">
  319.                         <a href="{{ path('directory', {'type[]': 'operator'}) }}" class="btn partner-btn operator">{{ 'global.operators' | trans }}</a>
  320.                     </div>
  321.                 </div>
  322.             </div>
  323.         </section>
  325.         {% include "front/blog/_blog-cta.html.twig" %}
  327.     </div>
  328. {% endblock %}
  330. {% block javascript %}
  332.     <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBNWTs1XHaB_zzkP1menI9mdg-NBk1IZnY&libraries=places&language={{ app.request.locale }}"></script>
  334.     {{ parent() }}
  335.     {{ encore_entry_script_tags('search') }}
  338.     <script>
  339.         google.maps.event.addDomListener(window, 'load', initialize);
  340.     
  341.         function initialize() {
  343.             var address = document.getElementById('destination');
  345.             var options = {
  346.                 types: ['(regions)']
  347.             };
  349.             autocomplete = new google.maps.places.Autocomplete(address, options);
  350.             
  351.             google.maps.event.addListener(autocomplete, 'place_changed', function() {
  352.                 fillInAddress();
  353.             });
  355.             google.maps.event.addDomListener(address, 'keydown', function(event) { 
  356.                 if (event.keyCode === 13) { 
  357.                     event.preventDefault(); 
  358.                 }
  359.             }); 
  360.             
  361.         }
  363.         function fillInAddress() {
  365.             var place = autocomplete.getPlace();
  367.             document.getElementById('place').value = place.place_id;
  368.             
  369.         }
  370.     </script>
  372.     {#
  373.     <script>
  374.             $.post('/set-device', { width: screen.width, height:screen.height }, function(json) {
  375.                 if(json.outcome == 'success') {
  376.                     // do something with the knowledge possibly?
  377.                 } else {
  378.                     alert('Unable to let PHP know what the screen resolution is!');
  379.                 }
  380.             },'json');
  381.     </script>
  382.     #}
  384.     <script>
  385.         var searchInput = $('#search');
  386.         var place = $('#place');
  387.         var inSession = false;    
  389.         $('button[type=submit]').on('click', function (e) {
  390.             searchInput.val("true");
  392.             if (inSession == false) {
  393.                 e.preventDefault()
  394.                 let locale = $('.header').data('locale');
  396.                 let destination = $('#destination').val();
  397.                 
  398.                 inSession = true;
  400.                 if (destination != '') {
  401.                     localStorage.setItem('destination', destination)
  402.                 }
  403.             } 
  404.             $('.home-search-form').trigger('submit');
  405.         })
  407.         $('.search-country').on('click', function (e) {
  408.             if (inSession == false) {
  409.                 e.preventDefault()
  410.                 let locale = $('.header').data('locale');
  411.                 let destination = null;
  412.                 if ($(this).hasClass('country-mobile-link')) {
  413.                     destination = $(this).find('.country-title').text();
  414.                 } else {
  415.                     destination = $(this).prev().find('.country-title').text();
  416.                 }
  417.                 searchInput.val("true");
  418.                 place.val($(this).data('place'));
  419.                 
  420.                 inSession = true;
  421.                 if (destination != '') {
  422.                     localStorage.setItem('destination', destination)
  423.                 }
  424.             } 
  425.             $('.home-search-form').trigger('submit');
  426.         })
  428.     </script>
  430. {% endblock %}