@extends('users/layout')
@section('content')
@section('acactive','active')
    <section>
      <div class="swiper hero-slider">
        <div class="swiper-wrapper">
          <!-- Hero Slide-->
          <div class="swiper-slide hero-slide bg-size bg-center py-5" style="background: url(template/dist/img/projet_scolaire.jpg)">
            <div class="container text-white py-5 index-forward">
              <div class="row">
                <div class="col-lg-7">
                  <h1 style="color: #da3333;">IT VILLAGE</h1>
                  <h1>L'espoir d'une éducation mieux adaptée</h1>
                  <!-- <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> -->
                 <!--  <ul class="list-inline">
                    <li class="list-inline-item me-0"><a class="btn btn-primary" href="#!">Read More</a></li>
                    <li class="list-inline-item"></li><a class="btn btn-outline-light" href="#!">Our company</a>
                  </ul> -->
                </div>
              </div>
            </div>
          </div>
          <!-- Hero Slide-->
          <div class="swiper-slide hero-slide bg-size bg-center py-5" style="background: url(template/dist/img/hero-banner-2.4c3d9d10.jpg)">
            <div class="container text-white py-5 index-forward">
              <div class="row">
                <div class="col-lg-7">
                  <h1>We will help you to grow your business</h1>
                  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                  <ul class="list-inline">
                    <li class="list-inline-item me-0"><a class="btn btn-primary" href="#!">Read More</a></li>
                    <li class="list-inline-item"></li><a class="btn btn-outline-light" href="#!">Our company</a>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <!-- Hero Slide-->
          <div class="swiper-slide hero-slide bg-size bg-center py-5" style="background: url(template/dist/img/hero-banner-3.2a5e4c99.jpg)">
            <div class="container text-white py-5 index-forward">
              <div class="row">
                <div class="col-lg-7">
                  <h1>You always get the best guidance</h1>
                  <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p>
                  <ul class="list-inline">
                    <li class="list-inline-item me-0"><a class="btn btn-primary" href="#!">Read More</a></li>
                    <li class="list-inline-item"></li><a class="btn btn-outline-light" href="#!">Our company</a>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-button-next swiper-nav-custom d-none d-lg-block"></div>
        <div class="swiper-button-prev swiper-nav-custom d-none d-lg-block"></div>
        <div class="swiper-pagination py-3 d-block d-lg-none"></div>
      </div>
    </section>
    <!-- Features Section -->
    <section class="py-5 bg-light" style=" border-style: solid; border-color: black; border-width: 2px; background-color: white !important;">
      <div class="container py-5">
        <div class="row row2" >
          <div class="col-lg-12 order-2 order-lg-1">
            <div style="display: inline-block;">
               <p class="h2 mb-1 text-uppercase text-primary mb-3"><span style="color: black;"> Qui </span>Sommes Nous</p>
            </div>
           <!--  <h2 class="mb-4">We Work With You To Address Your Most Critical Business Priorities</h2> -->
            <p class="" style="text-align: justify; color: #545454; ">IT VILLAGE est une organisation non gouvernementale togolaise basée au Togo (pays d’Afrique de l’Ouest situé entre le Ghana à l’ouest, le bénin à l’Est le Burkina au Nord et bordé par l’Océan Atlantique au Sud) dans la région la plus au Nord (des cinq régions administratives) du pays, à plus de 600 kilomètres de la capitale de Lomé , 30 kilomètres de la frontière du Burkina, à Cinkassé et qui est aussi de loin la plus pauvre, Région des Savanes.</p>
           <!--  <ul class="list-check list-unstyled row px-3 mb-4 gy-2">
              <li class="text-sm text-muted col-lg-6">Acquire live chat enables sales</li>
              <li class="text-sm text-muted col-lg-6">Learn from customer feedback</li>
              <li class="text-sm text-muted col-lg-6">Engage - marketing automation</li>
              <li class="text-sm text-muted col-lg-6">Support -customer support</li>
              <li class="text-sm text-muted col-lg-6">Acquire live chat enables sales</li>
              <li class="text-sm text-muted col-lg-6">Learn from customer feedback</li>
            </ul> -->
           <!--  <ul class="list-inline py-4 border-top border-bottom d-flex align-items-center">
              <li class="list-inline-item pr-4 mr-0"><img src="template/dist/img/about-sign.af38591c.png" alt="" width="80"></li>
              <li class="list-inline-item px-4 mr-0 border-left">
                <h5 class="mb-0">Jack Foxx</h5>
                <p class="small font-weight-normal text-muted mb-0">Chairnan and founder </p>
              </li>
              <li class="list-inline-item pl-4 border-left">
                <h5 class="mb-0">+420 754 6545 6564</h5>
                <p class="small font-weight-normal text-muted mb-0">Call to ask any question</p>
              </li>
            </ul> -->
          </div>
         <!--  <div class="col-lg-5 ms-auto mb-4 mb-lg-0 order-1 order-lg-2">
            <div class="p-2 border"><img class="img-fluid" src="template/dist/img/about-img.e93764a4.jpg" alt=""></div>
          </div> -->
        </div>
      </div>
    </section>
    <!-- Services Section -->
