<section class="flex flex-col gap-y-6 adjusted-marg-b-xs">
<div class="grid grid-cols-2 md:grid-cols-3 gutter-quarter gap-y-2">
<a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-2.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Vieillissement de la peau du visage : nos astuces à partir de 40 ans
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a>
</div>
<div class="flex justify-center">
<div x-data="pagination()" class="flex items-center gap-2 ">
<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1" :class="[
size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
<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="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </button>
<template x-for="page in totalPages" :key="page">
<button @click="goToPage(page)" x-text="page" :class="[
currentPage === page ? 'bg-brand-500' : '',
size === 'small' ? 'min-h-8 min-w-8 py-1.5 rounded text-click-xs' : '',
size === 'medium' ? 'min-h-10 min-w-10 py-2 rounded text-click-sm' : '',
size === 'large' ? 'min-h-12 min-w-12 py-3 rounded-lg text-click-base' : ''
]" class="transition-all inline-flex justify-center items-center hover:bg-brand-200"></button>
</template>
<button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages" :class="[
size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
<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="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </button>
</div>
<script>
function pagination() {
return {
currentPage: 1,
totalPages: 3,
size: 'small',
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
}
}
}
}
</script>
</div>
</section>
<section class="flex flex-col gap-y-6 adjusted-marg-b-xs">
<div class="grid grid-cols-2 md:grid-cols-3 gutter-quarter gap-y-2">
{% for article in articles %}
{% render '@blog-card--search-results' with {
title: article.title,
img: article.img,
class: 'w-auto'
} %}
{% endfor %}
</div>
<div class="flex justify-center">
{% render '@pagination-simple' with {
totalPages: 3,
size: 'small'
} %}
</div>
</section>
{
"articles": [
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Vieillissement de la peau du visage : nos astuces à partir de 40 ans",
"img": {
"src": "/img/blog/thumbnail-2.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
},
{
"title": "Gluconate de zinc : bienfaits et pouvoir matifiant",
"img": {
"src": "/img/blog/thumbnail-1.png"
}
}
]
}
No notes defined.