@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/baner2.jpeg); background-repeat: no-repeat; background-size: cover;">
            <div class="container text-white py-5 index-forward">
              <div class="row">
                <div class="col-lg-7">
                  <h1 class="" style="color: #fd6c9e;">IT VILLAGE</h1>
                  <h1 class="t-color">Homme - Nature - Développement</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
        

    <section class="py-5 bg-light">
  <div class="container">
         <div style="text-align: center; font-size: 25px; font-weight: bold; padding: 20px;">
       NOS PROJETS
     </div>
   <div class="row col-md-12 row text-center justify-content-center">

     <div class="col-md-3 col-lg-3 py-0 mt-4 mt-lg-0">
       <div class="card card-height">
        <img class="card-img-top" style="height: 200px;" src="template/dist/img/soutienscolaire.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title" style="text-align: center;"> SOUTIEN SCOLAIRE</h5>   </div><br>
        <center><a href="soutien-scolaire" class="btn btn-primary">Voir Plus</a><br><br></center>
      </div><br>
     </div>

       <div class="col-md-3 col-lg-3 py-0 mt-4 mt-lg-0">
       <div class="card card-height">
        <img class="card-img-top" style="height: 200px;" src="template/dist/img/miel.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title" style="text-align: center;">
           MIEL DES SAVANES</h5>    </div><br>
        <center><a href="https://miel.logexcloud.com/" target="_blank" class="btn btn-primary">Voir Plus</a><br><br></center>
      </div><br>
      </div>


       <div class="col-md-3 col-lg-3 py-0 mt-4 mt-lg-0">
       <div class="card card-height">
        <img class="card-img-top" style="height: 200px;" src="template/dist/img/universite.jpeg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title" style="text-align: center;"> INSTITUT TECHNIQUE BONITA HAUS</h5> </div>
        <center><a href="http://bonita-haus.logexcloud.com/" target="_blank" class="btn btn-primary">Voir Plus</a><br><br></center>
      </div><br>
     </div>

      <div class="col-md-3 col-lg-3 py-0 mt-4 mt-lg-0">
       <div class="card card-height">
        <img class="card-img-top" style="height: 200px;" src="template/dist/img/universite.jpg" alt="Card image">
        <div class="card-body">
          <h5 class="card-title" style="text-align: center;">HOPITAL BRAUN CINKASSE</h5>       </div></br>
        <center><a href="http://hbc.logexcloud.com/" target="_blank" class="btn btn-primary">Voir Plus</a><br><br></center>
      </div><br>
     </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">                <h2 class="h1 mb-5" style="text-transform: uppercase;">Chaque enfant a droit à l'éducation</h2><a class="btn btn-primary" href="{{('/contacts')}}">FAIRE UN DON</a>
                </div>
              </div>
            </header>
          </div>
        </div>
      </div>
    </section>  
    <div class="container-fluid">
           <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 t2-color">LES ACTIONS DE IT VILLAGE</p>
              <h2>IT VILLAGE intervient dans les domaines suivants</h2>
            </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">Actions humanitaires</h2>
                <p class="text-muted text-sm mb-0">IT VILLAGE est convaincue qu'a travers les pas d'actions sociales de divers ordres posées , il contribue au développement du pays</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é</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>
    </div>
    </section>
    --}}

    <footer class="bg-dark">
      
      <div class="bg-primary py-5 text-white">
        <div class="container">
          <div class="row gy-4">
            @foreach($nombre as $nombres)
            <div class="col-lg-3 col-md-6">
              <div class="d-flex align-items-center">
                <h6 class="h1 mb-0">{{$nombres->nombre}}</h6>
                <p class="ms-3 flex-grow-1 text-uppercase mb-0">{{$nombres->titre}} </p>
              </div>
            </div>
            @endforeach
          </div>
        </div>
      </div>
      
      <style type="text/css">
        .pcolor{
          color: #111111;
        }
        .row2{
          margin-top: -60px;
        }
        .bg-cover2{
          margin-top: -70px;
        }
        .text1{
          text-align: justify; 
          color: #545454; 
          max-width: 900px;
        }

      </style>
@endsection