preview (image)
<div>
<div>
<div class="relative">
<div class="flex md:flex-row flex-col">
<div class="md:w-1/2 flex flex-col gap-10 md:p-20 md:pt-40 md:pr-40 p-5">
<h2 class="font-bold md:text-4.5xl text-3xl">Les valeurs du groupe</h2>
<span class="md:font-medium md:text-xl text-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit turpis, tempor at congue vel, sodales at elit.
Sed elementum molestie turpis nec consequat.<br><br> Etiam tempus nec arcu et rutrum. Donec sed nibh metus. Proin at sollicitudin orci,
a laoreet leo. Cras sagittis varius mattis. Pellentesque id tellus dolor.</span>
</div>
<div class="md:w-1/2 md:pt-20 pt-5 pl-5 relative">
<img class="hidden md:block w-full" <?= renderImageUrl('group-value.png', 'cms', 'blur') ?> loading="lazy">
<img class="md:hidden block w-full" <?= renderImageUrl('group-value-mobile.png', 'cms', 'blur') ?> loading="lazy">
<div class="bg-[#0144AA] p-5 pt-28 pl-10 md:p-20 md:pt-40 text-white flex flex-col gap-5 w-full absolute z-30 md:top-40 md:right-20 md:top-0 top-10 md:left-auto -left-5 pb-10 md:pb-20">
<div class="md:text-[400px] text-[200px] font-bold opacity-20 absolute md:-top-20 -top-10">1</div>
<span class="font-bold md:text-4.5xl text-3xl">Engagement</span>
<span class="md:text-lg md:font-medium text-sm font-normal">
Le RESPECT de la parole donnée ne se négocie pas. Nous tenons nos engagements auprès de nos clients, de nos partenaires, de nos fournisseurs
et des constructeurs dont nous portons les couleurs.
<br><br>
Nous respectons aussi nos engagements pris auprès de tous nos collaborateurs. Nous avons la RECONNAISSANCE des talents qui composent l’entreprise,
et nous investissons dans des formations innovantes pour que le partage de compétences et de savoir-faire permette à toute l’entreprise de grandir.
</span>
<div class="flex md:flex-row flex-col md:items-center items-start gap-2 mt-5">
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Respect</button>
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Reconnaisance</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative mt-20 md:mt-0">
<div class="bg-[#00388D] md:p-20 md:pt-40 md:pr-96 p-5 pb-10 md:pb-20 pt-28 pr-10 md:right-auto -right-5 text-white md:z-0 z-20 flex flex-col gap-5 relative md:w-[70%] pb-10 md:pb-20">
<div class="md:text-[400px] text-[200px] font-bold opacity-20 absolute md:-top-20 -top-5">2</div>
<span class="font-bold md:text-4.5xl text-3xl">Confiance</span>
<span class="md:text-lg md:font-medium text-sm font-normal">
Il est de notre RESPONSABILITÉ de comprendre et d’anticiper l’évolution de l’environnement automobile et
les enjeux des transformations de la mobilité. Pour y parvenir nous comptons sur nos entreprises à taille
humaine, proche de nos territoires, de nos clients et de nos collaborateurs.
<br><br>
Cette PROXIMITÉ est construite au quotidien par des managers à qui nous donnons l’autonomie nécessaire à leur
réussite et qui leur permet de trouver leurs propres solutions en faisant preuve d’inventivité et de curiosité.
</span>
<div class="flex md:flex-row flex-col md:items-center items-start gap-2 mt-5">
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Proximité</button>
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Responsabilité</button>
</div>
</div>
<!--<div class="bg-[#0144AA] p-5 pt-28 pl-10 md:p-20 md:pt-40 text-white flex flex-col gap-5 w-full absolute z-10 md:top-40 md:right-20 md:top-0 top-10 -left-5"> -->
<div class="bg-[#0055D0] p-5 pt-28 pl-10 md:p-20 md:pt-40 text-white flex flex-col gap-5 md:w-1/2 z-10 absolute md:top-1/2 mr-5 md:left-auto md:right-0 -mt-5 md:mt-0 pb-10 md:pb-20">
<div class="md:text-[400px] text-[200px] font-bold opacity-20 absolute md:-top-20 -top-5">3</div>
<span class="font-bold md:text-4.5xl text-3xl">Exigence</span>
<span class="md:text-lg md:font-medium text-sm font-normal">
Nous savons que la pérennité de l’entreprise dépend de ses résultats
financiers et de la qualité de ses services. Chacun connait ses objectifs, et a la fierté de les atteindre.
<br><br>
Le partage de nos compétences en même temps que l’émulation entre nos sociétés permet d’être très performants
individuellement et collectivement. Personne n’abandonne, et chacun peut compter sur le soutien du groupe par bon et mauvais temps. La PERFORMANCE passe par la PERSÉVÉRANCE.
</span>
<div class="flex items-center gap-2 mt-5">
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Performance</button>
<button class="btn btn-primary btn-pill py-2.75 md:px-13 flex-1 md:flex-none">Persévérance</button>
</div>
</div>
</div>
<div class="relative">
<span class="absolute md:p-20 p-5 flex items-center h-[30%] md:h-full md:w-1/3 bottom-0 md:text-xl text-sm md:font-medium font-normal md:text-text text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam velit turpis, tempor at congue vel, sodales at elit. </span>
<img class="hidden md:block w-full" <?= renderImageUrl('group-value-bottom.png', 'cms', 'blur') ?> loading="lazy">
<img class="md:hidden block w-full" <?= renderImageUrl('group-value-bottom-mobile.png', 'cms', 'blur') ?> loading="lazy">
</div>
</div>