{% extends 'base.html.twig' %}

{% block title %}LM Fast{% endblock %}

{% block body %}
<div class="container-fluid">
   <header class="row justify-content-between border-bottom">
      <div class="col-4 d-flex align-items-center">
         <a href="/" class="link-body-emphasis text-decoration-none"><img src=".{{ asset('images/Logo.png') }}" class="img-fluid" alt="Logo LM Fast"> </a> 
      </div>
      <div class="col-4 d-flex align-items-center justify-content-end">
         <a href="mailto:a.nguyen@lm-fast.com?subject=Prise%20de%20contact%20-%20Site%20internet" class="btn btn-secondary px-4 py-3">Contactez-nous</a>
      </div>
   </header>
</div>
<div class="container-fluid my-5">
   <div class="container">
      <div class="row align-items-center g-5 my-5">
         <div class="col-sm-7">
            <img src=".{{ asset('images/tarif-fast-tab.png') }}" class="img-fluid" alt="Tarif Fast Tab">
         </div>
         <div class="col-sm-5">
            <h3 class="fw-bold mx-5 display-5">Forfait FAST TAB</h3>
            <p class="mx-5">Tout commence par une idée. Peut-être voulez-vous créer une entreprise. Quel que soit le cas, la façon dont vous racontez votre histoire en ligne peut faire toute la différence.</p>
            <div class="accordion accordion-flush mx-5" id="fast-tab">
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solution-globale" aria-expanded="false" aria-controls="solution-globale">
                     Rêvez
                     </button>
                  </h2>
                  <div id="solution-globale" class="accordion-collapse collapse" data-bs-parent="#fast-tab">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#facilitation" aria-expanded="false" aria-controls="facilitation">
                     Structurez
                     </button>
                  </h2>
                  <div id="facilitation" class="accordion-collapse collapse" data-bs-parent="#fast-tab">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fiabilite" aria-expanded="false" aria-controls="fiabilite">
                     Améliorez
                     </button>
                  </h2>
                  <div id="fiabilite" class="accordion-collapse collapse" data-bs-parent="#fast-tab">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row align-items-center g-5 my-5">
         <div class="col-sm-5">
            <h3 class="fw-bold mx-5 display-5">Forfait BASIC</h3>
            <p class="mx-5">Tout commence par une idée. Peut-être voulez-vous créer une entreprise. Quel que soit le cas, la façon dont vous racontez votre histoire en ligne peut faire toute la différence.</p>
            <div class="accordion accordion-flush mx-5" id="basic">
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solution-globale" aria-expanded="false" aria-controls="solution-globale">
                     Rêvez
                     </button>
                  </h2>
                  <div id="solution-globale" class="accordion-collapse collapse" data-bs-parent="#basic">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#facilitation" aria-expanded="false" aria-controls="facilitation">
                     Structurez
                     </button>
                  </h2>
                  <div id="facilitation" class="accordion-collapse collapse" data-bs-parent="#basic">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fiabilite" aria-expanded="false" aria-controls="fiabilite">
                     Améliorez
                     </button>
                  </h2>
                  <div id="fiabilite" class="accordion-collapse collapse" data-bs-parent="#basic">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-sm-7">
            <img src=".{{ asset('images/tarif-basic.png') }}" class="img-fluid" alt="Tarif Fast Tab">
         </div>
      </div>
      <div class="row align-items-center g-5 my-5">
         <div class="col-sm-7">
            <img src=".{{ asset('images/tarif-advanced.png') }}" class="img-fluid" alt="Tarif Fast Tab">
         </div>
         <div class="col-sm-5">
            <div class="row">
               <h3 class="fw-bold mx-5 display-5">Forfait ADVANCED</h3>
               <p class="mx-5">Tout commence par une idée. Peut-être voulez-vous créer une entreprise. Quel que soit le cas, la façon dont vous racontez votre histoire en ligne peut faire toute la différence.</p>
               <div class="accordion accordion-flush mx-5" id="advanced">
                  <div class="accordion-item">
                     <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solution-globale" aria-expanded="false" aria-controls="solution-globale">
                        Rêvez
                        </button>
                     </h2>
                     <div id="solution-globale" class="accordion-collapse collapse" data-bs-parent="#advanced">
                        <div class="accordion-body">TODO.</div>
                     </div>
                  </div>
                  <div class="accordion-item">
                     <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#facilitation" aria-expanded="false" aria-controls="facilitation">
                        Structurez
                        </button>
                     </h2>
                     <div id="facilitation" class="accordion-collapse collapse" data-bs-parent="#advanced">
                        <div class="accordion-body">TODO.</div>
                     </div>
                  </div>
                  <div class="accordion-item">
                     <h2 class="accordion-header">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fiabilite" aria-expanded="false" aria-controls="fiabilite">
                        Améliorez
                        </button>
                     </h2>
                     <div id="fiabilite" class="accordion-collapse collapse" data-bs-parent="#advanced">
                        <div class="accordion-body">TODO.</div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <div class="row align-items-center g-5 my-5">
         <div class="col-sm-7">
            <h3 class="fw-bold mx-5 display-5">Formation</h3>
            <p class="mx-5">Tout commence par une idée. Peut-être voulez-vous créer une entreprise. Quel que soit le cas, la façon dont vous racontez votre histoire en ligne peut faire toute la différence.</p>
            <div class="accordion accordion-flush mx-5" id="formation">
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#solution-globale" aria-expanded="false" aria-controls="solution-globale">
                     Rêvez
                     </button>
                  </h2>
                  <div id="solution-globale" class="accordion-collapse collapse" data-bs-parent="#formation">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#facilitation" aria-expanded="false" aria-controls="facilitation">
                     Structurez
                     </button>
                  </h2>
                  <div id="facilitation" class="accordion-collapse collapse" data-bs-parent="#formation">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
               <div class="accordion-item">
                  <h2 class="accordion-header">
                     <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#fiabilite" aria-expanded="false" aria-controls="fiabilite">
                     Améliorez
                     </button>
                  </h2>
                  <div id="fiabilite" class="accordion-collapse collapse" data-bs-parent="#formation">
                     <div class="accordion-body">TODO.</div>
                  </div>
               </div>
            </div>
         </div>
         <div class="col-sm-5">
            <img src=".{{ asset('images/tarif-formation.png') }}" class="img-fluid" alt="Tarif Fast Tab">
         </div>
      </div>
   </div>
</div>

{% endblock %}