<!--     <section class="py-5">
      <div class="container py-5 text-center">
        <header class="mb-5">
          <div class="row">
            <div class="col-lg-7 mx-auto">
              <p class="h6 text-uppercase text-primary mb-0">Our services</p>
              <h2>We Creating Solutions For Your Organization</h2>
            </div>
          </div>
        </header>
        <div class="row align-items-stretch gy-4">
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#laptop-screen-1"> </use>
              </svg>
              <h3 class="h5">Business Finance Strategy</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#quality-1"> </use>
              </svg>
              <h3 class="h5">Portfolio &amp; Resource Allocation</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#survey-1"> </use>
              </svg>
              <h3 class="h5">Organization &amp; Decision Process</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#pie-chart-1"> </use>
              </svg>
              <h3 class="h5">Decision &amp; Risk Analytic</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#pay-1"> </use>
              </svg>
              <h3 class="h5">Banking &amp; Capital Markets</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
          <div class="col-lg-4 col-md-6">
            <div class="px-4 py-5 border border-2 border-dash h-100">
              <svg class="svg-icon mb-4 text-primary svg-icon-light svg-icon-big">
                <use xlink:href="#stack-1"> </use>
              </svg>
              <h3 class="h5">Modern &amp; Tribe Workplace</h3>
              <p class="text-sm mb-0 text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.</p>
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <!-- Divider Section -->
    <section class="bg-cover bg-cover2 bg-center" style="background: url(template/dist/img/sout12.jpeg)">
      <div class="primary-overlay py-5">
        <div class="overlay-content">
          <div class="container">
            <div class="row align-items-center gy-4">
              <div class="col-lg-7 text-center text-lg-start">
                <h2 class="text-white mb-2">Déterminé à offrir le sourire à chaque enfants</h2>
                <p class="text-white mb-0">Nous sommes ouverts à toutes sortes d'aide qu'elle soit financière ou matérielle.</p>
              </div>
              <div class="col-lg-3 ms-auto text-center text-lg-end"><a class="btn btn-outline-light" href="#!">Faites un don</a></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- Features Section -->
    <section class="py-5 bg-light">
      <div class="container py-5">
        <div class="row align-items-center gx-lg-0">
          <div class="col-lg-5">
            <div class="bg-primary pe-lg-3"><img class="img-fluid w-100" src="template/dist/img/itvillage.jpg" alt=""></div>
          </div>
          <div class="col-lg-7">
            <div class="p-4 p-md-5 shadow bg-white">
              <p class="h2 mb-1 text-uppercase text-primary mb-3">NOS PROJETS</p>
<!--               <h2 class="mb-5">Nos Projets</h2>
 -->              <div class="row">
                <div class="col-lg-9">
                  <ol class="list-numbers mb-0">
                    <a href="{{('soutien-scolaire')}}">
                    <li class="mb-4" >
                      <h5 class="pcolor">SOUTIEN SCOLAIRE</h5>
                      <p class="text-sm text-muted">Construction d’infrastructures scolaires et de prise en charge d’enseignants et d’élèves. </p>
                    </li>
                   </a>
                    <a href="http://hbc.logexcloud.com/">
                    <li class="mb-4">
                      <h5 class="pcolor">HOPITAL BRAUN CINKASSE</h5>
                      <p class="text-sm text-muted">Un centre hospitalier avec un plateau technique assez complet pour venir en solution à la population environnante. </p>
                    </li>
                  </a>
                  <a href="http://bonita-haus.logexcloud.com/">
                    <li class="mb-4">
                      <h5 class="pcolor">INSTITUT TECHNIQUE BONITA HAUS</h5>
                      <p class="text-sm text-muted">Projet de formation technique et professionnelle. </p>
                    </li>
                  </a>
                   <a href="https://miel.logexcloud.com/">
                    <li>
                      <h5 class="pcolor">MIEL DES SAVANES</h5>
                      <p class="text-sm text-muted">modernisation de la filière apicole dans toute la région. </p>
                    </li>
                  </a>
                  </ol>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
     
    </section>
    <!-- Video Section -->
    <section class="bg-center bg-cover" style="background: url(template/dist/img/sout13.jpeg); background-color: hsl(240deg 1% 34%) !important;">
      <div class="dark-overlay py-5">
        <div class="overlay-content text-white">
          <div class="container py-5">
            <header class="text-center">
              <div class="row">
                <div class="col-lg-9 mx-auto">
                  <!-- <button class="video-btn mb-5" type="button" data-video-id="NOG3eus4ZSo"><i class="fas fa-play"></i></button> -->
