<div class="relative flex flex-col bg-neutral-100 rounded-lg w-full gap-9 p-9 z-10">
<div class="flex flex-col gap-y-4">
<span class="font-medium">Civilité</span>
<div class="flex flex-row gap-6">
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Madame</span>
</label>
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Monsieur</span>
</label>
</div>
</div>
<div class="flex flex-col gap-y-2">
<label>
<input type="text" placeholder="Nom" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<label>
<input type="text" placeholder="Prénom" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<label>
<input type="text" placeholder="Email" class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500">
</label>
<div class="flex flex-col lg:flex-row gap-2">
<select class="border-neutral-300 rounded-md inline-block md:w-auto w-full">
<option value="" selected>France (+33)</option>
<option value="">Antigua-et-Barbuda (+1268)</option>
<option value="">République centrafricaine (+236)</option>
</select>
<input type="text" placeholder="Téléphone" class="flex border-neutral-300 lg:w-3/4 rounded-md placeholder:text-neutral-500">
</div>
</div>
<div class="flex flex-col gap-y-4">
<span class="font-medium">Je possède déjà une ordonnance d'ORL</span>
<div class="flex flex-row gap-6">
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Oui</span>
</label>
<label class="selection-control-label selection-control-size-sm">
<input type="radio">
<span>Non</span>
</label>
</div>
</div>
<div>
<label class="selection-control-label selection-control-size-sm">
<input type="checkbox">
<span>J’accepte de recevoir des offres et actualités de la part des enseignes du Groupe Afflelou** (Opticien et Acousticien).</span>
</label>
</div>
<div class="flex justify-center w-full">
<button type="button" class=" btn btn-audio btn-size-large btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.15544 3.68525C7.94039 3.50031 7.66543 3.39987 7.3818 3.40266L7.3749 3.4027H4.57004C4.40787 3.40289 4.24752 3.43683 4.09918 3.50235C3.95075 3.56792 3.81759 3.66367 3.70819 3.78352C3.59879 3.90336 3.51554 4.04468 3.46375 4.19846C3.41248 4.35069 3.39314 4.51184 3.40692 4.67185C3.70295 7.45044 4.64886 10.1204 6.16815 12.4656L6.1715 12.4708C7.55193 14.6432 9.39372 16.485 11.5661 17.8654L11.5716 17.8689C13.906 19.3828 16.5626 20.3284 19.3284 20.6301C19.4887 20.6438 19.6501 20.6242 19.8024 20.5727C19.9566 20.5206 20.0982 20.4368 20.2182 20.3268C20.3381 20.2167 20.4337 20.0829 20.4989 19.9337C20.5641 19.7846 20.5975 19.6235 20.5968 19.4607V19.4579V16.6527C20.5968 16.6469 20.5969 16.6411 20.597 16.6353C20.6041 16.3487 20.5057 16.0694 20.3203 15.8507C20.1356 15.6326 19.8774 15.4899 19.5946 15.4493C18.6456 15.3239 17.7139 15.0916 16.8171 14.757L16.8155 14.7564C16.6063 14.6777 16.379 14.6607 16.1604 14.7073C15.9424 14.7538 15.7423 14.8617 15.5836 15.0182L15.5824 15.0194L14.3976 16.2041C14.1744 16.4274 13.8295 16.4739 13.5551 16.3179C11.1043 14.9244 9.07516 12.8952 7.68163 10.4445C7.52558 10.17 7.57214 9.82515 7.79538 9.60192L8.98137 8.41592C9.13784 8.25722 9.24569 8.05708 9.29218 7.8391C9.33879 7.62054 9.32177 7.39321 9.24314 7.18403L9.24255 7.18245C8.90791 6.28567 8.67567 5.35396 8.55024 4.40505C8.51001 4.1253 8.36977 3.86957 8.15544 3.68525ZM7.37172 2.00009C7.99438 1.99486 8.59782 2.21575 9.06999 2.62181C9.5431 3.02869 9.85212 3.59371 9.93945 4.21157L9.94036 4.21801C10.0518 5.06331 10.2586 5.89328 10.5566 6.69209L10.5561 6.69051C10.729 7.1507 10.7665 7.65083 10.6639 8.13165C10.5614 8.61247 10.3232 9.05381 9.97748 9.40339L9.97472 9.40618L9.17237 10.2085C10.3338 12.0846 11.9149 13.6657 13.791 14.8271L14.5961 14.022C14.9457 13.6763 15.387 13.4381 15.8679 13.3356C16.3484 13.2331 16.8481 13.2704 17.3081 13.4431C18.1067 13.7411 18.9364 13.9477 19.7815 14.0592L19.7878 14.06C20.4123 14.1481 20.9827 14.4627 21.3905 14.944C21.7962 15.4228 22.0127 16.0334 21.9994 16.6607V19.4564C22.0007 19.814 21.9273 20.168 21.7841 20.4956C21.6406 20.8237 21.4302 21.1182 21.1664 21.3603C20.9025 21.6024 20.591 21.7867 20.2518 21.9014C19.9126 22.0161 19.5532 22.0587 19.1965 22.0265L19.1839 22.0252C16.1986 21.7008 13.3309 20.681 10.8111 19.0475C8.467 17.5574 6.47942 15.5698 4.98932 13.2257C3.3501 10.6944 2.32997 7.81274 2.01151 4.81391L2.01044 4.80297C1.97831 4.44742 2.02056 4.08908 2.13451 3.75076C2.24846 3.41244 2.4316 3.10156 2.67228 2.8379C2.91296 2.57424 3.20591 2.36358 3.53246 2.21934C3.85902 2.07509 4.21203 2.00043 4.56903 2.00009H7.37172Z" fill="currentColor" />
</svg>
Être rappelé
</button>
</div>
<p class="text-xs text-neutral-400">
En complétant le présent formulaire et en cliquant sur « être rappelé », je suis informé(e) et j’accepte que mes données personnelles soient traitées par la société LION SENECA/France AUDIO, en qualité de responsable de traitement afin de me recontacter pour organiser mon essayage d’aides auditives conformément à sa politique de confidentialité.
Mes données personnelles pourront également être utilisées, avec mon consentement, par les sociétés LION SENECA/France AUDIO et ALAIN AFFLELOU FRANCHISEUR pour m’envoyer de la prospection commerciale.
Pour en savoir plus sur le traitement de vos données et sur vos droits, consultez la politique de confidentialité Alain Afflelou Acousticien.
</p>
</div>
<div class="flex flex-col gap-2 text-neutral-500 text-xs mt-4">
<p>* Sous réserve d’une prescription médicale.</p>
<p>** Les sociétés Alain Afflelou Franchiseur et Lion/Seneca France Audio.</p>
</div>
<div class="relative flex flex-col bg-neutral-100 rounded-lg w-full gap-9 p-9 z-10">
<div class="flex flex-col gap-y-4">
<span class="font-medium">Civilité</span>
<div class="flex flex-row gap-6">
{% render "@template-checkbox" with {
type: "radio",
size: "sm",
label: "Madame"
} %}
{% render "@template-checkbox" with {
type: "radio",
size: "sm",
label: "Monsieur"
} %}
</div>
</div>
{# @TODO : Add design system's input when inputs are ready #}
<div class="flex flex-col gap-y-2">
<label>
<input type="text"
placeholder="Nom"
class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500"
>
</label>
<label>
<input type="text"
placeholder="Prénom"
class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500"
>
</label>
<label>
<input type="text"
placeholder="Email"
class="border-neutral-300 w-full rounded-md placeholder:text-neutral-500"
>
</label>
<div class="flex flex-col lg:flex-row gap-2">
<select class="border-neutral-300 rounded-md inline-block md:w-auto w-full">
<option value="" selected>France (+33)</option>
<option value="">Antigua-et-Barbuda (+1268)</option>
<option value="">République centrafricaine (+236)</option>
</select>
<input type="text"
placeholder="Téléphone"
class="flex border-neutral-300 lg:w-3/4 rounded-md placeholder:text-neutral-500"
>
</div>
</div>
<div class="flex flex-col gap-y-4">
<span class="font-medium">Je possède déjà une ordonnance d'ORL</span>
<div class="flex flex-row gap-6">
{% render "@template-checkbox" with {
type: "radio",
size: "sm",
label: "Oui"
} %}
{% render "@template-checkbox" with {
type: "radio",
size: "sm",
label: "Non"
} %}
</div>
</div>
<div>
{% render "@template-checkbox" with {
type: "checkbox",
size: "sm",
label: "J’accepte de recevoir des offres et actualités de la part des enseignes du Groupe Afflelou** (Opticien et Acousticien)."
} %}
</div>
<div class="flex justify-center w-full">
{% render "@template-button" with {
color: "audio",
size: "large",
type: "leading-icon",
label: "Être rappelé",
icon: {
name: "library--call",
width: '24',
height: '24'
}
} %}
</div>
<p class="text-xs text-neutral-400">
En complétant le présent formulaire et en cliquant sur « être rappelé », je suis informé(e) et j’accepte que mes données personnelles soient traitées par la société LION SENECA/France AUDIO, en qualité de responsable de traitement afin de me recontacter pour organiser mon essayage d’aides auditives conformément à sa politique de confidentialité.
Mes données personnelles pourront également être utilisées, avec mon consentement, par les sociétés LION SENECA/France AUDIO et ALAIN AFFLELOU FRANCHISEUR pour m’envoyer de la prospection commerciale.
Pour en savoir plus sur le traitement de vos données et sur vos droits, consultez la politique de confidentialité Alain Afflelou Acousticien.
</p>
</div>
<div class="flex flex-col gap-2 text-neutral-500 text-xs mt-4">
<p>* Sous réserve d’une prescription médicale.</p>
<p>** Les sociétés Alain Afflelou Franchiseur et Lion/Seneca France Audio.</p>
</div>
/* No context defined. */
No notes defined.