norm/Gainsight
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Backed up Walmart Supplier's templates. Downloaded BuilderTrend's as well as they have just been assigned to me.

Browse Source
This commit is contained in:
Norm Rasmussen
2024-12-20 13:32:45 -05:00
parent c1d4234407
commit 60a55e60ae
150 changed files with 7019 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
Custom_Templates/customer_templates/Walmart Supplier Prod/_faq_section.html.liquid Normal file
View File

@ -0,0 +1,187 @@
<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. Email supplierdevelopment@walmart.com 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">
Yes. Please send all feedback to supplierdevelopment@walmart.com.
</div>
</div>
</div>
</div>
<div class="support-text text-center">
Contact supplierdevelopment@walmart.com for additional support.
</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 {
background: #13244c;
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;
background: #002d97;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.cta-faq-icon {
color: #fff;
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>