Gainsight/Custom_Templates/customer_templates/Walmart Supplier Mexico/_faq_section.html.liquid

<div class="faq-section-container">
    <div class="text-container">
        <div class="text-heading text-center">
            FAQ | Academia de Proveedores de Walmart
        </div>
    </div>
    <div class="faq-wrapper">
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Quién puede acceder a la Academia de Proveedores?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    La Academia de Proveedores está disponible para cualquier persona que quiera fortalecer sus habilidades empresariales así como aprender sobre Walmart y sus diferentes canales de venta. Los interesados deben registrarse via Retail Link. <br>
                    Los programas de aprendizaje se ponen a tu disposición según el punto en el que te encuentres en tu trayectoria como empresario/proveedor, desde conocer los primeros pasos para trabajar con Walmart hasta lograr que tu producto esté en los estantes.
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Qué costo tiene acceder al contenido?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    El contenido el 100% gratuito.
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Cómo está compuesta la Academia de Proveedores?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    La Academia de Proveedores cuenta con diferentes programas de aprendizaje de temas específicos. A su vez, estos programas están compuestos por módulos de aprendizaje autogestionado, sesiones en vivo y cajas de herramientas.
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Cada cuando se actualiza el contenido?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    La Academia de Proveedores sumará nuevos programas de aprendizaje constantemente. <br>
                    Además, cada programa de aprendizaje se actualizará con frecuencia ofreciendo nuevos módulos de aprendizaje autogestionado y sesiones en vivo. 
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Quién me puede dar soporte?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Puedes comunicarte con nosotros a traves del boton de Contacto.
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Cómo puedo dar seguimiento a mi progreso?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Cada uno de los programas de aprendizaje cuenta con un reporte de avance que te permitirá identificar tu progreso.
                </div>
            </div>
        </div>
        <div class="faq-card">
            <div class="faq-top">
                <div class="faq-cta">
                    <i class="far fa-plus cta-faq-icon"></i>
                </div>
                <div class="card-heading">
                    ¿Cómo puedo dar retroalimentación al contenido?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Puedes comunicarte con nosotros a traves del boton de Contacto.
                </div>
            </div>
        </div>
    </div>
    {% comment %} <div class="support-text text-center">
        Contact supplierdevelopment@walmart.com for additional support.
    </div> {% endcomment %}
</div>

<style>
.faq-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-card {
    padding: 20px;
    border-radius: 12px;
    height: fit-content;
}

.faq-top {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
}

.faq-answer {
    margin-top: 20px;
    font-size: 1rem;
}

.faq-cta {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffc220;
}

.cta-faq-icon {
    color: #000;
    transition: transform 0.3s ease;
}

.faq-card.active .faq-content {
    max-height: 500px;
}

.faq-top .card-heading {
    width: 100%;
    font-weight: 600;
  font-size: 1.25rem;
}
.support-text {
    font-size: 1.5rem;
    margin-top: 40px;
}


</style>

<script>
    const faqCards = document.querySelectorAll('.faq-card');

    faqCards.forEach(card => {
        card.addEventListener('click', () => {
            const icon = card.querySelector('.cta-faq-icon'); 

            if (card.classList.contains('active')) {
                card.classList.remove('active');
                icon.classList.remove('fa-minus');
                icon.classList.add('fa-plus');
            } else {
                card.classList.add('active');
                icon.classList.remove('fa-plus');
                icon.classList.add('fa-minus');
            }
        });
    });
</script>