@extends('users/layout')
@section('content')
@section('conctactive','active')

 <section class="hero bg-cover bg-position py-4" style="background: url(template/dist/img/projet_scolaire.jpg)">
      <div class="container py-5 index-forward text-white">
        <h1>Nous contacter</h1>
        <!-- Breadcrumb-->
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb bg-none mb-0 p-0">
            <li class="breadcrumb-item ps-0"><a href="#"> <i class="fas fa-home me-2"></i>Accueil</a></li>
            <li class="breadcrumb-item active" aria-current="page">Nous contacter</li>
          </ol>
        </nav>
      </div>
    </section>

    <section class="py-5 shadow-sm z-index-20 position-relative">
      <div class="container py-5">
      <!--   <header>
          <h2>Request a <span class="text-primary">Call </span>Back</h2>
          <p class="mb-5 text-muted">Nanotechnology immersion along the information highway will close the loop on focusing</p>
        </header> -->
        <div class="row gy-5">
          <div class="col-lg-7">
            <div class="pt-1 bg-primary">
              <div class="p-4 p-lg-5 bg-white shadow-sm">
                <form action="#">
                  <div class="row gy-3">
                    <div class="col-lg-6">
                      <input class="form-control" type="text" name="firstname" placeholder="Nom">
                    </div>
                    <div class="col-lg-6">
                      <input class="form-control" type="text" name="lastname" placeholder="Prénoms">
                    </div>
                    <div class="col-lg-6">
                      <input class="form-control" type="tel" name="phone" placeholder="Téléphone">
                    </div>
                    <div class="col-lg-6">
                      <input class="form-control" type="text" name="subject" placeholder="Sujet">
                    </div>
                    <div class="col-lg-12">
                      <input class="form-control" type="email" name="email" placeholder="Adresse e-mail">
                    </div>
                    <div class="col-lg-12">
                      <textarea class="form-control" name="message" rows="5" placeholder="Message"></textarea>
                    </div>
                    <div class="col-lg-12">
                      <button class="btn btn-outline-primary" type="submit">Envoyer</button>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-4">
            <h3>Avez vous des questions ?</h3>
            <p class="text-muted mb-5">Si vous avez des questions ou suggestions, n'hésitez pas à nous envoyer un message.</p>
            <ul class="list-unstyled">
              <li class="d-flex mb-3">
                <div class="icon bg-primary flex-shrink-0"><i class="fas text-white fa-fw fa-envelope"></i></div>
                <div class="ms-3">
                  <h5 class="mb-0">Email</h5>
                  <p class="text-muted text-sm">info@itvillage-togo.org</p>
                </div>
              </li>
              <li class="d-flex mb-3">
                <div class="icon bg-primary flex-shrink-0"><i class="fas text-white fa-fw fa-mobile"></i></div>
                <div class="ms-3">
                  <h5 class="mb-0">Téléphone</h5>
                  <p class="text-muted text-sm">+228 - 90 50 44 80</p>
                </div>
              </li>
               <li class="d-flex mb-3">
                <div class="icon bg-primary flex-shrink-0"><i class='fab fa-whatsapp fa-lg text-white'></i></div>
                <div class="ms-3">
                  <h5 class="mb-0">Whatsapp</h5>
                  <p class="text-muted text-sm">+228 - 90 50 44 80</p>
                </div>
              </li>
               <li class="d-flex mb-3">
                <div class="icon bg-primary flex-shrink-0"><i class="fas text-white fa-fw fa-map-marker-alt"></i></div>
                <div class="ms-3">
                  <h5 class="mb-0">Adresse</h5>
                  <p class="text-muted text-sm">412 rue des savanes - Dapaong</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </section>

@endsection