Updated Source & Supplier's Templates and moved them to sandbox.

Custom_Templates/customer_templates/Walmart Supplier Prod/_account_tabs.html.liquid

@@ -0,0 +1,23 @@
+{% capture settings_path %}{% route account %}{% endcapture %}
+{% capture transcript_path %}{% route transcript %}{% endcapture %}
+
+{% if current_person.signed_in? %}
+{% unless current_school.sso_active? %}
+  <nav class="np-tabs np-account-tabs">
+    <div class="np-tabs-content">
+      <div class="np-tab{% if page.path == settings_path %} np-tab-active{% endif %}">
+        <a class="np-tab-link" href="{{ settings_path}}">
+          {% t .profile_settings %}
+        </a>
+        <div class="np-tab-indicator np-button-background-color"></div>
+      </div>
+      <div class="np-tab{% if page.path == transcript_path %} np-tab-active{% endif %}">
+        <a class="np-tab-link" href="{{ transcript_path }}">
+          {% t .transcript %}
+        </a>
+        <div class="np-tab-indicator np-button-background-color"></div>
+      </div>
+    </div>
+  </nav>
+{% endunless %}
+{% endif %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_analysis-and-reporting-carousel.html.liquid

@@ -0,0 +1,50 @@
+<div class="carousel-wrapper">
+    <div class="carousel-heading">Analysis and Reporting</div>
+    <div class="analysis-and-reporting-carousel">
+        {% for course in courses.in_catalog %}
+            {% for category in course.categories %}
+                {% if category.name == 'Analysis and Reporting' %}
+                    <div class="carousel-cards-container">
+                        {% include 'cards_course' %}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.analysis-and-reporting-carousel {
+  margin-top: 25px;
+}
+</style>
+
+<script>
+$(document).ready(function(){
+
+    $(".analysis-and-reporting-carousel").slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_course.html.liquid

@@ -1,80 +1,36 @@
-<div class="np-card">
+<div class="card-course">
   <div class="np-card-container">
-    <div class="np-image-wrapper">
     {% if course.ribbon %}
       <div class="np-card-ribbon">
         {{ course.ribbon }}
       </div>
     {% endif %}
-      <div class="course-img-content">
-        <h3 class="np-card-content-title">
-          {{ course.name }}
-        </h3>
-        {% comment %} {% if course.properties.course_length %}
-          <div class="course-length">{{course.properties.course_length}}</div>
-        {% endif %} {% endcomment %}
-      </div>
     <img
       class="np-card-image"
       alt="{{ course.name }}"
       src="{{ course.image_url }}"
     >
-    </div>
     <div class="np-card-content np-card-content-vertical np-card-padding">
-      {% if course.short_description != "" %}
+      <h3 class="np-card-content-title">
+        {{ course.name }}
+      </h3>
       <div class="np-card-content-subtitle">
-          {{ course.short_description }}
+        {{ course.instructor_names }}
-          {% if course.properties.course_length %}
-            <div class="course-length">{{course.properties.course_length}}</div>
-          {% endif %}
       </div>
-
-      {% else %}
-        <div></div>
-      {% endif %}
       <div class="np-card-content-footer">
         <div class="np-card-content-progress np-button-color">
-		  {% if course.properties.course_cost > 0 %}
-			{% if course.enrolled? == false %}
-			  Paid Course
-			{% elsif course.progress > 0 and course.progress < 100 %}
-			  Purchased
-			{% elsif course.progress == 100 %}
-			  Purchased
-			{% else %}
-			  Purchased
-			{% endif %}
-		  {% else %}
           {% t shared.progress, count: course.progress %}
-		  {% endif %}
         </div>
-
         {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
         {% if course.has_to_restart? %}
           {% include "course_version_outdated_popup", path: course_path %}
         {% endif %}
-
+        <div class="button-container">
-        <a class="np-button np-button-wide" href="{{ course_path }}">
+          <a class="button-course" {% if course.properties.skip_course_cover_page == true and course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
-		  {% if course.properties.course_cost > 0 %}
+            {% t shared.view %}
-			{% if course.enrolled? == false %}
-			  Preview
-			{% elsif course.progress > 0 and course.progress < 100 %}
-			  Continue
-			{% elsif course.progress == 100 %}
-			  Retake
-			{% else %}
-			  Start
-			{% endif %}
-		  {% elsif course.progress > 0 and course.progress < 100 %}
-			Continue
-		  {% elsif course.progress == 100 %}
-			Retake
-		  {% else %}
-			View
-		  {% endif %}
           </a>
         </div>
       </div>
     </div>
+  </div>
 </div>
-

Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_learning_path.html.liquid

@@ -1,13 +1,11 @@
-<div class="np-card np-no-horizontal-padding">
+<div class="np-card np-no-horizontal-padding lp-card" {% for category in learning_path.categories %}{% if category.name == 'Grow Program' %}prioritise = 'true'{% endif %}{% endfor %}>
   <div class="np-card-container">
     <div class="np-learning-path">
-      <div class="lp-image-wrapper">
       <img
         alt="{{ learning_path.name }}"
         class="np-card-image np-learning-path-image"
         src="{{ learning_path.image_url }}"
       />
-      </div>
       <div class="np-card-text-wrapper">
         <div class="np-hidden-desktop np-card-header">
           <i class="np-card-header-icon far fa-road"></i>
@@ -26,11 +24,9 @@
             {{ learning_path.name }}
           </h3>
 
-          {% if learning_path.instructor_names %}
           <div class="np-card-content-subtitle">
             {{ learning_path.instructor_names }}
           </div>
-          {% endif %}
 
           <div class="np-hidden-mobile np-card-content-description">
             {{ learning_path.description }}
@@ -53,9 +49,11 @@
             np-button-color">
               {% t shared.progress, count: learning_path.progress %}
             </div>
-            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
+            <div class="button-container">
+              <a class="button-course" href="{% route learning_path, id: learning_path.id %}">
                 {% t shared.view %}
               </a>
+            </div>
             <span class="np-hidden-mobile np-learning-path-items">
               <i class="np-button-color np-learning-path-items-icon far fa-graduation-cap"></i>
               <span class="np-learning-path-items-count">
@@ -67,8 +65,4 @@
       </div>
     </div>
   </div>
-  <div class="np-card-stack">
-    <div class="np-card-stack-level-1"></div>
-    <div class="np-card-stack-level-2"></div>
-  </div>
 </div>

Custom_Templates/customer_templates/Walmart Supplier Prod/_cards_training_event.html.liquid

@@ -1,4 +1,4 @@
-<div class="np-card np-card-training-event">
+<div class="np-card">
   <div class="np-card-container">
     <div class="np-card-content-training-event">
       <h3 class="np-card-content-title">

Custom_Templates/customer_templates/Walmart Supplier Prod/_carousel_courses.html.liquid

@@ -0,0 +1,96 @@
+{% assign topic_classname = topic | split: " " %}
+
+<div class="courses-carousel np-carousel" data-topic="{{ topic_classname | join: '-' | downcase }}">
+    {% if items.any? %}
+        {% assign sorted_items =items | sort: "name" %}
+        {% for course in sorted_items %}
+
+            {% comment %} USED FOR PROGRESS FILTER  {% endcomment %}
+            {% assign course_status = "" %}
+
+            {% if course.started? == false  %}
+                {% assign course_status = "not-started" %}
+            {% elsif course.completed?  %}
+                {% assign course_status = "completed" %}
+            {% elsif course.started?  %}
+                {% assign course_status = "in-progress" %}
+            {% endif %}
+
+            {% if topic == "Not Categorized" %}
+                <div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
+            {% else %}
+                {% for category in course.categories %}
+                    {% if category.name == topic  %}
+                        <div class="np-carousel-card {{course_status}}" language="{{course.properties.language}}"> {% include "cards_course" with course %}</div>
+                    {% endif %}
+                {% endfor %}
+            {% endif %}
+        {% endfor %}
+    {% endif %}
+</div>
+
+<script>
+
+$(document).ready(function(){
+
+    $(".courses-carousel").not('.slick-initialized').slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+	
+</script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function(){
+    let npHideLang = getCookie("npLang");
+    if (npHideLang == "es")
+    {
+      npHideLang = "English";
+    }
+    else if (npHideLang == "en")
+    {
+      npHideLang = "Spanish";
+    }
+    var element = document.querySelectorAll(`[language=${npHideLang}]`);
+    element.forEach(card => {card.classList.add("np-hidden")});
+  })
+  function getCookie(name) {
+    var dc = document.cookie;
+    var prefix = name + "=";
+    var begin = dc.indexOf("; " + prefix);
+    if (begin == -1) {
+      begin = dc.indexOf(prefix);
+      if (begin != 0) return null;
+    }
+    else
+    {
+      begin += 2;
+      var end = document.cookie.indexOf(";", begin);
+      if (end == -1) {
+      end = dc.length;
+      }
+    }
+    return decodeURI(dc.substring(begin + prefix.length, end));
+  } 
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_catalog_categories.html.liquid

@@ -0,0 +1,35 @@
+<div class="catalog-categories-container">
+    <div class="text-container">
+        <div class="text-heading text-center">
+            Explore the Course Catalog
+        </div>
+    </div>
+
+    <div class="category-links-wrapper">
+        {% assign uniq_cats = '' %}
+        {% for course in courses.in_catalog %}
+            {% for category in course.categories %}
+                {% unless uniq_cats contains category.name %}
+                    <a class="category-card" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
+                    {{category.name}}
+                    </a>
+                    {% assign uniq_cats = uniq_cats | append: category.name%}
+                {% endunless %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.category-links-wrapper {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.category-card {
+  text-decoration: none;
+  color: #fff;
+  text-align: center;
+  padding: 20px;
+  font-size: 20px;
+}
+</style>

Custom_Templates/customer_templates/Walmart Supplier Prod/_course_categories.html.liquid

@@ -1,7 +1,7 @@
 <h3 class="np-card-heading">
   {% t .header %}
 </h3>
-<div class="np-flex">
+<div class="course-categories-wrapper">
   {% for category in course.categories %}
     <div class="np-content-categories-content-item">
       {{ category.name }}

Custom_Templates/customer_templates/Walmart Supplier Prod/_course_desktop_view.html.liquid

@@ -4,15 +4,12 @@
   </div>
   <div class="np-divider"></div>
   <div class="row np-course-content np-card-padding-dynamic">
-    <div class="col-xs-12 col-sm-6 col-md-5">
+    <div class="col-xs-12 col-sm-6">
-      <div class="course-image-wrapper">
-        <div class="course-title">{{course.name}}</div>
       <img
         src="{{ course.image_url }}"
         class="np-top-image np-top-image-spacing"
         alt="{{ course.name }}"
       />
-      </div>
       {% include "course_description" %}
 
       {% if course.categories.any? %}
@@ -33,7 +30,7 @@
         </div>
       {% endif %}
     </div>
-    <div class="np-grid-spacing col-xs-12 col-sm-6 col-md-7">
+    <div class="np-grid-spacing col-xs-12 col-sm-6">
       <div class="np-top-cta">
         {% include "course_progress_and_cta" %}
       </div>

Custom_Templates/customer_templates/Walmart Supplier Prod/_course_header.html.liquid

@@ -4,31 +4,13 @@
   </i>
 </div>
 <div class="np-top-title">
-  <a href="javascript:goBack();" class="np-back-button" aria-label="{% t shared.go_back %}">
+  <a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
     <i class="far fa-arrow-left np-hidden-mobile np-icon-back"></i>
   </a>
-  {% comment %} {{ course.name }} {% endcomment %}
+  {{ course.name }}
 </div>
-<div class="course-image-wrapper np-hidden-desktop">
+<img
-  <div class="course-title ">{{course.name}}</div>
-  <img
   src="{{ course.image_url }}"
   class="np-top-image np-hidden-desktop"
   alt="{{ course.name }}"
-  />
+/>
-</div>
-
-<script>
-  function goBack() {
-    const fallbackUrl = '/app';
-    var prevPage = window.location.href;
-
-    window.history.go(-1);
-
-    setTimeout(function(){ 
-      if (window.location.href == prevPage) {
-        window.location.href = fallbackUrl; 
-      }
-    }, 800);
-  }
-</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_course_progress_and_cta.html.liquid

@@ -9,23 +9,6 @@
     </div>
   </div>
 
-  {% if course.enrolled? == false and course.properties.course_cost != 0 %}
-	<div class="np-top-cta-progress-text np-button-color" style="font-size: 25px;">
-	  $ {{ course.properties.course_cost }}
-	</div>
-</div>
-  <a
-    class="np-top-button np-button-font-color np-button np-button-big"
-	<input id="snappayhppform_response"  name="snappayhppform_response" />
-	  <button type="button" value="Submit" onclick="myclick()" class="button" style="color: white; border:none; background:transparent;">
-		<strong>Purchase</strong>
-			<div id='mylink'></div>
-		</button>
-	  <input src="https://snappayglobal.com/Interop/HostedPaymentPage" id="snappayhppform_response" type="hidden" name="snappayhppform_response" />
-  </a>
-
-{% else %}
-
   <div class="np-top-cta-progress-text
     {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
   ">
@@ -59,73 +42,5 @@
       {% t shared.continue %}
     {% endif %}
   </a>
-  {% endif %}
 {% endif %}
 
-{% comment %}
-<div  id="dvsnappay_hppform">
-</div>
-	  <div id="dvsnappay_hppform">
-            <!-- HTML is dynamically placed here -->
-        </div>
-		{% endcomment %}
-  <script type="text/javascript">
-        function myclick() {
-			sessionStorage.clear()
-            var mylink = document.getElementById('mylink');
-            mylink.onclick = function () {
-                var t = document.createElement("script");
-                t.setAttribute("id", "snappay_hppform");
-                t.setAttribute("src", "https://snappayglobal.com/Areas/Interop/Scripts/HPPForm.js");
-                t.setAttribute("data-target", "#snappayhppform_response");
-                t.setAttribute("data-callback", "submit_external_ecommerce");
-                t.setAttribute("data-accountid", "1002491072");
-                t.setAttribute("data-merchantid", "350160170881");
-                t.setAttribute("data-customerid", "100");
-                t.setAttribute("data-paymentmode", "CC");
-				t.setAttribute("data-transactionamount", '{{ course.properties.course_cost }}');
-				t.setAttribute("data-currencycode", "USD");
-				t.setAttribute("data-firstname", "{{ current_person.first_name }}");
-				t.setAttribute("data-lastname", "{{ current_person.last_name }}");
-				t.setAttribute("data-email", "{{ current_person.email }}");
-				t.setAttribute("data-redirectionurl", "https://walmartluminate.northpass.com/app/courses/{{ course.id }}"); //url they are currently on
-				  t.setAttribute("data-snappayurl", "https://snappayglobal.com/Interop/HostedPaymentPage");
-				  document.getElementsByTagName("head")[0].appendChild(t);
-				  return false;
-            }
-            document.getElementById('mylink').click();
-        }
-
-		var response = document.getElementById('snappayhppform_response');
-		function submit_external_ecommerce() {
-                var result = $("#snappayhppform_response").val();
-                sessionStorage.setItem("snappayhpp_response", result);
-				sessionStorage.setItem("caller", "js");
-				var obj = JSON.parse(result);
-				var response = obj['response']
-				var inside = JSON.parse(obj['response'])
-				var stringside = JSON.stringify(inside)
-				sessionStorage.setItem("stringside", stringside)
-            }
-
-
-		var error_code = JSON.parse(sessionStorage.getItem('stringside')).pgreturncode
-		var error_desc = JSON.parse(sessionStorage.getItem('stringside')).pgreturndescription
-		if(error_code != 000 ) {
-		  var alert = document.getElementById("fiveserv-alert")
-		  document.getElementById("fiveserv-alert").style.display = 'grid';
-		  var error_text = document.createTextNode(error_desc + ". Please try again.");
-		  alert.appendChild(error_text)
-		  sessionStorage.clear()
-		} else {
-		  window.location.replace('https://walmartluminate.northpass.com/c/{{ course.enrollment_code }}')
-		  sessionStorage.clear()
-		}
-	// Set course prop as whole number, if 0, don't do anything
-	// If user is not enrolled in course, run functions - check error message
-	// With redirect they will land back on page, with error message from sessionstorage
-	// If no error, auto-redirect/click to enrollment link. window.replace(/c/aklwjdalkjd)
-  </script>
-
-
-

Custom_Templates/customer_templates/Walmart Supplier Prod/_courses_catalog.html.liquid

@@ -1,27 +1,9 @@
 {% if courses.in_catalog.any? %}
   <div class="np-catalog-courses row row-with-thumbnails">
     {% for course in courses.in_catalog %}
-      {% unless course.properties.is_article_course %}      
+      <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
-        {% if course.id == "6cc26c57-34db-4b8e-a38b-ad321ce18add" or course.id == "ac4fbf2e-ed8f-404d-b995-f0ef73481466" %}
-          {% if current_person.properties.hide_api_certification_exam_course == false %}
-            <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
         {% include "cards_course" with course %}
       </div>
-          {% endif %}
-        {% else %}
-          {% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
-            {% unless course.progress == 100 %}
-              <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
-                {% include "cards_course" with course %}
-              </div>
-            {% endunless %}
-          {% else %}
-            <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
-              {% include "cards_course" with course %}
-            </div>
-          {% endif %}
-        {% endif %}       
-      {% endunless %}
     {% endfor %}
   </div>
 {% else %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_courses_index.html.liquid

@@ -1,28 +1,9 @@
 {% if courses.enrolled.any? %}
   <div class="row row-with-thumbnails">
     {% for course in courses.enrolled %}
-      {% unless course.properties.is_article_course %}
-        {% if course.id == "6cc26c57-34db-4b8e-a38b-ad321ce18add" or course.id == "ac4fbf2e-ed8f-404d-b995-f0ef73481466" %}
-          {% if current_person.properties.hide_api_certification_exam_course == false %}
       <div class="{{ class }}">
         {% include "cards_course" with course %}
       </div>
-          {% endif %}
-        {% else %}
-           {% if course.id == "b3225a47-448d-4988-962a-18d37d6616d0" or course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" %}
-            {% unless course.progress == 100 %}
-              <div class="{{ class }}">
-                {% include "cards_course" with course %}
-              </div>
-            {% endunless %}
-          {% else %}
-            <div class="{{ class }}">
-              {% include "cards_course" with course %}
-            </div>
-          {% endif %}
-
-        {% endif %}
-      {% endunless %}
     {% endfor %}
   </div>
 {% else %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_feature_cards_lp.html.liquid

@@ -0,0 +1,9 @@
+<a  href="{% route learning_path, id: learning_path.id %}" class="feature-lp-card">
+  <div class="lp-card-image-container">
+      <img
+        alt="{{ learning_path.name }}"
+        class="lp-feature-image"
+        src="{{ learning_path.image_url }}"
+      />
+  </div>
+</a>

Custom_Templates/customer_templates/Walmart Supplier Prod/_feature_learning_paths.html.liquid

@@ -0,0 +1,63 @@
+<div class="feature-learning-paths-container">
+    <div class="text-container">
+        <div class="text-heading">
+            Grow With Walmart Learning Pathways
+        </div>
+    </div>
+
+        <div class="feature-lp-carousel">
+            {% for learning_path in learning_paths.available %}
+                {% for category in learning_path.categories %}
+                    {% if category.name == 'Featured' %}
+                        <div class="feature-lp-carousel-card-container">
+                            {% include 'feature_cards_lp' %}
+                        </div>
+                    {% endif %}
+                {% endfor %}
+            {% endfor %}
+        </div>
+    </div>
+
+
+<style>
+    .feature-cards-container {
+        display: flex;
+    }
+    .feature-lp-carousel-card-container {
+        margin: 10px;
+    }
+    .feature-learning-paths-container {
+        position: relative;
+    }
+</style>
+
+
+<script>
+$(document).ready(function(){
+
+    $(".feature-lp-carousel").slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_filter_by_progress.html.liquid

@@ -0,0 +1,117 @@
+{% assign topic_classname = topic | split: " " %}
+
+<div class="np-progress-filter-wrapper">
+    {% if label %}
+      <div class="np-progress-filter-label">
+          <span class="lang-en">{{ label }}</span>
+          <span class="lang-es">Filtrar por progreso:</span>
+    </div>
+    {% endif %}
+    <div class="progress-filter filter-select-wrapper select-wrapper np-button lang-en" data-topic="{{ topic_classname | join: '-' | downcase }}"  style="border-radius: 8px;">
+       
+            <select >
+                <option selected disabled hidden>{{ default_option}}</option>
+                <option value="a">All Courses</option>
+                <option value="n">Not Started</option>
+                <option value="i">In Progress</option>
+                <option value="c">Completed</option>
+            </select>
+       
+    </div>
+</div>
+
+<style>
+  .np-progress-filter-label {
+      color: rgba(255, 255, 255, 0.5);
+      padding-right: 7px;
+      text-transform: none;
+      font-weight:500;
+      font-size:0.812rem;
+  }
+  .np-progress-filter-wrapper {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+  }
+  .filter-select-wrapper {
+      position: relative;
+      padding:0;
+      border: 2px solid  rgba(255, 255, 255, 0.25);
+      color: #fff;
+      height:auto;
+      text-transform: none;
+      background: transparent;
+      border-radius:0;
+  }
+  .filter-select-wrapper:hover {
+      background:transparent;
+      color:#fff;
+  }
+  .select-items {
+      position: absolute;
+      background-color: #062531;
+      top: 105%;
+      left: -2px;
+      z-index: 99;
+      width: 102%;
+      border: 2px solid rgba(255, 255, 255, 0.25);
+      border-top:none;
+  }
+  .select-items div {
+      color: rgba(255, 255, 255, 0.5);
+      border-top:none;
+      cursor: pointer;
+      width:100%;
+      padding: 12px 16px;
+    }
+
+  .select-items div:hover {  color: rgba(255, 255, 255, 1); }
+  .select-selected {
+      width: 100%;
+      height: 100%;
+      padding: 9px 66px 9px 20px;
+      position: relative;
+      color:#fff;
+  }
+  .select-selected::after {
+      content:"\f078";
+      font-family: "Font Awesome 5 Pro";
+      position: absolute;
+      width:20px;
+      height:100%;
+      color:rgba(255, 255, 255, 0.5);
+      right:10px;
+      top:0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size:1rem;
+  }
+  .select-selected::before {
+      content:"";
+      position: absolute;
+      width:20px;
+      height:100%;
+      border-left:2px solid rgba(255, 255, 255, 0.25);
+      right:20px;
+      top:0;
+  }
+  .select-selected.select-arrow-active::after { transform: rotate(180deg); }
+  .same-as-selected,
+  .filter-select-wrapper select,
+  .select-hide {
+      display: none;
+  }
+  .mo-filter-wrapper {
+      display: flex;
+      justify-content: center;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+  }
+  .select-items div:hover, 
+  .same-as-selected {
+    background-color: #062531;
+  }
+</style>
+

Custom_Templates/customer_templates/Walmart Supplier Prod/_footer.html.liquid

@@ -71,6 +71,7 @@
     margin:auto;
     border-top: 1px solid #DADCE0;
     padding: 24px 16px 48px;
+    background: #041e42;
   }
   
   .np-footer-top {

Custom_Templates/customer_templates/Walmart Supplier Prod/_getting-started-carousel.html.liquid

@@ -0,0 +1,50 @@
+<div class="carousel-wrapper">
+    <div class="carousel-heading">Getting Started</div>
+    <div class="getting-started-carousel">
+        {% for course in courses.in_catalog %}
+            {% for category in course.categories %}
+                {% if category.name == 'Getting Started' %}
+                    <div class="carousel-cards-container">
+                        {% include 'cards_course' %}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.getting-started-carousel {
+  margin-top: 25px;
+}
+</style>
+
+<script>
+$(document).ready(function(){
+
+    $(".getting-started-carousel").slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left arrow-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right arrow-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_head.html.liquid

@@ -2,8 +2,10 @@
 {% styles colors %}
 {% styles custom %}
 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">
-<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" type="text/javascript"></script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_header.html.liquid

@@ -1,60 +1,14 @@
 <header class="np-header np-header-color">
   <div class="np-header-content">
-    <div class="np-hidden-desktop np-header-mobile-menu-nav">
-      {% if current_person.signed_in? %}
-        <button
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button mobile-menu-open np-hidden np-header-font-color"
-          data-toggle-target=".np-header-mobile-avatar-menu,
-          .np-header-mobile-menu-content, .np-main, .np-footer"
-        >
-          <i class="fal fa-times"></i>
-          <div class="user-profile">
-            {% if current_person.first_name %}
-              {{current_person.first_name | slice: 0}}
-            {% endif %}
-          </div>
-        </button>
-        <button
-          data-test="open-mobile-menu"
-          data-toggle-class="np-hidden"
-          class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
-          data-toggle-target=".mobile-menu-open, .np-header-mobile-menu-content, .np-main, .np-footer"
-        >
-          <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
-          </svg>
-          <div class="user-profile">
-            {% if current_person.first_name %}
-              {{current_person.first_name | slice: 0}}
-            {% endif %}
-          </div>
-        </button>
-      {% endif %}
-    </div>
     {% if current_school.logo_url %}
       <h1 class="np-header-logo">
         <a href="{% route home %}">
           <img
-            alt="Walmart Supplier Academy"
+            alt="{{ current_school.name }}"
             class="np-header-logo-image"
-			src={{ current_school.logo_url }}
+            src="{{ current_school.logo_url }}"
           />
         </a>
-        <div class="header-dropdown-container np-hidden-mobile">
-          <div class="dropdown-arrow"></div>
-          <div class="header-dropdown">
-            <a href="https://www.walmartsustainabilityhub.com/">Sustainability Hub</a>
-          </div>
-        </div>
-        <div class="header-dropdown-container np-hidden-desktop">
-          <div class="dropdown-arrow"></div>
-          <div class="header-dropdown">
-            <a href="https://www.walmartsustainabilityhub.com/">Sustainability Hub</a>
-          </div>
-        </div>
-		<div class="header-text np-hidden-desktop">{{ current_school.name }}</div>
-		<div class="header-text np-hidden-mobile">{{ current_school.name }}</div>
       </h1>
     {% else %}
       <a href="{% route home %}" class="np-school-name np-header-font-color">
@@ -62,7 +16,7 @@
       </a>
     {% endif %}
 
-    <div class="np-hidden-mobile np-header-desktop-nav">
+    <div class="np-hidden-mobile np-header-desktop-nav hidden-mobile">
       <ul class="np-header-desktop-nav-list">
         {% for website_navigation in navigations.header_navigations_external %}
           <li class= "np-header-desktop-nav-item">
@@ -75,6 +29,50 @@
             </a>
           </li>
         {% endfor %}
+        <li class= "np-header-desktop-nav-item">
+          <a
+            href="/app"
+            class="np-header-desktop-nav-link np-header-font-color"
+          >
+           Home
+          </a>
+        </li>
+        <li class= "np-header-desktop-nav-item">
+          <div
+            class="np-header-desktop-nav-link np-header-font-color header-dropdown-link"
+          >
+           Grow With Walmart
+           <div class="header-dropdown-container">
+            <a href="/app/learning_paths/bcd127cf-0eb7-455f-9631-bc95e5b33e6d" class="header-dropdown-option">Crece Con Walmart</a>
+            <a href="/app/learning_paths/eab19d79-6aa4-4ff5-857e-ee925c0bb8f1" class="header-dropdown-option">Grow With Walmart</a>
+            <a href="/app/learning_paths/117f2bd2-02d1-4ee2-9290-29683362fd58" class="header-dropdown-option">Walmart Vriddhi</a>
+           </div>
+          </div>
+        </li>
+        <li class= "np-header-desktop-nav-item">
+          <a
+            href="/app/dashboard"
+            class="np-header-desktop-nav-link np-header-font-color"
+          >
+           Dashboard
+          </a>
+        </li>
+        <li class= "np-header-desktop-nav-item">
+          <a
+            href="#"
+            class="np-header-desktop-nav-link np-header-font-color"
+          >
+           Blog
+          </a>
+        </li>
+        <li class= "np-header-desktop-nav-item">
+          <a
+            href="#"
+            class="np-header-desktop-nav-link np-header-font-color"
+          >
+           Contact
+          </a>
+        </li>
       </ul>
     </div>
 
@@ -91,7 +89,25 @@
           <i class="np-header-search-icon far fa-search"></i>
         </form>
       </div>
-      <div class="np-hidden-mobile np-header-avatar">
+      <div class="hidden-desktop header-mobile-menu-nav">
+  {% if current_person.signed_in? %}
+    <button
+      data-toggle-class="np-hidden"
+      class="np-header-mobile-menu-nav-button fal fa-times np-hidden np-header-font-color"
+      data-toggle-target=".np-header-mobile-avatar-menu,
+      .np-header-mobile-menu-content, .np-main, .np-footer"
+    ></button>
+    <button
+      data-test="open-mobile-menu"
+      data-toggle-class="np-hidden"
+      class="np-header-mobile-menu-nav-button np-header-mobile-avatar-menu"
+      data-toggle-target=".fa-times, .np-header-mobile-menu-content, .np-main, .np-footer"
+    >
+    <i class="fal fa-bars hamburger-menu"></i>
+    </button>
+  {% endif %}
+</div>
+      <div class="hidden-mobile np-header-avatar">
         <button
           class="np-header-avatar-button"
           data-test="open-desktop-menu"
@@ -99,14 +115,11 @@
           data-toggle-target=".np-header-avatar-tooltip"
           data-toggle-outside
         >
-          <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <img
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.33333V0H12V1.33333H0ZM0 4.66667H12V3.33333H0V4.66667ZM0 8H12V6.66667H0V8Z" fill="#6D6E71"/>
+            alt="{{ current_person.name }}"
-          </svg>
+            class="np-header-avatar-image"
-          <div class="user-profile">
+            src="{{ current_person.avatar_url }}"
-            {% if current_person.first_name %}
+          >
-              {{current_person.first_name | slice: 0}}
-            {% endif %}
-          </div>
         </button>
         <div class="np-header-avatar-tooltip np-hidden" role="tooltip">
           <span class="np-header-avatar-tooltip-arrow-up"></span>
@@ -119,15 +132,19 @@
             </div>
           </div>
           <nav class="np-header-avatar-tooltip-navigation">
-            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/profile">Profile</a>
+          {% unless current_school.sso_active? %}
-            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/admin">Admin</a>
+            <a
-            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/resources">Resources</a>
+              class="np-header-avatar-tooltip-navigation-link"
-            <a class="np-header-avatar-tooltip-navigation-link" href="https://www.walmartluminate.com/support">Support</a>
+              href="{% route account %}"
+            >
+              {% t .profile_settings %}
+            </a>
+          {% endunless %}
             <a
               class="np-header-avatar-tooltip-navigation-link np-danger"
               href="{% route logout %}"
             >
-              Logout
+              {% t .sign_out %}
             </a>
           </nav>
         </div>
@@ -139,57 +156,80 @@
         href="{% route login %}"
       >
         {% t shared.sign_in %}
-      </div>
+      </a>
     {% endif %}
   </div>
 </header>
 
-<div class="np-hidden-desktop">
+<div class="hidden-desktop">
   <div class="np-header-mobile-menu-content np-hidden">
-    <div class="np-header-mobile-menu-content-nav" style="margin-top:16px;">
+    {% if current_person.signed_in? %}
+      <img
+        alt="{{ current_person.name }}"
+        class="np-header-mobile-menu-content-avatar"
+        src="{{ current_person.avatar_url }}"
+      />
+      <div class="np-header-mobile-menu-content-name">
+        {{ current_person.name }}
+      </div>
+    {% endif %}
+    <div class="np-header-mobile-menu-content-nav">
       <form
-        class="np-header-search"
+        class="header-search"
         data-test="mobile-search"
         method="get"
         action="{% route search %}"
       >
         <input
           aria-label="{% t .search %}"
-          class="np-header-search-input"
+          class="header-mobile-search-input"
           type="text"
           name="q"
           placeholder="{% t .search %}"
         />
         <i class="np-header-search-icon far fa-search"></i>
       </form>
-      {% for website_navigation in navigations.sub_navigation %}
+      {% for website_navigation in navigations.header_navigations %}
-        {% unless website_navigation.label == "Events" %}
         <a
-            href="{{ website_navigation.url }}"
+          href="{{ website_navigation.path }}"
           class="np-header-mobile-menu-content-button"
+          {% if website_navigation.external? %} target="_blank" {% endif %}
         >
-            {{ website_navigation.label }}
+          {{ website_navigation.name }}
         </a>
-        {% endunless %}
       {% endfor %}
       <a
-        href="/app/articles"
+      href="/app/catalog"
       class="np-header-mobile-menu-content-button"
     >
-        Articles
+      Catalog
-      </a>
-      <a
-        href="/app/certificates"
-        class="np-header-mobile-menu-content-button"
-      >
-        Certificates
     </a>
       <div class="np-header-mobile-menu-content-line"></div>
+      <a
+        href="#"
+        class="np-header-mobile-menu-content-button"
+      >
+      Blog
+      </a>
+       <a
+        href="#"
+        class="np-header-mobile-menu-content-button"
+      >
+        Contact
+      </a>
+      {% unless current_school.sso_active? %}
+        <a
+          class="np-header-mobile-menu-content-button"
+          href="{% route account %}"
+        >
+          {% t .profile_settings %}
+        </a>
+      {% endunless %}
       <a
         class="np-header-mobile-menu-content-button np-danger"
         href="{% route logout %}"
       >
-       Logout
+        {% t .sign_out %}
       </a>
     </div>
   </div>
@@ -197,187 +237,69 @@
 
 {% include "messages" %}
 
-
-
 <style>
-
+  .np-header-desktop-nav-link {
-  .np-header-content {
+    font-size: 20px;
-    max-width:1920px;
-    margin:auto;
-  }
-
-  .np-header-logo {
-    justify-content: flex-start;
-    margin: 0 auto 0 0;
-    flex-grow:unset;
-    position:relative;
-    align-items:center;
-  }
-
-  .np-header-logo-image {
-    height:50px;
-  }
-
-  .dropdown-arrow {
-    position: relative;
-    cursor: pointer;
-    padding: 0 22px;
-    height: 64px;
-    left: 0;
-  }
-
-  .dropdown-arrow:after {
-    content: "\f078";
-    font-family: "Font Awesome 5 Pro";
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 16px;
-    font-weight: 400;
-    font-size: 13px;
-    transition: transform 0.2s;
-    color: #333;
-  }
-
-  .header-dropdown-container.np-hidden-mobile:hover .dropdown-arrow:after,
-  .header-dropdown-container.np-hidden-desktop.open .dropdown-arrow:after {
-    transform: rotate(180deg) translateY(5px);
-  }
-
-  .header-dropdown {
-    display:none;
-    position:absolute;
-    background-color:#fff;
-    z-index:10;
-    left:32px;
-    top: 56px;
-    padding: 8px 0;
-    font-size:16px;
-    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
-    min-width:220px;
-  }
-
-  .header-dropdown-container.np-hidden-mobile:hover .header-dropdown,
-  .header-dropdown-container.np-hidden-desktop.open .header-dropdown  {
-    display:block;
-  }
-
-  .header-dropdown a {
-    display:block;
-    padding: 16px;
-    color:#282828;
-    text-decoration:none;
-    font-size:16px;
-    font-weight:400;
-  }
-
-  .header-dropdown a:hover {
-    background-color:#F2F2F2;
-  }
-
-  .np-header-logo .header-text {
-    font-size:24px;
-    font-weight:400;
-  }
-
-  .user-profile {
-    background-color: #0071ce;
-    color: #fff;
-    border-radius: 50%;
-    width: 26px;
-    min-width: 26px;
-    height:26px;
-    font-size: 12px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
     font-weight: 500;
-    margin-left:14px;
   }
 
-  .np-header-mobile-menu-content .user-profile {
+  .header-dropdown-container {
-    margin-top: 24px;
+  display: none;
-    width: 50px;
+  position: absolute; 
-    height: 50px;
+  background-color: white; 
-    font-size: 18px;
+  border: 1px solid #ccc; 
-  }
+  z-index: 10; 
+}
 
-  .np-header-avatar-tooltip-navigation-link {
+.np-header-desktop-nav-link:hover .header-dropdown-container {
-    font-weight: 400;
+  display: block;
-    font-size:16px;
+}
-    color:#333;
-    padding:22px 16px;
-  }
 
-  .np-header-avatar-tooltip-navigation-link:hover {
+.header-dropdown-option {
-    background: #F2F2F2;
+  display: block;
-    font-weight: 400;
+  padding: 15px;
-  }
+  color: black; 
+  text-decoration: none; 
+}
 
-  .np-header-search-input {
+.header-dropdown-option:hover {
-    background-color:#F2F2F2;
+  background-color: #f0f0f0;
-    opacity: 0.15;
+}
-    border-radius: 4px;
+.hidden-mobile {
-  }
+  display: none;
-
+}
-  .np-header-search-icon {
+.hidden-desktop {
-    color:#0071ce;
+  display: block;
-  }
+}
-
+.header-mobile-menu-nav {
-  .np-header-avatar-button,
+  margin-left: 20px;
-  .np-header-mobile-menu-nav-button {
+}
-    border: 1px solid #DADCE0;
+.hamburger-menu {
-    padding: 4px 4px 4px 10px;
+  color: #fff;
-    border-radius: 25px;
+}
+.header-search {
+  position: relative;
+  width: 100%;
+}
+.header-mobile-search-input {
+  width: 100%;
+  padding: 13px;
+}
+@media only screen and (min-width: 1100px) {
+  .hidden-mobile  {
    display: flex;
-    align-items: center;
-    width:auto;
-    font-size:16px;
   }
+  .hidden-desktop {
+    display: none;
+  }
+}
 
-  .np-header-avatar-tooltip {
+@media only screen and (min-width: 768px) { 
-    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
+  .np-header-mobile-menu-content {
-    box-shadow:none;
+    top: 110px;
   }
+}
 
-  .np-header-mobile-menu-content-nav {
-    padding: 32px 16px;
-  }
-
-  .np-header-mobile-menu-content-button {
-    color:#333;
-  }
-
-  @media (min-width:768px) {
-    .np-header {
-      padding: 0 32px;
-    }
-
-    .np-header-search-input:focus {
-      background:#F2F2F2;
-      border:none;
-    }
-
-    .user-profile {
-      width: 30px;
-      min-width: 30px;
-      height:30px;
-    }
-
-    .header-dropdown {
-      top: 50px;
-    }
-  }
-
-  @media (min-width:1200px) {
-    .np-header-desktop-nav-list {
-      margin-right:48px;
-    }
-
-    .np-header-desktop-nav-item {
-      padding: 16px 24px;
-    }
-  }
 </style>
+
+

Custom_Templates/customer_templates/Walmart Supplier Prod/_homepage_featured.html.liquid

@@ -3,7 +3,7 @@
     <div class="col-xs-12">
       <div class="np-homepage-featured-text">
         <div class="np-homepage-headline">
-          {{ homepage.featured_courses_headline }}
+          Grow With Walmart Learning Pathways
         </div>
         <div class="featured-carousel-controls np-hidden-mobile">
           <div class="prev-arrow carousel-control"><i class="far fa-chevron-left"></i></div>
@@ -14,11 +14,10 @@
         {% assign featured_courses_count = 0 %}
         <div class="featured-courses-wrapper">
           <div class="featured-courses-slider">
-            {% for course in items %}
+            {% for learning_path in items %}
-              {% if course.properties.is_article_course %}
                 {% assign is_featured = false %}
 
-                {% for cat in course.categories %}
+                {% for cat in learning_path.categories %}
                   {% assign cat_name = cat.name | downcase %}
                   {% if cat_name == "featured" %}
                     {% assign is_featured = true %}
@@ -28,11 +27,10 @@
                 {% if is_featured %}
                   {% assign featured_courses_count = featured_courses_count | plus: 1 %}
 
-                    <div class="featured-course-slide" data-position="{{course.properties.course_position}}">
+                    <div class="featured-course-slide">
-                      {% include "cards_article" with course %}
+                      {% include "cards_learning_path"  %}
                     </div>
                 {% endif %}
-              {% endif %}
             {% endfor %}
           </div>
         </div>
@@ -140,10 +138,10 @@ function initFeaturedCoursesCarousel() {
   }
 
   .np-homepage-featured-text .np-homepage-headline {
-    font-weight: 400;
+    font-weight: 600;
     font-size: 24px;
     line-height: 32px;
-    color:#333;
+    color:#fff;
     align-self: flex-start;
   }
 

Custom_Templates/customer_templates/Walmart Supplier Prod/_learning_path_completed_banner.html.liquid

@@ -1,39 +1,3 @@
-{% if learning_path.id == "fa4c61ac-e6cd-44dc-a8e0-9b95025968a5" %}
-  <div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
-	<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
-	  <img style="width:100%; height:100%"
-		   id="image"
-		   src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.png">
-	</a>
-	<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
-	  <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
-	  <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
-	  Congratulations, you're Walmart Luminate Replenishment Certified. Click the button below to add your accomplishment to LinkedIn!</p>
-	  <div class="np-learning-path-banner-actions">
-		<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Replenishment%20Certification&name=Walmart%20Luminate%20Replenishment%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com"
-		   class="np-learning-path-banner-action np-learning-path-banner-action--primary">
-		  Add to LinkedIn!</a>
-	  </div>
-	</div>
-  </div>
-{% elsif learning_path.id == "f8ce6c73-a086-4e44-8b96-74883d7fae0e" %}
-  <div class="np-learning-path-completed-banner np-learning-path-banner" style="background-color: #DBD7EE">
-	<a class="np-learning-path-banner-image" style="width:30%; height:30%" onclick="downloadImage()">
-	  <img style="width:100%; height:100%"
-		   id="image"
-		   src="https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240604142406_Sales-Analysis.png">
-	</a>
-	<div class="np-learning-path-banner-content" style="align-items: center; display: flex; flex-direction: column; justify-content: center;">
-	  <h3 class="np-learning-path-banner-headline" style="color: #8F75DD; font-size: 25px; font-weight: 500; line-height: 25px; margin: 0 0 4px;">You earned it!</h3>
-	  <p class="np-learning-path-banner-description" style="color: #1b3e4f; font-size: 20px; font-weight: 400; line-height: 20px; margin: 0 0 12px;">
-	  Congratulations, you're Walmart Luminate Sales Analysis Certified. Click the button below to add your accomplishment to LinkedIn!</p>
-	  <div class="np-learning-path-banner-actions">
-		<a href="https://linkedin.com/profile/add/?startTask=Walmart%20Luminate%20Sales%20Analysis%20Certification&name=Walmart%20Luminate%20Sales%20Analysis%20Certification&organizationId=80427781&certUrl=https%3A%2F%2Fwalmartluminate.northpass.com" class="np-learning-path-banner-action np-learning-path-banner-action--primary">
-		  Add to LinkedIn!</a>
-	  </div>
-	</div>
-  </div>
-{% else %}
 <div class="np-learning-path-completed-banner np-learning-path-banner">
   <img class="np-learning-path-banner-image" src="https://s3.amazonaws.com/static.northpass.com/images/stars-completed.svg"/>
   <div class="np-learning-path-banner-content">
@@ -47,23 +11,3 @@
     </div>
   </div>
 </div>
-{% endif %}
-
-<script>
-  function downloadImage() {
-        axios({
-		  	url:"https://s3.amazonaws.com/schoolkeep-production/wysiwyg/10183441-2254-4b1e-a9f7-9549ca773257/20240214175234_Replenishment%20Badge.png",
-            method: 'GET',
-            responseType: 'blob'
-        })
-            .then((response) => {
-                const url = window.URL
-                    .createObjectURL(new Blob([response.data]));
-                const link = document.createElement('a');
-                link.href = url;
-                link.setAttribute('download', 'image.jpg');
-                document.body.appendChild(link);
-                link.click();
-            })
-    }
-</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_learning_path_course.html.liquid

@@ -1,19 +1,4 @@
-{% assign full_course_obj = "" %}
-{% for course_obj in courses.in_catalog %}
-  {% if course_obj.id == course.id %}
-    {% assign full_course_obj = course_obj %}
-  {% endif %}
-{% endfor %}
-
-{% assign is_cert_category = false %}
-{% for category in learning_path.categories %}
-  {% if category.name == 'Certifications' %}
-	{% assign is_cert_category = true %}
-	{% break %}
-  {% endif %}
-{% endfor %}
 {% if learning_path.enrolled? and course.unlocked? %}
-  {% if is_cert_category == true %}
   <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
   <a
     class="np-learning-path-outline-item np-card-container"
@@ -49,49 +34,6 @@
     </div>
   </a>
 {% else %}
-  <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
-  <a
-    class="np-learning-path-outline-item np-card-container"
-    href="{% route learning_path_course, learning_path_id: learning_path.id, id: course.id %}"
-  >
-    <div class="np-card-content np-card-padding">
-      <img
-        src="{{ item.image }}"
-        alt="{{ course.name }}"
-        class="np-learning-path-outline-course-image"
-      >
-      <div class="np-learning-path-outline-content">
-        <div class="np-learning-path-outline-name np-top-title">
-          {{ course.name }}
-        </div>
-        {% if course.instructors %}
-          <div class="np-learning-path-outline-caption">
-            {{ course.instructors }}
-          </div>
-        {% endif %}
-        <div class="np-learning-path-outline-description">
-          {{ full_course_obj.short_description }}
-        </div>
-        {% if full_course_obj.properties.course_length %}
-          <div class="course-length">{{full_course_obj.properties.course_length}}</div>
-        {% endif %}
-        <div class="np-learning-path-outline-progress
-          {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
-        ">
-          {% t shared.progress, count: course.progress %}
-        </div>
-      </div>
-      <i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
-      {% if course.optional? %}
-        <div class="np-optional-ribbon">
-          {% t shared.optional %}
-        </div>
-      {% endif %}
-    </div>
-  </a>
-  {% endif %}
-{% else %}
-  {% if is_cert_category == true %}
   <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
     <div class="np-card-content np-card-padding">
       <img
@@ -103,32 +45,6 @@
         <div class="np-learning-path-outline-name np-top-title">
           {{ course.name }}
         </div>
-      {% if course.optional? %}
-        <div class="np-optional-ribbon">
-          {% t shared.optional %}
-        </div>
-      {% endif %}
-    </div>
-  </div>
-</div>
-{% else %}
-  <div class="np-learning-path-outline-item np-learning-path-outline-inactive-item np-card-container">
-    <div class="np-card-content np-card-padding">
-      <img
-        src="{{ item.image }}"
-        alt="{{ course.name }}"
-        class="np-learning-path-outline-course-image"
-      >
-      <div class="np-learning-path-outline-content">
-        <div class="np-learning-path-outline-name np-top-title">
-          {{ course.name }}
-        </div>
-        <div class="np-learning-path-outline-description">
-          {{ full_course_obj.short_description }}
-        </div>
-        {% if full_course_obj.properties.course_length %}
-          <div class="course-length">{{full_course_obj.properties.course_length}}</div>
-        {% endif %}
       </div>
       {% if course.optional? %}
         <div class="np-optional-ribbon">
@@ -137,5 +53,4 @@
       {% endif %}
     </div>
   </div>
-  {% endif %}
 {% endif %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_learning_path_desktop_view.html.liquid

@@ -1,35 +1,2 @@
-<div class="np-resource-header np-resource-header-card np-card-padding-large">
+{% include "learning_path_desktop_header" %}
-  <div class="np-top-vocabulary np-text-title">
+{% include "learning_path_desktop_content" %}
-    {% t shared.learning_path.title %}
-    <i class="far fa-road np-button-color np-learning-path-icon"></i>
-  </div>
-  <div class="np-top-title">
-    <a href="{% route home %}" class="np-back-button" aria-label="{% t shared.go_back %}">
-      <i class="far fa-arrow-left np-icon-back"></i>
-    </a>
-    {{ learning_path.name }}
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-xs-12 col-sm-6 col-md-5">
-    <div class="lp-info">
-      {% comment %} <div class="lp-cover-image-wrapper">
-        <div class="lp-title">{{learning_path.name}}</div>
-        <img
-          src="{{ learning_path.image_url }}"
-          class="np-top-image"
-          alt="{{ learning_path.name }}"
-        />
-      </div> {% endcomment %}
-        {% include "learning_path_description" %}
-        {% include "learning_path_instructors" %}
-    </div>
-  </div>
-  <div class="col-xs-12 col-sm-6 col-md-7">
-    <div class="np-top-cta">
-      {% include "learning_path_progress_and_cta" %}
-    </div>
-    {% include "learning_path_outline" %}
-  </div>
-</div>

Custom_Templates/customer_templates/Walmart Supplier Prod/_learning_path_mobile_view.html.liquid

@@ -1,41 +1,2 @@
-<div class="np-resource-header np-card-padding-large">
+{% include "learning_path_mobile_header" %}
-  <div class="np-top-vocabulary np-text-title">
+{% include "learning_path_mobile_content" %}
-    {% t shared.learning_path.title %}
-    <i class="far fa-road np-button-color np-learning-path-icon"></i>
-  </div>
-  <div class="np-top-title">
-    {{ learning_path.name }}
-  </div>
-  {% comment %} <div class="lp-cover-image-wrapper">
-    <div class="lp-title">{{learning_path.name}}</div>
-    <img
-      src="{{ learning_path.image_url }}"
-      class="np-top-image"
-      alt="{{ learning_path.name }}"
-    />
-  </div> {% endcomment %}
- 
-  <div class="np-top-cta">
-    {% include "learning_path_progress_and_cta" %}
-  </div>
-</div>
-
-{% if learning_path.in_progress? %}
-  {% include "learning_path_outline" %}
-  <div class="card-description">
-    {% include "learning_path_description" %}
-  </div>
-{% else %}
-  <div class="card-description">
-    {% include "learning_path_description" %}
-  </div>
-  <div class="np-card-spacing">
-    {% include "learning_path_outline" %}
-  </div>
-{% endif %}
-
-{% if learning_path.instructors.any? %}
-  <div class="np-card-container np-card-padding np-card-spacing">
-    {% include "learning_path_instructors" %}
-  </div>
-{% endif %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_learning_paths_index.html.liquid

@@ -12,3 +12,31 @@
     </div>
   {% endif %}
 </div>
+
+
+<script>
+  function sortGrowLps() {
+    const lpCards = Array.from(document.querySelectorAll('.lp-card'));
+
+    lpCards.sort((a, b) => {
+      const aPrioritise = a.getAttribute('prioritise') === 'true';
+      const bPrioritise = b.getAttribute('prioritise') === 'true';
+      
+      return bPrioritise - aPrioritise;
+    });
+
+
+    const parentElement = lpCards[0].parentNode;
+
+
+    while (parentElement.firstChild) {
+      parentElement.removeChild(parentElement.firstChild);
+    }
+
+
+    lpCards.forEach(card => parentElement.appendChild(card));
+  }
+  document.addEventListener("DOMContentLoaded", () => {
+    sortGrowLps();
+  });
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_merchandising-carousel.html.liquid

@@ -0,0 +1,50 @@
+<div class="carousel-wrapper">
+    <div class="carousel-heading">Merchandising</div>
+    <div class="merchandising-carousel">
+        {% for course in courses.in_catalog %}
+            {% for category in course.categories %}
+                {% if category.name == 'Merchandising' %}
+                    <div class="carousel-cards-container">
+                        {% include 'cards_course' %}
+                    </div>
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.merchandising-carousel {
+  margin-top: 25px;
+}
+</style>
+
+<script>
+$(document).ready(function(){
+
+    $(".merchandising-carousel").slick({
+        slidesToShow: 3,
+        cssEase: 'linear',
+        prevArrow: '<i class="fal fa-chevron-left"></i>',
+        nextArrow: '<i class="fal fa-chevron-right"></i>',
+        infinite: false,
+        responsive: [
+            {
+                breakpoint: 1170,
+                settings: {
+                    slidesToShow: 2,
+                }
+            },
+            {
+                breakpoint: 768,
+                settings: {
+                    slidesToShow: 1,
+                    slidesToScroll: 1,
+                    dots: false,
+                    arrows: true,
+                }
+            }
+        ]
+    });  
+});
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_progress_circle.html.liquid

@@ -0,0 +1,47 @@
+<div class="progress-ring-wrapper">
+  <svg
+    class="progress-ring"
+    width="{{ size }}"
+    height="{{ size }}">
+    <circle
+      class="circle circle-bg"
+      stroke="{{ stroke_color_bg }}"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60"
+    />
+    <circle
+      class="circle circle-{{ name }}"
+      stroke="{{ stroke_color }}"
+      stroke-width="10"
+      fill="transparent"
+      r="52"
+      cx="60"
+      cy="60"
+    />
+    <text x="50%" y="50%" text-anchor="middle" stroke="t#fff" stroke-width="1px" fill="{{ number_color }}" dy=".3em">
+      {{ count }}
+    </text>
+  </svg>
+  <h3 class="np-card-content-title progress-circle-label">
+    {{ name }}
+  </h3>
+</div>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    let circle = document.getElementsByClassName("circle-{{ name }}")[0];
+    let radius = circle.r.baseVal.value;
+    let circumference = radius * 2 * Math.PI;
+
+    circle.style.strokeDasharray = `${circumference} ${circumference}`;
+    circle.style.strokeDashoffset = `${circumference}`;
+
+    function setProgress(percent) {
+      circle.style.strokeDashoffset = circumference - percent * circumference;
+    }
+    setProgress('{{ count | divided_by: total }}')
+  })
+</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/_search_result.html.liquid

@@ -1,6 +1,4 @@
-{% if result.type == "course" %}
+<div class="np-card np-search-result">
-  {% unless result.course.id == "fdc8acdc-0b7c-4064-a52b-1955379d411b" or result.course.id == "b3225a47-448d-4988-962a-18d37d6616d0" %}
-    <div class="np-card np-search-result" data-id="{{result.course.id}}">
   <div class="np-card-container">
     <div class="np-card-content">
       <img
@@ -14,24 +12,8 @@
             {{ result.name }}
           </a>
         </div>
-            <div class="np-search-result-snippet">{{result.course.short_description}}</div>
+        <div class="np-search-result-snippet">{{ result.description }}</div>
-            
-          </div>
-          <div class="category-pills">
-              {% for course in catalog_courses %}
-                {% if course.id == result.course.id %}
-                  {% for cat in course.categories %}
-                    {% assign cat_name = cat.name | upcase %}
-                    {% unless cat_name == "FEATURED" or cat_name == "ARTICLES" %}
-                      <div class="cat-item">{{cat.name}}</div>
-                    {% endunless %}
-                  {% endfor %}
-                {% endif %}
-              {% endfor %}
-            </div>
-          
       </div>
     </div>
   </div>
-  {% endunless %}
+</div>
-{% endif %}

Custom_Templates/customer_templates/Walmart Supplier Prod/_sub_navigation.html.liquid

@@ -1,4 +1,4 @@
-<nav class="np-sub-navigation np-hidden-mobile">
+<nav class="np-sub-navigation">
   <div class="np-sub-navigation-content">
     {% for link in navigations.sub_navigation %}
       <div class="np-sub-navigation-content-item {{ link.active_class }}">
@@ -9,41 +9,22 @@
         <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
       </div>
     {% endfor %}
-    <div class="np-sub-navigation-content-item articles-link">
+    {% comment %} <div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
       <a class="np-sub-navigation-content-item-link" href="/app/articles">
         <i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
         Blog
       </a>
       <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
-    </div>
+    </div> {% endcomment %}
-    <div class="np-sub-navigation-content-item certifications-link">
-      <a class="np-sub-navigation-content-item-link" href="/app/certifications">
-        <i class="far fa-file-certificate np-button-color np-sub-navigation-content-item-icon"></i>
-        Certifications
-      </a>
-      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
-    </div>
   </div>
 </nav>
 
 <script>
-  if (window.location.pathname == "/app/articles") {
+  const url = window.location.pathname;
-    document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-active")
+  const navBlogBtn = document.querySelector('#navBlog');
-  } else {
-    document.querySelector(".articles-link").classList.add("np-sub-navigation-content-item-inactive")
-  }
 
-  if (window.location.pathname == "/app/certifications") {
+  if (url === '/app/articles') {
-    document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-active")
+    navBlogBtn.classList.add('np-sub-navigation-content-item-active');
-  } else {
+    navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
-    document.querySelector(".certifications-link").classList.add("np-sub-navigation-content-item-inactive")
   }
 </script>
-
-<style>
-  .np-sub-navigation-content-item-link,
-  .np-sub-navigation-content-item-active .np-sub-navigation-content-item-link {
-    color:#333;
-  }
-</style>
-

Custom_Templates/customer_templates/Walmart Supplier Prod/_training_session_status.html.liquid

@@ -0,0 +1,6 @@
+<div class="np-training-session-cta-note np-training-session-tile-badge np-training-session-tile-badge-{{ training_session.status.type }}">
+    {% if training_session.approved? %}
+        <i class="far fa-check np-training-session-icon"></i>
+    {% endif %}
+    {{ training_session.status.label }}
+</div>

Custom_Templates/customer_templates/Walmart Supplier Prod/_widget_course_progress.html.liquid

@@ -0,0 +1,134 @@
+{% assign ring_background_color = '#e5e9eb' %}
+{% assign ring_fill_color = '#041141' %}
+{% assign number_color = 'rgb(0, 0, 0)' %}
+{% assign text_color = '#041141' %}
+{% assign background_color = 'white' %}
+
+<div class="heading-container">
+  <div class="carousel-heading">
+    Course Progress
+  </div>
+</div>
+<div class="progress-card-wrapper">
+  <div class="progress-card">
+    {% if courses.enrolled.any? %}
+      {% assign countComplete = 0 %}
+      {% assign countInProgress = 0 %}
+      {% assign countNotStarted = 0 %}
+      {% assign countTotal = 0 | times: 1.0 %}
+      {% for course in courses.enrolled %}
+        {% assign countTotal = countTotal | plus: 1 %}
+        {% if course.progress == 100 %}
+          {% assign countComplete = countComplete | plus: 1 %}
+        {% endif %}
+        {% if course.progress > 0 and course.progress < 100 %}
+          {% assign countInProgress = countInProgress | plus: 1 %}
+        {% endif %}
+        {% if course.progress == 0 %}
+          {% assign countNotStarted = countNotStarted | plus: 1 %}
+        {% endif %}
+      {% endfor %}
+      <ul class="progress-circle-list">
+        <li>
+          {%
+            include "progress_circle",
+            name: 'Completed' ,
+            count: countComplete ,
+            total: countTotal,
+            size: "120",
+            stroke_color: ring_fill_color,
+            stroke_color_bg: ring_background_color,
+            text_color: text_color,
+            number_color: number_color
+          %}
+        </li>
+        <li>
+          {%
+            include "progress_circle",
+            name:'In Progress' ,
+            count: countInProgress ,
+            total: countTotal,
+            size: "120",
+            stroke_color: ring_fill_color,
+            stroke_color_bg: ring_background_color,
+            text_color: text_color,
+            number_color: number_color
+          %}
+        </li>
+      </ul>
+    {% else %}
+      {% capture message %}
+        {% t shared.zero_state.courses.index,
+          key: current_school.course_vocabulary
+        %}
+      {% endcapture %}
+      {% include "courses_zero_state", message: message %}
+    {% endif %}
+  </div>
+</div>
+
+
+<style>
+  .progress-card {
+    border-radius: 8px;
+    background: {{ background_color }};
+    padding: 0;
+    display: flex;
+    margin-bottom: 2.187rem;
+    width: 100%;
+  }
+  .progress-circle-list {
+    padding: 0;
+    list-style-type: none !important;
+    justify-content: space-around;
+    display: inline-flex;
+    align-items: center;
+    max-width: 400px;
+    margin: auto;
+  }
+  .progress-ring-wrapper {
+    flex: 0;
+    flex-direction: column;
+    display: flex;
+    width: 100%;
+    padding: 1.5rem 1rem 1rem 1rem;
+    align-items: center;
+  }
+  .progress-ring circle {
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.35s;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+  .progress-ring text {
+    font-size:2rem;
+  }
+  .progress-circle-label {
+    color: {{ text_color }};
+    text-transform: uppercase;
+    font-size: 0.875rem;
+    margin-top: 1rem;
+  }
+  
+  @media (min-width:768px) {
+    .progress-ring-wrapper {
+      padding: 1.5rem 0.4rem 1rem 0.4rem;
+    }
+    .progress-circle-list {
+      flex-direction: column;
+    }
+  }
+  @media screen and (min-width: 1023px) {
+    .progress-circle-list {
+      flex-direction: row;
+    }
+  }
+  @media (min-width:1170px) {
+    .progress-ring text {
+      font-size: 2.5rem;
+    }
+    .progress-ring-wrapper {
+      padding: 1.5rem 1rem 1rem 1rem;
+    }
+  }
+</style>

Custom_Templates/customer_templates/Walmart Supplier Prod/course.html.liquid

@@ -1,63 +1,10 @@
-{% if course.properties.skip_course_cover_page or course.properties.is_article_course %}
+{% include "header" %}
-  {% if course.enrolled? %}
+<main class="np-main np-max-width np-page-container">
-    <script>window.location.replace("{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}")</script>
-  {% else %}
-    <script>window.location.replace("{% route course_enrollment, code: course.enrollment_code %}")</script>
-  {% endif %}
-{% else %}
-  {% include "header" %}
-  <main class="np-main np-max-width np-page-container">
   <div class="np-hidden-mobile" id="course-desktop">
     {% include "course_desktop_view" %}
   </div>
   <div class="np-hidden-desktop" id="course-mobile">
     {% include "course_mobile_view" %}
   </div>
-  </main>
+</main>
-  {% include "footer" %}
+{% include "footer" %}
-{% endif %}
-
-<style>
-  .np-header {
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  }
-
-  .np-flex {
-    flex-wrap:wrap;
-  }
-
-  .np-content-categories-content-item {
-    margin-bottom:12px;
-  }
-  
-  .course-image-wrapper {
-    position:relative;
-  }
-
-  .course-title {
-    position:absolute;
-    color:#fff;
-    font-weight:700;
-    top:16px;
-    left:16px;
-    padding-right:16px;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    font-size:24px;
-    line-height:32px;
-  }
-
-  @media (min-width:768px) {
-    .course-title {
-      font-size: 32px;
-      line-height: 40px;
-    }
-  }
-
-  @media (min-width:1200px) {
-    .course-title {
-      font-size: 40px;
-      line-height: 48px;
-    }
-  }
-</style>
-

Custom_Templates/customer_templates/Walmart Supplier Prod/dashboard.html.liquid

@@ -1,28 +1,59 @@
+{% assign getting_started_courses = false %}
+{% assign merchandising_courses = false %}
+{% assign analysis_and_reporting_courses = false %}
+
+{% for course in courses.in_catalog %}
+  {% for category in course.categories %}
+      {% if category.name == 'Getting Started' %}
+        {% assign getting_started_courses = true %}
+      {% endif %}
+      {% if category.name == 'Merchandising' %}
+        {% assign merchandising_courses = true %}
+      {% endif %}
+      {% if category.name == 'Analysis and Reporting' %}
+        {% assign analysis_and_reporting_courses = true %}
+    {% endif %}
+  {% endfor %}
+{% endfor %}
+
+
 {% include "header" %}
 {% include "course_version_outdated_alert", courses: courses.enrolled %}
 {% include "sub_navigation" %}
-<main class="np-main np-dashboard np-subpage-container np-max-width">
+<main class="np-main np-dashboard np-subpage-container np-max-width" style='background: #041e42;'>
   <div class="row np-flex-center">
-    <div class="col-xs-12 col-sm-8">
+    <div class="col-xs-12 col-md-8">
       {% if features.learning_paths? %}
-        <div class="np-dashboard-resources-title">
+        <div class="heading-container">
+          <div class="carousel-heading">
             {% t shared.learning_paths %}
           </div>
+        </div>
         {% include "learning_paths_index", items: learning_paths.enrolled %}
       {% endif %}
-      <div class="np-dashboard-resources-title">
-        {% t shared.course_vocabulary.plural, key: current_school.course_vocabulary %}
     </div>    
-      {% include "courses_index", class: "col-xs-12 col-sm-6 np-stretch-content" %}
+    <div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
+      {% include "widget_course_progress" %}
     </div>
-    {% if features.training_events? %}
-      <div class="np-grid-spacing col-xs-12 col-sm-4">
-        <div class="np-dashboard-resources-title">
-          {% t .upcoming_events %}
-        </div>
-          {% include "training_events_dashboard" %}
   </div>
+
+  <div class="row dashboard-section-courses">
+    <div class="col-xs-12">
+      {% if getting_started_courses %}
+        {% include 'getting-started-carousel' %}
       {% endif %}
+      {% if merchandising_courses %}
+        {% include 'merchandising-carousel' %}
+      {% endif %}
+      {% if analysis_and_reporting_courses %}
+        {% include 'analysis-and-reporting-carousel' %}
+      {% endif %}
+      {% comment %} {% include "training_events_index" %} {% endcomment %}
     </div>
+  </div>
+
+
 </main>
 {% include "footer" %}
+
+

Custom_Templates/customer_templates/Walmart Supplier Prod/homepage.html.liquid

@@ -1,315 +1,20 @@
-{% comment %}
-<script>
-  function showPopup() {
-    setTimeout(function() {
-      document.querySelector(".popup-trigger").click()
-    }, 500)
-  }
-
-  function showSurveyPopup() {
-    setTimeout(function() {
-      document.querySelector(".survey-popup-trigger").click()
-    }, 500)
-  }
-
-  function formatDate(date) {
-    const month = (date.getMonth() + 1).toString().padStart(2, '0');
-    const day = date.getDate().toString().padStart(2, '0');
-    const year = date.getFullYear();
-
-    return `${month}/${day}/${year}`;
-  }
-
-  function RerunWorkato() {
-    const today = new Date();
-    const formattedDate = formatDate(today);
-    const data = {
-      person_uuid: '{{current_person.id}}',
-      date: formattedDate
-    }
-
-    let webhookUrl
-    if (schoolID == "804edb32-c300-42f3-82b7-e5d55fcbc2a6") {
-      webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup"
-    } else if (schoolID == "10183441-2254-4b1e-a9f7-9549ca773257") { // live school
-      webhookUrl = "https://webhooks.workato.com/webhooks/rest/bd1a1eb7-7e79-4208-a1db-8e9c7440bcc9/user-interacted-with-popup-live"
-    }
-
-    if (webhookUrl) {
-      fetch(webhookUrl, {
-        method: 'post',
-        body: JSON.stringify(data)
-      }).then(function(response) {
-        return response.json();
-      }).then(function(data) {
-        console.log(res)
-      }).catch(error => {
-        console.log(error)
-      });
-    }
-  }
-</script>
-
-{% endcomment %}
-
-{% assign catalog_courses = courses.in_catalog %}
-
 {% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.featured %}
 <main class="np-main np-homepage">
   <div class="np-homepage-hero">
-    <div class="np-homepage-hero-container">
+    <img class="np-homepage-hero-image"
-      <div class="np-homepage-hero-content">
-        <div class="np-homepage-headline">
-          {{ homepage.headline }}
-        </div>
-        <div class="hero-search-wrapper">
-          <div class="np-homepage-subheadline">
-            {{ homepage.subheadline }}
-          </div>
-          <form
-            class="np-header-search np-hero-search"
-            data-test="mobile-search"
-            method="get"
-            action="{% route search %}">
-            <input
-              aria-label="What are you looking for?"
-              class="hero-search-input"
-              type="text"
-              name="q"
-              placeholder="What are you looking for?" />
-            <i class="np-header-search-icon hero-search-icon far fa-search"></i>
-          </form>
-        </div>
-      </div>
-      <img
-        class="np-homepage-hero-image"
       src="{{ homepage.artwork_url }}"
-        alt="{{ homepage.headline }}" />
+      alt="{{ homepage.headline }}"
-    </div>
+    />
   </div>
   {% include "sub_navigation" %}
-
+  <div class="np-max-width">
-  {% include "homepage_featured", items: catalog_courses %}
+    <section>
-
+      {% include 'feature_learning_paths' %}
-  <div class="np-max-width np-homepage-row-wrapper">
+    </section>
-    <div class="row">
+    <section>
-      <div class="col-xs-12 col-sm-12 col-md-12" style="display:flex; flex-direction:column;">
+      {% include 'catalog_categories' %}
-        <div class="np-section-header">Progress Tracker</div>
+    </section>
-        <div class="learning-path-progress-container">
-          <div class="row">
-            {% assign lps_in_progress = 0 %}
-            {% assign enrolled_learning_paths = learning_paths.enrolled | sort: "progress" | reverse %}
-            {% for learning_path in enrolled_learning_paths %}
-              {% if learning_path.progress > 0 %}
-                {% assign lps_in_progress = lps_in_progress | plus: 1 %}
-
-                {% if lps_in_progress < 4 %}
-                  <div class="col-xs-12 col-md-4">
-                    {% include "cards_learning_path_progress" %}
   </div>
-
-                {% endif %}
-              {% endif %}
-            {% endfor %}
-
-            {% if lps_in_progress > 0 %}
-              <div class="see-more-wrapper">
-                <a href="/app/dashboard" style="margin-top:24px;">See more</a>
-              </div>
-            {% endif %}
-            {% if lps_in_progress == 0 %}
-              <div class="col-xs-12">
-                <div class="np-learning-paths-resources-container">
-                  <div class="np-zero-state-text">
-                    Yikes! You don't have any learning Paths in progress.
-                  </div>
-                  <img class="np-zero-state-learning-paths" alt="" />
-                </div>
-              </div>
-
-            {% endif %}
-          </div>
-
-        </div>
-      </div>
-      {% comment %} {% if features.training_events? %}
-      <div class="col-xs-12 col-sm-5 col-md-4">
-      <div class="homepage-events">
-      <div class="np-section-header">Upcoming Courses</div>
-      <div class="upcoming events">
-      {% if training_events.available.any? %}
-      {% for training_event in training_events.available limit:1 %}
-      {% include "cards_training_event" with training_event %}
-      {% endfor %}
-      <div class="see-more-wrapper">
-      <a href="/app/training_events" style="margin-top:24px;">See more</a>
-      </div>
-      {% else %}
-      {% include "training_events_zero_state" %}
-      {% endif %}
-      </div>
-      </div>
-      </div>
-      {% endif %} {% endcomment %}
-    </div>
-  </div>
-
-  {% include "homepage_ongoing_training", items: catalog_courses %}
-
-  {% include "homepage_topics" %}
-  {%- comment -%}
-  <button
-    type="button"
-    class="popup-trigger"
-    data-toggle-class-on-target
-    data-toggle-target="#firstTimeUsers"
-    data-toggle-escape
-    data-toggle-modal>
-    Click
-  </button>
-
-  <button
-    type="button"
-    class="survey-popup-trigger"
-    data-toggle-class-on-target
-    data-toggle-target="#surveyPopup"
-    data-toggle-escape
-    data-toggle-modal>
-    Click
-  </button>
 </main>
-  {%- endcomment -%}
 {% include "footer" %}
-
-
-<style>
-  .np-homepage-hero {
-    background-color: #0071ce;
-    padding: 40px 24px 24px;
-    flex-direction: column;
-	height: 250px;
-  }
-
-  .np-homepage-hero-image {
-    object-fit: unset;
-    width: 115px;
-    height: auto;
-    min-height: unset;
-    margin-top: 24px;
-  }
-
-  .np-homepage-hero-content {
-    position: relative;
-    padding: 0;
-    color: #fff;
-  }
-
-  .np-homepage-hero .np-homepage-headline {
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 33px;
-    margin-bottom: 24px;
-  }
-
-  .np-homepage-subheadline {
-    font-size: 20px;
-    line-height: 24px;
-    margin-bottom: 8px;
-    opacity: 1;
-  }
-
-  .np-hero-search {
-    width: 100%;
-  }
-
-  .hero-search-input {
-    background-color: #F1F3F4;
-    border-radius: 4px;
-    padding: 14px 19px 14px 44px;
-    border: none;
-    font-size: 14px;
-    line-height: 19px;
-    width: 100%;
-    background: #fff;
-  }
-
-  .hero-search-icon {
-    right: unset;
-    left: 16px;
-    color: #6C6C6C;
-  }
-
-  .np-homepage-row-wrapper {
-    padding: 0 16px;
-    margin-bottom: 56px;
-  }
-
-  .np-homepage-featured-empty {
-    margin: 0;
-    border: 2px solid #dadce0;
-    border-radius: 8px;
-    padding: 60px 32px;
-  }
-
-  .learning-path-progress-container,
-  .learning-path-progress-container > .row {
-    height: 100%;
-  }
-
-  .popup-trigger,
-  .survey-popup-trigger {
-    visibility: hidden;
-    opacity: 0;
-  }
-
-  @media(min-width:768px) {
-    .np-homepage-hero-container {
-      display: flex;
-      align-items: center;
-    }
-
-    .np-homepage-hero .np-homepage-headline {
-      font-size: 40px;
-      line-height: 50px;
-      margin-bottom: 20px;
-      text-align: left;
-    }
-
-    .np-homepage-hero-image {
-      width: 200px;
-      height: auto;
-      margin: 0 0 0 64px;
-    }
-
-    .hero-search-wrapper {
-      display: flex;
-    }
-
-    .np-hero-search {
-      margin-left: 32px;
-      flex: 2;
-    }
-  }
-
-  @media(min-width:768px) and (max-width:1365px) {
-    .np-homepage-hero .np-homepage-headline {
-      font-size: 3.516vw;
-      line-height: 4.249vw;
-    }
-  }
-
-  @media(min-width:1200px) {
-    .np-homepage-hero-image {
-      width: 300px;
-      margin: 0 0 0 100px;
-    }
-  }
-
-  @media(min-width:1366px) {
-
-    .np-homepage-hero .np-homepage-headline {
-      font-size: 48px;
-      line-height: 58px;
-    }
-  }
-</style>

Custom_Templates/customer_templates/Walmart Supplier Prod/learning_path.html.liquid

@@ -8,116 +8,3 @@
   </div>
 </main>
 {% include "footer" %}
-
-<style>
-  .np-header {
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  }
-
-  .np-resource-header {
-    padding: 32px 16px 0;
-  }
-  
-  .lp-cover-image-wrapper {
-    position:relative;
-  }
-
-  .lp-title {
-    position:absolute;
-    color:#fff;
-    font-weight:700;
-    top:16px;
-    left:16px;
-    padding-right:16px;
-    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-    font-size:24px;
-    line-height:32px;
-  }
-
-  .np-learning-path-outline {
-    padding: 0 16px;
-  }
-
-  .np-learning-path-outline-bar {
-    border-radius: 2px;
-    height: 24px;
-    margin: 8px auto;
-    width: 5px;
-  }
-
-  .np-learning-path-outline-description {
-    color: #333;
-    font-size: 15px;
-    line-height: 21px;
-    padding-right:12px;
-  }
-
-  .np-learning-path-outline-content .course-length {
-    margin: 6px 0 18px;
-    font-weight: 500;
-    color:#333;
-    font-size:15px;
-  }
-
-  .card-description {
-    padding: 0 4px;
-    margin: 32px 16px;
-  }
-
-  .np-learning-path-outline-item.np-learning-path-outline-inactive-item:before {
-    content: "\f023";
-    font-family:"Font Awesome 5 Pro";
-    width:20px;
-    height:20px;
-    position:absolute;
-    right:20px;
-    top:20px;
-    color:#333;
-  }
-
-  .np-learning-path-outline-icon {
-    color:#3c228a;
-  }
-
-  .np-top-title {
-    color:#333;
-  }
-
-  @media (min-width:768px) {
-    .np-resource-header {
-      padding: 32px 16px;
-    }
-
-    .lp-title {
-      font-size: 32px;
-      line-height: 40px;
-    }
-
-    .lp-info {
-      padding: 0 40px 0 16px;
-    }
-
-    .np-learning-path-outline-inactive-item .np-learning-path-outline-course-image, 
-    .np-learning-path-outline-inactive-item .np-events-content-date {
-      height: 112px;
-      width: 183px;
-    }
-
-    .np-learning-path-outline {
-      padding: 0;
-    }
-
-    .np-card-heading {
-      font-size:22px;
-      line-height:normal;
-    }
-
-  }
-
-  @media (min-width:1200px) {
-    .lp-title {
-      font-size: 40px;
-      line-height: 48px;
-    }
-  }
-</style>

Custom_Templates/customer_templates/Walmart Supplier Prod/search.html.liquid

@@ -1,5 +1,4 @@
 {% include "header" %}
-{% include "sub_navigation" %}
 <main class="np-main np-search np-subpage-container np-max-width">
   <div class="np-resource-title">
     {% t .title %}
@@ -11,62 +10,18 @@
       {% t .results_for %}
       <span class="np-button-color">"{{ results.term }}"</span>
     </div>
+    {% capture label %}{% t shared.filters.by_type %}{% endcapture %}
+    {%
+      include "filter_dropdown",
+      filters: results.filters,
+      key: "type",
+      label: label
+    %}
   </div>
   {% if results.items.any? %}
-    {% render "search_result" for results.items as result, catalog_courses: courses.in_catalog %}
+    {% render "search_result" for results.items as result %}
   {% else %}
     {% include "search_zero_state" %}
   {% endif %}
 </main>
 {% include "footer" %}
-
-{% if current_person.properties.hide_api_certification_exam_course == true %}
-  <style>
-    .np-search-result[data-id='6cc26c57-34db-4b8e-a38b-ad321ce18add'],
-    .np-search-result[data-id='ac4fbf2e-ed8f-404d-b995-f0ef73481466'] {
-      display:none;
-    }
-  </style>
-{% endif %}
-
-<style>
-  .np-sub-navigation-content {
-    margin-bottom:12px;
-  }
-
-  .np-search .np-resource-title {
-    color:#000;
-    font-weight:900;
-  }
-
-  .category-pills {
-    display:flex;
-    flex: 1;
-    justify-content: end;
-    align-items: flex-end;
-  }
-
-  .cat-item {
-    background-color:#3c228a;
-    color:#fff;
-    font-weight:500;
-    font-size:12px;
-    padding: 4px 10px;
-    border-radius: 12px;
-  }
-
-  @media (min-width:768px) {
-    .np-search .np-resource-title {
-      font-size: 32px;
-      line-height: normal;
-    }
-  }
-</style>
-
-<script>
-  window.addEventListener("load", function() {
-    const searchResultsLength = document.querySelectorAll(".np-search-result").length
-
-    document.querySelector(".np-resource-subtitle-number").innerText = searchResultsLength
-  })
-</script>

Custom_Templates/customer_templates/Walmart Supplier Prod/styles.css.liquid

@@ -1,3 +1,15 @@
+ /*
+ Put your custom overlay styles in here
+ You can use your northpass color palette in this file
+
+{{ color_palette.button_font_color }}
+{{ color_palette.button_color }}
+{{ color_palette.button_hover_color }}
+{{ color_palette.header_font_color }}
+{{ color_palette.header_font_hover_color }}
+{{ color_palette.header_color }}
+*/
+
 @font-face {
   font-family: "Bogle";
   src: url(https://s3.amazonaws.com/static.northpass.com/fonts/Bogle_Regular.OTF);
@@ -53,576 +65,111 @@
 body,
 html {
   font-family: "Bogle", "Roboto", sans-serif;
-  background: #fff;
+  color: #fff;
-  color: #333;
 }
 
-.np-certificate-top-bar-spacing {
+body {
-  margin-top: 68px;
+  background: #041e42;
 }
 
-.np-dashboard,
+.np-homepage-featured .np-homepage-headline, .np-homepage-featured .np-homepage-subheadline, .np-resource-title, .np-dashboard-resources-title, .np-dashboard-resources-category, .np-resource-subtitle, .np-search .np-resource-subtitle-number{
-.np-learning-paths {
+  color: #fff;
-  background-color: #fff;
 }
 
-.np-card-container {
+.feature-lp-card {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-
-.np-resource-title,
-.np-dashboard-resources-title {
-  color: #333;
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 32px;
-}
-
-.np-dashboard .np-dashboard-resources-title {
-  margin-bottom: 20px;
-  text-transform:capitalize;
-}
-
-.np-resource-subtitle {
-  color: #333;
-}
-
-.np-max-width {
-  max-width: 1380px;
-}
-
-.np-button {
-  min-width: 80px;
-  border-radius: 30px;
-  padding: 10px 24px;
-  font-size: 14px;
-  font-weight: 700;
-  transition: background-color 0.2s;
-}
-
-.np-button:focus {
-  border: 2px solid #979797;
-  box-shadow: 0px 0px 10px 0px #0000001a;
-}
-
-.np-button:disabled,
-.np-button:hover:disabled {
-  background-color: #6d6e71;
-}
-
-.np-alert-info {
-  background-color: #ebe8f3;
-  color: #3c228a;
-}
-
-.np-card-ribbon {
-  background-color: #3c228a;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  text-transform: none;
-  padding: 6px 10px;
-  border-radius: 20px;
-  font-size: 12px;
-  min-width: 50px;
-  text-align: center;
-}
-
-.np-learning-paths-resources-container {
-  margin-bottom: 50px;
-}
-
-.np-zero-state-text {
-  color: #333;
-}
-
-.np-dashboard-resources-title {
-  margin-bottom: 8px;
-  color: #333;
-}
-
-.np-learning-paths-resources-container,
-.np-dashboard-resources-container {
-  border: 2px solid #dadce0;
-  border-radius: 8px;
-}
-
-.tns-nav {
-  display: flex;
-  justify-content: center;
-  margin-top: 16px;
-}
-
-.tns-nav button {
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background-color: #000;
-  border: none;
-  margin: 0 6px;
-  -webkit-appearance: none;
-  padding: 0;
-  opacity: 0.3;
-}
-
-.tns-nav button.tns-nav-active {
-  opacity: 1;
-}
-
-.np-section-header {
-  font-size: 24px;
-  line-height: 24px;
-  margin-bottom: 32px;
-}
-
-.see-more-wrapper {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 8px;
-  width: 100%;
-  align-items: flex-end;
-}
-
-.see-more-wrapper a {
-  color: #3c228a;
-}
-
-.progress-ring circle {
-  stroke-linecap: round;
-}
-.progress-ring text {
-  font-size: 32px;
-  font-weight: 700;
-}
-.progress-ring__circle {
-  transition: stroke-dashoffset 0.35s;
-  transform: rotate(-90deg);
-  transform-origin: center;
-}
-
-.np-progress-circle-label {
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  margin-top: 1rem;
-}
-
-@media (min-width: 768px) {
-  .tns-nav {
-    display: none;
-  }
-
-  .np-section-header {
-    font-size: 32px;
-    line-height: 40px;
-    margin-bottom: 40px;
-  }
-
-  .np-resource-title,
-  .np-dashboard-resources-title {
-    font-size: 32px;
-    line-height: 40px;
-  }
-}
-
-/* STICKY HEADER & SUBNAV  */
-.np-header {
-  height: 64px;
-  transition: all 0.2s;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  z-index: 50;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-}
-
-.np-main {
-  padding-top: 64px;
-}
-
-.np-sub-navigation:not(.homepage-nav):not(.np-page-container) {
-  position: fixed;
-  top: 64px;
-  left: 0;
-  width: 100%;
-  background-color: #fff;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  padding-top: 0px;
-  margin-bottom: 0;
-  z-index: 49;
-}
-
-.np-sub-navigation.fixed {
-  position: fixed;
-  top: 64px;
-  left: 0;
-  width: 100%;
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
-  z-index: 49;
-  padding-top: 0;
-  margin-bottom: 0;
-}
-
-@media (min-width: 768px) {
-  .np-main:not(.np-homepage):not(.np-page-container) {
-    padding-top: 200px;
-  }
-
-  .np-header {
-    box-shadow: none;
-  }
-}
-
-/* COVER PAGES  */
-.np-resource-header-card {
-  box-shadow: none;
-}
-
-.np-back-button .np-icon-back {
-  color: #333;
-}
-
-.np-top-cta-progress-title {
-  color: #59697b;
-}
-
-.np-learning-path-outline-item .np-card-content {
-  padding: 18px;
-}
-
-.np-optional-ribbon {
-  background-color: rgba(60, 34, 138, 0.1);
-  color: #3c228a;
-}
-.np-learning-path-outline-name {
-  font-weight: 700;
-}
-
-.np-learning-path-outline-progress.np-color-success {
-  color: #3c228a;
-}
-
-#learning-path-desktop .np-top-image {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/* COURSE CARDS  */
-
-a.np-card {
   text-decoration: none;
 }
-
+.lp-feature-image {
-.np-card-padding {
-  padding: 32px 24px 24px;
-}
-
-.np-image-wrapper {
-  position: relative;
-}
-
-.np-card .np-image-wrapper .np-card-ribbon {
-  top: auto;
-  bottom: 10px;
-}
-
-.np-card .np-image-wrapper .course-img-content {
-  position: absolute;
-  top: 16px;
-  left: 16px;
-  padding-right: 16px;
-}
-
-.np-card .np-image-wrapper .np-card-content-title {
-  color: #fff;
-  font-size: 24px;
-  line-height: 30px;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
-}
-
-.np-card .course-length {
-  margin-top: 8px;
-  font-weight: 500;
-}
-
-.np-card-content-title {
-  margin: 0 !important;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 25px;
-  color: #333;
-}
-
-.np-card .np-card-content-title {
-  margin: 0;
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 25px;
-}
-
-.np-card-article .np-card-content-title {
-  margin-bottom: 8px;
-}
-
-.np-card .np-card-content-subtitle {
-  color: #333;
-  font-size: 15px;
-  line-height: 21px;
-  margin-bottom: 16px;
-}
-
-.np-card .np-card-content-footer {
-  margin-top: 0;
-}
-
-.np-card-content-progress {
-  line-height: 16px;
-}
-
-@media (min-width: 768px) {
-  .np-card .np-image-wrapper .np-card-content-title {
-    font-size: 28px;
-    line-height: 34px;
-  }
-}
-
-/* ONGOING COURSE CARDS  */
-.np-card.np-card-ongoing .np-card-padding {
-  padding: 16px;
-}
-
-.np-card.np-card-ongoing .np-card-content-footer {
-  display: block;
-}
-
-/* ILT CARDS  */
-.np-card-training-event .np-card-padding {
-  padding: 12px 20px 32px;
-}
-
-.np-card-training-event .np-card-content-title {
-  font-size: 16px;
-  color: #333;
-  margin-bottom: 8px;
-}
-
-.np-card-training-event .np-card-training-session {
-  margin-top: 20px;
-}
-
-.np-card-training-event .np-card-content-label,
-.np-card-training-event .np-card-training-sessions-icon {
-  color: #333;
-}
-
-/* LEARNING PATH CARDS  */
-.np-card .np-learning-path .np-card-content-title {
-  font-size: 24px;
-  line-height: 32px;
-}
-
-/* LEARNING PATH PROGRESS CARDS  */
-.np-card.np-card-learning-path-progress {
-  padding: 0;
-  color: #333;
-}
-
-.np-learning-path .np-card-content-footer {
-  margin-top: 16px;
-}
-
-@media (min-width: 768px) {
-  .np-learning-path {
-    align-items: stretch;
-  }
-
-  .lp-image-wrapper {
-    width: 32%;
-    min-width: 32%;
-    position: relative;
-    overflow: hidden;
-    border-bottom-left-radius: 4px;
-    border-top-left-radius: 4px;
-  }
-
-  .np-learning-paths .lp-image-wrapper {
-    min-height: 300px;
-  }
-
-  .np-learning-path .np-learning-path-image {
-    width: auto;
-    border-top-right-radius: 0;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-  }
-}
-
-.np-card-learning-path-progress .lp-progress-card-wrapper {
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  flex-wrap: wrap;
-  padding: 24px 16px 50px;
-}
-
-.np-card-learning-path-progress .lp-content {
-  padding-left: 11px;
-}
-
-.np-card-learning-path-progress .learning-path-title {
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 32px;
   width: 100%;
+}
+.text-heading {
+  color: #fff;
+  font-size: 30px;
+  font-weight: 600;
+}
+.text-container {
+  margin-bottom: 20px;
+}
+section {
+  padding: 50px 20px;
+}
+
+.text-center {
   text-align: center;
-  margin-bottom: 8px;
 }
 
-.np-card-learning-path-progress .lp-total-courses,
+.carousel-heading {
-.np-card-learning-path-progress .lp-completed-items {
+  color: #fff;
-  font-size: 16px;
+  font-weight: 600;
-  line-height: 26px;
+  font-size: 25px;
 }
 
-.np-card-learning-path-progress .lp-total-courses span,
+.heading-container {
-.np-card-learning-path-progress .lp-completed-items span {
+  margin-bottom: 20px;
-  color: #3c228a;
-  font-weight: 500;
 }
 
-.np-card-learning-path-progress .lp-completed-items span > div {
+.np-learning-paths {
-  display: inline;
+  background: #041e42;
+}
+.np-card-header-icon, .np-card-header-type, .np-learning-path-items-count {
+  color: #041141;
+}
+.card-course {
+  margin: 10px;
+}
+.button-course {
+  background: #041141;
+  color: #fff;
+  text-decoration: none;
+  padding: 12.5px 25px;
+  border-radius: 25px;
+  font-weight: 600;
+  display: flex;
+}
+.button-container {
+  display: flex;
 }
 
-@media (min-width: 768px) {
+.np-card-heading, .np-course-outline-content-section-name {
-  .np-card-learning-path-progress .lp-progress-card-wrapper {
+  color: #1b3e4f;
-    padding: 64px 16px;
-    flex-wrap: nowrap;
-  }
-  .np-card-learning-path-progress .learning-path-title {
-    font-size: 24px;
-    line-height: 32px;
-    margin-bottom: 32px;
-    text-align: left;
-  }
-
-  .np-card-learning-path-progress .lp-total-courses,
-  .np-card-learning-path-progress .lp-completed-items {
-    font-size: 20px;
-    line-height: 30px;
-  }
-
-  .np-card-learning-path-progress .lp-content {
-    padding-left: 22px;
-  }
 }
-
+.np-card-text, .np-card-text p, .np-card-text strong, .np-card-text span {
-/* MODAL POPUP  */
+  color: #1b3e4f !important;
-.first-time-user-popup,
+}
-.survey-popup {
+.carousel-wrapper  {
-  position: fixed;
+  position: relative;
+}
+.slick-slider {
+  position: initial !important;
+}
+.slick-arrow {
+  position: absolute;
   top: 0;
   right: 0;
-  bottom: 0;
+  width: 40px;
-  left: 0;
+  height: 40px;
-  z-index: 1000;
+  border-radius: 50%;
+  background: #fff;
   display: flex;
-  padding: 1em;
+  color: #000;
-  background-color: rgba(0, 0, 0, 0.75);
+  align-items: center;
-  visibility: hidden;
+  justify-content: center;
-  opacity: 0;
+  cursor: pointer;
-  pointer-events: none;
-  transition: 0.25s ease-out;
 }
-.first-time-user-popup.is-active,
+.slick-arrow.slick-disabled {
-.survey-popup.is-active {
+  opacity: 0.5;
-  visibility: visible;
+  cursor: initial;
-  opacity: 1;
-  pointer-events: auto;
 }
-
+.arrow-left {
-.first-time-user-popup-container,
+  margin-right: 50px;
-.survey-popup-container {
-  width: 100%;
-  max-width: 650px;
-  margin: auto;
-  transform: translateY(-1em) scale(0.95);
-  background-color: white;
-  transition: transform 0.25s ease-out;
-  border-radius: 8px;
 }
-
+.np-header-logo-image {
-.first-time-user-popup.is-active .first-time-user-popup-container,
+  height: 25px;
-.survey-popup.is-active .survey-popup-cotnainer {
-  transform: translateY(0) scale(1);
 }
-
+.course-categories-wrapper {
-.modal-headline {
-  font-size: 20px;
-  line-height: normal;
-  font-weight: 500;
-  margin-bottom: 32px;
-  text-align: center;
-}
-
-.modal-links {
   display: flex;
-  justify-content:center;s
+  flex-wrap: wrap;
 }
-
+.np-content-categories-content-item {
-.modal-links a {
+  margin-bottom: 12px;
-  border: 2px solid #3c228a;
-  background: #3c228a;
-  padding: 8px 16px;
-  text-align: center;
-  width: calc(50% - 8px);
-  margin: 0 8px;
-  border-radius: 30px;
-  color: #fff;
-  text-decoration: none;
-  font-weight: 700;
-  transition: all 0.2s;
-}
-
-.modal-links a.secondary {
-  background: transparent;
-  color: #3c228a;
-}
-
-.modal-links a:hover {
-  border: 2px solid #13014a;
-  background: #13014a;
-}
-
-.modal-links a.secondary:hover {
-  border: 2px solid #13014a;
-  background: #ebe8f3;
-  color: #13014a;
-}
-
-.first-time-user-popup-content,
-.survey-popup-content {
-  padding: 32px 16px;
-}
-
-.survey-popup-content,
-.modal-survey {
-  height:100%;
-}
-
-@media (min-width: 768px) {
-  .first-time-user-popup-content,
-  .survey-popup-content {
-    padding: 32px;
-  }
-
-  .modal-headline {
-    font-size: 24px;
-  }
-
-  .modal-links a {
-    min-height: 40px;
-    line-height: 40px;
-  }
 }

Custom_Templates/customer_templates/Walmart Supplier Prod/transcript.html.liquid

@@ -0,0 +1,8 @@
+{% include "header" %}
+{% include "account_tabs" %}
+
+<main class="np-main np-subpage-container np-transcript">
+  {% transcript %}
+</main>
+
+{% include "footer" %}