{% extends 'layouts/main.html.twig' %}
{% block title %}MagmaERP | Nos tarifs{% endblock %}
{% block content %}
<!-- Spinner Start -->
<div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
<div class="spinner"></div>
</div>
<!-- Spinner End -->
<!-- Header Start -->
<div class="container-fluid bg-primary py-5 bg-header" style="margin-bottom: 90px;">
<div class="row py-5">
<div class="col-12 pt-lg-5 mt-lg-5 text-center">
<h1 class="display-4 text-white animated zoomIn"> Nos tarifs</h1>
</div>
</div>
</div>
<!-- Header End -->
<!-- Pricing Plan Start -->
<div class="container-fluid py-5 wow fadeInUp" data-wow-delay="0.1s">
<div class="container py-5">
<div class="section-title text-center position-relative pb-3 mb-5 mx-auto" style="max-width: 600px;">
<h5 class="fw-bold text-primary text-uppercase">Tarification</h5>
<h1 class="mb-0">Nos formules pour les organisations de toutes les tailles</h1>
</div>
<div class="row g-0">
<div class="col-lg-4 wow slideInUp" data-wow-delay="0.6s">
<div class="bg-light rounded">
<div class="border-bottom py-4 px-5 mb-4">
<h4 class="text-primary mb-1">ACCESS</h4>
<small class="text-uppercase">Gratuit pour la découverte</small>
</div>
<div class="p-5 pt-0">
<h1 class="display-5 mb-3">
<small class="align-top" style="font-size: 22px; line-height: 45px;"></small>0.00<small
class="align-bottom" style="font-size: 16px; line-height: 40px;">XOF</small>
</h1>
<div class="d-flex justify-content-between mb-3"><span>Tiers</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Bootstrap v5</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Responsive Layout</span><i class="fa fa-times text-danger pt-1"></i></div>
<div class="d-flex justify-content-between mb-2"><span>Cross-browser Support</span><i class="fa fa-times text-danger pt-1"></i></div>
<a href="" class="btn btn-primary py-2 px-4 mt-4">Choisir</a>
</div>
</div>
</div>
<div class="col-lg-4 wow slideInUp" data-wow-delay="0.3s">
<div class="bg-white rounded shadow position-relative" style="z-index: 1;">
<div class="border-bottom py-4 px-5 mb-4">
<h4 class="text-primary mb-1">ESSENTIALS</h4>
<small class="text-uppercase">Pour MPME</small>
</div>
<div class="p-5 pt-0">
<h1 class="display-5 mb-3">
<small class="align-top" style="font-size: 22px; line-height: 45px;"></small>50.000<small
class="align-bottom" style="font-size: 16px; line-height: 40px;">XOF</small>
</h1>
<div class="d-flex justify-content-between mb-3"><span>HTML5 & CSS3</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Bootstrap v5</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Responsive Layout</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-2"><span>Cross-browser Support</span><i class="fa fa-times text-danger pt-1"></i></div>
<a href="" class="btn btn-primary py-2 px-4 mt-4">Choisir</a>
</div>
</div>
</div>
<div class="col-lg-4 wow slideInUp" data-wow-delay="0.9s">
<div class="bg-light rounded">
<div class="border-bottom py-4 px-5 mb-4">
<h4 class="text-primary mb-1">INTEGRAL</h4>
<small class="text-uppercase">Pour grandes entreprises</small>
</div>
<div class="p-5 pt-0">
<h1 class="display-5 mb-3">
<small class="align-top" style="font-size: 22px; line-height: 45px;"></small>750.000<small
class="align-bottom" style="font-size: 16px; line-height: 40px;">XOF</small>
</h1>
<div class="d-flex justify-content-between mb-3"><span>HTML5 & CSS3</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Bootstrap v5</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-3"><span>Responsive Layout</span><i class="fa fa-check text-primary pt-1"></i></div>
<div class="d-flex justify-content-between mb-2"><span>Cross-browser Support</span><i class="fa fa-check text-primary pt-1"></i></div>
<a href="" class="btn btn-primary py-2 px-4 mt-4">Choisir</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Pricing Plan End -->
{% endblock %}