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

{% block title %}Parutions électroniques{% endblock %}

{% block stylesheets %}
 
{% endblock %}

{% block content %}
<!-- slider -->
<section class="mt-8">
   <div class="container">
      <div class="hero-slider">
         <div style="background: url({{ asset("images/bg/bg-s01.jpg") }}) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center">
            <div class="ps-lg-12 py-lg-16 col-xxl-5 col-lg-7 col-md-8 py-14 px-8 text-xs-center">
               <h1 class="text-white display-5 fw-bold mt-4">&nbsp;</h1>
               <p class="lead text-white">&nbsp;</p>
               <a href="{{ sliders[0].href }}" class="btn btn-dark mt-3">
                  {{ sliders[0].button}}
                  <i class="feather-icon icon-arrow-right ms-1"></i>
               </a>
            </div>
         </div>
         <div style="background: url({{ asset("images/bg/bg-s02.jpg") }}) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center">
            <div class="ps-lg-12 py-lg-16 col-xxl-5 col-lg-7 col-md-8 py-14 px-8 text-xs-center">
               <h1 class="text-dark display-5 fw-bold mt-4">&nbsp;</h1>
               <p class="lead">&nbsp;</p>
               <a href="{{ sliders[1].href }}" class="btn btn-dark mt-3">
                  {{ sliders[1].button}}
                  <i class="feather-icon icon-arrow-right ms-1"></i>
               </a>
            </div>
         </div>
         <div style="background: url({{ asset("images/bg/bg-s03.jpg") }}) no-repeat; background-size: cover; border-radius: 0.5rem; background-position: center">
            <div class="ps-lg-12 py-lg-16 col-xxl-5 col-lg-7 col-md-8 py-14 px-8 text-xs-center">
               <h1 class="text-dark display-5 fw-bold mt-4">&nbsp;</h1>
               <p class="lead">&nbsp;</p>
               <a href="{{ sliders[2].href }}" class="btn btn-dark mt-3">
                  {{ sliders[2].button}}
                  <i class="feather-icon icon-arrow-right ms-1"></i>
               </a>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- end-slider -->    

<!-- section advertiser -->
<section class="my-lg-14 my-8">
   <div class="container">
      <div class="row align-items-center mb-6">
         <div class="col-10">
            <div>
               <!-- heading    -->
               
               <h3 class="align-items-center d-flex mb-0 h4">
                  <img src="{{ asset('assets/images/png/advertiser.png') }}" alt="Advertiser" width="24" height="24">
                  <span class="ms-3">Les Annonceurs</span>
               </h3>
            </div>
         </div>
         <div class="col-2">
            <div class="slider-arrow slider-8-columns-arrow" id="slider-8-columns-arrows"></div>
         </div>
      </div>
      <div class="row g-6">
         <div class="col-12">
            <div class="position-relative">
               <div class="slider-8-columns" id="slider-8-columns">
                  {% for advertiser in advertisers %}
                  <!-- item-->
                  <div class="item">
                     <!-- item -->
                     <a href="{% if advertiser.slug is null %}{{ path('app_catalog_advertiser', {advertiserId:advertiser.id}) }}{% else %}{{ path('app_catalog_advertiser_slug', {slug:advertiser.slug}) }}{% endif %}" class="text-decoration-none text-inherit">
                        <!-- card -->
                        <div class="card mb-3 card-lift">
                           <div class="card-body text-center py-6 text-center">
                              <div class="my-5">
                                 <img 
                                    src="{{ asset('images/men/'~advertiser.logosmall.filename) }}" 
                                    alt="{{ advertiser.company }}"
                                    width="56" height="56">
                              </div>
                              <!-- text -->
                              <div class="two-lines">{{ advertiser.company }}</div>
                           </div>
                        </div>
                     </a>
                  </div>                              
                  {% endfor %}

               </div>
            </div>
         </div>
      </div>
   </div>
</section>
<!-- section -->     

<!-- section ANPM -->
<section>
   <div class="container">
      <div class="row">
         <div class="col-md-12 mb-6">
            <h3 class="mb-0">A Ne Pas Manquer</h3>
         </div>
      </div>
      <section>
         <div class="container">
            <div class="row">
            {% for anpm in anpms %}
               <div class="col-12 col-lg-6 col-md-6 col-sm-12 mb-3 mb-lg-0" style="padding: 0 4rem;">
                  <div>
                     <div class="py-10 px-8 rounded position-relative" >
                        <img class="img-fluid rounded" style="width: 25rem;" src='{{ asset("images/men/"~anpm.cover.filename) }}' alt="{{ anpm.title }}">
                        <div style="position: absolute; bottom: 3.5rem; margin-left: 2px;">                              
                           <h3 class="fs-5 fw-bold mb-1">{{ anpm.title }}</h3>
                           <p class="mb-4 px-1 fs-6" style="background-color: rgba(90, 111, 119, 0.2); color: #1b1c1c;">
                              Encore
                              <span class="fw-bold">{{ anpm.getlive }}</span>
                           </p>
                           <a href="{% if anpm.slug is null %}{{ path('app_catalog_id', {id:anpm.id})}}{% else %}{{ path('app_catalog_slug', {slug:anpm.slug})}}{% endif %}" class="btn btn-dark">Voir</a>
                        </div>
                     </div>
                  </div>
               </div>         
            {% endfor %}               
            </div>
         </div>
      </section>    

   </div>
