4 core values

preview (image)
  • template
<div class="bg-primary">
<div class="container-desktop relative flex flex-col md:flex-row text-white justify-between gap-10">
<div class="flex flex-col md:w-1/2 gap-5 text-white relative p-10 pt-20 md:pl-20 md:pt-40">
<div class="md:w-1/2 z-10 flex flex-col gap-5">
<h2 class="text-3xl md:text-4.5xl font-bold leading-8 md:leading-13">Les 4 valeurs essentielles de
Tressol Chabrier</h2>
<span class="">Découvrez les 4 valeurs au coeur de notre ADN, valeurs qui nous animent au quotidien</span>
</div>

<img class="hidden xl:block absolute max-h-[530px] h-full md:h-auto bottom-0 right-0"
<?= renderImageUrl('4-core-value.png', 'cms') ?> loading="lazy" />
</div>
<div class="flex flex-col gap-4 w-full md:max-w-[600px] p-5 pb-20 md:p-20 md:py-40 md:pl-0">
<div class="border-b-1 border-white" x-data="dropdown(true)">
<div @click="toggle()"
class="flex justify-between font-semibold cursor-pointer pb-4 items-center">
<span class="text-2xl md:text-3xl leading-9 font-medium">Proximité</span>
<span>
<span x-show="!open">
<?= icon('plus', 'w-5 text-white') ?>
</span>
<span x-show="open">
<?= icon('close', 'w-5 text-white') ?>
</span>
</span>
</div>
<div class="overflow-hidden">
<div x-ref="content" class="hidden dropdown-content text-sm mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sed neque quis euismod.
In hac habitasse platea dictumst. Aenean interdum eu lacus nec congue.
</div>
</div>
</div>
<div class="border-b-1 border-white" x-data="dropdown(false)">
<div @click="toggle()"
class="flex justify-between font-semibold cursor-pointer pb-4 items-center">
<span class="text-2xl md:text-3xl leading-9 font-medium">Expertise</span>
<span>
<span x-show="!open">
<?= icon('plus', 'w-5 text-white') ?>
</span>
<span x-show="open">
<?= icon('close', 'w-5 text-white') ?>
</span>
</span>
</div>
<div class="overflow-hidden">
<div x-ref="content" class="hidden dropdown-content text-sm mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sed neque quis euismod.
In hac habitasse platea dictumst. Aenean interdum eu lacus nec congue.
</div>
</div>
</div>
<div class="border-b-1 border-white" x-data="dropdown(false)">
<div @click="toggle()"
class="flex justify-between font-semibold cursor-pointer pb-4 items-center">
<span class="text-2xl md:text-3xl leading-9 font-medium">Clarté & transparence</span>
<span>
<span x-show="!open">
<?= icon('plus', 'w-5 text-white') ?>
</span>
<span x-show="open">
<?= icon('close', 'w-5 text-white') ?>
</span>
</span>
</div>
<div class="overflow-hidden">
<div x-ref="content" class="hidden dropdown-content text-sm mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sed neque quis euismod.
In hac habitasse platea dictumst. Aenean interdum eu lacus nec congue.
</div>
</div>
</div>
<div class="border-b-1 border-white" x-data="dropdown(false)">
<div @click="toggle()"
class="flex justify-between font-semibold cursor-pointer pb-4 items-center">
<span class="text-2xl md:text-3xl leading-9 font-medium">Innovation</span>
<span>
<span x-show="!open">
<?= icon('plus', 'w-5 text-white') ?>
</span>
<span x-show="open">
<?= icon('close', 'w-5 text-white') ?>
</span>
</span>
</div>
<div class="overflow-hidden">
<div x-ref="content" class="hidden dropdown-content text-sm mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rhoncus sed neque quis euismod.
In hac habitasse platea dictumst. Aenean interdum eu lacus nec congue.
</div>
</div>
</div>
</div>
</div>
</div>