<!-- Campagnes Start -->
<div class="container-xxl py-5">
<div class="container">
<div class="text-center wow fadeInUp" data-wow-delay="0.1s">
<h5 class="section-title ff-secondary text-center text-primary fw-normal">
Solutions de diffusion publicitaire
</h5>
<h1 class="mb-5">Campagnes InstantMARK les plus utilisées</h1>
</div>
<div class="tab-class text-center wow fadeInUp" data-wow-delay="0.1s">
<ul class="nav nav-pills d-inline-flex justify-content-center border-bottom mb-5">
<!-- Onglet Sites -->
<li class="nav-item">
<a class="d-flex align-items-center text-start mx-3 ms-0 pb-3 active"
data-bs-toggle="pill" href="#tab-sites">
<i class="fas fa-globe fa-2x text-primary"></i>
<div class="ps-3">
<small class="text-body">Plateformes</small>
<h6 class="mt-n1 mb-0">SITES</h6>
</div>
</a>
</li>
<!-- Onglet Zones -->
<li class="nav-item">
<a class="d-flex align-items-center text-start mx-3 pb-3"
data-bs-toggle="pill" href="#tab-zones">
<i class="fas fa-layer-group fa-2x text-primary"></i>
<div class="ps-3">
<small class="text-body">Emplacements</small>
<h6 class="mt-n1 mb-0">ZONES</h6>
</div>
</a>
</li>
<!-- Onglet Impressions -->
<li class="nav-item">
<a class="d-flex align-items-center text-start mx-3 pb-3"
data-bs-toggle="pill" href="#tab-impressions">
<i class="fas fa-chart-line fa-2x text-primary"></i>
<div class="ps-3">
<small class="text-body">Audience</small>
<h6 class="mt-n1 mb-0">IMPRESSIONS</h6>
</div>
</a>
</li>
<!-- Onglet Bannières -->
<li class="nav-item">
<a class="d-flex align-items-center text-start mx-3 me-0 pb-3"
data-bs-toggle="pill" href="#tab-banners">
<i class="fas fa-image fa-2x text-primary"></i>
<div class="ps-3">
<small class="text-body">Formats</small>
<h6 class="mt-n1 mb-0">BANNIÈRES</h6>
</div>
</a>
</li>
</ul>
<div class="tab-content">
<!-- TAB SITES -->
<div id="tab-sites" class="tab-pane fade show active p-0">
<div class="row g-4">
{% for site in ['Site corporate', 'Marketplace', 'Portail média', 'Blog professionnel'] %}
<div class="col-lg-6">
<div class="d-flex align-items-center">
<img class="flex-shrink-0 img-fluid rounded"
src="{{ asset('templates/instantmark/img/campaign/site.jpg') }}"
style="width:80px" alt="Site web">
<div class="w-100 d-flex flex-column text-start ps-4">
<h5 class="border-bottom pb-2">{{ site }}</h5>
<small class="fst-italic">
Diffusion de campagnes ciblées sur des sites à forte audience.
</small>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- TAB ZONES -->
<div id="tab-zones" class="tab-pane fade p-0">
<div class="row g-4">
{% for zone in ['Header', 'Sidebar', 'Footer', 'In-content'] %}
<div class="col-lg-6">
<div class="d-flex align-items-center">
<img class="flex-shrink-0 img-fluid rounded"
src="{{ asset('templates/instantmark/img/campaign/zone.jpg') }}"
style="width:80px" alt="Zone publicitaire">
<div class="w-100 d-flex flex-column text-start ps-4">
<h5 class="border-bottom pb-2">{{ zone }}</h5>
<small class="fst-italic">
Emplacement stratégique pour maximiser la visibilité.
</small>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- TAB IMPRESSIONS -->
<div id="tab-impressions" class="tab-pane fade p-0">
<div class="row g-4">
{% for pack in ['1 000 impressions', '5 000 impressions', '10 000 impressions', '50 000 impressions'] %}
<div class="col-lg-6">
<div class="d-flex align-items-center">
<img class="flex-shrink-0 img-fluid rounded"
src="{{ asset('templates/instantmark/img/campaign/impressions.jpg') }}"
style="width:80px" alt="Impressions">
<div class="w-100 d-flex flex-column text-start ps-4">
<h5 class="border-bottom pb-2">{{ pack }}</h5>
<small class="fst-italic">
Volume d’affichage contrôlé avec statistiques en temps réel.
</small>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
<!-- TAB BANNIÈRES -->
<div id="tab-banners" class="tab-pane fade p-0">
<div class="row g-4">
{% for format in ['Leaderboard', 'Rectangle', 'Skyscraper', 'Mobile Banner'] %}
<div class="col-lg-6">
<div class="d-flex align-items-center">
<img class="flex-shrink-0 img-fluid rounded"
src="{{ asset('templates/instantmark/img/banner.jpg') }}"
style="width:80px" alt="Bannière publicitaire">
<div class="w-100 d-flex flex-column text-start ps-4">
<h5 class="border-bottom pb-2">{{ format }}</h5>
<small class="fst-italic">
Formats optimisés pour desktop et mobile.
</small>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Campagnes End -->