<div x-data="initCarouselcarousel1658036075()" x-init="init()" class="relative w-full max-w-7xl mx-auto">
<div x-ref="swiperContainer" id="carousel-1658036075" class="swiper">
<div class="swiper-wrapper lg:!transform-none lg:block lg:!columns-2 lg:!gap-4">
<div data-hash="index-carousel-1658036075-0" class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm lg:mb-4">
<div class="flex justify-between items-start">
<div>
<h3 class=""></h3>
<p class="text-neutral-500 text-sm"></p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<span class="text-sm font-medium">/5</span>
</div>
</div>
<div class="review-content relative" x-data="{ hasOverflow: false }" x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})">
<p x-ref="content" class="mt-2 line-clamp-3"></p>
<template x-if="hasOverflow">
<a href="#reviews" x-data x-init="$store.asideBlocs.addAside('storeReview')" @click="$store.asideBlocs.toggleAside('storeReview')" class="is-underlined text-sm">
Lire la suite
</a>
</template>
</div>
</div>
<div data-hash="index-carousel-1658036075-1" class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm lg:mb-4">
<div class="flex justify-between items-start">
<div>
<h3 class=""></h3>
<p class="text-neutral-500 text-sm"></p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<span class="text-sm font-medium">/5</span>
</div>
</div>
<div class="review-content relative" x-data="{ hasOverflow: false }" x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})">
<p x-ref="content" class="mt-2 line-clamp-3"></p>
<template x-if="hasOverflow">
<a href="#reviews" x-data x-init="$store.asideBlocs.addAside('storeReview')" @click="$store.asideBlocs.toggleAside('storeReview')" class="is-underlined text-sm">
Lire la suite
</a>
</template>
</div>
</div>
<div data-hash="index-carousel-1658036075-2" class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm lg:mb-4">
<div class="flex justify-between items-start">
<div>
<h3 class=""></h3>
<p class="text-neutral-500 text-sm"></p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<span class="text-sm font-medium">/5</span>
</div>
</div>
<div class="review-content relative" x-data="{ hasOverflow: false }" x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})">
<p x-ref="content" class="mt-2 line-clamp-3"></p>
<template x-if="hasOverflow">
<a href="#reviews" x-data x-init="$store.asideBlocs.addAside('storeReview')" @click="$store.asideBlocs.toggleAside('storeReview')" class="is-underlined text-sm">
Lire la suite
</a>
</template>
</div>
</div>
<div data-hash="index-carousel-1658036075-3" class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm lg:mb-4">
<div class="flex justify-between items-start">
<div>
<h3 class=""></h3>
<p class="text-neutral-500 text-sm"></p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<span class="text-sm font-medium">/5</span>
</div>
</div>
<div class="review-content relative" x-data="{ hasOverflow: false }" x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})">
<p x-ref="content" class="mt-2 line-clamp-3"></p>
<template x-if="hasOverflow">
<a href="#reviews" x-data x-init="$store.asideBlocs.addAside('storeReview')" @click="$store.asideBlocs.toggleAside('storeReview')" class="is-underlined text-sm">
Lire la suite
</a>
</template>
</div>
</div>
<div data-hash="index-carousel-1658036075-4" class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm ">
<div class="flex justify-between items-start">
<div>
<h3 class=""></h3>
<p class="text-neutral-500 text-sm"></p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<div class="relative">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.679 2.68133C12.5554 2.41809 12.2908 2.25 12 2.25C11.7092 2.25 11.4446 2.41809 11.3211 2.68133L8.70998 8.24428L2.88674 9.13399C2.60886 9.17645 2.37805 9.37073 2.28881 9.6373C2.19958 9.90386 2.26689 10.1979 2.4632 10.3992L6.69886 14.7404L5.6975 20.8793C5.65126 21.1627 5.77096 21.4477 6.00576 21.6131C6.24055 21.7785 6.54919 21.7953 6.80056 21.6564L12 18.7822L17.1995 21.6564C17.4508 21.7953 17.7595 21.7785 17.9943 21.6131C18.2291 21.4477 18.3488 21.1627 18.3025 20.8793L17.3012 14.7404L21.5368 10.3992C21.7331 10.1979 21.8005 9.90386 21.7112 9.6373C21.622 9.37073 21.3912 9.17645 21.1133 9.13399L15.2901 8.24428L12.679 2.68133ZM9.8978 9.24391L12 4.76513L14.1022 9.24391C14.2085 9.47032 14.4207 9.62885 14.6679 9.66663L19.4439 10.3963L15.9632 13.9638C15.797 14.1342 15.7215 14.3733 15.7598 14.6083L16.5735 19.5964L12.3629 17.2688C12.1371 17.144 11.863 17.144 11.6372 17.2688L7.42658 19.5964L8.24024 14.6083C8.27856 14.3733 8.20307 14.1342 8.03684 13.9638L4.55614 10.3963L9.33214 9.66663C9.57938 9.62885 9.79153 9.47032 9.8978 9.24391Z" fill="currentColor" />
</svg>
<div class="absolute inset-0 overflow-hidden" style="clip-path: inset(0 NaN% 0 0)">
<svg class=" shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.5 14.4875L6.43769 21L12 17.9252L17.5623 21L16.5 14.4875L21 9.87539L14.7812 8.92523L12 3L9.21885 8.92523L3 9.87539L7.5 14.4875Z" fill="currentColor" />
</svg>
</div>
</div>
<span class="text-sm font-medium">/5</span>
</div>
</div>
<div class="review-content relative" x-data="{ hasOverflow: false }" x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})">
<p x-ref="content" class="mt-2 line-clamp-3"></p>
<template x-if="hasOverflow">
<a href="#reviews" x-data x-init="$store.asideBlocs.addAside('storeReview')" @click="$store.asideBlocs.toggleAside('storeReview')" class="is-underlined text-sm">
Lire la suite
</a>
</template>
</div>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-1658036075 swiper-pagination lg:hidden swiper-light"></div>
</div>
</div>
<script>
function initCarouselcarousel1658036075() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-1658036075',
init() {
this.$watch('$store.screen.isTablet', (isTablet) => {
if (isTablet && !this.swiper) {
this.initSwiper();
} else if (!isTablet && this.swiper) {
this.swiper.destroy(true, true);
this.swiper = null;
}
});
if (this.$store.screen.isTablet) {
this.initSwiper();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
}
}
});
}
};
}
</script>
{# reviews-carousel.twig #}
{% set uniqueId = "carousel-" ~ random() %}
{% set carouselFunctionName = "initCarousel" ~ uniqueId|replace({'-': ''}) %}
<div x-data="{{ carouselFunctionName }}()" x-init="init()" class="relative w-full max-w-7xl mx-auto">
<div x-ref="swiperContainer" id="{{ uniqueId }}" class="swiper">
<div class="swiper-wrapper lg:!transform-none lg:block lg:!columns-2 lg:!gap-4">
{% if slides is defined and slides %}
{% for index, review in slides %}
{% if index <=5 %}
<div data-hash="index-{{ uniqueId }}-{{ index }}"
class="swiper-slide lg:!w-full h-auto lg:break-inside-avoid bg-dark-5 font-medium text-neutral-800 rounded-lg p-4 shadow-sm {% if not loop.last %}lg:mb-4{% endif %}">
<div class="flex justify-between items-start">
<div>
<h3 class="">{{ review.author }}</h3>
<p class="text-neutral-500 text-sm">{{ review.date }}</p>
</div>
<div class="flex justify-center items-center gap-1 text-sm">
{% for i in 1..5 %}
{% set fillPercentage = (review.rating - i + 1) * 100 %}
{% if fillPercentage > 100 %}
{% set fillPercentage = 100 %}
{% elseif fillPercentage < 0 %}
{% set fillPercentage = 0 %}
{% endif %}
<div class="relative">
{% render "@icons-library--star-outline" with {
size: 12
} %}
<div class="absolute inset-0 overflow-hidden"
style="clip-path: inset(0 {{ 100 - fillPercentage }}% 0 0)">
{% render "@icons-library--star-fill" with {
size: 12
} %}
</div>
</div>
{% endfor %}
<span class="text-sm font-medium">{{ review.rating }}/5</span>
</div>
</div>
<div class="review-content relative"
x-data="{ hasOverflow: false }"
x-init="$nextTick(() => {
const content = $refs.content;
const lineHeight = parseInt(window.getComputedStyle(content).lineHeight);
hasOverflow = content.scrollHeight > lineHeight * 3;
})"
>
<p x-ref="content" class="mt-2 line-clamp-3">{{ review.content }}</p>
<template x-if="hasOverflow">
{% render "@template-link" with {
size: 'sm',
label: "Lire la suite",
href: "#reviews",
underlined: true,
color: 'dark',
link_attribute: ('x-data x-init="$store.asideBlocs.addAside(\'storeReview\')" @click="$store.asideBlocs.toggleAside(\'storeReview\')"')|replace({"\'": "'"}),
} %}
</template>
</div>
</div>
{% endif %}
{% endfor %}
{% endif %}
</div>
{% if carousel.showPagination %}
<div x-ref="pagination"
class="swiper-pagination-{{ uniqueId }} swiper-pagination lg:hidden {{ paginationClass }}"
{{ swiper_pagination_attribute }}></div>
{% endif %}
</div>
</div>
<script>
function {{ carouselFunctionName }}() {
return {
swiper: null,
options: {{ carousel|json_encode|raw }},
componentId: '{{ uniqueId }}',
init() {
this.$watch('$store.screen.isTablet', (isTablet) => {
if (isTablet && !this.swiper) {
this.initSwiper();
} else if (!isTablet && this.swiper) {
this.swiper.destroy(true, true);
this.swiper = null;
}
});
if (this.$store.screen.isTablet) {
this.initSwiper();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
}
}
});
}
};
}
</script>
{
"title": "La collection MAGIC",
"variant": "default",
"showCTA": true,
"CTA": {
"label": "Voir toute la collection",
"href": "https://www.afflelou.com/",
"external": true,
"color": "dark"
},
"paginationClass": "swiper-light",
"carousel": {
"color": "dark",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
"slides": [
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "MAGIC 262",
"description": "Lunettes de vue MAGIC + 2 clips inclus",
"colors": "3 couleurs disponibles",
"price": "199,00",
"image": "/img/productsSlider/magicProduct1.png",
"hoverImage": "/img/productsSlider/hoverMagicProduct1.png",
"webLabel": "PRIX WEB"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Enola",
"description": "Lunettes de vue MAGIC",
"colors": "5 couleurs disponibles",
"price": "109,00",
"image": "/img/productsSlider/magicProduct2.png",
"hoverImage": "/img/productsSlider/hoverMagicProduct2.png",
"webLabel": "PRIX WEB"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "MAGIC 222",
"description": "Lunettes de vue MAGIC + 2 clips inclus",
"colors": "2 couleurs disponibles",
"price": "179,00",
"image": "/img/productsSlider/magicProduct3.png",
"hoverImage": "/img/productsSlider/hoverMagicProduct3.png",
"webLabel": "PRIX WEB"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Enola",
"description": "Lunettes de vue MAGIC",
"colors": "5 couleurs disponibles",
"price": "109,00",
"image": "/img/productsSlider/magicProduct1.png",
"hoverImage": "/img/productsSlider/hoverMagicProduct1.png",
"webLabel": "PRIX WEB"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "MAGIC 222",
"description": "Lunettes de vue MAGIC + 2 clips inclus",
"colors": "2 couleurs disponibles",
"price": "179,00",
"image": "/img/productsSlider/magicProduct2.png",
"hoverImage": "/img/productsSlider/hoverMagicProduct2.png",
"webLabel": "PRIX WEB"
}
]
}
A reusable component for displaying product cards, compatible with both carousels and grids.
The component can be configured via the productCard.config.js file. Here are the available options:
Object containing product information:
url: Product page URLopenInNewTab: Boolean to open link in new tabimage: Path to main product imagehoverImage: Path to image displayed on hovername: Product namebrand: Product branddescription: Product descriptioncolors: Text indicating available colorsprice: Product priceoldPrice: Original price (for promotions)discountText: Promotion textwebLabel: Web price labelinlinePrice: Boolean to display price inline with titlebuttonColor: Action buttons colorbuttonColorHover: Action buttons hover colorAction buttons configuration:
showActionButtons: Boolean to show/hide action buttonsshowFavoriteButton: Boolean to show/hide favorite buttonshowQuickViewButton: Boolean to show/hide quick view buttonAlpine.js attributes configuration for reactivity:
alpineAttribute: {
productInfo: {
brand: 'x-text="product.brand"',
name: 'x-text="product.name"',
description: 'x-text="product.description"',
colors: 'x-text="product.colors"',
price: 'x-text="product.price"',
webLabel: 'x-text="product.webLabel"'
}
}default: Standard display with image, title, and pricewith-hover: Variant with image hover effectwith-discount: Variant with original price and promotion textinline-price: Variant with price inline with title{# Basic usage #}
{% include '@components/product/productCard.twig' with {
product: {
url: '/product/1',
image: '/path/to/image.jpg',
name: 'Product name',
price: '199.00'
}
} %}
{# Usage with all options #}
{% include '@components/product/productCard.twig' with {
product: {
url: '/product/1',
openInNewTab: false,
image: '/path/to/image.jpg',
hoverImage: '/path/to/hover-image.jpg',
name: 'Product name',
brand: 'Brand',
description: 'Product description',
colors: '3 colors available',
price: '199.00',
oldPrice: '249.00',
discountText: '-20%',
webLabel: 'WEB PRICE',
inlinePrice: true,
buttonColor: 'light',
buttonColorHover: 'dark',
showActionButtons: true,
showFavoriteButton: true,
showQuickViewButton: true,
addCart: true,
alpineAttribute: {
productInfo: {
brand: 'x-text="product.brand"'
// ... other Alpine.js attributes
}
}
},
class: 'custom-class'
} %}hoverImage is definedinlinePricetemplate-button component for actionsThe component uses Tailwind CSS classes for styling:
The component integrates with the template-button component for: