<section class="flex flex-col gap-3 adjusted-marg-b-md">
<div class="flex flex-row justify-between items-center">
<h2 class="h4">À la une</h2>
<a href="#" class="
underline
link-base
link-dark
">
Tous les articles
</a>
</div>
<div class="relative flex flex-col gap-3" x-data="initSlider" x-init="
calcPageSize();
$nextTick(() => {
scrollTo(0);
calcActive();
})
" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel" aria-label="">
<div class="relative w-full overflow-x-hidden">
<div class="relative flex flex-nowrap w-full overflow-auto js_slides snap" @scroll.debounce="calcActive" aria-label="Slides">
<div class="js_slide flex-shrink-0 w-full" aria-roledescription="slide" id="slide-0" aria-labelledby="tab-0" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (1) + ' of ' + 3" :aria-hidden="active !== 0">
<div class="relative grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10 overflow-hidden max-md:bg-neutral-25">
<img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center col-span-4 sm:col-span-9 md:col-span-6 h-full" />
<div class="col-span-4 sm:col-span-9 md:absolute md:right-0 md:w-5/12 flex flex-col gap-3 justify-center h-full">
<div class="flex flex-col gap-1.5 bg-neutral-25 adjusted-marg-xs after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
<h3 class="h6">Vitamine C 10% : l’actif visage antitâches</h3>
<p class="text-body-sm">Atténuer les taches liées au vieillissement, c’est l’une des missions de la Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au visage son éclat naturel.</p>
<div class="flex flex-row items-center gap-4">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js_slide flex-shrink-0 w-full" aria-roledescription="slide" id="slide-1" aria-labelledby="tab-1" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (2) + ' of ' + 3" :aria-hidden="active !== 1">
<div class="relative grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10 overflow-hidden max-md:bg-neutral-25">
<img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center col-span-4 sm:col-span-9 md:col-span-6 h-full" />
<div class="col-span-4 sm:col-span-9 md:absolute md:right-0 md:w-5/12 flex flex-col gap-3 justify-center h-full">
<div class="flex flex-col gap-1.5 bg-neutral-25 adjusted-marg-xs after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
<h3 class="h6">Vitamine C 10% : l’actif visage antitâches</h3>
<p class="text-body-sm">Atténuer les taches liées au vieillissement, c’est l’une des missions de la Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au visage son éclat naturel.</p>
<div class="flex flex-row items-center gap-4">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="js_slide flex-shrink-0 w-full" aria-roledescription="slide" id="slide-2" aria-labelledby="tab-2" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (3) + ' of ' + 3" :aria-hidden="active !== 2">
<div class="relative grid grid-cols-4 sm:grid-cols-9 gap-x-6 lg:gap-x-8 xl:gap-x-6 2xl:gap-x-8 3xl:gap-x-10 overflow-hidden max-md:bg-neutral-25">
<img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center col-span-4 sm:col-span-9 md:col-span-6 h-full" />
<div class="col-span-4 sm:col-span-9 md:absolute md:right-0 md:w-5/12 flex flex-col gap-3 justify-center h-full">
<div class="flex flex-col gap-1.5 bg-neutral-25 adjusted-marg-xs after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
<h3 class="h6">Vitamine C 10% : l’actif visage antitâches</h3>
<p class="text-body-sm">Atténuer les taches liées au vieillissement, c’est l’une des missions de la Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au visage son éclat naturel.</p>
<div class="flex flex-row items-center gap-4">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-bind:class="{
'js_dummy_slide w-full': pageFillers > 0
}"></div>
</div>
</div>
<div class="relative w-full min-h-14">
<div class="absolute left-0 md:left-1/2 transform md:-translate-x-1/2 h-full flex justify-center items-center max-md:adjusted-marg-x-xs">
<div class="flex items-center ">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</div>
<div class="flex justify-end py-3">
<div class="flex flex-row gap-4">
<button type="button" :class="{ 'opacity-25 pointer-events-none' : active === 0 }" @click="scrollPrevious" :disabled="active === 0" aria-label="Voir le slide précédent" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
<button type="button" :class="{ 'opacity-25 pointer-events-none' : active >= itemCount - pageSize }" @click="scrollNext" :disabled="active >= itemCount - pageSize" aria-label="Voir le slide suivant" class=" btn btn-dark btn-subtle btn-border btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
<section class="flex flex-col gap-3 adjusted-marg-b-md">
<div class="flex flex-row justify-between items-center">
<h2 class="h4">À la une</h2>
<a href="#" class="
underline
link-base
link-dark
">
Plus articles
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-y-4 gap-x-3 xl:gap-x-4 3xl:gap-x-5">
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/thumbnail-2.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Vieillissement de la peau du visage : nos astuces à partir de 40 ans</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/thumbnail-1.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/thumbnail-2.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/img.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Vieillissement de la peau du visage : nos astuces à partir de 40 ans</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
<div class="relative bg-neutral-25 pb-11 after:absolute after:bottom-4 after:left-4 after:h-2 after:w-10 after:bg-brand after:block after:mb-0 ">
<img src="/img/blog/thumbnail-1.png" alt="Blog" class="aspect-video object-cover object-center w-full" />
<div class="flex flex-col gap-1.5 pt-4 px-4">
<h3 class="h6">Gluconate de zinc : bienfaits et pouvoir matifiant</h3>
<p class="text-body-sm line-clamp-3">Atténuer les taches liées au vieillissement, c’est l’une des missions de la
Vitamine C. Utilisée sous forme d’Actif Pur, elle renforce les mécanismes de défense de la peau et rend au
visage son éclat naturel.</p>
<div class="flex flex-wrap items-center gap-2.5">
<a href="#" class="
link-sm
link-dark
link-icon
">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 12.75V12C2.25 10.7574 3.25736 9.75 4.5 9.75H19.5C20.7426 9.75 21.75 10.7574 21.75 12V12.75M13.0607 6.31066L10.9393 4.18934C10.658 3.90804 10.2765 3.75 9.87868 3.75H4.5C3.25736 3.75 2.25 4.75736 2.25 6V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75H14.1213C13.7235 6.75 13.342 6.59197 13.0607 6.31066Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">Ingredient Spotlight</span>
</a>
<span>|</span>
<div class="flex flex-row gap-1 text-body-xs">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span> 3 min.</span>
</div>
</div>
</div>
</div>
</div>
</section>
{% render "@blog-highlight" %}
{% render "@blog-list-posts" %}
/* No context defined. */
No notes defined.