<section class="catalogue-cta">
<div class="p-horizontal p-vertical bg-[#00989B] flex flex-col gap-8 justify-center items-center shadow-lg mb-[-30px]">
<h2 class="font-allerBold uppercase text-white text-center text-2xl">Le catalogue 2025 de nos formations est disponible !</h2>
<!-- SMALL BLUE CTA -->
<div class="flex justify-end w-auto">
<button class="btn-catalog cta big-cta cta-white-blue lg:text-sm xl:text-base !text-grey-300" data-bs-target="#catalogModalGlobal" data-url="/lead-catalog-general/submit">Recevoir le catalogue</button>
</div>
</div>
</section>
<div id="catalogModalGlobal"
class="fixed inset-0 hidden overflow-y-auto transition-opacity ease-in duration-300 z-[9999]"
role="dialog" aria-modal="true" aria-labelledby="modalLabelCatalogGlobal">
<!--
Background backdrop, show/hide based on dialog state.
Entering: "ease-out duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "ease-in duration-200"
From: "opacity-100"
To: "opacity-0"
-->
{# overlay #}
<div class="fixed inset-0 bg-blue-500 bg-opacity-50" aria-hidden="true"></div>
{# wrapper content #}
<div id="modalCatalogGlobal" class="relative flex min-h-screen items-center justify-center p-4" style="z-index: 9999;">
<div class="modal__backdrop flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 ">
<div class="relative transform overflow-hidden rounded-lg bg-blue-500 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg text-white">
<div class="header">
{# close btn #}
<button
type="button"
data-close-modal
class="btn-dismiss-catalog-modal absolute top-2 right-2 p-2 rounded-full hover:bg-pink-500 focus:outline-none focus:ring-2 focus:ring-white"
aria-label="Fermer le modal"
>
<svg xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-white"
fill="none"
viewBox="0 0 24 24"
stroke="#FFFFFF"
stroke-width="2"
>
<path stroke-linecap="round"
stroke-linejoin="round"
d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
{# end close btn #}
</div>
<form class="catalog-form" data-type="general">
<div class="px-4 pb-4 pt-5 sm:p-10 sm:pb-0">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:text-left">
<h3 class="uppercase font-semibold leading-6 text-white font-allerBold text-center text-xl">Recevoir le catalogue Qwantic</h3>
<div class="mt-2 hidden sm:block">
<p class="text-sm text-white">Remplissez le formulaire ci-dessous afin d'obtenir notre
catalogue de formation :</p>
</div>
<input type="text" id="lead_catalog_general_lastName" name="lead_catalog_general[lastName]"
required="required" placeholder="Nom*"
class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
<input type="text" id="lead_catalog_general_firstName" name="lead_catalog_general[firstName]"
required="required" placeholder="Prénom*"
class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
<input type="text" id="lead_catalog_general_company" name="lead_catalog_general[company]"
required="required" placeholder="Entreprise / Structure*"
class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
<input type="email" id="lead_catalog_general_email" name="lead_catalog_general[email]"
required="required" placeholder="Email*"
class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
<input type="email" id="lead_catalog_general_email_pro" name="lead_catalog_general[email_pro]"
placeholder="Email Professionnel"
class="hidden rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full">
<input type="tel" id="lead_catalog_general_phone" name="lead_catalog_general[phone]"
placeholder="Téléphone"
class="rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full cleave-phone">
<div class="mb-3">
<input type="checkbox" id="lead_catalog_general_isOptin" name="lead_catalog_general[isOptin]"
required="required" value="1">
<label for="lead_catalog_general_isOptin" class="required">J'accepte la <a
href="https://qwantic.co/politique-de-confidentialite" target="_blank">politique
de confidentialité</a> *</label>
</div>
<input
type="hidden"
name="lead_catalog_general[_token]"
value="{{ csrf_token('lead_catalog_general') }}"
/>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-5 sm:flex sm:flex-row-reverse sm:px-6 sm:pb-5">
<button type="submit" name="lead_catalog_general[save]"
class="inline-flex w-full justify-center rounded-md cta big-cta bg-pink-500 hover:bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm sm:ml-3">
Recevoir le catalogue
</button>
{# <button type="button"#}
{# class="btn-dismiss-catalog-modal mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-grey-300 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">#}
{# Fermer#}
{# </button>#}
</div>
</form>
</div>
</div>
</div>
</div>
{#<div id="modal_catalog" class="invisible overflow-hidden relative z-[100] opacity-0 transition ease-in duration-300 h-0" aria-labelledby="modal-title" role="dialog" aria-modal="true">#}
{# <!--#}
{# Background backdrop, show/hide based on modal state.#}
{# Entering: "ease-out duration-300"#}
{# From: "opacity-0"#}
{# To: "opacity-100"#}
{# Leaving: "ease-in duration-200"#}
{# From: "opacity-100"#}
{# To: "opacity-0"#}
{# -->#}
{# <div class="fixed inset-0 bg-blue-500 bg-opacity-75 transition-opacity"></div>#}
{# <div class="fixed inset-0 z-10 overflow-y-auto">#}
{# <div id="modal_container" class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0 ">#}
{# <!--#}
{# Modal panel, show/hide based on modal state.#}
{# Entering: "ease-out duration-300"#}
{# From: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"#}
{# To: "opacity-100 translate-y-0 sm:scale-100"#}
{# Leaving: "ease-in duration-200"#}
{# From: "opacity-100 translate-y-0 sm:scale-100"#}
{# To: "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"#}
{# -->#}
{# <div class="relative transform overflow-hidden rounded-lg bg-blue-500 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg text-white">#}
{# {{ form_start(form) }}#}
{# <div class="px-4 pb-4 pt-5 sm:p-10 sm:pb-0">#}
{# <div class="sm:flex sm:items-start">#}
{# <div class="mt-3 text-center sm:mt-0 sm:text-left">#}
{# <h3 class="uppercase font-semibold leading-6 text-white font-allerBold text-center text-xl"#}
{# id="modal-title">Recevoir le catalogue Qwantic</h3>#}
{# <div class="mt-2 hidden sm:block">#}
{# <p class="text-sm text-white">Remplissez le formulaire ci-dessous afin d'obtenir notre catalogue de formation :</p>#}
{# </div>#}
{# <div class="mt-2">#}
{# <div>#}
{# {{ form_widget(form.lastName , {'attr' : {#}
{# 'class' : 'rounded my-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div>#}
{# {{ form_widget(form.firstName , {'attr' : {#}
{# 'class' : 'rounded mb-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div>#}
{# {{ form_widget(form.company , {'attr' : {#}
{# 'class' : 'rounded mb-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div>#}
{# {{ form_widget(form.email , {'attr' : {#}
{# 'class' : 'rounded mb-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div class="hidden">#}
{# {{ form_widget(form.email_pro , {'attr' : {#}
{# 'class' : 'rounded mb-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div>#}
{# {{ form_widget(form.phone , {'attr' : {#}
{# 'class' : 'rounded mb-3 p-3 outline-none font-allerLight text-grey-300 w-full'#}
{# }}) }}#}
{# </div>#}
{# <div class="mb-3">#}
{# {{ form_widget(form.isOptin) }}#}
{# {{ form_label(form.isOptin) }}#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# </div>#}
{# <div class="bg-gray-50 px-4 py-5 sm:flex sm:flex-row-reverse sm:px-6 sm:pb-5">#}
{# {{ form_widget(form.save , {'attr' : {#}
{# 'class' : 'inline-flex w-full justify-center rounded-md bg-pink-500 hover:bg-blue-500 px-3 py-2 text-sm font-semibold text-white shadow-sm sm:ml-3 sm:w-auto'#}
{# }}) }}#}
{# <button type="button" id="btn_return"#}
{# class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-grey-300 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">#}
{# Retour#}
{# </button>#}
{# </div>#}
{# {{ form_end(form) }}#}
{# </div>#}
{# </div>#}
{# </div>#}
{#</div>#}