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

<section class="formation-cta">

    {# VERSION MOBILE #}
    <div class="relative lg:hidden">
        {# à la une img #}
        <img class="w-full" src="{{ asset('build/images/la-formation-mobile.png')}}" alt="sur mesure" >

        {# à la une content #}
        <div class="p-horizontal p-vertical bg-white flex flex-col gap-6">
            <h2 data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-center text-2xl">un projet de formation ?</h2>
            <div data-aos="fade-down" data-aos-delay="200" class="flex justify-center items-center w-full relative z-30">
                <a href="{{ path('contact') }}" class="w-full cta big-cta cta-blue lg:w-auto">Nous contacter</a>
            </div>
        </div>
    </div>

    {# VERSION DESKTOP #}
    <div class="hidden lg:flex flex-row bg-white items-center lg:h-[30vh] xl:h-[40vh] 2xl:h-[44vh] relative overflow-x-hidden">

        <img class="h-full" src="{{ asset('build/images/la-formation-desktop.png') | imagine_filter('desktop_header') }}" alt="la formation desktop image" >

        <div class="absolute right-0 w-[55vw] pl-6 flex flex-col gap-4 xl:gap-6 md:pr-28 lg:pr-40 2xl:pr-60 3xl:pr-80 ">

            <h2 data-aos="fade-left" data-aos-delay="0" class="pl-24 xl:pl-40 font-allerDisplay text-right uppercase text-2xl xl:text-3xl">La formation</h2>

            <p data-aos="fade-left" data-aos-delay="200" class="pl-12 xl:pl-28 font-allerRegular text-right text-sm">Le levier le plus puissant pour impacter durablement votre carrière</p>

            <!-- SMALL BLUE CTA -->
            <div data-aos="fade-left" data-aos-delay="400" class="flex justify-end w-auto">
                <a href="{{ path('contact') }}" class="cta small-cta cta-blue lg:text-sm xl:text-base">Nous contacter</a>
            </div>
        </div>
    </div>
</section>