<section class="header">
<!-- Slider main container -->
<div class="header-swiper swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">
{{ component('sections:header_section' , {
title: "Des formations diplômantes, à fort impact humain",
shortSubtitle: "Donnez à votre carrière l’impact qu’elle mérite, avec nos formations certifiantes !",
longSubtitle: "Donnez à votre carrière l’impact qu’elle mérite, avec nos formations certifiantes ! Une expérience d’apprentissage ludique et innovante, pour valider les compétences les plus recherchées par les employeurs.",
btn: "Découvrir nos formations",
ctaLink: "nos-formations-diplomantes",
url: "homepage_1.png",
}) }}
</div>
<div class="swiper-slide">
{{ component('sections:header_section' , {
title: "Des programmes courts, qui changent la donne",
shortSubtitle: "Créez une expérience collaborateur riche pour retenir et recruter les talents.",
longSubtitle: "Créez une expérience collaborateur riche pour retenir et recruter les talents. Nos formations courtes clés en main préparent votre équipe aux défis de demain en développant leur confiance et leur employabilité.",
ctaLink: "nos-formations-courtes",
btn: "Découvrir nos formations",
url: "homepage_2.png",
}) }}
</div>
<div class="swiper-slide">
{{ component('sections:header_section' , {
title: "Des solutions impactantes sur-mesure",
shortSubtitle: "Relevez de nouveaux défis pour valoriser et transformer durablement vos métiers et les (futurs) professionnels.",
longSubtitle: "Relevez de nouveaux défis pour valoriser et transformer durablement vos métiers et les (futurs) professionnels. Nos ingénieurs pédagogiques vous accompagnent pour concevoir à vos côtés de nouvelles approches pédagogiques.",
ctaLink: "dispositifs",
btn: "Découvrir nos solutions",
url: "homepage_3.png",
}) }}
</div>
</div>
<!-- If we need pagination -->
<div class="p-horizontal header-swiper-pagination swiper-pagination !bottom-0 py-1 max-lg:bg-grey-300 bg-opacity-40"></div>
</div>
</section>
<!-- If we need navigation buttons -->
<div data-aos="fade-left" data-aos-delay="0" class="hidden lg:block !absolute swiper-button-prev-header left-[4vw] top-[6rem] xl:top-[9rem] 2xl:top-[11rem] text-grey-200 z-20 cursor-pointer">
<img src="{{ asset('build/images/svg/arrow_prev.svg')}}" alt="arrow">
</div>
<div data-aos="fade-right" data-aos-delay="0" class="hidden lg:block !absolute swiper-button-next-header right-[4vw] top-[6rem] xl:top-[9rem] 2xl:top-[11rem] text-grey-200 z-20 cursor-pointer">
<img src="{{ asset('build/images/svg/arrow-next.svg')}}" alt="arrow">
</div>