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

<div class="faq-section-container">
    <div class="text-container">
        <div class="text-heading text-center">
            Frequently Asked Questions
        </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">
                    Who can access Supplier Academy? 
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Supplier Academy is available to anyone with a Retail Link account. Content is made available to you based on where you are in your journey as a supplier - from learning how to work with Walmart, through getting your product on the shelf.  
                </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">
                    How often is content updated?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Content in Supplier Academy is frequently reviewed and updated as needed.  Look for the icon next to courses that have been updated since you last viewed the course.
                </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">
                    What is a learning path?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Learning paths are a collection of courses on a specific topic. Check out the learning paths page to help guide your learning.
                </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">
                    Can I track my progress?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    Yes. The Supplier Academy platform has robust analytics that tracks your progress in all courses and events.
                </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">
                    Who do I contact for support?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    The Supplier Academy team is happy to help support your learning.  Use <a href="https://supplieracademy.northpass.com/app/contact" style="color: white;">the form here</a> to contact us and we will respond as soon as possible.
                </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">
                    Can I provide feedback on Supplier Academy content?
                </div>
            </div>
            <div class="faq-content">
                <div class="faq-answer">
                    We welcome all feedback! Please <a href="https://supplieracademy.northpass.com/app/contact" style="color: white;">contact us here.</a> 
                </div>
            </div>
        </div>
    </div>
   </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: 1.25rem;
}

.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>