{% extends 'base.html.twig' %}
{% block title %}{{ page.titre }}{% endblock %}
{% block style %}
<style>
@media (max-width: 768px) {
.bannier-blog { height:400px }
}
@media (max-width: 550px) {
.bannier-blog { height:300px }
}
@media (max-width: 400px) {
.bannier-blog { height:250px }
}
/* ---- SMOOTH SCROLLING / davidmazeau.com ---- */
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
}
div[id]:before {
content:'';
display:block;
height:175px;
margin-top:-175px;
visibility:hidden
}
</style>
{% endblock %}
{% block banniere %}
<section class="ban-section">
<div class="ban">
<img src="{{ asset(banniere ~ page.banniere) }}" alt="">
<div class="container">
<div class="sect-title text-center mb-0">
<div class="h1 text-white">
{{ page.getTextBanniere | raw }}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block contenu %}
<section class=" pb-50 pt-45 ">
<div class=" container clearfix ">
<div class="sect-title text-center no-deco">
<h1>
{{ page.titre }}
</h1>
</div>
<div class="bloc-text fs-big text-center mb-55">
{{ page.contenu | raw }}
</div>
{% if page.formules | length > 1 %}
<div class="row">
{% for formule in page.formules %}
{% if 'jardin' in formule.titre|lower %}
<div class="col-xl col-lg-4 col-md-4 col-sm-6 col-12 mb-30">
<a href="#jardin" class="item-tarifs">
<div class="img">
<img src="{{ asset('front/images/esf/t-1.jpeg') }}" alt="">
</div>
<div class="title">
Jardin des vagues
</div>
</a>
</div>
{% endif %}
{% if 'famille' in formule.titre|lower %}
<div class="col-xl col-lg-4 col-md-4 col-sm-6 col-12 mb-30">
<a href="#famille" class="item-tarifs">
<div class="img">
<img src="{{ asset('front/images/esf/t-2.jpeg') }}" alt="">
</div>
<div class="title">
Famille
</div>
</a>
</div>
{% endif %}
{% if 'découverte' in formule.titre|lower %}
<div class="col-xl col-lg-4 col-md-4 col-sm-6 col-12 mb-30">
<a href="#decouverte" class="item-tarifs">
<div class="img">
<img src="{{ asset('front/images/esf/t-3.jpeg') }}" alt="">
</div>
<div class="title">
Découverte
</div>
</a>
</div>
{% endif %}
{% if 'évolution' in formule.titre|lower %}
<div class="col-xl col-lg-4 col-md-4 col-sm-6 col-12 mb-30">
<a href="#evolution" class="item-tarifs">
<div class="img">
<img src="{{ asset('front/images/esf/t-4.jpeg') }}" alt="">
</div>
<div class="title">
évolution
</div>
</a>
</div>
{% endif %}
{% if 'surf guide' in formule.titre|lower %}
<div class="col-xl col-lg-4 col-md-4 col-sm-6 col-12 mb-30">
<a href="#surf" class="item-tarifs">
<div class="img">
<img src="{{ asset('front/images/esf/t-5.jpeg') }}" alt="">
</div>
<div class="title">
Surf guide
</div>
</a>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
<div class="bloc-text text-center pt-55 pb-55">
<p>Matériel et assurance responsabilité civile inclus. Cours tous les jours avec plusieurs horaires disponibles afin de satisfaire les attentes de tous.</p>
</div>
{% if page.formules | length > 0 %}
<div class="list-tarifs">
{% for formule in page.formules %}
{% set ancre = 'jardin' %}
{% if 'famille' in formule.titre|lower %}
{% set ancre = 'famille' %}
{% endif %}
{% if 'découverte' in formule.titre|lower %}
{% set ancre = 'decouverte' %}
{% endif %}
{% if 'évolution' in formule.titre|lower %}
{% set ancre = 'evolution' %}
{% endif %}
{% if 'surf guide' in formule.titre|lower %}
{% set ancre = 'surf' %}
{% endif %}
<div id="{{ ancre }}" class="item">
<div class="row">
<div class="col-xl-4 col-12 mb-xl-0 mb-50">
<div class="img"><img src="{{ asset(formule_directory ~ formule.image) }}" alt=""></div>
</div>
<div class="col-xl-8 col-12">
<div class="title-2">
{{ formule.titre | raw }}
</div>
<div class="list-formule">
<div class="item">
<div class="icon">
<img src="{{ asset('front/images/esf/ico-t-1.svg') }}" width="24" alt="">
</div>
<div class="desc">
<span>Lieu</span> <br> {{ formule.lieu | raw }}
</div>
</div>
<div class="item">
<div class="icon">
<img src="{{ asset('front/images/esf/ico-t-2.svg') }}" width="30" alt="">
</div>
<div class="desc">
<span>niveau</span> <br> {{ formule.niveau | raw }}
</div>
</div>
<div class="item">
<div class="icon">
<img src="{{ asset('front/images/esf/ico-t-3.svg') }}" width="22" alt="">
</div>
<div class="desc">
<span>âge</span> <br> {{ formule.age | raw }}
</div>
</div>
<div class="item">
<div class="icon">
<img src="{{ asset('front/images/esf/ico-t-4.svg') }}" width="34" alt="">
</div>
<div class="desc">
<span>durée</span> <br> {{ formule.duree | raw }}
</div>
</div>
<div class="item">
<div class="icon">
<img src="{{ asset('front/images/esf/ico-t-5.svg') }}" width="34" alt="">
</div>
<div class="desc">
<span>Participants</span> <br> {{ formule.participants | raw }}
</div>
</div>
</div>
<div class="bloc-text">
{{ formule.contenu | raw }}
</div>
<div class="tarif-box">
{% for k, tarif in formule.tarifs|slice(0, 3) %}
<div class="item">
<div class="tarif-detail">
<div class="title">
{{ tarif.titre }}
</div>
<div class="desc">
{{ tarif.prix | raw }}
</div>
</div>
{% for j, tarif in formule.tarifs|slice(3, 6) %}
{% if 'navette' in tarif.titre|lower and k == j %}
<div class="tarif-detail">
<div class="title">
{{ tarif.titre }}
</div>
<div class="desc">
{{ tarif.prix | raw }}
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% endfor %}
{#<div class="item">
<a href="{{ formule.lien | raw }}" target="_blank" class="btn-1">
<div class="icon">
<img src="{{ asset('front/images/esf/h-1.svg') }}" width="39" alt="">
</div>
<div>je réserve <br> en ligne</div>
</a>
</div>#}
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
</div>
</section>
{% endblock %}
{% block formule %}
{% include 'front/formule.html.twig' %}
{% endblock %}