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

{% block title %}Accueil{% endblock %}

{% block body %}

<section class="home-slider owl-carousel">
      <div class="slider-item" style="background-image:url({{ asset('img/image_1.jpg') }});" data-stellar-background-ratio="0.1">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_2.jpg') }});" data-stellar-background-ratio="0.1">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_3.jpg') }});" data-stellar-background-ratio="0.1">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_4.jpg') }});" data-stellar-background-ratio="0.1">
      <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_5.jpg') }});" data-stellar-background-ratio="0.1">
      <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_6.jpg') }});" data-stellar-background-ratio="0.1">
      <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
      <div class="slider-item" style="background-image:url({{ asset('img/image_7.jpg') }});" data-stellar-background-ratio="0.1">
        <div class="overlay"></div>
        <div class="container">
          <div class="row no-gutters slider-text align-items-center justify-content-end" data-scrollax-parent="true"></div>
        </div>
      </div>
    </section>
		
		
     <section class="ftco-section ftco-no-pt ftco-no-pb">
      <div class="container">
        <div class="row justify-content-center mb-5 pb-2">
         <div class="col-md-12 wrap-about py-4 py-md-5 ftco-animate">
            <div class="heading-section mb-5">
              <div class="col-md-12 text-center heading-section">
                <h2 class="mb-2" style="font-size: 30px; color: #007BFF;">3IM, Imagerie Information et Instrumentation Médicale</h2>
              </div>
            </div>
        <div class="row">
          <div class="col-md-6 services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="staff">
                <a href="#" data-toggle="modal" data-target="#modalDentaire"><img src="{{ asset('img/dept-2.jpg') }}" height="90%" width="90%" alt=""></a>
                <div class="media-body p-2 mt-3">
                 <h2>Espace Dentaire</h2>
                </div>
              </div>
            </div>      
          </div>
          <div class="col-md-6 services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="staff">
                <a href="#" data-toggle="modal" data-target="#modalProthesiste"><img src="{{ asset('img/prothese.jpg') }}" height="90%" width="90%" alt=""></a>
                <div class="media-body p-2 mt-3">
                 <h2>Espace Prothésiste</h2>
                </div>
              </div>
            </div>      
          </div>
          <div class="col-md-6 services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="staff">
                <a href="#" data-toggle="modal" data-target="#modalImpres"><img src="{{ asset('img/CAD.jpg') }}"  height="100%" width="95%" alt=""></a> 
                <div class="media-body p-2 mt-3">
                  <h2>CAD-CAM – Impression 3D</h2>
                </div>
              </div>
            </div>      
          </div>
          <div class="col-md-6 services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="staff">
                <a href="#" data-toggle="modal" data-target="#modalTelemedecine"><img src="{{ asset('img/medecine.jpg') }}"  height="90%" width="87%" alt=""></a> 
                <div class="media-body p-2 mt-3">
                  <h2>Télémédecine</h2>
                </div>
              </div>
            </div>      
          </div>
        </div>
      </div>
    </section>


    <section class="ftco-intro" style="background-image: url({{ asset('img/bg_3.jpg') }});" data-stellar-background-ratio="0.5">
      <div class="overlay"></div>
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <h2>We Provide Free Dental Care Consultation</h2>
            <p class="mb-0">Your Health is Our Top Priority with Comprehensive, Affordable medical.</p>
            <p></p>
          </div>
          <div class="col-md-3 d-flex align-items-center">
            <p class="mb-0"><a href="#" class="btn btn-secondary px-4 py-3">Free Consutation</a></p>
          </div>
        </div>
      </div>
    </section>

    <section class="ftco-section ftco-services">
    	<div class="container">
    		<div class="row justify-content-center mb-5 pb-2">
          <div class="col-md-8 text-center heading-section ftco-animate">
          	<span class="subheading">Services</span>
            <h2 class="mb-4">Our Clinic Services</h2>
            <p>Separated they live in. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country</p>
          </div>
        </div>
        <div class="row">
        	<div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-drilling"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Dental Implants</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-tooth"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Cosmetic Dentistry</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-dental-floss"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Dental Care</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
					
					<div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-shiny-tooth"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Teeth Whitening</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-dentist-chair"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Dental Calculus</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-tooth-1"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Periondontics</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-tooth-with-braces"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Clip &amp; Braces</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
          <div class="col-md-3 d-flex services align-self-stretch p-4 ftco-animate">
            <div class="media block-6 d-block text-center">
              <div class="icon d-flex justify-content-center align-items-center">
            		<span class="flaticon-decayed-tooth"></span>
              </div>
              <div class="media-body p-2 mt-3">
                <h3 class="heading">Root Canel</h3>
                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic.</p>
              </div>
            </div>      
          </div>
        </div>
    	</div>
    </section>

    <section class="ftco-section testimony-section bg-light">
      <div class="container">
        <div class="row justify-content-center mb-5 pb-2">
          <div class="col-md-8 text-center heading-section ftco-animate">
          	<span class="subheading">TEMOIGNAGES</span>
            <h2 class="mb-4">Ce que pensent nos clients</h2>
          </div>
        </div>
        <div class="row ftco-animate justify-content-center">
          <div class="col-md-12">
            <div class="carousel-testimony owl-carousel">
              <div class="item">
                <div class="testimony-wrap d-flex">
                  <div class="user-img mr-4" style="background-image: url({{ asset('img/person_1.jpg') }})">
                  </div>
                  <div class="text ml-2 bg-light">
                  	<span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                    </span>
                    <p>Chez 3IM il y a un service commercial de qualité et un accompagnement au top ,les équipes technique et commerciale sont réactives et à l’écoute pour progresser ensemble.</p>
                    <p class="name">Racky Henderson</p>
                    <span class="position">Farmer</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimony-wrap d-flex">
                  <div class="user-img mr-4" style="background-image: url({{ asset('img/person_2.jpg') }})">
                  </div>
                  <div class="text ml-2 bg-light">
                  	<span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                    </span>
                    <p>Chez 3IM il y a un service commercial de qualité et un accompagnement au top ,les équipes technique et commerciale sont réactives et à l’écoute pour progresser ensemble.</p>
                    <p class="name">Henry Dee</p>
                    <span class="position">Businessman</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimony-wrap d-flex">
                  <div class="user-img mr-4" style="background-image: url({{ asset('img/person_3.jpg') }})">
                  </div>
                  <div class="text ml-2 bg-light">
                  	<span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                    </span>
                    <p>Chez 3IM il y a un service commercial de qualité et un accompagnement au top ,les équipes technique et commerciale sont réactives et à l’écoute pour progresser ensemble.</p>
                    <p class="name">Mark Huff</p>
                    <span class="position">Students</span>
                  </div>
                </div>
              </div>
              <div class="item">
                <div class="testimony-wrap d-flex">
                  <div class="user-img mr-4" style="background-image: url({{ asset('img/person_4.jpg') }})">
                  </div>
                  <div class="text ml-2 bg-light">
                  	<span class="quote d-flex align-items-center justify-content-center">
                      <i class="icon-quote-left"></i>
                    </span>
                    <p>Chez 3IM il y a un service commercial de qualité et un accompagnement au top ,les équipes technique et commerciale sont réactives et à l’écoute pour progresser ensemble.</p>
                    <p class="name">Rodel Golez</p>
                    <span class="position">Striper</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>


<!--pop up vignette dentaire -->
<div class="modal fade" id="modalDentaire" tabindex="-1" role="dialog" aria-labelledby="myDentaireLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 font-weight-bold" style="color: #007bff;">Espace Dentaire</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
      </div>
    </div>
  </div>
</div>

<!-- pop up vignette prothesiste -->
<div class="modal fade" id="modalProthesiste" tabindex="-1" role="dialog" aria-labelledby="myProthesisteLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 font-weight-bold" style="color: #007bff;">Espace Prothésiste</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
      </div>
    </div>
  </div>
</div>

<!-- pop up vignette impression 3D -->
<div class="modal fade" id="modalImpres" tabindex="-1" role="dialog" aria-labelledby="myImpresLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 font-weight-bold" style="color: #007bff;">CAD-CAM – Impression 3D</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
      </div>
    </div>
  </div>
</div>

<!-- pop up vignette telemedecine -->
<div class="modal fade" id="modalTelemedecine" tabindex="-1" role="dialog" aria-labelledby="myTelemedecineLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h3 class="modal-title w-100 font-weight-bold" style="color: #007bff;">Télémédecine</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.</p>
      </div>
    </div>
  </div>
</div>
{% endblock %}