templates/components/sections/featured_course_section.html.twig line 1

{% if this.frontPageTraining != null %}
    <section id="a-la-une">
        <div class="relative">

            {#pastille mobile#}
            <div class="lg:hidden bg-grey-300 px-5 p-3 w-fit rounded-lg border border-white absolute left-5 top-[-20px] rotate-[-10deg]">
                <p class="font-allerRegular italic text-sm text-blue-500 text-center">Formation <br>à la une&nbsp;!</p>
            </div>

            {# à la une img mobile #}
            <img class="lg:hidden w-full" src="{{ asset('upload/images/training/header/' ~ this.frontPageTraining.headerMobileName)}}" alt="à la une image small" >

            {#pastille desktop#}
            <div class="hidden lg:block bg-grey-300 px-8 py-4 w-fit rounded-lg absolute right-1/4 top-28 rotate-12">
                <p class="font-allerRegular italic text-lg text-white text-center">Formation <br>à la une !</p>
            </div>

            {# à la une img desktop #}
            <div class="w-full lg:h-[40vh]">
                <img class="h-full object-cover object-center hidden lg:block w-full" src="{{ asset('upload/images/training/header/' ~ this.frontPageTraining.headerDesktopName)}}" alt="à la une image large" >
            </div>
            {# à la une content #}
            <div class="p-horizontal p-vertical bg-grey-300 flex flex-col gap-6">
                <h2 data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-center text-white text-2xl">DERNIÈRES PLACES !</h2>
                <h2 class="font-allerBold text-center text-pink-500 text-2xl">{{ this.frontPageTraining.category.name }}</h2>
                <h3 class="font-allerRegular text-center text-white text-3xl lg:flex lg:flex-row lg:justify-center lg:uppercase">{{ this.frontPageTraining.acronym }}<br class="lg:hidden"><span class="hidden lg:block">&nbsp; - &nbsp;</span>{{ this.frontPageTraining.title }} </h3>
                <div data-aos="fade-up" data-aos-delay="0" class="flex justify-center items-center w-full relative z-30">
                    <a style="background-color: {{ this.frontPageTraining.category.color }};" href="{{ path('single_training' , {'slug' : this.frontPageTraining.slug }) }}" class="w-full cta big-cta text-white lg:w-auto">Voir la formation</a>
                </div>
            </div>
        </div>
    </section>
{% endif %}


<img class="w-full lg:h-2" src="{{ asset('build/images/separator1.png')}}" alt="separator">