<div class="px-0 flex flex-col gap-14 md:gap-28 pt-20 md:pt-48 ">
<div class="container">
<div class="flex flex-col gap-6 w-4/5 mx-auto">
<h3 class="text-3xl font-semibold text-left text-neutral-500 uppercase">Telemedecine</h3>
<h2 class="font-medium text-4xl md:text-6xl">Gagnez un temps précieux.</h2>
</div>
</div>
<div class="flex justify-center w-auto h-[500px] md:w-full md:h-auto ">
<picture x-data="imageAnimation( true )" class=" overflow-hidden">
<source srcset="/img/telemedecine/telemedecine.jpg" media="(min-width: 640px)" />
<img x-ref="image" src="/img/telemedecine/telemedecineMobile.png" alt="Description de l'image" class="object-cover w-full h-full" loading="lazy" />
</picture>
<script>
function imageAnimation(enableGsap = false) {
return {
enableGsap: enableGsap,
init() {
if (this.enableGsap) {
this.initGsap();
}
},
initGsap() {
gsap.registerPlugin(ScrollTrigger);
const image = this.$refs.image;
const container = document.querySelector('.container');
if (image) {
const containerWidth = container.offsetWidth;
gsap.fromTo(
image, {
width: "100vw"
}, {
width: (containerWidth - 32),
marginLeft: "16px",
marginRight: "16px",
ease: "power1.out",
"border-radius": "8px",
scrollTrigger: {
trigger: image,
start: 'top-=450 top',
end: "top-=200 top",
scrub: true,
once: true,
// markers: true, // Pour debug, à retirer en production
}
}
);
} else {
console.error("L'élément image 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="buttontelemedecine" x-ref="slidertelemedecine" 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">Téléconsultez avec un ophtalmologue depuis l’un de nos magasins.</p>
<h4 class="text-neutral-800">ALAIN AFFLELOU vous permet de bénéficier d'une téléconsultation avec un ophtalmologue qui réalisera à distance un examen complet de la vue. C'est un service innovant avec ou sans rendez-vous disponible dans nos magasins ALAIN AFFLELOU équipés près de chez vous.</h4>
<div class="flex flex-col md:flex-row gap-4">
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/telemedecine/telemedecine2.png" alt="Description de l'image" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Prise en charge par des ophtalmologues et orthoptistes diplômés.</span>
</div>
<div class="flex items-center w-full min-h-[88px] border rounded-full gap-4 bg-neutral-50">
<img src="/img/telemedecine/telemedecine3.jpg" alt="Description de l'image" class="ml-4 rounded-full min-w-14 w-14 h-14 object-cover object-center" />
<span class="pr-8">Tarifs conventionnés sans dépassement d'honoraires.</span>
</div>
</div>
<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-dark-subtle btn-icons">
<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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre rendez-vous
</a>
<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 before:border-0 btn btn-dark-subtle ">
En savoir plus
</a>
</div>
</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": "telemedecine",
"prefix": "telemedecine",
"brandLogo": false,
"videos": false,
"carousel": false,
"button": {
"color": "dark-subtle",
"useDynamicTheming": true
},
"brandTitle": "Telemedecine",
"image": {
"src": "/img/telemedecine/telemedecine.jpg",
"srcMobile": "/img/telemedecine/telemedecineMobile.png",
"alt": "Description de l'image",
"enableGsap": true
},
"secondaryButton": {
"color": "dark-subtle",
"useDynamicTheming": true
}
},
"text": {
"title": "Gagnez un temps précieux.",
"description": "Téléconsultez avec un ophtalmologue depuis l’un de nos magasins.",
"subDescription": "ALAIN AFFLELOU vous permet de bénéficier d'une téléconsultation avec un ophtalmologue qui réalisera à distance un examen complet de la vue. C'est un service innovant avec ou sans rendez-vous disponible dans nos magasins ALAIN AFFLELOU équipés près de chez vous."
},
"products": [],
"infoBubbles": [
{
"src": "/img/telemedecine/telemedecine2.png",
"alt": "Description de l'image",
"text": "Prise en charge par des ophtalmologues et orthoptistes diplômés."
},
{
"src": "/img/telemedecine/telemedecine3.jpg",
"alt": "Description de l'image",
"text": "Tarifs conventionnés sans dépassement d'honoraires."
}
]
}
No notes defined.