Expert advice

<div x-data="expertDevice()" class="bg-ui-light">

    <div class="container-desktop flex flex-col md:gap-16 gap-10 md:py-20 py-10">

        <span class="md:text-4.5xl text-3xl font-bold md:px-40 px-5">Nos experts vous<br> partagent leurs conseils</span>

        <div class="flex md:flex-row flex-col-reverse items-center md:gap-20 gap-10 md:px-20">

            <div class="md:w-3/5">

                <div class="relative" :class="{  'hidden': activeTab !== 0 || hoverTab !== null, 'block-important': hoverTab === 0}">

                    <img <?= renderImageUrl('expert-advice.png', 'styleguide') ?>>

                    <div class="absolute bottom-0 font-bold text-white flex flex-col md:px-5 px-2.5">

                        <span class="md:text-4xl text-2xl">Conseils</span>

                        <span class="md:text-3xl text-lg bg-primary p-2">Comment bien réaliser votre vidange1</span>

                    </div>

                </div>

                <div class="relative" :class="{  'hidden': activeTab !== 1 || hoverTab !== null, 'block-important': hoverTab === 1}">

                    <img <?= renderImageUrl('expert-advice.png', 'styleguide') ?>>

                    <div class="absolute bottom-0 font-bold text-white flex flex-col md:px-5 px-2.5">

                        <span class="md:text-4xl text-2xl">Conseils</span>

                        <span class="md:text-3xl text-lg bg-primary p-2">Comment bien réaliser votre vidange2</span>

                    </div>

                </div>

                <div class="relative" :class="{  'hidden': activeTab !== 2 || hoverTab !== null, 'block-important': hoverTab === 2}">

                    <img <?= renderImageUrl('expert-advice.png', 'styleguide') ?>>

                    <div class="absolute bottom-0 font-bold text-white flex flex-col md:px-5 px-2.5">

                        <span class="md:text-4xl text-2xl">Conseils</span>

                        <span class="md:text-3xl text-lg bg-primary p-2">Comment bien réaliser votre vidange3</span>

                    </div>

                </div>

            </div>

            <div class="md:w-2/5 flex md:flex-col flex-row gap-5 overflow-scroll hide-scrollbar md:px-0 px-5">

                <div @click="changeTab(0)" @mouseenter="changeHoverTab(0)" @mouseleave="changeHoverTab(null)"

                     class="flex md:flex-row flex-col-reverse max-w-[220px] justify-between md:max-w-none shrink-0 gap-5 cursor-pointer"

                     :class="{ 'text-text': activeTab === 0, 'text-icon opacity-50': activeTab !== 0, 'text-text-light opacity-100': hoverTab === 0 }">

                    <div class="md:border-l-3 border-b-3 border-secondary"

                         :class="{ 'md:visible opacity-100': activeTab === 0, 'md:invisible opacity-30': activeTab !== 0, 'md:visible-important': hoverTab === 0 }"></div>

                    <div class="flex flex-col gap-5 text-base">

                        <span class="font-bold">Experts depuis 1983</span>

                        <span class="font-medium">Nos experts sont qualifiés et garants de notre savoir-faire depuis 1983. </span>

                    </div>

                </div>

                <div @click="changeTab(1)" @mouseenter="changeHoverTab(1)" @mouseleave="changeHoverTab(null)"

                     class="flex md:flex-row flex-col-reverse max-w-[220px] justify-between md:max-w-none shrink-0 gap-5 cursor-pointer"

                     :class="{ 'text-text': activeTab === 1, 'text-icon opacity-50': activeTab !== 1, 'text-text-light opacity-100': hoverTab === 1 }">

                    <div class="md:border-l-3 border-b-3 border-secondary md:invisible opacity-30"

                         :class="{ 'md:visible opacity-100': activeTab === 1, 'md:invisible opacity-30': activeTab !== 1, 'md:visible-important': hoverTab === 1 }"></div>

                    <div class="flex flex-col gap-5 text-base">

                        <span class="font-bold">Nos vidéos</span>

                        <span class="font-medium">Accédez à nos contenus vidéos ! Vous pourrez pour découvrir un nouveau modèle ou encore obtenir des trucs et astuces pour mieux entretenir votre véhicule .</span>

                    </div>

                </div>

                <div @click="changeTab(2)" @mouseenter="changeHoverTab(2)" @mouseleave="changeHoverTab(null)"

                     class="flex md:flex-row flex-col-reverse max-w-[220px] justify-between md:max-w-none shrink-0 gap-5 cursor-pointer"

                     :class="{ 'text-text': activeTab === 2, 'text-icon opacity-50': activeTab !== 2, 'text-text-light opacity-100': hoverTab === 2 }">

                    <div class="md:border-l-3 border-b-3 border-secondary md:invisible opacity-30"

                         :class="{ 'md:visible opacity-100': activeTab === 2, 'md:invisible opacity-30': activeTab !== 2, 'md:visible-important': hoverTab === 2 }"></div>

                    <div class="flex flex-col gap-5 text-base">

                        <span class="font-bold">Nos articles</span>

                        <span class="font-medium">Lisez nos articles pour répondre à toutes les questions que vous vous posez sur votre véhicule.</span>

                    </div>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    function expertDevice() {

        return {

            activeTab: 0,

            hoverTab: 0,

            changeTab(tab) {

                this.activeTab = tab;

            },

            changeHoverTab(tab) {

                this.hoverTab = tab;

            }

        }

    }

</script>