{% extends 'base.html' %} 
{% load static %} 
{% block title %}Home{% endblock title %}

{% block content %}

<!-- Slideshow container -->
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img
        class="d-block w-100"
        src="{% static 'images/pexels-christina-morillo-1181622.jpg' %}"
        alt="First slide"
      />
    </div>
    <div class="carousel-item">
      <img
        class="d-block w-100"
        src="{% static 'images/pexels-mikael-blomkvist-6476254.jpg' %}"
        alt="Second slide"
      />
    </div>
    <div class="carousel-item">
      <img
        class="d-block w-100"
        src="{% static 'images/pexels-rebrand-cities-1367272.jpg' %}"
        alt="Third slide"
      />
    </div>
  </div>
  <a
    class="carousel-control-prev"
    href="#carouselExampleControls"
    role="button"
    data-slide="prev"
  >
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a
    class="carousel-control-next"
    href="#carouselExampleControls"
    role="button"
    data-slide="next"
  >
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

<br />

<!-- The dots/circles -->
<div style="text-align: center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
</div>

<!-- Intro Banner -->
<div class="welcome_banner full_colored">
  <div class="content clearfix">
    <h3>De la valeur ajoutée technologique</h3>

    <span class="ico-quote-left"></span>
    <span class="intro_text">
      Notre action ne prend son sens que si notre travail a contribué à
      singulariser la proposition de valeur de nos clients.
    </span>
    <span class="ico-quote-right"></span> Jackson Tchinda
  </div>
</div>
<!-- End Intro Banner -->

<!-- Icon Boxes Style 1 A -->
<section class="content_section">
  <div class="container icons_spacer">
    <div class="main_title centered upper">
      <h2>
        <span class="line"><span class="dot"></span></span>NOS SERVICES
      </h2>
    </div>
    <div class="icon_boxes_con style1 clearfix">
      {% for service in services %}
      <div class="col-md-4">
        <div class="service_box">
          <span class="icon"><i class="ico-tag"></i></span>
          <div class="service_box_con centered">
            <h3><a href="">{{ service.service_name }}</a></h3>
            <span class="desc"
              >{{ service.service_description|slice:":200" }} ...</span
            >
            <a href="{{ service.get_absolute_url }}" class="mt-3">voir plus</a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
</section>
<!-- End Icon Boxes Style 1 A -->

<!-- Skills -->
<section class="content_section">
  <div class="content row_spacer no_padding">
    <div class="main_title centered upper">
      <h2>
        <span class="line"><i class="ico-strategy"></i></span>NOS COMPÉTENCES
      </h2>
    </div>
    <div class="rows_container clearfix">
      <div class="col-md-6">
        <div class="skill">
          <p>
            Dire que nous sommes des informaticiens, cela ne renseigne pas
            assez. Notre champ d’intervention est l’informatique appliquée à la
            gestion d’entreprise, c’est-à-dire que nous développons des
            programmes informatiques qui servent à gérer les méthodes de travail
            et les différentes productions des entreprises.
          </p>

          <ul class="list1 gray clearfix">
            <li>Dévelopment Web</li>
            <li>Administration Système</li>
            <li>Consulting</li>
            <li>Réseaux</li>
            <li>Gestion des Projets</li>
          </ul>
          <div class="social_links_widget clearfix"></div>
        </div>
      </div>
      <!-- Grid 6 -->

      <div class="col-md-6">
        <div class="skill">
          <div
            class="progress_bar"
            data-progress-val="100"
            data-progress-animation="easeOutQuad"
            data-progress-delay="300"
            data-progress-color="#0BACB8"
          >
            <div class="fill_con">
              <div class="fill">
                <span class="title">Node Js / ReactJS/ React Native</span>
                <span class="value"
                  ><span class="num"></span><span>%</span></span
                >
              </div>
            </div>
          </div>
          <div
            class="progress_bar"
            data-progress-val="80"
            data-progress-animation="easeOutQuad"
            data-progress-delay="600"
            data-progress-color="#398098"
          >
            <div class="fill_con">
              <div class="fill">
                <span class="title">RESEAUX INFORMATIQUES</span>
                <span class="value"
                  ><span class="num"></span><span>%</span></span
                >
              </div>
            </div>
          </div>
          <div
            class="progress_bar"
            data-progress-val="80"
            data-progress-animation="easeOutQuad"
            data-progress-delay="900"
            data-progress-color=""
          >
            <div class="fill_con">
              <div class="fill">
                <span class="title">JAVASCRIPT/PYTHON (Android)</span>
                <span class="value"
                  ><span class="num"></span><span>%</span></span
                >
              </div>
            </div>
          </div>
          <div
            class="progress_bar"
            data-progress-val="100"
            data-progress-animation="easeOutQuad"
            data-progress-delay="1200"
            data-progress-color="#0EA07D"
          >
            <div class="fill_con">
              <div class="fill">
                <span class="title">DEVOPS</span>
                <span class="value"
                  ><span class="num"></span><span>%</span></span
                >
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Grid 6 -->
    </div>
  </div>
