<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span></span>
<span class="lg:hidden"><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="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</span>
<span></span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle btn-size-sm 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 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle btn-size-sm 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 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
{% set hasIcon = false %}
{% for secondaryLink in secondaryLinks %}
{% for link in secondaryLink.links if not hasIcon and link.icon is defined %}
{% set hasIcon = true %}
{% endfor %}
{% endfor %}
{% set isFirst = true %}
{% set links_content %}
<div class="flex flex-col lg:flex-row pl-6 w-full">
{% for secondaryLink in secondaryLinks %}
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">{{ secondaryLink.title }}</h2>
<div class="inline-flex flex-col gap-4">
{% for link in secondaryLink.links %}
{% if link.icon %}
<div class="inline-flex gap-2 items-center">
{% render "@icons-" ~ link.icon.name|default("library--help") with link.icon %}
{% render "@template-link" with link|merge({color:color}) %}
</div>
{% elseif link.image %}
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="{{ link.image.src }}" alt="{{ link.image.alt }}" class="w-12 h-12 rounded-full mr-4" />
{% render "@template-link" with link|merge({color:color}) %}
</div>
{% else %}
<div class="inline-flex gap-2 items-center">
{% render "@template-link" with link|merge({color:color}) %}
</div>
{% endif %}
{% if link.informations %}
<div class="{{ hasIcon ? 'ml-8' }}">
{% for information in link.informations %}
<p class="text-xs font-medium mt-2 first:mt-0 {{ color == 'light' ? 'text-neutral-300' : 'text-neutral-700' }}">{{ information }}</p>
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% set isFirst = false %}
{% endfor %}
</div>
{% for secondaryLink in secondaryLinks %}
{% if secondaryLink.firstPush %}
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="{{ secondaryLink.firstPush.image.src }}" alt="{{ secondaryLink.firstPush.image.alt }}"
class="rounded-lg"
/>
</div>
<div class="flex justify-center ">
<a href="{{ secondaryLink.firstPush.link }}" class="text-sm">{{ secondaryLink.firstPush.label }}</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url({{ secondaryLink.firstPush.image.src }}) no-repeat center /cover"></div>
</div>
{% endif %}
{% if secondaryLink.secondPush %}
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="{{ secondaryLink.secondPush.image.src }}" alt="{{ secondaryLink.secondPush.image.alt }}"
class="rounded-lg"
/>
</div>
<div class="flex justify-center ">
<a href="{{ secondaryLink.secondPush.link }}" class="text-sm">{{ secondaryLink.secondPush.label }}</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url({{ secondaryLink.secondPush.image.src }}) no-repeat center /cover"></div>
</div>
{% endif %}
{% if secondaryLink.thirdPush %}
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="{{ secondaryLink.thirdPush.image.src }}" alt="{{ secondaryLink.thirdPush.image.alt }}"
class="rounded-lg"
/>
</div>
<div class="flex justify-center ">
<a href="{{ secondaryLink.thirdPush.link }}" class="text-sm">{{ secondaryLink.thirdPush.label }}</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url({{ secondaryLink.thirdPush.image.src }}) no-repeat center /cover"></div>
</div>
{% endif %}
{% endfor %}
{% endset %}
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b {{ color == 'audio' ? 'hover:border-audio-700' : 'hover:border-neutral-800' }}"
>
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold {{ color == 'audio' ? 'text-audio-700' : '' }}">
<span>{{ title }}</span>
<span class="lg:hidden">{% render "@icons-library--chevron-right" %}</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold {{ color == 'audio' ? 'text-audio-700' : '' }}">
{{ title }}
</h2>
<div x-show="open"
x-transition:enter="transition ease-out duration-500"
x-transition:enter-start="opacity-0 transform translate-x-full"
x-transition:enter-end="opacity-100 transform translate-x-0"
x-transition:leave="transition ease-in duration-500"
x-transition:leave-start="opacity-100 transform translate-x-0"
x-transition:leave-end="opacity-0 transform -translate-x-full"
class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold {{ color == 'audio' ? 'text-audio-700' : '' }}">
<span @click="open=false" class="lg:hidden">{% render "@icons-library--chevron-left" %}</span>
<span>{{ title }}</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2">{% render "@icons-library--close-outline" %}</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
{{ links_content }}
</div>
<div class="container mt-12 flex">
{% if color == 'audio' %}
{% render "@template-button" with {
color: "audio-subtle",
size: "sm",
type: "leading-icon",
label: "Prendre un rendez-vous",
icon: {
name: "library--calendar"
}
} %}
{% else %}
{% render "@template-button" with {
color: "dark-subtle",
size: "sm",
type: "leading-icon",
label: "Prendre un rendez-vous",
icon: {
name: "library--calendar"
}
} %}
{% endif %}
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
{{ links_content }}
</div>
<div class="container mt-12 flex">
{% if color == 'audio' %}
{% render "@template-button" with {
color: "audio-subtle",
size: "sm",
type: "leading-icon",
label: "Prendre un rendez-vous",
icon: {
name: "library--calendar"
}
} %}
{% else %}
{% render "@template-button" with {
color: "dark-subtle",
size: "sm",
type: "leading-icon",
label: "Prendre un rendez-vous",
icon: {
name: "library--calendar"
}
} %}
{% endif %}
</div>
</div>
</div>
/* No context defined. */
No notes defined.