<div class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 text-audio-700">
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
<svg xmlns="http://www.w3.org/2000/svg" width="164" height="25" viewBox="0 0 164 25" fill="none" class="h-6 md:h-8">
<path d="M48.0002 5.22313C46.4618 3.68467 44.0002 3.06928 41.8464 3.06928C36.6156 3.06928 32.9233 7.37698 32.9233 12.3001C32.9233 17.2231 36.9233 21.5308 41.8464 21.5308C44.0002 21.5308 46.1541 20.6077 48.0002 19.0693V22.4539C46.1541 23.377 44.0002 23.9924 41.8464 23.9924C35.3848 23.9924 29.8464 18.7616 29.8464 12.3001C29.8464 5.53082 35.3848 0.300049 42.1541 0.300049C44.3079 0.300049 46.1541 0.915436 48.0002 1.83851V5.22313Z" fill="black" />
<path d="M3.69208 0.915283H0.922852V23.9922H3.69208V0.915283Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.3079 24.3C66.7695 24.3 72.3079 19.0693 72.3079 12.3001C72.3079 5.83852 66.7695 0.300049 60.3079 0.300049C53.8464 0.300049 48.3079 5.83852 48.3079 12.3001C48.3079 19.0693 53.5387 24.3 60.3079 24.3ZM60.3079 3.06928C65.8464 3.06928 69.5387 7.37698 69.5387 12.3001C69.5387 17.5308 65.231 21.5308 60.3079 21.5308C55.3848 21.5308 51.0772 17.5308 51.0772 12.3001C51.0772 7.37698 54.7695 3.06928 60.3079 3.06928Z" fill="black" />
<path d="M96.0001 13.2231C96.0001 19.377 91.6924 24.3 85.2309 24.3C78.7693 24.3 73.5385 18.7616 73.5385 12.3001C73.5385 5.83852 78.7693 0.300049 85.5386 0.300049C89.2309 0.300049 92.6155 1.83851 94.7693 4.60775L92.6155 6.76159C91.077 4.60775 88.3078 3.06928 85.5386 3.06928C80.3078 3.06928 76.3078 7.37698 76.3078 12.3001C76.3078 17.2231 80.3078 21.5308 85.2309 21.5308C88.9232 21.5308 92.6155 18.4539 92.6155 14.7616H86.7693V11.9924H96.0001V13.2231Z" fill="black" />
<path d="M121.846 0.915283H124.615V23.9922H121.846V0.915283Z" fill="black" />
<path d="M134.461 23.6845H131.692V3.37682H126.153V0.915283H140V3.37682H134.461V23.6845Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M151.077 24.3C157.539 24.3 163.077 19.0693 163.077 12.3001C163.077 5.83852 157.539 0.300049 151.077 0.300049C144.616 0.300049 139.077 5.83852 139.077 12.3001C139.077 19.0693 144.308 24.3 151.077 24.3ZM151.077 3.06928C156.616 3.06928 160.308 7.37698 160.308 12.3001C160.308 17.5308 156 21.5308 151.077 21.5308C146.154 21.5308 141.846 17.5308 141.846 12.3001C141.846 7.37698 145.539 3.06928 151.077 3.06928Z" fill="black" />
<path d="M115.385 0.915283V17.8384L99.077 0.915283H98.1539V23.6845H100.923V6.76144L117.231 23.6845H118.154V0.915283H115.385Z" fill="black" />
<path d="M24.6155 17.8384V0.915283H27.3847V23.6845H26.4616L10.1539 6.76144V23.6845H7.38469V0.915283H8.30777L24.6155 17.8384Z" fill="black" />
</svg>
<h2 class="font-medium text-4xl md:text-6xl">Ni vu, ni connu !</h2>
</div>
</div>
<div class="video-container w-auto h-[500px] md:w-full md:h-auto ">
<div x-data="videoAnimation( true )" class="plyr__video flex justify-center h-full ">
<video x-ref="videoPlayer" autoplay loop muted playsinline>
<source src="/videos/incognito/incognito.mp4" type="video/mp4" media="(min-width: 768px)">
<source src="/videos/incognito/incognito.mp4" type="video/mp4" media="(max-width: 767px)">
<source src="/videos/magic.mp4" type="video/mp4">
Votre navigateur ne supporte pas la balise vidéo.
</video>
</div>
<script>
function videoAnimation(enableGsap = false) {
return {
enableGsap: enableGsap,
plyr: null,
init() {
// Initialisation de Plyr
this.plyr = new Plyr(this.$refs.videoPlayer, {
autoplay: true,
controls: ["play"]
});
if (this.enableGsap) {
this.initGsap();
}
},
initGsap() {
gsap.registerPlugin(ScrollTrigger);
const video = this.$refs.videoPlayer;
const container = document.querySelector('.container');
if (video) {
const containerWidth = container.offsetWidth;
const trigger = gsap.fromTo(
this.plyr.elements.container, {
width: "100vw"
}, {
width: (containerWidth - 32),
marginLeft: "16px",
marginRight: "16px",
ease: "power1.out",
"border-radius": "8px",
scrollTrigger: {
trigger: video,
start: 'top-=450 top',
end: "top-=50 top",
scrub: true,
once: true,
// markers: true, // Pour debug, à retirer en production
}
}
);
} else {
console.error("L'élément vidéo n'a pas été trouvé dans le DOM.");
}
}
};
}
</script>
</div>
<div class="container px-0 flex flex-col gap-14 md:gap-28" x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="flex flex-col items-center gap-10 w-4/5 mx-auto" x-ref="buttonIncognito" x-ref="sliderIncognito" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<p class="font-medium text-xl tmd:ext-2xl self-start">INCOGNITO, une offre d'aides auditives alliant discrétion, performances et prix le plus juste pour vous permettre de bien entendre sans compromis.</p>
<div class="flex flex-col md:flex-row gap-4">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto w-full md:w-auto justify-center btn btn-audio-subtle ">
En savoir plus
</a>
</div>
</div>
</div>
<div x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="container" x-ref="sliderIncognito" x-bind:class="{ 'invisible': !shown, 'visible': shown }" x-transition:enter="transition-opacity duration-300" x-transition:leave="transition-opacity duration-300">
<div x-data="initCarouselcarousel78004877()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold ">La gamme INCOGNITO</h2>
<div class="flex items-center justify-center space-x-4 ">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="hidden sm:inline-flex mx-auto btn btn-audio-subtle ">
Voir toute la collection
</a>
<div class=" hidden sm:flex flex space-x-2">
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-prev-carousel-78004877 before:border-none btn btn-audio-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</button>
<button type="button" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-next-carousel-78004877 before:border-none btn btn-audio-subtle btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</button>
</div>
</div>
</div>
<div x-ref="swiperContainer" id="carousel-78004877" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-78004877-0">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito1.png" alt="Incognito A.I BTE R 1600" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito1.jpeg" alt="Incognito A.I BTE R 1600 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I BTE R 1600</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-78004877-1">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito2.png" alt="Incognito IC16 G7 SLIM RIC LI" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito2.jpeg" alt="Incognito IC16 G7 SLIM RIC LI - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito IC16 G7 SLIM RIC LI</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Mini contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-78004877-2">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito3.png" alt="Incognito A.I CIC 312 WL 2400" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito3.png" alt="Incognito A.I CIC 312 WL 2400 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I CIC 312 WL 2400</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Intra auriculaire</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-78004877-3">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito1.png" alt="Incognito A.I BTE R 1600" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito1.jpeg" alt="Incognito A.I BTE R 1600 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito A.I BTE R 1600</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
9,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-78004877-4">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/incognito/incognito2.png" alt="Incognito IC16 G7 SLIM RIC LI" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/incognito/hoverIncognito2.jpeg" alt="Incognito IC16 G7 SLIM RIC LI - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-light-ghost btn btn-dark-ghost btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Incognito IC16 G7 SLIM RIC LI</h3>
<p class="text-xs text-neutral-500 pt-1">Appareil auditif - Mini contour d'oreille</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-78004877 swiper-pagination swiper-audio" :class="isMagicDark ? 'swiper-dark' : 'swiper-light'"></div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" :class="isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'" class="mx-auto btn btn-audio-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel78004877() {
return {
swiper: null,
options: {
"color": "audio",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false,
"showTitle": true,
"title": "La gamme INCOGNITO",
"useDynamicTheming": true,
"paginationClass": "swiper-audio",
"CTA": {
"label": "Voir toute la collection",
"href": "https://www.afflelou.com/",
"external": true,
"color": "audio"
}
},
componentId: 'carousel-78004877',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
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
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
</div>
<div
class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 {% if options.theme == 'audio' %}text-audio-700{% endif %}"
>
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
{% if options.brandLogo is defined and options.brandLogo %}
{% render ("@logos-brand--" ~ options.brandLogo) with { logoClass: "h-6 md:h-8" } %}
{% elseif options.brandTitle is defined and options.brandTitle %}
<h3 class="text-3xl font-semibold text-left text-neutral-500 uppercase">{{ options.brandTitle }}</h3>
{% endif %}
<h2 class="font-medium text-4xl md:text-6xl">{{ text.title }}</h2>
</div>
</div>
{% if options.videos is defined and options.videos %}
<div class="video-container w-auto h-[500px] md:w-full md:h-auto ">
{% render "@video" with {
videoClass: "",
video_src_desktop: options.videos.desktop,
video_src_mobile: options.videos.mobile,
video_type: "video/mp4",
autoplay: true,
loop: true,
controls: ['play'],
muted: true,
enableGsap: options.videos.enableGsap
} %}
</div>
{% endif %}
{% if options.image is defined and options.image %}
<div class="flex justify-center w-auto h-[500px] md:w-full md:h-auto ">
{% render "@image" with options.image %}
</div>
{% endif %}
<div
class="container px-0 flex flex-col gap-14 md:gap-28"
x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div
class="flex flex-col items-center gap-10 w-4/5 mx-auto"
x-ref="button{{ options.prefix }}"
x-ref="slider{{ options.prefix }}"
x-bind:class="{ 'invisible': !shown, 'visible': shown }"
x-transition:enter="transition-opacity duration-300"
x-transition:leave="transition-opacity duration-300"
>
<p class="font-medium text-xl tmd:ext-2xl self-start">{{ text.description }}</p>
{% if text.subDescription is defined and text.subDescription %}
<h4 class="text-neutral-800">{{ text.subDescription }}</h4>
{% endif %}
{% if infoBubbles is defined and infoBubbles %}
<div class="flex flex-col md:flex-row gap-4">
{% for infoBubble in infoBubbles %}
{% render "@infobubble" with infoBubble %}
{% endfor %}
</div>
{% endif %}
<div class="flex flex-col md:flex-row gap-4">
{% if options.secondaryButton is defined and options.secondaryButton %}
{% render "@template-button" with {
href:"https://www.afflelou.com/",
external:true,
color: options.secondaryButton.color,
type: "leading-icon",
label: "Prendre rendez-vous",
icon: {
name: "library--calendar"
},
button_class:"mx-auto w-full md:w-auto justify-center",
button_attribute: options.secondaryButton.useDynamicTheming ? (":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}) : ''
} %}
{% endif %}
{% render "@template-button" with {
href:"https://www.afflelou.com/",
external:true,
color: options.button.color,
label:"En savoir plus",
button_class: "mx-auto w-full md:w-auto justify-center" ~ (options.secondaryButton is defined and options.secondaryButton ? ' before:border-0'),
button_attribute: options.button.useDynamicTheming ? (":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}) : ''
} %}
</div>
</div>
</div>
{% if products is defined and products %}
<div x-data="{ shown: false }" x-intersect.threshold.50.once="shown = true">
<div class="container"
x-ref="slider{{ options.prefix }}"
x-bind:class="{ 'invisible': !shown, 'visible': shown }"
x-transition:enter="transition-opacity duration-300"
x-transition:leave="transition-opacity duration-300"
>
{% render "@carousel" with {
title: options.carousel.showTitle ? options.carousel.title : "",
slides: products,
showCTA: true,
CTA: options.carousel.CTA,
carousel: options.carousel,
paginationClass: options.carousel.paginationClass,
swiper_pagination_attribute: options.carousel.useDynamicTheming ? (":class=\"isMagicDark ? 'swiper-dark' : 'swiper-light'\"")|replace({'\"': '"'}) : '',
cta_button_attribute: options.carousel.useDynamicTheming ? (":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}) : '',
swiper_navigation_attribute: options.carousel.useDynamicTheming ? (":class=\"isMagicDark ? 'btn-light-subtle' : 'btn-dark-subtle'\"")|replace({'\"': '"'}) : ''
} %}
</div>
</div>
{% endif %}
</div>
{
"options": {
"theme": "audio",
"prefix": "Incognito",
"brandLogo": "incognito",
"videos": {
"desktop": "/videos/incognito/incognito.mp4",
"mobile": "/videos/incognito/incognito.mp4",
"enableGsap": true
},
"carousel": {
"showTitle": true,
"title": "La gamme INCOGNITO",
"color": "audio",
"useDynamicTheming": true,
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"paginationClass": "swiper-audio",
"CTA": {
"label": "Voir toute la collection",
"href": "https://www.afflelou.com/",
"external": true,
"color": "audio"
}
},
"button": {
"color": "audio-subtle",
"useDynamicTheming": true
}
},
"text": {
"title": "Ni vu, ni connu !",
"description": "INCOGNITO, une offre d'aides auditives alliant discrétion, performances et prix le plus juste pour vous permettre de bien entendre sans compromis."
},
"products": [
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Incognito A.I BTE R 1600",
"description": "Appareil auditif - Contour d'oreille",
"price": "9,00",
"image": "/img/incognito/incognito1.png",
"hoverImage": "/img/incognito/hoverIncognito1.jpeg",
"webLabel": "PRIX WEB",
"showFavoriteButton": true,
"showQuickViewButton": false,
"buttonColor": "dark",
"buttonColorHover": "light"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Incognito IC16 G7 SLIM RIC LI",
"description": "Appareil auditif - Mini contour d'oreille",
"price": "109,00",
"image": "/img/incognito/incognito2.png",
"hoverImage": "/img/incognito/hoverIncognito2.jpeg",
"webLabel": "PRIX WEB",
"showFavoriteButton": true,
"showQuickViewButton": false,
"buttonColor": "dark",
"buttonColorHover": "light"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Incognito A.I CIC 312 WL 2400",
"description": "Appareil auditif - Intra auriculaire",
"price": "9,00",
"image": "/img/incognito/incognito3.png",
"hoverImage": "/img/incognito/hoverIncognito3.png",
"webLabel": "PRIX WEB",
"showFavoriteButton": true,
"showQuickViewButton": false,
"buttonColor": "dark",
"buttonColorHover": "light"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Incognito A.I BTE R 1600",
"description": "Appareil auditif - Contour d'oreille",
"price": "9,00",
"image": "/img/incognito/incognito1.png",
"hoverImage": "/img/incognito/hoverIncognito1.jpeg",
"webLabel": "PRIX WEB",
"showFavoriteButton": true,
"showQuickViewButton": false,
"buttonColor": "dark",
"buttonColorHover": "light"
},
{
"template": "productcard",
"brand": "ALAIN AFFLELOU",
"name": "Incognito IC16 G7 SLIM RIC LI",
"description": "Appareil auditif - Mini contour d'oreille",
"price": "109,00",
"image": "/img/incognito/incognito2.png",
"hoverImage": "/img/incognito/hoverIncognito2.jpeg",
"webLabel": "PRIX WEB",
"showFavoriteButton": true,
"showQuickViewButton": false,
"buttonColor": "dark",
"buttonColorHover": "light"
}
]
}
No notes defined.