templates/content/home/etapes_consultation.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.       <div class="d-flex align-items-center justify-content-center mt-4 mb-0">
  5.     <a class="_link" href="{{path('app_home')}}">
  6.         <button type="button" class="btn btn-primary mt-2">
  7.             Revenir à la page d'accueil
  8.         </button>
  9.     </a>
  10.       </div>
  11. <section >
  12. <div class="container mt-4">
  13.     <h2 class="text-center text-uppercase mb-4">Comment faire une consultation de voyance ?</h2>
  14.     <!-- Version non connectée -->
  15.     {% if not app.user %}
  16.     <div class="card">
  17.         <div class="card-header border-bottom">
  18.             <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard" id="cardTab" role="tablist">
  19.                 <a class="nav-item nav-link active" id="wizard1-tab" href="#wizard1" data-bs-toggle="tab" role="tab" aria-controls="wizard1" aria-selected="true">
  20.                     <div class="wizard-step-icon">1</div>
  21.                     <div class="wizard-step-text">
  22.                         <div class="wizard-step-text-name">Créez Votre Compte</div>
  23.                     </div>
  24.                 </a>
  25.                 <a class="nav-item nav-link" id="wizard2-tab" href="#wizard2" data-bs-toggle="tab" role="tab" aria-controls="wizard2" aria-selected="true">
  26.                     <div class="wizard-step-icon">2</div>
  27.                     <div class="wizard-step-text">
  28.                         <div class="wizard-step-text-name">Appelez le <br> {{ telFrance }}(France) ou <br />{{telBelgique}} (Belgique)</div>
  29.                     </div>
  30.                 </a>
  31.                 <a class="nav-item nav-link" id="wizard3-tab" href="#wizard3" data-bs-toggle="tab" role="tab" aria-controls="wizard3" aria-selected="true">
  32.                     <div class="wizard-step-icon">3</div>
  33.                     <div class="wizard-step-text">
  34.                         <div class="wizard-step-text-name">Entrez Votre Code personnel</div>
  35.                     </div>
  36.                 </a>
  37.                 <a class="nav-item nav-link" id="wizard4-tab" href="#wizard4" data-bs-toggle="tab" role="tab" aria-controls="wizard4" aria-selected="true">
  38.                     <div class="wizard-step-icon">4</div>
  39.                     <div class="wizard-step-text">
  40.                         <div class="wizard-step-text-name">Entrez le Code de l'expert</div>
  41.                     </div>
  42.                 </a>
  43.                 <a class="nav-item nav-link" id="wizard5-tab" href="#wizard5" data-bs-toggle="tab" role="tab" aria-controls="wizard5" aria-selected="true">
  44.                     <div class="wizard-step-icon">5</div>
  45.                     <div class="wizard-step-text">
  46.                         <div class="wizard-step-text-name">Profitez de la consultation</div>
  47.                     </div>
  48.                 </a>
  49.             </div>
  50.         </div>
  51.         <div class="card-body">
  52.             <div class="tab-content" id="cardTabContent">
  53.                 <div class="tab-pane py-5 py-xl-10 fade show active" id="wizard1" role="tabpanel" aria-labelledby="wizard1-tab">
  54.                     <div class="row justify-content-center">
  55.                         <p class="card-text text-center">Vous pouvez créer votre compte pour votre voyance sur <a class="_link" href="{{ path('app_register') }}">ce lien</a>. Et si vous avez déjà un compte, c'est <a class="_link" href="{{ path('app_login') }}">par ici pour votre consultation !</a> N'oubliez pas de le <a class="_link" href="{{ path('app_tarifs') }}">créditer.</a></p>
  56.                     </div>
  57.                 </div>
  58.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard2" role="tabpanel" aria-labelledby="wizard2-tab">
  59.                     <p class="card-text text-center"> Consultez notre <strong class="_strong">équipe de voyants et médiums</strong> au <a class="_link" href="tel:{{ telFrance }}">{{ telFrance }}</a>.</p>
  60.                 </div>
  61.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard3" role="tabpanel" aria-labelledby="wizard3-tab">
  62.                     <div class="row justify-content-center">
  63.                         <p class="card-text text-center"> Une fois connecté à notre centre de voyance, il vous suffit d'entrer votre code personnel à l'aide de votre clavier téléphonique.</p>
  64.                     </div>
  65.                 </div>
  66.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard4" role="tabpanel" aria-labelledby="wizard4-tab">
  67.                     <div class="row justify-content-center">
  68.                         <p class="card-text text-center"> Après avoir choisi votre voyant, indiquez son code à l'aide de votre clavier téléphonique. N'oubliez pas de valider par la touche #.</p>
  69.                     </div>
  70.                 </div>
  71.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard5" role="tabpanel" aria-labelledby="wizard5-tab">
  72.                     <div class="row justify-content-center">
  73.                         <p class="card-text text-center"> Vous pouvez à présent vous consacrer à votre conversation avec votre voyant.</p>
  74.                     </div>
  75.                 </div>
  76.             </div>
  77.         </div>
  78.     </div>
  79.     {% else %}
  80.     <!-- Version connectée -->
  81.     <div class="card">
  82.         <div class="card-header border-bottom">
  83.             <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard" id="cardTab" role="tablist">
  84.                 <a class="nav-item nav-link active" id="wizard1-tab" href="#wizard1" data-bs-toggle="tab" role="tab" aria-controls="wizard1" aria-selected="true">
  85.                     <div class="wizard-step-icon">1</div>
  86.                     <div class="wizard-step-text">
  87.                         <div class="wizard-step-text-name">Crediter Votre Compte</div>
  88.                     </div>
  89.                 </a>
  90.                 <a class="nav-item nav-link" id="wizard2-tab" href="#wizard2" data-bs-toggle="tab" role="tab" aria-controls="wizard2" aria-selected="true">
  91.                     <div class="wizard-step-icon">2</div>
  92.                     <div class="wizard-step-text">
  93.                         <div class="wizard-step-text-name">Appelez le <br> {{ telFrance }}</div>
  94.                     </div>
  95.                 </a>
  96.                 <a class="nav-item nav-link" id="wizard3-tab" href="#wizard3" data-bs-toggle="tab" role="tab" aria-controls="wizard3" aria-selected="true">
  97.                     <div class="wizard-step-icon">3</div>
  98.                     <div class="wizard-step-text">
  99.                         <div class="wizard-step-text-name">Entrez Votre Code personnel</div>
  100.                     </div>
  101.                 </a>
  102.                 <a class="nav-item nav-link" id="wizard4-tab" href="#wizard4" data-bs-toggle="tab" role="tab" aria-controls="wizard4" aria-selected="true">
  103.                     <div class="wizard-step-icon">4</div>
  104.                     <div class="wizard-step-text">
  105.                         <div class="wizard-step-text-name">Entrez le Code de l'expert</div>
  106.                     </div>
  107.                 </a>
  108.                 <a class="nav-item nav-link" id="wizard5-tab" href="#wizard5" data-bs-toggle="tab" role="tab" aria-controls="wizard5" aria-selected="true">
  109.                     <div class="wizard-step-icon">5</div>
  110.                     <div class="wizard-step-text">
  111.                         <div class="wizard-step-text-name">Profitez de la consultation</div>
  112.                     </div>
  113.                 </a>
  114.             </div>
  115.         </div>
  116.         <div class="card-body">
  117.             <div class="tab-content" id="cardTabContent">
  118.                 <div class="tab-pane py-5 py-xl-10 fade show active" id="wizard1" role="tabpanel" aria-labelledby="wizard1-tab">
  119.                     <div class="row justify-content-center">
  120.                         <p class="card-text text-center">Vous pouvez créditer votre compte pour votre voyance sur <a class="_link" href="{{ path('app_tarifs') }}">ce lien</a>.</p>
  121.                     </div>
  122.                 </div>
  123.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard2" role="tabpanel" aria-labelledby="wizard2-tab">
  124.                     <p class="card-text text-center"> Il vous suffit d'appeler notre centrale voyance au <a class="_link" href="tel:{{ telFrance }}">{{ telFrance }}</a>. Appel non surtaxé.</p>
  125.                 </div>
  126.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard3" role="tabpanel" aria-labelledby="wizard3-tab">
  127.                     <div class="row justify-content-center">
  128.                         <p class="card-text text-center"> Une fois connecté à notre centre de voyance, il vous suffit d'entrer votre code personnel à l'aide de votre clavier téléphonique.</p>
  129.                     </div>
  130.                 </div>
  131.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard4" role="tabpanel" aria-labelledby="wizard4-tab">
  132.                     <div class="row justify-content-center">
  133.                         <p class="card-text text-center"> Après avoir choisi votre voyant, indiquez son code à l'aide de votre clavier téléphonique. N'oubliez pas de valider par la touche #.</p>
  134.                     </div>
  135.                 </div>
  136.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard5" role="tabpanel" aria-labelledby="wizard5-tab">
  137.                     <div class="row justify-content-center">
  138.                         <p class="card-text text-center"> Vous pouvez à présent vous consacrer à votre conversation avec votre voyant.</p>
  139.                     </div>
  140.                 </div>
  141.             </div>
  142.         </div>
  143.     </div>
  144.     {% endif %}
  145. </div>
  146. </section>
  147. {% endblock %}