templates/front/accueil.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block style %}
  4.     <style>
  5.         .modal-content {
  6.             border-radius: 50px;
  7.         }
  8.         .modal-body {
  9.             padding: 40px;
  10.             min-width: 500px;
  11.             min-height: 500px;
  12.             color: #fff;
  13.             border-radius: 50px;
  14.             position: relative;
  15.         }
  16.         button.close {
  17.             color: #fff;
  18.             border: 2px solid #fff;
  19.             border-radius: 50%;
  20.             width: 30px;
  21.             height: 30px;
  22.             position: absolute;
  23.             top: 15px;
  24.             right: 15px;
  25.         }
  26.         .home-slide  {
  27.             min-height: 1080px;
  28.             display: block;
  29.             overflow: hidden;
  30.         }
  31.         #background-video {
  32.           width: 100%;
  33.           height: 100%;
  34.           object-fit: cover;
  35.           position: fixed;
  36.           left: 0;
  37.           right: 0;
  38.           top: 0;
  39.           bottom: 0;
  40.           z-index: -1;
  41.           border-radius: 15px;
  42.         }
  43.         @media (max-width: 1549px){
  44.             .home-slide  { 
  45.                 display: block;min-height: 800px;
  46.                 overflow: hidden;
  47.             }
  48.             .img-box .img-1 { height: 591px; width:auto; display:block; object-fit:cover;}
  49.         } 
  50.         @media (max-width: 768px) {
  51.             #background-video { display: none; }
  52.             .img-box .img-1 {
  53.                 height:auto;
  54.             }
  55.         }
  56.     </style>
  57. {% endblock %}
  59. {% block banniere %}
  60.     <section class="home-slide owl-carousel">
  61.         {% for slide in slides %}
  62.         <div class="item-slide">
  63.             <div class="bg-slide"><img src="{{ asset(slider_directory ~ slide.image) }}" alt="" {% if loop.index  !=  1  %} loading="lazy" {% endif %} class="img"></div>
  64.             <div class="container-fluid">
  65.                 <div class="title">
  66.                     {{ slide.titre | raw }}
  67.                 </div>
  68.                 <div class="desc">
  69.                     {{ slide.soustitre | raw }}
  70.                 </div>
  71.                 <a href="{{ slide.buttonLink }}" class="btn-slide btn-3">
  72.                     {{ slide.buttonText }}
  73.                 </a>
  74.             </div>
  75.         </div>
  76.         {% endfor %}
  77.     </section>
  78. {% endblock %}
  80. {% block contenu %}
  82.     <section class="pt-75 pb-35 home-page">
  83.         <div class="container clearfix">
  84.             <div class="clearfix">
  85.                 <div class="img-box float-lg-left wow fadeInLeft" data-wow-delay="1s">
  86.                     <img src="{{ src }}" loading="lazy" alt="olivier ecole de surf de la cote sauvage la palmyre bouverie" class="img-1">
  87.                     <div class="text-img">
  88.                     </div>
  89.                 </div>
  90.                 <div class="sect-title text-center  pt-40 wow fadeInRight" data-wow-delay="1.5s">
  91.                     <h1>
  92.                         {{ page.titre }}
  93.                     </h1>
  94.                 </div>
  95.                 <div class="bloc-text wow fadeInRight" data-wow-delay="1.5s">
  96.                     {{ page.contenu | raw }}
  97.                 </div>
  98.             </div>
  99.             <div class="text-center">
  100.                 <div class="logo-surf wow fadeInUp"  data-wow-delay="0.5s">
  101.                     <img src="{{ asset('front/images/logo-surf.png') }}" loading="lazy" alt="ecoles du surf francais esf logo">
  102.                     <object data="{{ asset('front/images/text-surf.svg') }}" type=""></object>
  103.                 </div>
  104.             </div>
  105.         </div>
  106.     </section>
  108. {% endblock %}
  110. {% block atout %}
  111.     <section class="pt-35  avt-section wow slideInUp" data-wow-delay="0.5s">
  112.         <div class="container container-one">
  113.             <div class="sect-title text-center">
  114.                 <div class="h1">
  115.                     Nos atouts exclusifs
  116.                 </div>
  117.             </div>
  118.             <div class="avt-list">
  120.                 <div class="row  no-gutters">
  121.                     <div class="col-xxl-6 col-xl-6 col-12">
  122.                         <div class="item-avt">
  123.                             <div class="row no-gutters">
  124.                                 <div class="col-md-6">
  125.                                     <div class="content">
  126.                                         <img src="{{ asset('front/images/a-1.png') }}" loading="lazy" width="78" alt="decouvir le surf sur la cote sauvage">
  127.                                         <div class="title">
  128.                                             Les meilleures conditions de vagues
  129.                                         </div>
  130.                                         <div class="desc">
  131.                                             Des plannings adaptés aux marées et à la houle pour bénéficier des meilleures vagues de la journée !
  132.                                         </div>
  133.                                         <a href="/nos-atouts-et-services-exclusifs.html" class="btn-2">
  134.                                             <span>voir tous les atouts</span>
  135.                                             <div class="wave"></div>
  136.                                         </a>
  137.                                     </div>
  138.                                 </div>
  139.                                 <div class="col-md-6">
  140.                                     <div class="img-avt avt-1">
  141.                                         <img src="{{ asset('front/images/atouts-et-avantages/meilleure-vague.jpg') }}" class="img" loading="lazy" alt="ecole de surf la palmyre">
  142.                                     </div>
  143.                                 </div>
  144.                             </div>
  145.                             <a href="/nos-atouts-et-services-exclusifs.html" class="full-link"></a>
  146.                         </div>
  147.                     </div>
  148.                     <div class="col-xxl-6 col-xl-6 col-12">
  149.                         <div class="item-avt" style="background-color: #d14357;">
  150.                             <div class="row no-gutters">
  151.                                 <div class="col-md-6">
  152.                                     <div class="content">
  153.                                         <img src="{{ asset('front/images/a-2.png') }}" width="113" loading="lazy" alt="chariot electrique plage cote sauvage ecole de surf">
  154.                                         <div class="title">
  155.                                             Chariot électrique <br> 4x4
  156.                                         </div>
  157.                                         <div class="desc">
  158.                                             Unique sur la Côte Sauvage : l’assurance d’accéder aux plus beaux spots en toute facilité !
  159.                                         </div>
  160.                                         <a href="/nos-atouts-et-services-exclusifs.html" class="btn-2">
  161.                                             <span>voir tous les atouts</span>
  162.                                             <div class="wave"></div>
  163.                                         </a>
  164.                                     </div>
  165.                                 </div>
  166.                                 <div class="col-md-6">
  167.                                     <div class="img-avt avt-2">
  168.                                         <img src="{{ asset('front/images/atouts-et-avantages/chariot-electrique.jpg') }}" class="img" loading="lazy" alt="ecole de surf charente maritime">
  169.                                     </div>
  170.                                 </div>
  171.                             </div>
  172.                             <a href="/nos-atouts-et-services-exclusifs.html" class="full-link"></a>
  173.                         </div>
  174.                     </div>
  175.                     <div class="col-xxl-6 col-xl-6 col-12">
  176.                         <div class="item-avt" style="background-color: #ed8f1f;">
  177.                             <div class="row no-gutters">
  178.                                 <div class="col-md-6">
  179.                                     <div class="img-avt avt-3">
  180.                                         <img src="{{ asset('front/images/atouts-et-avantages/securite-maximale.jpg') }}" class="img" loading="lazy" alt="ecole de surf plage de la bouverie">
  181.                                     </div>
  182.                                 </div>
  183.                                 <div class="col-md-6">
  184.                                     <div class="content">
  185.                                         <img src="{{ asset('front/images/a-3.png') }}" loading="lazy" width="75" alt="ecole de surf cote sauvage">
  186.                                         <div class="title">
  187.                                             Sécurité maximale
  188.                                         </div>
  189.                                         <div class="desc">
  190.                                             Nos moniteurs de surf sont tous des Sauveteurs Nautiques diplômés et expérimentés.
  191.                                         </div>
  192.                                         <a href="/nos-atouts-et-services-exclusifs.html" class="btn-2">
  193.                                             <span>voir tous les atouts</span>
  194.                                             <div class="wave"></div>
  195.                                         </a>
  196.                                     </div>
  197.                                 </div>
  198.                             </div>
  199.                             <a href="/nos-atouts-et-services-exclusifs.html" class="full-link"></a>
  200.                         </div>
  201.                     </div>
  202.                     <div class="col-xxl-6 col-xl-6 col-12">
  203.                         <div class="item-avt" style="background-color: #2db3b9;">
  204.                             <div class="row no-gutters">
  205.                                 <div class="col-md-6">
  206.                                     <div class="img-avt avt-4">
  207.                                         <img src="{{ asset('front/images/atouts-et-avantages/combinaison-gratuite.jpg') }}" class="img" loading="lazy" alt="ecole de surf planche de surf et combinaison gratuites">
  208.                                     </div>
  209.                                 </div>
  210.                                 <div class="col-md-6">
  211.                                     <div class="content">
  212.                                         <img src="{{ asset('front/images/a-4.png') }}" loading="lazy" width="65" alt="ecole de surf la palmyre cote sauvage">
  213.                                         <div class="title">
  214.                                             prêt du matériel gratuit
  215.                                         </div>
  216.                                         <div class="desc">
  217.                                             Planches de surf, combinaisons, lycras... Tout est compris dans nos formules et sans supplément !
  218.                                         </div>
  219.                                         <a href="/nos-atouts-et-services-exclusifs.html" class="btn-2">
  220.                                             <span>voir tous les atouts</span>
  221.                                             <div class="wave"></div>
  222.                                         </a>
  223.                                     </div>
  224.                                 </div>
  225.                             </div>
  226.                             <a href="/nos-atouts-et-services-exclusifs.html" class="full-link"></a>
  227.                         </div>
  228.                     </div>
  229.                 </div>
  230.             </div>
  231.         </div>
  232.     </section>
  233. {% endblock %}
  235. {% block formule %}
  237.     {% include 'front/formule.html.twig' %}
  239. {% endblock %}
  241. {% block carte %}
  242.     <section class="">
  243.         <div class="container-fluid px-xl-5">
  244.             <div class="cote-box wow fadeInUp" data-wow-duration="1.5s">
  245.                 <video id="background-video" autoplay loop muted poster="{{ asset('front/images/back-0.jpg') }}">
  246.                 <source src="{{ asset('front/images/video-vague-escs.mp4') }}" type="video/mp4">
  247.                 </video>
  248.                 <div class="sect-title text-center">
  249.                     <div class="h1 text-white">
  250.                         Toute l’année, sur les plages de la Côte Sauvage, <br>découvrez le surf avec l’ESCS !
  251.                     </div>
  252.                 </div>
  253.                 <div class="d-flex align-items-center justify-content-center flex-wrap" style="gap:20px;">
  254.                     <a href="{{ path('app_index', {'slug': 'contact.html'}) }}" class="btn-2">Nous contacter <i class="fa fa-angle-right"></i>
  255.                         <div class="wave"></div>
  256.                     </a>
  257.                     <a href="/niveaux-et-publics-cours-de-surf-cote-sauvage.html" class="btn-2">Surfez selon votre niveau ! <div class="wave"></div></a>
  258.                 </div>
  259.             </div>
  260.         </div>
  261.     </section>
  262. {% endblock %}
  264. {% block actualite %}
  265.     
  266.     <section class="pt-75 pb-40 blog-section">
  267.         <div class="container">
  268.             <div class="row  ">
  269.                 <div class="col-xl-9 col-lg-8 text-center col-12 mb-30">
  270.                     <div class="sect-title mb-0">
  271.                         <div class="h1 text-uppercase wow fadeInDown" data-wow-delay="0.5s">
  272.                             blog escs : les 3 derniers posts
  273.                         </div>
  274.                     </div>
  275.                 </div>
  276.                 <div class="col-xl-3 col-lg-4 mb-30">
  277.                     <a href="{{ path('app_actualites') }}" class="btn-1"><span>voir tous les ARTICLES</span>
  278.                         <div class="wave"></div>
  279.                     </a>
  280.                 </div>
  281.             </div>
  282.             <div class="row">
  283.                 {% for actualite in actualites %}
  284.                 {{ actualite.init() }}
  285.                 <div class="col-xl-4 col-md-6 col-12 mb-40 wow fadeInUp" data-wow-delay="0.9s">
  286.                     <div class="item-blog">
  287.                         <div class="img">
  288.                             <img src="{{ asset(actualite.imgSrc) }}" loading="lazy" alt="blog ecole de surf">
  289.                         </div>
  290.                         <div class="content">
  291.                             <div class="date">
  292.                                 <span>
  293.                                     {{ actualite.date|localizeddate('none', 'none', null, null, 'd') }}
  294.                                 </span> {{ actualite.date|localizeddate('none', 'none', null, null, 'MMMM') | slice(0, 3) }}. <br>{{ actualite.date|localizeddate('none', 'none', null, null, 'Y') }}
  295.                             </div>
  296.                             <div class="rubrique">
  297.                                 {% if actualite.categorie is not null %}
  298.                                     {{ actualite.categorie.nom }}
  299.                                 {% endif %}
  300.                             </div>
  301.                             <div class="title">
  302.                                 {{ actualite.titre }}
  303.                             </div>
  304.                             <div class="desc">
  305.                                 {{ actualite.contenu | slice(0, 120) | striptags | raw }} [...]
  306.                             </div>
  307.                             <div class="link">
  308.                                 Lire la suite
  309.                             </div>
  310.                         </div>
  311.                         <a href="{{ path('app_actualite_detail', { slug : actualite.slug }) }}" class="full-link"></a>
  312.                     </div>
  313.                 </div>
  314.                 {% endfor %}
  315.                 
  316.             </div>
  317.             <div class="item-cours hover-box cours-1 mb-40 mt-75 wow fadeInRight" data-wow-duration="2s" data-wow-delay="0.5s">
  318.                 <img src="{{ asset('front/images/cours-1.jpg') }}" class="default" alt="tarifs cours de surf cote sauvage">
  319.                 <img src="{{ asset('front/images/cours-1h.jpg') }}" class="hover wow fadeIn" alt="tarif stage de surf la palmyre bouverie">
  320.                 <div class="row">
  321.                     <div class="col-xl-5 col-lg-5 col-md-7 col-12">
  322.                         <div class="sect-title">
  323.                             <div class="sub-title text-white">
  324.                                 débutant · perfectionnement · enfants · ados · adultes...
  325.                             </div>
  326.                             <div class="h1 text-white">
  327.                                 Les cours de surf <br> proposés par l’ESCS, <br> c’est pour tout le monde et pour tous les niveaux !
  328.                             </div>
  329.                         </div>
  330.                         <a href="/niveaux-et-publics-cours-de-surf-cote-sauvage.html" class="btn-2 text-uppercase">en savoir plus <div class="wave"></div></a>
  331.                     </div>
  332.                 </div>
  333.             </div>
  334.             <div class="item-cours hover-box cours-2 mb-40 wow fadeInLeft"  data-wow-duration="1.5s" data-wow-delay="1s">
  335.                 <img src="{{ asset('front/images/cours-2.jpg') }}" class="default" alt="surfshop la palmyre">
  336.                 <img src="{{ asset('front/images/cours-2h.jpg') }}" class="hover" alt="location planche de surf cote sauvage">
  337.                 <div class="row">
  338.                     <div class="col-xl-5 col-lg-5 col-md-7 col-12">
  339.                         <div class="sect-title">
  340.                             <div class="sub-title text-white">
  341.                                 surfboards · combinaisons · bodyboards ·vélos...
  342.                             </div>
  343.                             <div class="h1 text-white">
  344.                                 Le Surfshop de l’ESCS : <br> les locations surf <br> les moins chères <br> de la Côte Sauvage !
  345.                             </div>
  346.                         </div>
  347.                         <a href="/le-surfshop-location-de-materiel-escs-cote-sauvage.html" class="btn-2 text-uppercase">découvrez nos offres <div class="wave"></div></a>
  348.                     </div>
  349.                 </div>
  350.             </div>
  351.         </div>
  352.     </section>
  353. {% endblock %}
  355. {% block avis %}
  357.     <section class="temoignage-section">
  358.         <div class="container">
  359.             <div class="text-center mb-40">
  360.                 <div class="sect-title mb-2">
  361.                     <div class="h1 text-uppercase wow fadeInUp">
  362.                         Vos témoignages sur l’escs
  363.                     </div>
  364.                 </div>
  365.                 <div class="text-1 mb-20 wow fadeInDown">
  366.                     L’Ecole de Surf de la Côte Sauvage,c’est vous qui en parlez le mieux !
  367.                 </div>
  368.             </div>
  369.             <div class="temoignage-slide wow fadeInUp">
  370.                 {% for avis in avisListe %}
  371.                 <div class="item">
  372.                     <div class="avatar">
  373.                         <img src="{{ asset(avis_directory~avis.avatar) }}" loading="lazy" alt="avis ecole de surf cote sauvage">
  374.                     </div>
  375.                     <div class="content">
  376.                         <div class="icons">
  377.                             <img src="{{ asset('front/images/icons-1.png') }}" alt="temoignage ecole de surf la palmyre" width="60">
  378.                         </div>
  379.                         <div class="stars">
  380.                             {% for i in 1..5 %}
  381.                                 {% if (i <= avis.note) %}
  382.                                     <i class="fa fa-star"></i>
  383.                                 {% else %}
  384.                                     <i class="fa fa-star empty"></i>
  385.                                 {% endif %}
  386.                             {% endfor %}
  387.                         </div>
  388.                         <div class="desc">
  389.                             {{ avis.commentaire }}
  390.                         </div>
  391.                         <div class="title">
  392.                             {{ avis.nom }}
  393.                         </div>
  394.                     </div>
  395.                     <a href="" class="full-link"></a>
  396.                 </div>
  397.                 {% endfor %}
  398.             </div>
  399.         </div>
  400.     </section>
  402. {% endblock %}
  404. {% block modal %}
  405.     {% if popup is defined and popup is not null %}
  406.     <!-- Modal -->
  407.     <div class="modal fade" id="modal-popup" tabindex="-1" role="dialog" aria-hidden="true">
  408.         <div class="modal-dialog modal-dialog-centered" role="document">
  409.             <div class="modal-content">
  410.                 <div class="modal-body" style="background: url({{ asset(popup_directory ~ popup.image) }}) no-repeat center/cover;">
  411.                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  412.                         <span aria-hidden="true">&times;</span>
  413.                     </button>
  414.                     {{ popup.contenu | raw }}
  415.                 </div>
  416.             </div>
  417.         </div>
  418.     </div>
  419.     {% endif %}
  420. {% endblock %}