{% extends 'base.html.twig' %}
{% block title %}Qwantic – Formations diplômantes & courtes en alternance à Marseille{% endblock %}
{% block meta %}
<meta name="description"
content="Faites de votre passion un métier. Formez-vous avec Qwantic à Marseille et obtenez un diplôme reconnu pour développer votre carrière.">
{% endblock %}
{% block body %}
{{ component('swipers:header_swiper') }}
<section id="impact">
<div class="p-horizontal p-vertical flex flex-col gap-8 bg-[#F9F9F9]">
<span data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-center text-2xl">Mon métier
a de l’impact</span>
<h1 data-aos="fade-down" data-aos-delay="200" class="font-allerRegular text-center text-base pb-4">Avec
Qwantic, vivez une expérience de formation innovante pour donner un nouvel élan à votre carrière.
</h1>
<div class="flex flex-col gap-14 lg:flex-row items-center">
{{ component('bubbles:content_bubble', {
url: "svg/apprenez.svg",
isImg: false,
title: "Apprenez en vous amusant",
subtitle: "Rejoindre une formation ancrée sur le jeu et le mouvement, en ligne ou en présentiel, c’est la garantie de monter en compétences et de retrouver le plaisir d’apprendre.",
}) }}
{{ component('bubbles:content_bubble', {
url: "svg/pratique.svg",
isImg: false,
title: "Un apprentissage centré sur la pratique",
subtitle: "Développez des compétences-métiers concrètes : mises en situation, études de cas et immersion en entreprise, avec nos formations diplômantes en alternance.",
}) }}
{{ component('bubbles:content_bubble', {
url: "svg/experts.svg",
isImg: false,
title: "Une équipe d’experts engagés",
subtitle: "Vivez une aventure humaine collective et bénéficiez d’un accompagnement personnalisé avec des experts métiers et formateurs passionnés.",
}) }}
</div>
</div>
</section>
{#
{{ component('swipers:categories_swiper', {
title: "Nos univers métiers",
subtitle: "Spécialisé dans les métiers à fort impact humain, Qwantic vous forme dans 5 domaines."
}) }}
#}
{{ component('sections:featured_course_section') }}
<section id="formations-diplomantes">
<div class="p-horizontal p-vertical relative ">
<div class="relative z-10 flex flex-col gap-12">
<h2 data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-center text-2xl">Nos
formations <span class="text-blue-500">diplômantes</span>
</h2>
<div data-aos="zoom-in" data-aos-delay="100"
class="grid grid-cols-1 gap-8 lg:grid-cols-3 justify-center 3xl:gap-12">
{{ component('cards:all_formations' , { limit : 3 , isSuccess: false}) }}
</div>
<!-- SMALL WHITE CTA -->
<div data-aos="fade-up" data-aos-delay="200"
class="flex justify-center items-center w-full relative z-30">
<a href="{{ path('nos_formations_diplomantes') }}"
class="w-full cta small-cta cta-white-blue lg:w-auto">Voir plus de formations</a>
</div>
</div>
</div>
</section>
<section id="formations-courtes">
<div class="p-horizontal p-vertical bg-[#F9F9F9] relative ">
<div class="relative z-10 flex flex-col gap-12">
<h2 data-aos="fade-down" data-aos-delay="0" class="font-allerBold uppercase text-center text-2xl">Nos
formations <span class="text-pink-500">courtes</span>
</h2>
<div data-aos="zoom-in" data-aos-delay="100"
class="grid grid-cols-1 gap-8 lg:grid-cols-3 justify-center 3xl:gap-12">
{{ component('cards:all_formations' , { limit : 3 , isSuccess: true}) }}
</div>
<!-- SMALL WHITE CTA -->
<div data-aos="fade-up" data-aos-delay="200"
class="flex justify-center items-center w-full relative z-30">
<a href="{{ path('nos_formations_courtes') }}"
class="w-full cta small-cta cta-white-pink lg:w-auto">Voir plus de formations</a></div>
</div>
</div>
</section>
{{ component('sections:custom_course_section') }}
{{ component('qwantic_kpi', {
title: "Qwantic en quelques chiffres",
}) }}
{{ component('swipers:partners_swiper', {
title: "Ils nous font confiance",
content: "partners",
navigation: "true",
}) }}
{{ component('sections:recognised_courses_section' , {
color: "grey-300",
}) }}
{{ component('sections:alumni_highlight') }}
<section id="blog" class="relative">
<div class="p-horizontal p-vertical bg-[#EEEEEE] relative ">
<svg class="absolute top-0 left-0" xmlns="http://www.w3.org/2000/svg" width="269.148" height="499.278"
viewBox="0 0 269.148 499.278">
<path id="decor_blog_1" d="M1037.609,2176V1676.718L768.461,2176Z"
transform="translate(1037.609 2175.996) rotate(180)" fill="#fff"/>
</svg>
<svg class="absolute bottom-0 right-0" xmlns="http://www.w3.org/2000/svg" width="269.148" height="499.278"
viewBox="0 0 269.148 499.278">
<path id="decor_blog_2" d="M1037.609,2176V1676.718L768.461,2176Z" transform="translate(-768.461 -1676.718)"
fill="#fff"/>
</svg>
<div class="relative z-10 flex flex-col gap-12">
<h2 data-aos="fade-right" data-aos-delay="100" class="font-allerBold uppercase text-center text-2xl">Les
derniers articles <br
class="md:hidden"><span class="text-pink-500">du blog</span></h2>
<div data-aos="zoom-in" class="grid grid-cols-1 gap-8 lg:grid-cols-3 justify-center 3xl:gap-12">
{{ component('cards:all_blog' , {limit : 3}) }}
</div>
<!-- SMALL WHITE CTA -->
<div data-aos="fade-up" data-aos-delay="100"
class="flex justify-center items-center w-full relative z-30">
<a href="{{ path('all_articles') }}" class="w-full cta small-cta cta-white-pink lg:w-auto">Voir tous
les articles</a>
</div>
</div>
</div>
</section>
{% endblock %}