<!-- Offres Start -->
<div class="container-fluid about py-5">
<div class="container">
<div class="section-title position-relative text-center mx-auto mb-5 pb-3" style="max-width: 600px;">
<h2 class="text-primary font-secondary">Solutions</h2>
<h1 class="display-4 text-uppercase">Les solutions BPay</h1>
</div>
<div class="tab-class text-center">
{# Onglets #}
<ul class="nav nav-pills d-inline-flex justify-content-center bg-dark text-uppercase border-inner p-4 mb-5">
<li class="nav-item">
<a class="nav-link text-white active" data-bs-toggle="pill" href="#tab-1">
Particuliers
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" data-bs-toggle="pill" href="#tab-2">
Marchands
</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" data-bs-toggle="pill" href="#tab-3">
Entreprises
</a>
</li>
</ul>
<div class="tab-content">
{# ================== PARTICULIERS ================== #}
<div id="tab-1" class="tab-pane fade show p-0 active">
<div class="row g-3">
{% for service in [
{
title: 'Wallet électronique',
desc: 'Gérez votre argent, consultez votre solde et vos transactions en temps réel.',
icon: 'bi-wallet2'
},
{
title: 'Transferts instantanés',
desc: 'Envoyez et recevez de l’argent instantanément.',
icon: 'bi-arrow-left-right'
},
{
title: 'Paiements sécurisés',
desc: 'Payez en ligne et chez les marchands partenaires en toute sécurité.',
icon: 'bi-shield-lock'
}
] %}
<div class="col-lg-6">
<div class="d-flex h-100">
<div class="flex-shrink-0 text-center bg-dark p-3">
<i class="bi {{ service.icon }} text-primary fs-1"></i>
</div>
<div class="d-flex flex-column justify-content-center text-start bg-secondary border-inner px-4">
<h5 class="text-uppercase">{{ service.title }}</h5>
<span>{{ service.desc }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{# ================== MARCHANDS ================== #}
<div id="tab-2" class="tab-pane fade show p-0">
<div class="row g-3">
{% for service in [
{
title: 'Encaissement marchand',
desc: 'Acceptez les paiements BPay en magasin ou en ligne.',
icon: 'bi-shop'
},
{
title: 'QR Code & liens de paiement',
desc: 'Encaissez rapidement grâce aux QR codes et liens.',
icon: 'bi-qr-code'
},
{
title: 'Suivi des ventes',
desc: 'Tableau de bord clair pour suivre vos transactions.',
icon: 'bi-graph-up'
}
] %}
<div class="col-lg-6">
<div class="d-flex h-100">
<div class="flex-shrink-0 text-center bg-dark p-3">
<i class="bi {{ service.icon }} text-primary fs-1"></i>
</div>
<div class="d-flex flex-column justify-content-center text-start bg-secondary border-inner px-4">
<h5 class="text-uppercase">{{ service.title }}</h5>
<span>{{ service.desc }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{# ================== ENTREPRISES ================== #}
<div id="tab-3" class="tab-pane fade show p-0">
<div class="row g-3">
{% for service in [
{
title: 'API de paiement',
desc: 'Intégrez facilement BPay dans vos applications.',
icon: 'bi-code-slash'
},
{
title: 'Paiements de masse',
desc: 'Effectuez des paiements multiples en un seul clic.',
icon: 'bi-layers'
},
{
title: 'Reporting & conformité',
desc: 'Exports, historiques et outils de conformité.',
icon: 'bi-clipboard-data'
}
] %}
<div class="col-lg-6">
<div class="d-flex h-100">
<div class="flex-shrink-0 text-center bg-dark p-3">
<i class="bi {{ service.icon }} text-primary fs-1"></i>
</div>
<div class="d-flex flex-column justify-content-center text-start bg-secondary border-inner px-4">
<h5 class="text-uppercase">{{ service.title }}</h5>
<span>{{ service.desc }}</span>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Offres End -->