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

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

        {# à la une content #}
        <div class="p-horizontal p-vertical bg-grey-300 flex flex-col gap-6">
            <h2 data-aos="fade-right" class="font-allerBold uppercase text-center text-white text-2xl">Des programmes de formations <span class="whitespace-nowrap">sur-mesure</span></h2>
            <p data-aos="fade-right" class="font-allerRegular text-white text-center text-base relative z-20">Nos ingénieurs pédagogiques
                vous aident à construire des formations clé en main pour relever vos défis,
                avec des programmes personnalisés et des formats nouveaux.</p>
            <div data-aos="fade-right" 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-grey-300 items-center justify-end lg:h-[17rem] xl:h-[22rem] 2xl:h-[24rem]">

        <div class="absolute left-0 w-[55vw] pr-6 flex flex-col gap-4 xl:gap-6 pl-horizontal">
            <h2 data-aos="fade-right" class="pr-18 xl:pr-40 font-allerDisplay text-left text-white uppercase text-2xl xl:text-3xl">Des programmes de formations <span class="whitespace-nowrap">sur-mesure</span></h2>
            <p  data-aos="fade-right" class="pr-12 xl:pr-28 font-allerRegular text-left text-white text-sm">Nos ingénieurs pédagogiques
                vous aident à construire des formations clé en main pour relever vos défis,
                avec des programmes personnalisés.</p>
            <!-- SMALL BLUE CTA -->
            <div data-aos="fade-right" class="flex justify-start w-auto">
                <a href="{{ path('contact') }}" class="cta small-cta cta-blue lg:text-sm xl:text-base">Nous contacter</a>
            </div>
        </div>

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