</section>
<!-- End Skills -->

<!-- Clients -->
<section class="content_section bg_white border_b_n">
  <div class="main_title centered upper">
    <h2>
      <span class="line"><i class="ico-building-o"></i></span>ILS NOUS FONT
      CONFIANCE
    </h2>
  </div>
  <div class="icon_boxes_con style1 clearfix">
    {% for profile in profiles %}
    <div class="item col-md-4 col-xs-12 col-sm-12 col-lg-4">
      <div class="item-profile thumbnail bg_gray border">
        <img
          style="height: 20%; width: 20%; border-radius: 100%"
          data-no-retina
          src="{{ profile.image.url }}"
          alt="Not found"
          style="border-radius: 40%"
        />
        <div class="caption">
          <h4 class="group inner list-group-item-heading centered">
            {{ profile.customer.customer_name }}
          </h4>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

<section class="content_section bg_white border_b_n">
  <div class="main_title centered upper">
    <h2>
      <span class="line"><i class="ico-building-o"></i></span>TEMOIGNAGES
    </h2>
  </div>
  <div class="icon_boxes_con style1 clearfix bg-dark">
    <div
      id="carouselExampleIndicators"
      class="carousel slide d-flex align-content-stretch"
      data-ride="carousel"
    >
      <ol class="carousel-indicators">
        <li
          data-target="#carouselExampleIndicators"
          data-slide-to="0"
          class="active"
        ></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        {% for testimony in testimonies %}
        <div class="carousel-item m-auto">
          {% for test in testimony %}
          <div class="item col-md-4 col-xs-12 col-sm-12 col-lg-4">
            <div class="item-profile thumbnail border">
              <div class="caption" style="height: 200px; margin-top: o">
                <h4 class="group inner list-group-item-heading centered">
                  {{ test.customer.customer_code }}
                </h4>
                <p class="m-auto">{{ test.testimony_content }}</p>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
        {% endfor %}
        <div class="carousel-item active h-5">
          <p style="height: 300px">Testimony</p>
        </div>
      </div>
      <a
        class="carousel-control-prev"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="prev"
      >
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="carousel-control-next"
        href="#carouselExampleIndicators"
        role="button"
        data-slide="next"
      >
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>
</section>

<section class="content_section">
  <div class="container icons_spacer">
    <div class="main_title centered upper">
      <h2>
        <span class="line"><span class="dot"></span></span>NOS PRODUITS
      </h2>
    </div>
    <div class="icon_boxes_con style1 clearfix">
      {% for product in products %}
      <div class="col-md-4">
        <div class="service_box">
          <span class="icon"><i class="ico-tag"></i></span>
          <div class="service_box_con centered">
            <h3><a href="">{{ product.product_name }}</a></h3>
            <span class="desc"
              >{{ product.product_description|slice:":200" }}...</span
            >
            <a href="{{ product.get_absolute_url }}"><span>voir plus</span></a>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>
  </div>
  <!-- End Clients  -->
  <!-- Our Blog Grids -->

  <a href="#0" class="hm_go_top"></a>
  {% endblock content %}
</section>