<!--                   <p class="h6 mb-1 text-uppercase text-primary mb-3">We make a difference</p>
 -->                  <h2 class="h1 mb-5" style="text-transform: uppercase;">Chaque enfant a droit à l'éducation</h2><a class="btn btn-primary" href="#!">Faites un don</a>
                </div>
              </div>
            </header>
          </div>
        </div>
      </div>
    </section>
    <!-- Testimonials Section-->
    <section class="py-5">
      <div class="container-fluid py-5">
           <section class="py-5 bg-light">
      <div class="container py-5">
        <header class="mb-5 text-center">
          <div class="row">
            <div class="col-lg-7 mx-auto">
              <p class="h6 text-uppercase text-primary">LES ACTIONS DE IT VILLAGE</p>
              <h2>IT VILLAGE intervient dans les domaines suivants</h2>
             <!--  <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore</p> -->
            </div>
          </div>
        </header>
        <div class="row align-items-stretch gy-4">
          <div class="col-lg-4">
            <div class="bg-white h-100">
              <div class="bg-primary px-4 py-3 d-inline-block">
               <i class="fas fa-recycle" style="color: white; font-weight: bold; font-size:30px;"></i>
              </div>
              <div class="px-5 pt-0 pb-5 bg-white text-center">
                <h2 class="h4 mb-3">Protection de l'enfance</h2>
                <p class="text-muted text-sm mb-0">IT VILLAGE est convaincue que le plus beau cadeau ou don que l'on peut offrir à un enfant est d'investir dans son éducation</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="bg-white h-100">
              <div class="bg-primary px-4 py-3 d-inline-block">
                 <i class="fas fa-book-reader" style="color: white; font-weight: bold; font-size:30px;"></i>
              </div>
              <div class="px-5 pt-0 pb-5 bg-white text-center">
                <h2 class="h4 mb-3">Education et formation professionnelle</h2>
                <p class="text-muted text-sm mb-0">IT VILLAGE s’investit dans le domaine de l’éducation et de la formation professionnelle pour contribuer au développement social</p>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <div class="bg-white h-100">
              <div class="bg-primary px-4 py-3 d-inline-block">
               <i class="fas fa-hospital-symbol" style="color: white; font-weight: bold; font-size:30px;"></i>
              </div>
              <div class="px-5 pt-0 pb-5 bg-white text-center">
                <h2 class="h4 mb-3">Santé, Protection sociale</h2>
                <p class="text-muted text-sm mb-0">Dans le domaine de la santé et du bien-être social, IT VILLAGE œuvre pour créer des conditions favorables à l’amélioration pour apporter une solution sanitaire adéquate pour chaque couche de société.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
      </div>
    </section>
    <footer class="bg-dark">
      <div class="bg-primary py-5 text-white">
        <div class="container">
          <div class="row gy-4">
            <div class="col-lg-3 col-md-6">
              <div class="d-flex align-items-center">
                <h6 class="h1 mb-0">10 </h6>
                <p class="ms-3 flex-grow-1 text-uppercase mb-0">ans d'expérience et plus</p>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="d-flex align-items-center">
                <h6 class="h1 mb-0">16</h6>
                <p class="ms-3 flex-grow-1 text-uppercase mb-0">16 forages d'eau potable installés</p>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="d-flex align-items-center">
                <h6 class="h1 mb-0">470</h6>
                <p class="ms-3 flex-grow-1 text-uppercase mb-0">élèves et plus pris en charge </p>
              </div>
            </div>
            <div class="col-lg-3 col-md-6">
              <div class="d-flex align-items-center">
                <h6 class="h1 mb-0">6</h6>
                <p class="ms-3 flex-grow-1 text-uppercase mb-0">bâtiments scolaires construits </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style type="text/css">
        .pcolor{
          color: #111111;
        }
        .row2{
          margin-top: -60px;
        }
        .bg-cover2{
          margin-top: -70px;
        }
      </style>
@endsection