</section>         
<!-- section ANPM end -->    

<!-- section parutions hors anpm -->
{{ render(controller('App\\Controller\\CatalogController::grid', {sort:3, anpm:false})) }}
<!-- fin section parutions hors anpm -->

<!-- cta section -->
<section>
   <div class="container">
      <hr class="my-lg-14 my-8" />
      <!-- row -->
      <div class="row align-items-center">
         <div class="offset-lg-2 col-lg-4 col-md-6">
            <div class="text-center">
               <!-- img -->
               <img src="{{ asset('assets/images/png/iphone-2.png') }}" alt="" class="img-fluid" />
            </div>
         </div>
         <div class="col-lg-6 col-md-6">
            <div class="mb-6">
               <div class="mb-7">
                  <!-- heading -->
                  <h2>Installez l'application mobile</h2>
                  <p class="mb-0">Cliquez sur le lien de votre "market" ci-dessous</p>
                  <p class="mb-0">et rejoignez nos milliers d'utilisateurs.</p>
                  <p class="mb-0">Pour 'smartphones' et tablettes.</p>
               </div>

               <div>
                  <!-- app -->
                  <small>Téléchargez l'application sur</small>
                  <ul class="list-inline mb-0 mt-3">
                     <!-- list item -->
                     <li class="list-inline-item">
                        <!-- img -->
                        <a href="https://apps.apple.com/fr/app/tahiti-best-promo/id1436348873#?platform=iphone"><img src="{{ asset('assets/images/appbutton/appstore-btn.svg') }}" alt="" style="width: 140px" /></a>
                     </li>
                     <li class="list-inline-item">
                        <!-- img -->
                        <a href="https://play.google.com/store/apps/details?id=io.tbp.app&hl=fr"><img src="{{ asset('assets/images/appbutton/googleplay-btn.svg') }}" alt="" style="width: 140px" /></a>
                     </li>
                  </ul>
               </div>
               <div class="mt-2">
                  <!-- app qrcode -->
                  <small>ou scannez le QR Code ci-dessous</small>
                  <ul class="list-inline mb-0 mt-3">
                     <!-- list item -->
                     <li class="list-inline-item">
                        <!-- img -->
                        <img src="{{ asset('assets/images/png/QRCODE-markets.png') }}" alt="qr code" style="width: 140px" />
                     </li>

                  </ul>
               </div>               
            </div>
         </div>
      </div>
      <hr class="my-lg-14 my-8" />
   </div>
</section>
<!-- featured section -->
<section class="my-lg-14 my-8">
   <div class="container">
      <!-- row -->
      <div class="row">
         <div class="col-md-6 col-lg-3">
            <div class="mb-8 mb-lg-0">
               <!-- img -->
               <div class="mb-6"><img src="{{ asset('assets/images/icons/laptop.svg') }}" alt="" /></div>
               <!-- title -->
               <h3 class="h5 mb-3">Toutes les publications du Fenua</h3>
               <!-- text -->
               <p class="mb-0">Toutes les publications intéressantes sont réunies sur Tahiti Best Promo ® et accéssibles en un clic.</p>
            </div>
         </div>
         <!-- col -->
         <div class="col-md-6 col-lg-3">
            <div class="mb-8 mb-lg-0">
               <!-- img -->
               <div class="mb-6"><img src="{{ asset('assets/images/icons/smartphone.svg') }}" alt="" /></div>
               <!-- title -->
               <h3 class="h5 mb-3">Une application pour mobiles</h3>
               <!-- text -->
               <p class="mb-0">Tahiti Best Promo ® c'est aussi une application smartphone et tablette pour consulter les publications en toute mobilité.</p>
            </div>
         </div>
         <div class="col-md-6 col-lg-3">
            <div class="mb-8 mb-lg-0">
               <!-- img -->
               <div class="mb-6"><img src="{{ asset('assets/images/icons/eco.svg') }}" alt="" /></div>
               <!-- title -->
               <h3 class="h5 mb-3">Soyez Eco-responsables</h3>
               <!-- text -->
               <p class="mb-0">
                  Fiu des papiers qui débordent des poubelles, jonchent le sol et qui envahissent les boites au lettres. 
                  Arrêtons de détruire notre environnement.
               </p>
            </div>
         </div>
         <div class="col-md-6 col-lg-3">
            <div class="mb-8 mb-lg-0">
               <!-- img -->
               <div class="mb-6"><img src="{{ asset('assets/images/icons/video.svg') }}" alt="" /></div>
               <!-- title -->
               <h3 class="h5 mb-3">Regardez nos vidéos</h3>
               <!-- text -->
               <p class="mb-0">
                  Tahiti Best Promo ® publie aussi des vidéos intégrées directement dans certaines parutions.                 
               </p>
            </div>
         </div>
      </div>
   </div>
</section>

{% endblock %}

{% block css %}
   <link rel="stylesheet" href="{{ asset('css/tbpromo.css') }}">   
{% endblock %}

{% block javascripts %}

{% endblock %}