simplex-chat/website/src/_includes/simplex_explained.html

<style>
    .tab-button {
        color: #a8b0b4;
        background: linear-gradient(#fff, #fff) padding-box,
            linear-gradient(to bottom, #a8b0b4, transparent) border-box;
        border: 1px solid transparent;
        border-radius: 6px 6px 0px 0px;
        transition: color 0.3s ease;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .dark .tab-button{
        color: #fff;
        background: linear-gradient(#0C0B13, #0C0B13) padding-box,
            linear-gradient(to bottom, #01F1FF, transparent) border-box;
    }
    .tab-button.active {
        color: #0053d0;
        text-decoration: none;
    }
    .dark .tab-button.active {
        color: #70F0F9;
    }
</style>

<section id="simplex-explained" class="bg-primary-bg-light dark:bg-primary-bg-dark lg:h-[890px] py-[90px] px-5">
    <div class="container">
        <h2 class="text-[35px] leading-[45px] md:leading-[55px] lg:text-[38px] text-center font-bold text-grey-black dark:text-white mb-9">{{ "simplex-explained" | i18n({}, lang ) | safe }}</h2>

        <!-- Tab links -->
        <div class="tabs hidden md:flex gap-2 mb-24">
            <div data-btn-index="0" class="flex-1 tab-button tab-1 p-2 text-[20px] text-center font-bold cursor-pointer active">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
            <div data-btn-index="1" class="flex-1 tab-button tab-2 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
            <div data-btn-index="2" class="flex-1 tab-button tab-3 p-2 text-[20px] text-center font-bold cursor-pointer">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
        </div>

        <!-- Tab content -->
        <div class="swiper simplex-explained-swiper">
            <div class="swiper-wrapper h-[inherit] mb-20 md:mb-0">

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-1-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-1.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-1-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-1-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-2-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-2.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-2-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-2-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

                <div class="swiper-slide h-[inherit]">
                    <div class="tab-button p-2 text-[20px] text-center font-bold active md:hidden">{{ "simplex-explained-tab-3-text" | i18n({}, lang ) | safe }}</div>
                    <div class="flex flex-col justify-center items-center">
                        <img class="h-[340px] mb-[74px]" src="/img/new/explained-3.svg" alt="" />
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-3-p-1" | i18n({}, lang ) | safe }}
                        </p>
                        <p class="text-black dark:text-white text-[16px] font-normal text-center">
                            {{ "simplex-explained-tab-3-p-2" | i18n({}, lang ) | safe }}
                        </p>
                    </div>
                </div>

            </div>
            <div class="swiper-pagination simplex-explained-swiper-pagination mt-100 md:hidden"></div>
        </div>
    </div>
</section>

<script>
window.addEventListener("load", function () {
    const simplexExplainedSwiper__bullets = document.querySelectorAll(".simplex-explained-swiper .swiper-pagination > span");
    const simplexExplainedSwiper__tabs = document.querySelectorAll("#simplex-explained .tabs .tab-button");

    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.type === "attributes" && mutation.attributeName === "class" && mutation.target.classList.contains("swiper-pagination")) {
                simplexExplainedSwiper__bullets.forEach((el,index) => {
                    if (el.classList.contains("swiper-pagination-bullet-active")) {
                        simplexExplainedSwiper__tabs[index].classList.add("active");
                    } else {
                        simplexExplainedSwiper__tabs[index].classList.remove("active");
                    }
                });
            }
        });
    }); 

    const targetNode = document.querySelector(".simplex-explained-swiper .swiper-pagination");
    observer.observe(targetNode, { attributes: true });

    window.addEventListener('click',e=>{
        if(e.target.closest("#simplex-explained .tabs .tab-button")){
            const index = e.target.closest("#simplex-explained .tabs .tab-button").dataset.btnIndex;
            simplexExplainedSwiper__bullets[index].click();
        }
    })
});
</script>