{# MOBILE VERSION #}
<nav class="sticky top-0 overflow-hidden bg-white z-50 xl:hidden">
<div class="py-3 px-10 bg-white-100 flex justify-between js-band-nav transition-all duration-700">
<div class="w-28 md:w-36">
<a href="{{ path('home') }}"><img class="js-nav-logo"
src="{{ asset('build/images/graphic/logos/logo.png') }}"
alt="Logo Qwantic Blanc"></a>
</div>
{% if noLink is not defined or noLink is null %}
<div class="w-10 flex flex-col justify-center group js-burger transition-all duration-700">
<span class="h-2 block bg-blue-500 rounded-md group-hover:translate-x-1 transition-all -translate-y-1/2"></span>
<span class="h-2 w-100 block bg-blue-500 rounded-md group-hover:-translate-x-1 transition-all translate-y-1/2"></span>
</div>
{% endif %}
</div>
{% if noLink is not defined or noLink is null %}
<ul class="w-full h-full fixed bg-white-100 py-3 px-10 js-list-nav-link translate-x-[100vw] transition-all duration-700 bg-white top-[81px]">
{{ component('navbar:item' , {
title: 'Nos formations',
routePath: 'nos_formations_diplomantes',
accordion: true,
subItems : {
0 : {
name : 'Formations diplômantes',
link : 'nos_formations_diplomantes'
},
1 : {
name: 'Formations courtes',
link : 'nos_formations_courtes'
}
}
}) }}
{{ component('navbar:item' , {
title: 'Nos solutions',
routePath: 'dispositifs',
accordion: true,
subItems : {
0 : {
name : 'Pour les étudiants',
link : 'nos_formations_diplomantes'
},
1 : {
name : 'Pour les entreprises',
link : 'nos_formations_courtes'
},
2 : {
name : 'Pour les partenaires',
link : 'dispositifs'
},
}
}) }}
{{ component('navbar:item' , {
title: 'Notre organisme',
routePath: 'qui_sommes_nous'
}) }}
{{ component('navbar:item' , {
title: 'Aide & FAQ',
routePath: 'faq'
}) }}
{{ component('navbar:item' , {
title: 'Le blog',
routePath: 'all_articles'
}) }}
{{ component('navbar:item' , {
title: 'Contactez-nous',
routePath: 'contact'
}) }}
</ul>
{% endif %}
</nav>
{# DESKTOP VERSION #}
<nav class="hidden xl:block relative">
<div class="sticky top-0 overflow-hidden bg-white z-50">
<div class="px-20 xl:px-40 2xl:px-60">
<div class="flex flex-row items-center justify-between gap-10">
<div data-aos="fade-up" data-aos-delay="0" class="w-36">
<a class="w-36 block" href="{{ path('home') }}"><img class=" js-nav-logo"
src="{{ asset('build/images/graphic/logos/logo.png') }}"
alt="Logo Qwantic Blanc"></a>
</div>
<div class="flex flex-row gap-10 items-center">
{% if noLink is not defined or noLink is null %}
<ul class="flex flex-row gap-10">
{{ component('navbar:item' , {
title: 'Nos formations',
routePath: 'nos_formations_diplomantes',
accordion: false,
id: 'formations-menu',
class : 'items-hover',
megaMenu: true,
}) }}
{{ component('navbar:item' , {
title: 'Nos solutions',
routePath: 'dispositifs',
class : 'items-hover',
id: 'solution-menu',
megaMenu: true,
}) }}
{{ component('navbar:item' , {
title: 'Notre organisme',
routePath: 'qui_sommes_nous'
}) }}
{{ component('navbar:item' , {
title: 'Aide & FAQ',
routePath: 'faq'
}) }}
{{ component('navbar:item' , {
title: 'Le Blog',
routePath: 'all_articles'
}) }}
</ul>
<div class="flex justify-center items-center relative z-30 gap-5">
<a href="{{ path('contact') }}" class="w-full cta small-cta cta-blue lg:w-auto !text-sm">Contactez-nous</a>
<div class="flex items-center overflow-hidden justify-center gap-2">
<svg class="js-tel"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="#4ac8be"
width="30" height="30"
style="cursor:pointer">
<path d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.05-.24 11.36 11.36 0 003.55.57 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.24 1.05l-2.2 2.2z"/>
</svg>
<a class="transition duration-500 translate-y-full js-tel-number whitespace-nowrap font-allerBold text-base text-blue-300 hidden" href="tel:0491798536">04 91 79 85 36</a>
</div>
</div>
{% endif %}
</div>
</div>
</div>
</div>
<div class="mega-menu max-h-0 top-[85px] sticky overflow-hidden bg-white transition-all shadow-lg border-b border-white shadow-sm">
<div class="content-formation">
<img class="hidden lg:block absolute top-0 left-0 z-10 h-3/4"
src="{{ asset('build/images/svg/triangle_bleu_error.svg') }}" alt="decoration">
<img class="hidden lg:block absolute bottom-0 right-0 z-10 h-3/4"
src="{{ asset('build/images/svg/triangle_noir_error.svg') }}" alt="decoration">
<div class="px-20 xl:px-40 2xl:px-60 py-10">
<div class="flex gap-20 items-center justify-between 3xl:justify-center 3xl:gap-36">
<div class="flex flex-col gap-4">
<a href="{{ path('nos_formations_diplomantes') }}"
class="h-anim-sm flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all hover:bg-white hover:shadow-md p-3 rounded-lg">
<img class="w-28 h-16 object-cover rounded-md shadow-lg"
src="{{ asset('build/images/headers/desktop/all_formations_diplomantes.png') | imagine_filter('mega_menu_item_img') }}"
alt="navbar item">
<div>
<h4 class="font-allerBold text-lg relative z-10">Formations Diplômantes</h4>
<p class="font-allerRegular text-sm text-grey-200 relative z-10">Donnez à votre carrière l’impact qu’elle mérite, avec nos formations certifiées en alternance !</p>
</div>
</a>
<a href="{{ path('nos_formations_courtes') }}"
class="h-anim-sm flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all hover:bg-white hover:shadow-md p-3 rounded-lg">
<img class="w-28 h-16 object-cover rounded-md shadow-lg"
src="{{ asset('build/images/headers/desktop/all_courtes.png') | imagine_filter('mega_menu_item_img') }}"
alt="navbar item">
<div>
<h4 class="font-allerBold text-lg relative z-10">Formations Courtes</h4>
<p class="font-allerRegular text-sm text-grey-200 relative z-10">Dotez vos collaborateurs de compétences essentielles pour les préparer à vos enjeux de demain !</p>
</div>
</a>
</div>
{% if this.trainingHightlighting != null %}
<div class="flex flex-col gap-4">
<a href="{{ path('single_training' , { slug : this.trainingHightlighting.slug} ) }}"
class="h-anim-sm relative flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all">
<img class="h-40 object-cover rounded-md shadow-lg"
src="{{ asset('upload/images/training/card/' ~ this.trainingHightlighting.cardImageName ) | imagine_filter('card_img') }}"
alt="navbar item">
<div class="bg-blue-500 transition-all absolute bottom-0 w-full py-1.5 rounded-b-md">
<h3 class="font-allerDisplay text-2xl text-white text-center uppercase">{{ this.trainingHightlighting.acronym }}</h3>
</div>
<div class="bg-grey-300 px-5 p-3 w-fit rounded-lg absolute right-[-20px] top-[-10px] rotate-12">
<p class="font-allerRegular italic text-sm text-white text-center">Formation <br>à
la une !
</p>
</div>
</a>
</div>
{% endif %}
</div>
<div class="mt-10 flex 3xl:justify-center items-center gap-2">
<div class="copyright font-allerBold">
</div>
<div class="rs flex items-center gap-4">
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.instagram.com/qwantic_formation/"><i class="fa-brands fa-lg fa-instagram"></i><span class="hidden">Instagram</span></a>
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.linkedin.com/company/qwantic/"><i class="fa-brands fa-lg fa-linkedin"></i><span class="hidden">Linkedin</span></a>
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.facebook.com/qwanticformation13/"><i class="fa-brands fa-lg fa-square-facebook"></i><span class="hidden">Facebook</span></a>
</div>
</div>
</div>
</div>
<div class="content-solution">
<img class="hidden lg:block absolute top-0 left-0 z-10 h-3/4"
src="{{ asset('build/images/svg/triangle_bleu_error.svg') }}" alt="decoration">
<img class="hidden lg:block absolute bottom-0 right-0 z-10 h-3/4"
src="{{ asset('build/images/svg/triangle_noir_error.svg') }}" alt="decoration">
<div class="px-20 xl:px-40 2xl:px-60 py-10">
<div class="flex gap-20 items-center justify-between 3xl:justify-center 3xl:gap-36">
<div class="flex flex-row justify-center items-center gap-10">
<a href="{{ path('nos_formations_diplomantes') }}"
class="h-anim-sm flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all hover:bg-white hover:shadow-md p-3 rounded-lg">
<img class="w-28 h-16 object-cover rounded-md shadow-lg"
src="{{ asset('build/images/student.jpg') | imagine_filter('mega_menu_item_img') }}"
alt="navbar item">
<div>
<h4 class="font-allerBold text-lg relative z-10">Pour les étudiants</h4>
{# <p class="font-allerRegular text-sm text-grey-200 relative z-10">Lorem ipsum dolor sit#}
{# amet,#}
{# consectetur adipiscing elit.</p>#}
</div>
</a>
<a href="{{ path('nos_formations_courtes') }}"
class="h-anim-sm flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all hover:bg-white hover:shadow-md p-3 rounded-lg">
<img class="w-28 h-16 object-cover rounded-md shadow-lg"
src="{{ asset('build/images/company.jpg') | imagine_filter('mega_menu_item_img') }}"
alt="navbar item">
<div>
<h4 class="font-allerBold text-lg relative z-10">Pour les entreprises</h4>
{# <p class="font-allerRegular text-sm text-grey-200 relative z-10">Lorem ipsum dolor sit#}
{# amet,#}
{# consectetur adipiscing elit.</p>#}
</div>
</a>
<a href="{{ path('dispositifs') }}"
class="h-anim-sm flex gap-4 items-center cursor-pointer hover:text-pink-500 transition-all hover:bg-white hover:shadow-md p-3 rounded-lg">
<img class="w-28 h-16 object-cover rounded-md shadow-lg"
src="{{ asset('build/images/partners.jpg') | imagine_filter('mega_menu_item_img') }}"
alt="navbar item">
<div>
<h4 class="font-allerBold text-lg relative z-10">Pour les partenaires</h4>
{# <p class="font-allerRegular text-sm text-grey-200 relative z-10">Lorem ipsum dolor sit#}
{# amet,#}
{# consectetur adipiscing elit.</p>#}
</div>
</a>
</div>
</div>
<div class="mt-10 flex 3xl:justify-center items-center gap-2 pl-3">
<div class="copyright font-allerBold">
</div>
<div class="rs flex items-center gap-4">
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.instagram.com/qwantic_formation/"><i class="fa-brands fa-lg fa-instagram"></i><span class="hidden">Instagram</span></a>
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.linkedin.com/company/qwantic/"><i class="fa-brands fa-lg fa-linkedin"></i><span class="hidden">Linkedin</span></a>
<a class="text-blue-500 hover:text-pink-500 transition-all cursor-pointer" target="_blank" href="https://www.facebook.com/qwanticformation13/"><i class="fa-brands fa-lg fa-square-facebook"><span class="hidden">Facebook</span></i></a>
</div>
</div>
</div>
</div>
</div>
</nav>