{% extends 'site/site.html.twig' %}

{% block headtitle %}
  {{ parent() }}
  - Accueil
{% endblock %}

{% block page %}
  <div class="container">
    <div class="formation-acceuil">
      <div class="block-formation-titre text-center">
        <span>NOS</span> FORMATIONS
      </div>
      <div class="row">
        <div class="col-12 col-lg-4">
          <!-- Single Courses Start -->
          <div class="single-courses">
            <div class="courses-images">
              <a href="courses-details.html">
                <img src="{{ asset('assets/site/images/courses-04.webp') }}" />
              </a>
            </div>
            <div class="courses-content">
              <h4 class="title">
                <a>CYCLE IAA DE FORMATION EN ASSURANCE</a>
              </h4>
              <div class="courses-meta">
                <span><i class="fa fa-clock-o"></i> 320 heures</span>
                <span><i class="fa fa-users"></i> +2000 participants</span>
              </div>
              <div class="courses-price-review">
                <div class="courses-price">
                  <span class="sale-parice">En présentiel - en ligne</span>
                </div>
              </div>
            </div>
          </div>
          <!-- Single Courses End -->
        </div>
        <div class="col-12 col-lg-4">
          <!-- Single Courses Start -->
          <div class="single-courses">
            <div class="courses-images">
              <a href="courses-details.html">
                <img src="{{ asset('assets/site/images/courses-05.webp') }}" />
              </a>
            </div>
            <div class="courses-content">
              <h4 class="title">
                <a>
                  SEMINAIRES

                  EN INTER <br />ENTREPRISES
                </a>
              </h4>
              <div class="courses-meta">
                <span><i class="fa fa-clock-o"></i> 320 heures</span>
                <span><i class="fa fa-users"></i> +2000 participants</span>
              </div>
              <div class="courses-price-review">
                <div class="courses-price">
                  <span class="sale-parice">En présentiel</span>
                </div>
              </div>
            </div>
          </div>
          <!-- Single Courses End -->
        </div>
        <div class="col-12 col-lg-4">
          <!-- Single Courses Start -->
          <div class="single-courses">
            <div class="courses-images">
              <a href="courses-details.html">
                <img src="{{ asset('assets/site/images/courses-03.webp') }}" />
              </a>
            </div>
            <div class="courses-content">
              <h4 class="title">
                <a>
                  FORMATIONS

                  EN INTRA <br />ENTREPRISES
                </a>
              </h4>
              <div class="courses-meta">
                <span><i class="fa fa-clock-o"></i> 320 heures</span>
                <span><i class="fa fa-users"></i> +2000 participants</span>
              </div>
              <div class="courses-price-review">
                <div class="courses-price">
                  <span class="sale-parice">En présentiel</span>
                </div>
              </div>
            </div>
          </div>
          <!-- Single Courses End -->
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="formation-acceuil">
      <div class="block-formation-titre text-center">
        <span>NOS</span> CYCLES
      </div>
      <div class="row">
        <div class="col-12 col-lg-6">
          <!-- Single Courses Start -->
          <div class="color-mentor-bg-1 student-mentor cube-instuctor mb-sm-5">
            <h4>
              <a href="#">En présentiel</a>
            </h4>
            <div class="row">
              <div class="col-lg-7 col-md-12">
                <div class="top-instructors">
                  <p>
                    9 mois, 3 jours par semaine pour les professionnels<br />
                    7 mois, 5jours par semaine pour les candidats libres
                  </p>
                </div>
              </div>
              <div class="col-lg-5 col-md-12">
                <div class="mentor-img">
                  <img src="{{ asset('assets/site/images/cours-present.png') }}"
                    alt="cours"
                    width="100%" />
                </div>
              </div>
            </div>
          </div>
          <!-- Single Courses End -->
        </div>
        <div class="col-12 col-lg-6">
          <div class="color-mentor-bg-2 student-mentor cube-instuctor">
            <h4>
              <a href="#">En ligne</a>
            </h4>
            <div class="row">
              <div class="col-lg-7 col-md-12">
                <div class="top-instructors">
                  <p>
                    Pour ceux qui ne peuvent assister en présentiel<br />
                    Le même cycle de formation est assuré en ligne en cours du soir.
                  </p>
                </div>
              </div>
              <div class="col-lg-5 col-md-12">
                <div class="mentor-img">
                  <img src="{{ asset('assets/site/images/cour-soir.png') }}"
                    alt="cours"
                    width="100%" />
                </div>
              </div>
            </div>
          </div>
          <!-- Single Courses End -->
        </div>
      </div>
    </div>
  </div>
  <div class="block-contact">
    <div class="container">
      <div class="row">
        <div class="col-12 col-md-9">
          <div class="contact-titre mb-3">
            Le cycle de formation en assurance de l’IAA est approuvé par les
            instances de contrôle et est reconnu pour compléter le dossier
            d’agrément pour l’exercice du métier d’agent général en Tunisie.
          </div>
        </div>
        <div class="col-12 col-md-3 p-top">
          <div class="btn-1">
            <a href="contact-formation.html">
              <button class="btn-1--couleur">CONTACTEZ NOUS</button>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container">
    <div class="articles-page-acceuil">
      <div class="block-formation-titre text-center">
        <span>DERNIERS</span> EVENEMENTS
      </div>
      <div class="row">
        <div class="col-12 col-lg-4">
          <div class="articles">
            <article class="card">
              <img class="card__background"
                src="{{ asset('assets/site/images/article1.jpg') }}"
                alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
                width="1920"
                height="2193" />
              <div class="card__content | flow">
                <div class="card__content--container | flow">
                  <h1 class="card__title">
                    Evénement 1
                  </h1>
                  <p class="card__description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Rerum in labore laudantium deserunt fugiat numquam.
                  </p>
                </div>
                <button class="card__button">
                  En savoir plus <i class="fa fa-arrow-right ml-3"></i>
                </button>
              </div>
            </article>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="articles">
            <article class="card">
              <img class="card__background"
                src="{{ asset('assets/site/images/article2.jpg') }}"
                alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
                width="1920"
                height="2193" />
              <div class="card__content | flow">
                <div class="card__content--container | flow">
                  <h2 class="card__title">
                    Evénement 2
                  </h2>
                  <p class="card__description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Rerum in labore laudantium deserunt fugiat numquam.
                  </p>
                </div>
                <button class="card__button">
                  En savoir plus <i class="fa fa-arrow-right ml-3"></i>
                </button>
              </div>
            </article>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="articles">
            <article class="card">
              <img class="card__background"
                src="{{ asset('assets/site/images/article3.jpg') }}"
                alt="Photo of Cartagena's cathedral at the background and some colonial style houses"
                width="1920"
                height="2193" />
              <div class="card__content | flow">
                <div class="card__content--container | flow">
                  <h2 class="card__title">
                    Evénement 3
                  </h2>
                  <p class="card__description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    Rerum in labore laudantium deserunt fugiat numquam.
                  </p>
                </div>
                <button class="card__button">
                  En savoir plus <i class="fa fa-arrow-right ml-3"></i>
                </button>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- carousel formation- -->

  <div class="carousel-formation d-none d-sm-block d-md-none d-block d-sm-none">
    <div class="container">
      <div class="row">
        <div class="col-12 mb-2">
          <div class="block-formation-titre">
            <span>NOS</span> FORMATION
          </div>
        </div>
        <div class="col-12 col-md-12">
          <div id="myCarousel-1" class="carousel slide" data-ride="carousel">
            <!-- Carousel indicators -->
            <ol class="carousel-indicators">
              <li data-target="#myCarousel-1" data-slide-to="0" class="active">

              </li>
              <li data-target="#myCarousel-1" data-slide-to="1"></li>
              <li data-target="#myCarousel-1" data-slide-to="2"></li>
              <li data-target="#myCarousel-1" data-slide-to="3"></li>
              <li data-target="#myCarousel-1" data-slide-to="4"></li>
              <li data-target="#myCarousel-1" data-slide-to="5"></li>
            </ol>
            <!-- Wrapper for carousel items -->
            <div class="carousel-inner">
              <div class="item carousel-item active">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-1.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item carousel-item">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-2.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item carousel-item">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-3.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item carousel-item">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-4.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item carousel-item">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-5.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="item carousel-item">
                <div class="row">
                  <div class="col-12">
                    <div class="globale-carousel-formation">
                      <div class="image-carousel-formation">
                        <img src=" images/image-formation-6.jpg')}}" />
                      </div>
                      <div class="texte-carousel-formation">
                        <div class="assistante-carousel">
                          <p>
                            ASSISTANCT(E) COMMERCIAL(E)
                          </p>
                          <p>
                            DIAGNOSTIQUEUR IMMOBILIER
                          </p>
                        </div>
                        <div class="temps-duree-carousel">
                          <i class="fa fa-clock-o"></i>
                          <p class="duree-prix">
                            Durée: 5 jours
                          </p>
                          <i class="fa fa-eur ml-4"></i>
                          <p class="duree-prix">
                            Prix: 2160.00
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Carousel controls -->
            <a class="carousel-control left carousel-control-prev"
              href="#myCarousel-1"
              data-slide="prev">
              <i class="fa fa-angle-left"></i>
            </a>
            <a class="carousel-control right carousel-control-next"
              href="#myCarousel-1"
              data-slide="next">
              <i class="fa fa-angle-right"></i>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}