{% extends 'base.html.twig' %}
{% block title %}
Nos offres et tarifs sport pour votre structure
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{ asset('/css/pages/prices.css') }}" />
{% endblock %}
{% block body %}
<div class="slider">
<div class="usefull-width item-slider">
<div>
<H1 class="item-header-h">
Nos offres et tarifs pour<br/>
<span class="color">votre structure sportive !</span>
</H1>
<div class="with-padding-15 hidden-sm hidden-xs">
Vous recherchez un logiciel de gestion de structure sportive. Sport adhesion, vous propose 3 offres adaptées à vos besoins pour gagner un maximum de temps et gérer au mieux votre structure.
</div>
</div>
<div class="item-wrapped hidden-xs">
<div class="launch-vids">
<img src="{{ asset('/images/pages/members/sport-adhesion-header-preview.svg') }}" />
</div>
</div>
</div>
</div>
<div class="usefull-width">
<section>
<div class="row-fluid">
<H2 class="lcH">
Tout savoir sur l'offre autour du logiciel {{ website_name }}
</H2>
</div>
<div class="visible-xs">
<div class="item-monthly with-margin-top-30">
<div class="type typeL" style="color:#00a5db;">
Sans engagement
</div>
<div class="content-monthly">
<div class="monthly-input">
<div class="circle-choice">
</div>
</div>
</div>
<div class="type typeR">
Avec engagement
</div>
</div>
</div>
<div class="content-prices">
<div class="item-monthly hidden-xs">
<div class="type typeL" style="color:#00a5db;">
Sans engagement
</div>
<div class="content-monthly">
<div class="monthly-input">
<div class="circle-choice">
</div>
</div>
</div>
<div class="type typeR">
Avec engagement
</div>
</div>
<div class="item-offers">
{% set i = 0 %}
{% set color = ["orange", "green", "blue"] %}
{% set read = [] %}
{% if subscribes is not empty %}
{% for subscribe in subscribes %}
<div class="item-box {{ color[i] }}-gradient">
<div class="ordP-mob">
<div>
<div class="name {{ color[i] }}">
{{ subscribe.getNameFr|capitalize }}
</div>
<div class="item-prices">
{% set read = read|merge(['
<span class="monthlyPay">'~ subscribe.getMonthly ~ ' € <span class="unl-bold size-12">HT / mois</span></span>
<span class="monthlyEngPay erase">'~ subscribe.getMonthlyCommit ~ ' € <span class="unl-bold size-12">HT / mois</span></span>'])
%}
{{ read[i]|raw }}
</div>
</div>
<a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="choose {{ color[i] }}">
Choisir <i class="fas fa-arrow-circle-right fa-lg"></i>
</a>
</div>
<div class="hidden-xs">
<a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="button {{ color[i] }}">
Choisir cette offre
</a>
<div class="horizontal-separator bg-grey with-margin-top-bottom-15"></div>
<div class="text">
{{ subscribe.getDescriptionFr|raw }}
</div>
{% if i != 0 %}
<a href="{{ path('signup', {'subscribe':subscribe.getId,'trial':true}) }}" class="button_theme">
Démarrer un éssai
</a>
{% endif %}
</div>
</div>
<div class="text-xs {{ color[i] }}-gradient visible-xs">
<div class="text">
{{ subscribe.getDescriptionFr|raw }}
</div>
<a href="{{ path('signup', {'subscribe':subscribe.getId}) }}" class="button {{ color[i] }}">
Choisir cette offre
</a>
</div>
{% set i = i + 1 %}
{% endfor %}
{% endif %}
</div>
<div class="align size-16">
Accédez à une plateforme de paiement complète dotée d'une tarification simple,<br/>
proportionnelle à votre utilisation du service.
</div>
<div class="item-bank-prices">
<div>
<div class="amount">
1,9% + 0,30 €
</div>
<div class="amount-text">
pour l’espace économique européen<br/> (+1% pour les cartes bancaires britanniques)
</div>
</div>
<div>
<div class="amount">
3,65% + 0,30 €
</div>
<div class="amount-text">
pour les cartes internationales
</div>
</div>
</div>
</div>
</section>
</div>
<section class="row-fluid hidden-sm hidden-xs">
<div class="item-explain">
<div class="usefull-width">
<H3 class="title">
On vous aide à choisir l’offre adaptée à vos besoins !
</H3>
<div id="item-carroussel" class="configurator-desk">
<div class="item-answer step1" data-step="1">
<div class="configurator-question">
<div class="color">
Structure.
</div>
Je suis ?
</div>
<div class="item-mob-cg-anim">
<div class="item-list">
<div class="item-choice active" data-name="type" data-value="Association">
<img class="icon" alt="" src="{{ asset('/images/configurator/icon-association.svg') }}" />
<span class="item-name">Association</span>
</div>
<div class="item-choice" data-name="type" data-value="Salle de sport">
<img class="icon" alt="" src="{{ asset('/images/configurator/icon-salle-de-sport.svg') }}" />
<span class="item-name">Salle de sport</span>
</div>
<div class="item-choice" data-name="type" data-value="Coach">
<img class="icon" alt="" src="{{ asset('/images/configurator/icon-coach.svg') }}" />
<span class="item-name">Coach</span>
</div>
<div class="item-choice" data-name="type" data-value="Hotel">
<img class="icon" alt="" src="{{ asset('/images/configurator/icon-hotel.svg') }}" />
<span class="item-name">Hotel</span>
</div>
<div class="item-choice" data-name="type" data-value="Autres">
<img class="icon" alt="" src="{{ asset('/images/configurator/icon-other.svg') }}" />
<span class="item-name">Autres</span>
</div>
</div>
</div>
</div>
<div class="item-answer step2 erase" data-step="2">
<div class="configurator-question">
<div class="color">
Utilisation.
</div>
Vous recherchez un logiciel de...
</div>
<div class="item-mob-cg-anim">
<div class="item-list">
<div class="item-choice" data-name="utilities" data-value="comptabilities">
<img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-comptabilities.svg') }}" />
<span class="item-name">Gestion comptable</span>
</div>
<div class="item-choice" data-name="utilities" data-value="members">
<img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-members.svg') }}" />
<span class="item-name">Gestion membres</span>
</div>
<div class="item-choice" data-name="utilities" data-value="online_payment">
<img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-online-payment.svg') }}" />
<span class="item-name">Paiement en ligne</span>
</div>
<div class="item-choice" data-name="utilities" data-value="grounds">
<img class="icon" alt="" src="{{ asset('/images/icons/configurator/icon-conf-grounds.svg') }}" />
<span class="item-name">Gestion<br/>terrain</span>
</div>
</div>
</div>
</div>
<div class="item-answer step3 erase" data-step="3">
<div class="configurator-question">
<div class="color">
Capacité.
</div>
Vous êtes environs...
</div>
<div class="item-mob-cg-anim">
<div class="item-list">
<div class="item-choice" data-name="members" data-value="120">
<span class="number-choice">
120
</span>
<span class="item-name">membres</span>
</div>
<div class="item-choice" data-name="members" data-value="250">
<span class="number-choice">
250
</span>
<span class="item-name">membres</span>
</div>
<div class="item-choice" data-name="members" data-value="500">
<span class="number-choice">
500
</span>
<span class="item-name">membres</span>
</div>
<div class="item-choice" data-name="members" data-value="2000">
<span class="number-choice">
2000
</span>
<span class="item-name">membres</span>
</div>
</div>
</div>
</div>
<div class="item-answer step4 erase" data-step="4">
<div id="renderConfigurator" class="align">
<img src="{{ asset('/images/loader/loader.gif') }}" width="40" height="40" border="0" />
</div>
</div>
<div class="stepper">
<div class="circle-step done"></div>
<div class="line-step"></div>
<div class="circle-step"></div>
<div class="line-step"></div>
<div class="circle-step"></div>
<div class="line-step"></div>
<div class="circle-step"></div>
</div>
</div>
</div>
</div>
</section>
<div class="usefull-width">
<section>
<H2>
Comparez les offres sport adhesion
</H2>
<div class="compare-version">
<div>
<select class="compareVer form-control">
<option value="basic" selected="selected">Offre basic</option>
<option value="business">Offre business</option>
<option value="premium">Offre business Premium</option>
</select>
</div>
<div>
<select class="compareVer form-control">
<option value="basic">Offre basic</option>
<option value="business" selected="selected">Offre business</option>
<option value="premium">Offre business Premium</option>
</select>
</div>
</div>
<div class="item-compare">
<div class="table-compare">
<table class="compare">
<thead>
<tr>
<th class="label-fc">
Fonctionnalités
</th>
<th class="list-name orange basic">
<span class="left width-max with-margin-top-bottom-8">
<img src="{{ asset('/images/logos/pos3.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Basic
</span>
<div class="size-12 with-line-height-10">
{{ read[0]|raw}}
</div>
<a href="{{ path('signup', {'subscribe':1}) }}" class="button orange">
Choisir
</a>
</th>
<th class="list-name green business">
<span class="left width-max with-margin-top-bottom-8">
<img src="{{ asset('/images/logos/pos2.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Business
</span>
<div class="size-12 with-line-height-10">
{{ read[1]|raw}}
</div>
<a href="{{ path('signup', {'subscribe':2}) }}" class="button green">
Choisir
</a>
</th>
<th class="list-name blue premium erase-mob">
<span class="left width-max with-margin-bottom-6">
<img src="{{ asset('/images/logos/pos1.png') }}" height="60" width="auto" class="hidden-xs"/><br/>Business
<br/>Premium
</span>
<div class="size-12 with-line-height-10">
{{ read[2]|raw}}
</div>
<a href="{{ path('signup', {'subscribe':3}) }}" class="button blue">
Choisir
</a>
</th>
</tr>
</thead>
<tbody>
{% if features is not empty %}
{% set i = 0 %}
{% set maxFeatures = features|length - 1 %}
{% for feature in features %}
{% set first = '' %}
{% set end = '' %}
{% set itemCategory = '' %}
{% set categoryName = '' %}
{% set itemChild = '' %}
{% set child = '' %}
{% if i == 0 %}
{% set first = 'first' %}
{% elseif i == maxFeatures %}
{% set end = 'end' %}
{% endif %}
{% if feature.getCategoryName is not empty %}
{% set itemCategory = 'item-category' %}
{% set categoryName = 'data-id=' ~ feature.getCategoryName %}
{% endif %}
{% if feature.getChildOf != 0 %}
{% set itemChild = 'item-child' %}
{% if categoryFeatures is not empty and categoryFeatures[feature.getChildOf] is not empty %}
{% set child = categoryFeatures[feature.getChildOf] %}
{% endif %}
{% endif %}
<tr class="{{ itemChild ~ ' ' ~ child}}">
<td class="item-name {{ first }} {{ end }} {{ itemCategory }}" {{ categoryName }}>
{{ feature.getFeatureName|capitalize }}
{% if categoryName is not empty %}
<i class="fas fa-caret-right"></i>
{% endif %}
</td>
<td class="basic">
{% if feature.getFeatureValue is not empty and feature.getFeatureValue != 3 %}
{% if feature.getFeatureValue == 0 %}
<i class="fas fa-times-circle"></i>
{% elseif feature.getFeatureValue == 1 %}
<i class="fas fa-check-circle"></i>
{% elseif feature.getFeatureValue == 2 %}
<i class="fas fa-check-circle mid"></i>
{% endif %}
{% endif %}
{% if feature.getFeatureText is not empty %}
<span class="text">
{{ feature.getFeatureText|raw }}
{% if feature.getConfiguratorName == "nb_members" %}
membres
{% elseif feature.getConfiguratorName == "account_users" %}
compte(s)
{% endif %}
</span>
{% endif %}
</td>
<td class="mid business">
<div class="middle {{ first }} {{ end }}">
{% if feature.getFeatureValueTwo is not empty and feature.getFeatureValueTwo != 3 %}
{% if feature.getFeatureValueTwo == 0 %}
<i class="fas fa-times-circle"></i>
{% elseif feature.getFeatureValueTwo == 1 %}
<i class="fas fa-check-circle"></i>
{% elseif feature.getFeatureValueTwo == 2 %}
<i class="fas fa-check-circle mid"></i>
{% endif %}
{% endif %}
{% if feature.getFeatureTextTwo is not empty %}
<span class="text">
{{ feature.getFeatureTextTwo|raw }}
{% if feature.getConfiguratorName == "nb_members" %}
membres
{% elseif feature.getConfiguratorName == "account_users" %}
comptes
{% endif %}
</span>
{% endif %}
</div>
</td>
<td class="premium erase-mob">
{% if feature.getFeatureValueThree is not empty and feature.getFeatureValueThree != 3 %}
{% if feature.getFeatureValueThree == 0 %}
<i class="fas fa-times-circle"></i>
{% elseif feature.getFeatureValueThree == 1 %}
<i class="fas fa-check-circle"></i>
{% elseif feature.getFeatureValueThree == 2 %}
<i class="fas fa-check-circle mid"></i>
{% endif %}
{% endif %}
{% if feature.getFeatureTextThree is not empty %}
<span class="text">
{{ feature.getFeatureTextThree|raw }}
{% if feature.getConfiguratorName == "nb_members" %}
membres
{% elseif feature.getConfiguratorName == "account_users" %}
comptes
{% endif %}
</span>
{% endif %}
</td>
</tr>
{% set i = i + 1 %}
{% endfor %}
<tr class="unl-border">
<td>
</td>
<td class="list-name orange basic">
Basic
<a href="{{ path('signup', {'subscribe':1}) }}" class="button orange">
Choisir
</a>
</td>
<td class="list-name green business">
Business
<a href="{{ path('signup', {'subscribe':2, 'trial':true}) }}" class="button green">
Essai gratuit
</a>
</td>
<td class="list-name blue premium erase-mob">
Business
<br/>Premium
<a href="{{ path('signup', {'subscribe':3, 'trial':true}) }}" class="button blue unl-margin">
Essai gratuit
</a>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</section>
<section>
<div class="row-fluid">
<H2 class="with-margin-top-80 marginT-mob-30">
Questions fréquentes
</H2>
<div class="hHook with-margin-bottom-30">
Les questions les plus demandées
</div>
<div class="item-faq">
{% set i = 1 %}
{% set read = '' %}
{% if faq is not empty %}
{% set max = faq|length / 2 %}
{% for question in faq %}
{% if i == 1 %}
{% set read = read ~ '<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 unl-padding-mob">' %}
{% endif %}
{% set read = read ~ '<div class="title dimQuest">
<i class="fas fa-question-circle fa-lg"></i>
' ~ question.getQuestionFr ~ '
<div class="arrow">
<i class="fas fa-sort-down"></i>
</div>
<div class="answer">
' ~ question.getReponseFr ~ '
</div>
</div>' %}
{% if i == max %}
{% set read = read ~ '</div>' %}
{% set i = 0 %}
{% endif %}
{% set i = i + 1 %}
{% endfor %}
{% if i != 1 %}
{% set read = read ~ '</div>' %}
{% endif %}
{% endif %}
{{ read|raw }}
</div>
</div>
</section>
<section>
<div class="row-fluid">
<H2>
Des questions ? on en parle !
</H2>
<div class="button_theme btnlg with-auto-margin with-margin-top-20">
Prendre rendez-vous
</div>
</div>
</section>
<div class="row-flex">
<div class="height-100 width-max"></div>
</div>
<ol class="breadcrumb unl-margin">
<li class="breadcrumb-item active" aria-current="page">Les tarifs {{ website_name }}</li>
</ol>
</div>
{% endblock %}
{% block javascriptFooter %}
<script>
$(document).ready(function(){
step = 1;
hashSales = '{{ hashSales }}';
// Select an answer
//
$(document).on('click', '#item-carroussel .item-choice', function(){
var name = $(this).data('name');
var value = $(this).data('value');
var copy = $(this).clone();
complete = 0;
step = $(this).closest('.item-answer').data('step');
$(this).closest('.item-answer').find('.item-choice').removeClass('active');
$(this).addClass('active');
if(typeof step !== "undefined"){
$('#item-carroussel .step' + step).hide();
$('#item-carroussel .step').html(step);
$('#item-carroussel .stepper').children('.circle-step').eq(step).addClass('done');
$('#item-carroussel .stepper').children('.line-step').eq((parseInt(step) - 1)).addClass('done');
step = parseInt(step) + 1;
$('#item-carroussel .step' + step).show();
}
if(step == 4){
complete = 1;
}
$.ajax({
url: '/send/configurator',
type: "POST",
data: {
'name': name,
'value': value,
'complete':complete,
'type': 'Desktop :: Prices',
'hash':hashSales,
},
success: function(data, textStatus, jqXHR) {
save_data = data;
if(step == 4){
$('#renderConfigurator').html(data);
}
},
complete: function() {
},
error: function(jqXHR, textStatus, errorThrown) {
}
});
});
$(document).on('change', '.compareVer', function(){
$('table.compare .premium, table.compare .basic, table.compare .business').hide();
$('.compareVer').each(function(){
var value = $(this).val();
$('table.compare .' + value).show();
});
});
$(document).on('click', '.item-category', function(){
var id = $(this).data('id');
if($(this).hasClass('open')){
$(this).find('.fa-caret-right').css({'transform':''});
$(this).removeClass('open');
$('tr.' + id).hide();
}else{
$(this).find('.fa-caret-right').css({'transform':'rotate(90deg)'});
$(this).addClass('open');
$('tr.' + id).show();
}
});
$(document).on('click', '.monthly-input', function(){
$('.item-monthly').find('.type').css({'color':''});
if($(this).hasClass('sideRight')){
$('.item-monthly').find('.typeL').css({'color':'#00a5db'});
$(this).removeClass('sideRight');
$('.circle-choice').animate({'margin-left':''},300);
$('.monthlyPay').show();
$('.monthlyEngPay').hide();
}else{
$('.item-monthly').find('.typeR').css({'color':'#00a5db'});
$(this).addClass('sideRight');
$('.circle-choice').animate({'margin-left':'38px'},300);
$('.monthlyEngPay').show();
$('.monthlyPay').hide();
}
});
});
</script>
{% endblock %}