templates/components/footer/main.html.twig line 1

Open in your IDE?
  1. <footer class="bg-grey-300 text-white-100 relative lg:hidden">
        <img onclick="topFunction()" id="myBtnMobile" class="cursor-pointer absolute bottom-0 right-1/4 z-10" src="{{ asset('build/images/back_top_top.png') }}" alt="frise">
        <div class="p-horizontal py-10 flex flex-col gap-8 relative">
    
            <ul class="">
                {{ component('footer:item' , {
                    title : 'Nos formations',
                    routePath: 'all_articles',
                    subItems : {
                        0 : {
                            name : 'Formations diplômantes',
                            link : 'nos_formations_diplomantes'
                        },
                        1 : {
                            name: 'Formations courtes',
                            link : 'nos_formations_courtes'
                        }
                    },
                }) }}
                {{ component('footer:item' , {
                    title : 'Nos solutions',
                    routePath: 'all_articles',
                    subItems : {
                        0 : {
                            name : 'Pour les partenaires',
                            link : 'dispositifs'
                        },
                        1 : {
                            name : 'Pour les étudiants',
                            link : 'nos_formations_diplomantes'
                        },
                        2 : {
                            name : 'Pour les entreprises',
                            link : 'nos_formations_courtes'
                        },
                    },
                }) }}
                {{ component('footer:item' , {
                    title : 'À propos',
                    routePath: 'all_articles',
                    subItems : {
                        0 : {
                            name : 'Notre organisme',
                            link : 'qui_sommes_nous'
                        },
                        1 : {
                            name: 'Aide et FAQ',
                            link : 'faq'
                        },
                        2 : {
                            name: 'Le blog',
                            link : 'all_articles'
                        },
                        3 : {
                            name: 'Mentions légales',
                            link : 'legal_term'
                        },
                        4 : {
                            name: 'Politique de confidentialité',
                            link : 'privacy_policy'
                        },
                        5 : {
                            name: 'Conditions générales de vente',
                            link : 'cgv'
                        }
                    },
                }) }}
                {{ component('footer:item' , {
                    title : 'Nous contacter',
                    routePath: 'contact'
                }) }}
                {{ component('footer:item' , {
                    title : 'Tel : 04 91 79 85 36',
                    link: 'tel:0491798536'
                }) }}
    
            </ul>
    
            <div class="w-1/2 m-auto flex flex-col gap-6">
                <img class="w-full" src="{{ asset('build/images/svg/logoqwantic.svg') }}" alt="logo qwantic">
                <ul class="flex justify-between items-center text-white">
                    <li><a href="https://www.linkedin.com/company/qwantic/"><i class="fa-brands fa-lg fa-fw fa-linkedin-in"></i></a></li>
                    <li><a href="https://www.facebook.com/qwanticformation"><i class="fa-brands fa-lg fa-fw fa-facebook-f"></i></a></li>
                    <li><a href="https://www.instagram.com/qwantic_formation/"><i class="fa-brands fa-lg fa-fw fa-instagram"></i></a></li>
                    {#<li><a href="#"><i class="fa-brands fa-lg fa-fw fa-tiktok"></i></a></li>#}
                </ul>
            </div>
    
            <div>
                <p class="font-allerRegular text-xs text-grey-200 text-center">Spécialisé dans l’ingénierie pédagogique,
                    Qwantic est un organisme de formation, doté
                    d’un Centre de Formation des Apprentis implanté
                    à Marseille. Nous valorisons les métiers à fort impact humain en proposant des formations courtes autour des soft skills et des formations certifiantes
                    en apprentissage sur les filières de l'Animation,
                    du Sport, de la Petite Enfance et du Numérique. </p>
            </div>
    
        </div>
        <div class="text-grey-100 italic text-sm bg-grey-300 text-center py-2">
            © {{"now"|date('Y')}} Qwantic
        </div>
        <div class="w-full relative">
            <img class="w-3/4" src="{{ asset('build/images/frise_footer.png') }}" alt="frise">
        </div>
    </footer>
    
    <footer class="hidden lg:block">
        <div class="w-full p-vertical p-horizontal flex flex-row items-start justify-between gap-10 xl:gap-16 bg-grey-300">
            <div class="w-3/5 flex flex-col gap-10 pr-10 xl:pr-16">
                <div class="w-1/2 flex flex-col gap-8">
                    <img data-aos="fade-up" data-aos-delay="100" class="w-full"
                         src="{{ asset('build/images/svg/logoqwantic.svg') }}" alt="logo qwantic">
                    <ul class="flex justify-between items-center text-white">
                        <li><a target="_blank" href="https://www.linkedin.com/company/qwantic/"><i
                                        class="fa-brands fa-lg fa-fw fa-linkedin-in"></i></a></li>
                        <li><a target="_blank" href="https://www.facebook.com/qwanticformation13/"><i
                                        class="fa-brands fa-lg fa-fw fa-facebook-f"></i></a></li>
                        <li><a target="_blank" href="https://www.instagram.com/qwantic_formation/"><i
                                        class="fa-brands fa-lg fa-fw fa-instagram"></i></a></li>
                        {# <li><a href="#"><i class="fa-brands fa-lg fa-fw fa-tiktok"></i></a></li> #}
                    </ul>
                </div>
                <p data-aos="fade-right" data-aos-delay="300" class="font-allerRegular text-xs text-grey-200">
                    Spécialisé dans l’ingénierie pédagogique,
                    Qwantic est un organisme de formation,
                    doté d’un Centre de Formation des Apprentis
                    (CFA) implanté à Marseille. Nous valorisons
                    les métiers à fort impact humain en proposant
                    des formations courtes autour des soft skills
                    et des formations certifiantes en apprentissage
                    sur les filières de l’Animation, du Sport,
                    de la Petite Enfance et du Numérique.
                </p>
            </div>
            <div class="w-1/5 flex flex-col gap-14">
    
                <div class="flex flex-col gap-6 font-allerRegular text-white">
                    <a class="text-lg">Nos formations</a>
                    <div class="flex flex-col gap-4">
                        <a data-aos="fade-right" data-aos-delay="100" href="{{ path('nos_formations_diplomantes') }}"
                           class="text-sm hover:text-blue-500 transition-all">Formations diplômantes</a>
                        <a data-aos="fade-right" data-aos-delay="100" href="{{ path('nos_formations_courtes') }}"
                           class="text-sm hover:text-blue-500 transition-all">Formations courtes</a>
                    </div>
                </div>
    
                <div class="flex flex-col gap-6 font-allerRegular text-white">
                    <a class="text-lg">Nos solutions</a>
                    <div class="flex flex-col gap-4">
                        {#   <a data-aos="fade-right" data-aos-delay="200" href="#" class="text-sm hover:text-blue-500 transition-all">Pour les étudiants</a>
                    <a data-aos="fade-right" data-aos-delay="300" href="#" class="text-sm hover:text-blue-500 transition-all">Pour les entreprises</a> #}
                        <a data-aos="fade-right" data-aos-delay="100" href="{{ path('nos_formations_diplomantes') }}" class="text-sm hover:text-blue-500 transition-all">Pour les étudiants</a>
                        <a data-aos="fade-right" data-aos-delay="100" href="{{ path('nos_formations_courtes') }}" class="text-sm hover:text-blue-500 transition-all">Pour les entreprises</a>
                        {#   <a data-aos="fade-right" data-aos-delay="200" href="#" class="text-sm hover:text-blue-500 transition-all">Pour les étudiants</a>
                    <a data-aos="fade-right" data-aos-delay="300" href="#" class="text-sm hover:text-blue-500 transition-all">Pour les entreprises</a>#}
                        <a data-aos="fade-right" data-aos-delay="100" href="{{ path('dispositifs') }}" class="text-sm hover:text-blue-500 transition-all">Pour les partenaires</a>
                    </div>
                </div>
    
            </div>
            <div class="w-1/5 flex flex-col gap-6 font-allerRegular text-white">
                <a class="text-lg">À propos</a>
                <div class="flex flex-col gap-4 mb-20">
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('qui_sommes_nous') }}" class="text-sm hover:text-blue-500 transition-all">Notre organisme</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('faq') }}" class="text-sm hover:text-blue-500 transition-all">Aide et FAQ</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('all_articles') }}" class="text-sm hover:text-blue-500 transition-all">Le blog</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('legal_term') }}" class="text-sm hover:text-blue-500 transition-all">Mentions légales</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('privacy_policy') }}" class="text-sm hover:text-blue-500 transition-all">Politique de confidentialité</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="{{ path('cgv') }}" class="text-sm hover:text-blue-500 transition-all">Conditions Générales de Vente</a>
                    <a data-aos="fade-right" data-aos-delay="100" href="tel:0491798536" class="text-sm hover:text-blue-500 transition-all">Tel : 04 91 79 85 36</a>
                </div>
                <div class="flex justify-center items-center w-full relative z-30">
                    <a href="{{ path('contact') }}" class="cta small-cta cta-black w-full">Contactez-nous</a>
                </div>
            </div>
        </div>
        <div class="text-grey-100 italic text-sm bg-grey-300 text-center py-2">
            © {{"now"|date('Y')}} Qwantic
        </div>
        <div class="flex bg-grey-300 w-full relative">
            <svg onclick="topFunction()" id="myBtnDesktop" class="absolute bottom-0 right-14 cursor-pointer" data-name="back to top" xmlns="http://www.w3.org/2000/svg" width="74.075" height="76.569" viewBox="0 0 74.075 76.569">
                <path id="Tracé_115" data-name="Tracé 115" d="M12.094,0H61.981C68.66,0,74.075,4.811,74.075,10.747V76.569H0V10.747C0,4.811,5.415,0,12.094,0Z" fill="#009ca3"/>
                <path id="Icon_ionic-ios-arrow-back" data-name="Icon ionic-ios-arrow-back" d="M4.825,14,15.419,3.41A2,2,0,1,0,12.585.585l-12,11.994a2,2,0,0,0-.058,2.759L12.577,27.415a2,2,0,1,0,2.834-2.826Z" transform="translate(52.037 27.541) rotate(90)" fill="#fff"/>
            </svg>
            <img class="w-3/5" src="{{ asset('build/images/frise_footer_desk.png') }}" alt="frise">
            <div class="w-2/5">
                &nbsp;
            </div>
        </div>
    </footer>
    
    <script>
        // BACK TO TOP
        let myButtonDesktop = document.getElementById("myBtnDesktop");
        let myButtonMobile = document.getElementById("myBtnMobile");
    
        // When the user scrolls down 20px from the top of the document, show the button
        window.onscroll = function() {scrollFunction()};
    
        function scrollFunction() {
            if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
                myButtonDesktop.style.display = "block";
                myButtonMobile.style.display = "block";
            } else {
                myButtonDesktop.style.display = "none";
                myButtonMobile.style.display = "block";
            }
        }
    
        // When the user clicks on the button, scroll to the top of the document
        function topFunction() {
            document.body.scrollTop = 0; // For Safari
            document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
        }
    
    </script>