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

Open in your IDE?
  1. <!-- <div class="container-xl px-4 mb-5 d-none d-sm-block mt-4">
  2.     <h2 class="text-center text-uppercase mb-3 ">Comment faire une consultation de voyance ?</h2>
  3.    
  4.     <div class="card">
  5.         <div class="card-header border-bottom">
  6.           
  7.             <div class="nav nav-pills nav-justified flex-column flex-xl-row nav-wizard" id="cardTab" role="tablist">
  8.                
  9.                 <a class="nav-item nav-link active" id="wizard1-tab" href="#wizard1" data-bs-toggle="tab" role="tab"
  10.                     aria-controls="wizard1" aria-selected="true">
  11.                     <div class="wizard-step-icon">1</div>
  12.                     <div class="wizard-step-text">
  13.                         <div class="wizard-step-text-name">Créez Votre Compte</div>
  14.                     </div>
  16.                 </a>
  17.                
  18.                 <a class="nav-item nav-link" id="wizard2-tab" href="#wizard2" data-bs-toggle="tab" role="tab"
  19.                     aria-controls="wizard2" aria-selected="true">
  20.                     <div class="wizard-step-icon">2</div>
  21.                     <div class="wizard-step-text">
  22.                         <div class="wizard-step-text-name">Appelez le <br> {{telFrance}}</div>
  23.                     </div>
  24.                 </a>
  25.        
  26.                 <a class="nav-item nav-link" id="wizard3-tab" href="#wizard3" data-bs-toggle="tab" role="tab"
  27.                     aria-controls="wizard3" aria-selected="true">
  28.                     <div class="wizard-step-icon">3</div>
  29.                     <div class="wizard-step-text">
  30.                         <div class="wizard-step-text-name">Entrez Votre Code personnel</div>
  31.                       
  32.                     </div>
  33.                 </a>
  34.                
  35.                 <a class="nav-item nav-link" id="wizard4-tab" href="#wizard4" data-bs-toggle="tab" role="tab"
  36.                     aria-controls="wizard4" aria-selected="true">
  37.                     <div class="wizard-step-icon">4</div>
  38.                     <div class="wizard-step-text">
  39.                         <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"
  44.                     aria-controls="wizard5" aria-selected="true">
  45.                     <div class="wizard-step-icon">5</div>
  46.                     <div class="wizard-step-text">
  47.                         <div class="wizard-step-text-name">Profitez de la consultation</div>
  49.                     </div>
  50.                 </a>
  51.             </div>
  52.         </div>
  53.         <div class="card-body">
  54.             <div class="tab-content" id="cardTabContent">
  55.                 
  56.                 <div class="tab-pane py-5 py-xl-10 fade show active" id="wizard1" role="tabpanel"
  57.                     aria-labelledby="wizard1-tab">
  58.                     <div class="row justify-content-center">
  59.                         <p class="card-text text-center">Vous pouvez créer votre compte pour votre voyance sur <a
  60.                                 class="_link" href="{{path('app_register')}}">ce lien</a>. Et si vous avez déjà un
  61.                             compte, c'est <a class="_link" href="{{path('app_login')}}">par ici pour votre consultation
  62.                                 !</a> N'oubliez pas de le <a class="_link" href="{{path('app_tarifs')}}">créditer.</a>
  63.                         </p>
  65.                     </div>
  66.                 </div>
  67.               
  68.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard2" role="tabpanel" aria-labelledby="wizard2-tab">
  69.                     <p class="card-text text-center"> Consultez notre <strong class="_strong">équipe de voyants et
  70.                             médiums Voyance
  71.                             téléphone par
  72.                             téléphone</strong> au
  73.                         <a class="_link" href="#">{{telFrance}}.</a>
  75.                 </div>
  77.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard3" role="tabpanel" aria-labelledby="wizard3-tab">
  78.                     <div class="row justify-content-center">
  79.                         <p class="card-text text-center"> Une fois connecté à notre centre de voyance, il
  80.                             vous suffit d'entrer votre code personnel à l'aide de votre clavier téléphonique.</p>
  82.                     </div>
  83.                 </div>
  84.             
  85.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard4" role="tabpanel" aria-labelledby="wizard4-tab">
  86.                     <div class="row justify-content-center">
  87.                         <p class="card-text text-center"> Après avoir choisi votre voyant, indiquez son code
  88.                             à l'aide de votre clavier téléphonique. N'oubliez pas de validez par la touche #</p>
  89.                     </div>
  90.                 </div>
  91.            
  92.                 <div class="tab-pane py-5 py-xl-10 fade" id="wizard5" role="tabpanel" aria-labelledby="wizard5-tab">
  93.                     <div class="row justify-content-center">
  94.                         <p class="card-text text-center"> Vous pouvez à présent vous consacrer à votre conversation avec
  95.                             votre voyant.</p>
  97.                     </div>
  98.                 </div>
  99.             </div>
  100.         </div>
  101.     </div>
  102.     <a href="#" class="btn btn-fidelite">
  103.   Programme Fidélité 5%
  104. </a>
  106. </div> -->
  107. <section class="d-none d-sm-block mb-2 mt-2">
  108.   <img src="../assets/img/photo/logo.webp" alt="VOYANCE EN LIGNE voyance en ligne logo" class="img-fluid mx-auto d-block mb-3">
  109.     <h2 class="text-center text-uppercase mb-3 ">Comment faire une consultation de voyance ?</h2>
  110.     <div class="accordion accordion-flush mt-3" id="serviceFlush">
  111.         <div class="accordion-item">
  112.             <p class="accordion-header" id="flush-headingOne">
  113.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  114.                     data-bs-target="#serviceOne" aria-expanded="false" aria-controls="flush-collapseOne">
  115.                     01. Créez Votre Compte
  116.                 </button>
  117.             </p>
  118.             <div id="serviceOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne"
  119.                 data-bs-parent="#serviceFlush">
  120.                 <div class="accordion-body text-center"> Vous pouvez créer votre compte pour votre voyance sur <a
  121.                         href="{{path('app_register')}}" class="_link">ce lien</a> . Et si vous
  122.                     avez déjà un compte, c'est <a href="{{path('app_login')}}" class="_link">par ici pour votre
  123.                         consultation </a> ! N'oubliez pas de le <a href="{{path('app_tarifs')}}"
  124.                         class="_link">créditer</a>.
  126.                 </div>
  127.             </div>
  128.         </div>
  130.         <div class="accordion-item mt-2">
  131.             <p class="accordion-header" id="flush-headingTwo">
  132.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  133.                     data-bs-target="#serviceTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
  134.                     02. Appelez le {{telFrance}}
  135.                 </button>
  136.             </p>
  137.             <div id="serviceTwo" class="accordion-collapse collapse " aria-labelledby="flush-headingTwo"
  138.                 data-bs-parent="#serviceFlush">
  139.                 <div class="accordion-body text-center">
  140.                     Consultez notre équipe de voyants VOYANCE EN LIGNE par téléphone au <br>
  141.                     <button class="btn btn-primary bg-primary">
  142.                         <i class="bi bi-telephone-fill"></i> {{telFrance}}.
  143.                     </button>
  144.                 </div>
  145.             </div>
  146.         </div>
  148.         <div class="accordion-item mt-2">
  149.             <p class="accordion-header" id="flush-headingThree">
  150.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  151.                     data-bs-target="#serviceThree" aria-expanded="false" aria-controls="flush-collapseTwo">
  152.                     03. Entrez Votre Code personnel
  154.                 </button>
  155.             </p>
  156.             <div id="serviceThree" class="accordion-collapse collapse " aria-labelledby="flush-headingThree"
  157.                 data-bs-parent="#serviceFlush">
  158.                 <div class="accordion-body text-center">Une fois connecté à notre centre de voyants, il vous
  159.                     suffit
  160.                     d'entrer votre code personnel à l'aide de votre clavier téléphonique.
  161.                 </div>
  162.             </div>
  163.         </div>
  164.         <div class="accordion-item mt-2">
  165.             <p class="accordion-header" id="flush-headingFour">
  166.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  167.                     data-bs-target="#serviceFour" aria-expanded="false" aria-controls="flush-collapseTwo">
  170.                     04. Entrez le Code de l'expert
  172.                 </button>
  173.             </p>
  174.             <div id="serviceFour" class="accordion-collapse collapse " aria-labelledby="flush-headingFour"
  175.                 data-bs-parent="#serviceFlush">
  176.                 <div class="accordion-body text-center">Après avoir choisi votre voyant, indiquez son code à
  177.                     l'aide de
  178.                     votre clavier téléphonique. N'oubliez pas de validez par la touche #
  179.                 </div>
  180.             </div>
  181.         </div>
  182.         <div class="accordion-item mt-2">
  183.             <p class="accordion-header" id="flush-headingFive">
  184.                 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
  185.                     data-bs-target="#serviceFive" aria-expanded="false" aria-controls="flush-collapseTwo">
  187.                     05. Profitez de la consultation
  189.                 </button>
  190.             </p>
  191.             <div id="serviceFive" class="accordion-collapse collapse " aria-labelledby="flush-headingFive"
  192.                 data-bs-parent="#serviceFlush">
  193.                 <div class="accordion-body text-center">Vous pouvez à présent vous consacrer à votre conversation avec
  194.                     votre voyant.
  195.                 </div>
  196.             </div>
  197.         </div>
  199. <div id="scroll-section" class="text-center floating-element" style="margin-top: 240px; display: none;">
  200.     <div id="stars-container-top" style="position: absolute; top: -40px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px;">
  201.         <!-- Les étoiles en haut seront ajoutées ici par JavaScript -->
  202.     </div>
  203.     <a href="{{path('app_tarifs')}}" class="btn btn-fidelite btn-lg" id="fidelite-btn" style="margin-top: 20px;">
  204.         Programme Fidélité 5%
  205.     </a>
  206.     <div id="stars-container-bottom" style="position: absolute; top: 120px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px;">
  207.         <!-- Les étoiles en bas seront ajoutées ici par JavaScript -->
  208.     </div>
  209. </div>
  210. </section>