templates/components/qwantic_kpi.html.twig line 1

{% if this.kpi != null %}
<section id="qwantic_kpi">
    <div class="p-horizontal p-vertical flex flex-col gap-10 bg-blue-500">
        <h2 data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-white text-center text-2xl">{{ title }}</h2>
        <div class="kpis flex flex-col gap-36 py-16 lg:flex-row lg:gap-36 xl:gap-48 2xl:gap-56 justify-center">
            <div data-aos="fade-right" data-aos-delay="200">
                {{ component('bubbles:centered_bubble', {
                    svg: "bubble-bg-blue.svg",
                    title: this.kpi.learnerNumber,
                    subtitle: "personnes formées en 2023",
                }) }}
            </div>
            <div data-aos="fade-up" data-aos-delay="400">
                {{ component('bubbles:centered_bubble', {
                    svg: "bubble-bg-blue.svg",
                    title: this.kpi.trainingNumber ~ '%',
                    subtitle: "de recommandation sur nos formations courtes",
                }) }}
            </div>
            <div data-aos="fade-down" data-aos-delay="600">
                {{ component('bubbles:centered_bubble', {
                    svg: "bubble-bg-blue.svg",
                    title: this.kpi.insertionPercentage ~ '%',
                    subtitle: "de taux d'insertion à +6 mois",
                }) }}
            </div>
        </div>
    </div>
</section>
{% endif %}