Datasnipper nav and page updates. Supplier sub nav color updates. nTransit added SVGs icons for their categories.

Custom_Templates/customer_templates/DataSnipper/_header.html.liquid

@@ -7,8 +7,8 @@
     document.title = `${defaultPageTitle} | Learning Paths`
   } else if (window.location.pathname == "/app/training_events") {
     document.title = `${defaultPageTitle} | Training Events`
-  //} else if (window.location.pathname == "/app/upcoming-trainings") {
+  } else if (window.location.pathname == "/app/upcoming-trainings") {
-  //  document.title = `${defaultPageTitle} | Upcoming Trainings`
+    document.title = `${defaultPageTitle} | Upcoming Trainings`
   }
 </script>
 
@@ -50,84 +50,35 @@
     <div class="np-hidden-mobile np-header-desktop-nav">
       <ul class="np-header-desktop-nav-list">
         {% for link in navigations.sub_navigation %}
-          {% comment %} {% unless link.label == "Catalog" %} {% endcomment %}
+          {% unless link.label == "Events" %}
-            {% assign link_url = "" %}
+						{% assign link_url = "" %}
+						{% if link.label == "Dashboard" %}
             <li class="np-header-desktop-nav-item">
-						<a href="{{ link.url }}" class="np-header-desktop-nav-link
+							<a href="{{ link.url }}" class="np-header-desktop-nav-link np-header-font-color"> My Courses </a></li>
-										 {% if link.label == "Events" %}
+						{% elsif link.label == "Learning Paths" %}
-			TODO: This whole file needs to be cleaned up like cray.
+						<li class="np-header-desktop-nav-item">
-			TODO: Hide Events (/app/training_events) and only show /app/upcoming-trainings. Label should be Live Trainings.
+							<a href="{{ link.url }}" class="np-header-desktop-nav-link np-header-font-color" style="visibility:hidden"></a></li>
-																				np-button
-																			{% else %}
-																				np-header-font-color
-																			{% endif %}
-																			{% if link.label == "Catalog" %}
-																				 link-dropdown
-																			 {% endif %}">
-                {% if link.label == "Courses" or link.label == "Dashboard" %}
-                  My Courses
-                {% elsif link.label == "Catalog" %}
-                  Catalog
-                  <i
-                    data-test="open-catalog-dropdown"
-                    data-toggle-class="np-hidden"
-                    data-toggle-target=".np-catalog-dropdown-content"
-                    class="far fa-chevron-down"></i>
-                {% elsif link.label == "Events" %}
-                  Live events
-								{% elsif link.label == "Learning Paths"}
                 {% else %}
-                  {{ link.label }}
+									<li class="np-header-desktop-nav-item" >
-                {% endif %}
+										<a href="{{ link.url }}" class="np-header-desktop-nav-link np-header-font-color" >{{ link.label }}</a></li>
-              </a>
+            {% endif %}
-              {% comment %} {% if link.label == "Catalog" %}
+            {% endunless %}
-                <div class="np-catalog-dropdown-content np-hidden">
-                  <form
-                    class="np-header-search"
-                    data-test="mobile-search"
-                    method="get"
-                    action="{% route search %}">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="21"
-                      height="20"
-                      viewBox="0 0 21 20"
-                      fill="none">
-                      <path
-                        d="M18 17.5L15.0834 14.5833M17.1667 9.58333C17.1667 13.4954 13.9954 16.6667 10.0833 16.6667C6.17132 16.6667 3 13.4954 3 9.58333C3 5.67132 6.17132 2.5 10.0833 2.5C13.9954 2.5 17.1667 5.67132 17.1667 9.58333Z"
-                        stroke="#011638"
-                        stroke-width="1.66667"
-                        stroke-linecap="round"
-                        stroke-linejoin="round" />
-                    </svg>
-                    <input
-                      aria-label="{% t .search %}"
-                      class="np-dropdown-search-input"
-                      type="text"
-                      name="q"
-                      placeholder="{% t .search %}" />
-
-                  </form>
-                  {% for filter in courses.filters limit: 3 %}
-                    <a href="/app/catalog?filter[category_uuid][in][]={{filter.value}}" class="dropdown-category-link">{{ filter.name }}</a>
-                  {% endfor %}
-                </div>
-              {% endif %} {% endcomment %}
-            </li>
-            {% comment %} {% endunless %} {% endcomment %}
         {% endfor %}
-				{% comment %}
+        <li class="np-header-desktop-nav-item">
+          <a href="/app/upcoming-trainings" class="np-header-desktop-nav-link np-button button-purple">
+            Live trainings
+          </a>
+        </li>
         {% for website_navigation in navigations.header_navigations_external %}
           <li class="np-header-desktop-nav-item">
             <a
               href="{{ website_navigation.path }}"
               class="np-header-desktop-nav-link np-header-font-color"
               target="_blank">
-              {{ website_navigation.name }}
+							Live Sessions
             </a>
           </li>
 				{% endfor %}
-				{% endcomment %}
       </ul>
 
     </div>

Custom_Templates/customer_templates/DataSnipper/dashboard.html.liquid

@@ -3,7 +3,7 @@
 {% include "sub_navigation" %}
 <main class="np-main np-courses np-subpage-container np-max-width">
 
-  <div class="row np-flex-center">
+  <div class="row">
     <div class="col-xs-12 col-sm-8">
       {% if features.learning_paths? %}
         <div class="np-dashboard-resources-title">
@@ -11,15 +11,12 @@
         </div>
         {% include "learning_paths_index", items: learning_paths.enrolled %}
       {% endif %}
-
+    {% comment %} <div class="col-xs-12 col-sm-6 col-md-7 col-lg-9"> {% endcomment %}
-  <div class="row">
-    <div class="col-xs-12 col-sm-6 col-md-7 col-lg-9">
       <div class="np-resource-title">
         My Courses
       </div>
       {% include "courses_index", class: "col-xs-12 col-md-6 col-lg-4 np-stretch-content" %}
-
+  </div>
-
     {% if features.training_events? %}
       <div class="col-xs-12 col-sm-6 col-md-5 col-lg-3">
         <div class="dashboard-events">
@@ -30,7 +27,7 @@
         </div>
       </div>
     {% endif %}
-  </div>
+	</div>
 </main>
 {% include "section_datasnipper_expert" %}
 {% include "footer" %}

Custom_Templates/customer_templates/WSGC - New Hire/_sub_navigation.html.liquid

@@ -44,4 +44,4 @@
   if (window.location.pathname == "/app/supplementals") {
     document.querySelector(".supplementals-link").classList.add("active")
   }
-</script>
+</script>

Custom_Templates/customer_templates/Walmart Spark Prod/_category_cards.html.liquid

@@ -1,4 +1,120 @@
-{% if courses.enrolled.any? %}{% comment %} GETTING STARTED  {% endcomment %}{% for school_category in school_categories %}    {% if school_category == "Getting Started" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/categories-img-label.webp" width="60" height="60" alt="Getting Started Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div>              <div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} EARNINGS  {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Earnings" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-earnings-icon.webp" width="61" height="60" alt="Earnings Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"> <div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} SHOPPING & DELIVERY  {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Shopping & Delivery" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-shopping-delivery-icon.webp" width="61" height="60" alt="Shopping & Delivery Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} DELIVERY  {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Delivery" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-delivery-icon.webp" width="61" height="60" alt="Delivery Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} USING THE APP  {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Using the App" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-using-the-app-icon.webp" width="60" height="60" alt="Using the App Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>{% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}{% comment %} CONTACTING CUSTOMERS  {% endcomment %}{% for school_category in school_categories %}{% if school_category == "Contacting Customers" %}<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'><div class="np-category-card-content-wrapper"><div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-contacting-customers-icon.webp" width="61" height="60" alt="Contacting Customers Category Icon"></div><div class="title-wrapper"><div class="labels-wrapper"><div class="label label-green new-topic-label">New</div></div><div class="np-category-title">{{school_category}}</div></div></div><i class="fas fa-chevron-right"></i></div>      {% include "filtered_courses_tray", category_name: school_category %}{% endif %}{% endfor %}
+{% if courses.enrolled.any? %}
+	{% comment %} GETTING STARTED  {% endcomment %}
+	{% for school_category in school_categories %}
+		{% if school_category == "Getting Started" %}
+			<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+				<div class="np-category-card-content-wrapper">
+					<div class="np-category-card-img">
+						<img src="https://cdn.northpass.io/walmart/categories-img-label.webp" width="60" height="60" alt="Getting Started Category Icon">
+					</div>
+					<div class="title-wrapper">
+						<div class="labels-wrapper">
+							<div class="label label-green new-topic-label">New</div></div>
+						<div class="np-category-title">{{school_category}}
+						</div>
+					</div>
+				</div>
+				<i class="fas fa-chevron-right"></i>
+			</div>{% include "filtered_courses_tray", category_name: school_category %}
+			{% endif %}
+		{% endfor %}
+		{% comment %} EARNINGS  {% endcomment %}
+		{% for school_category in school_categories %}
+			{% if school_category == "Earnings" %}
+				<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+					<div class="np-category-card-content-wrapper">
+						<div class="np-category-card-img"><img src="https://cdn.northpass.io/walmart/category-earnings-icon.webp" width="61" height="60" alt="Earnings Category Icon">
+							</div>
+							<div class="title-wrapper">
+								<div class="labels-wrapper">
+									<div class="label label-green new-topic-label">New</div>
+								</div>
+								<div class="np-category-title">{{school_category}}
+								</div>
+							</div>
+					</div>
+					<i class="fas fa-chevron-right"></i>
+				</div>{% include "filtered_courses_tray", category_name: school_category %}
+		{% endif %}
+	{% endfor %}
+	{% comment %} SHOPPING & DELIVERY  {% endcomment %}
+	{% for school_category in school_categories %}
+		{% if school_category == "Shopping & Delivery" %}
+			<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+				<div class="np-category-card-content-wrapper">
+					<div class="np-category-card-img">
+						<img src="https://cdn.northpass.io/walmart/category-shopping-delivery-icon.webp" width="61" height="60" alt="Shopping & Delivery Category Icon">
+					</div>
+					<div class="title-wrapper">
+						<div class="labels-wrapper">
+							<div class="label label-green new-topic-label">New</div>
+						</div>
+						<div class="np-category-title">{{school_category}}</div>
+					</div>
+				</div>
+				<i class="fas fa-chevron-right"></i>
+			</div>{% include "filtered_courses_tray", category_name: school_category %}
+				{% endif %}
+			{% endfor %}
+			{% comment %} DELIVERY  {% endcomment %}
+			{% for school_category in school_categories %}
+				{% if school_category == "Delivery" %}
+					<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+						<div class="np-category-card-content-wrapper">
+							<div class="np-category-card-img">
+								<img src="https://cdn.northpass.io/walmart/category-delivery-icon.webp" width="61" height="60" alt="Delivery Category Icon">
+							</div>
+							<div class="title-wrapper">
+								<div class="labels-wrapper">
+									<div class="label label-green new-topic-label">New</div>
+								</div>
+								<div class="np-category-title">{{school_category}}</div>
+							</div>
+						</div>
+						<i class="fas fa-chevron-right"></i>
+					</div>
+					{% include "filtered_courses_tray", category_name: school_category %}
+			{% endif %}
+		{% endfor %}
+		{% comment %} USING THE APP  {% endcomment %}
+		{% for school_category in school_categories %}
+			{% if school_category == "Using the App" %}
+				<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+					<div class="np-category-card-content-wrapper">
+						<div class="np-category-card-img">
+							<img src="https://cdn.northpass.io/walmart/category-using-the-app-icon.webp" width="60" height="60" alt="Using the App Category Icon">
+						</div>
+						<div class="title-wrapper">
+							<div class="labels-wrapper">
+								<div class="label label-green new-topic-label">New</div>
+							</div>
+							<div class="np-category-title">{{school_category}}</div>
+						</div>
+					</div>
+					<i class="fas fa-chevron-right"></i>
+				</div>
+				{% include "filtered_courses_tray", category_name: school_category %}
+		{% endif %}
+	{% endfor %}
+	{% comment %} CONTACTING CUSTOMERS  {% endcomment %}
+	{% for school_category in school_categories %}
+		{% if school_category == "Contacting Customers" %}
+			<div class="np-category-card" data-category='{{school_category | replace: " ", "-" | downcase }}'>
+				<div class="np-category-card-content-wrapper">
+					<div class="np-category-card-img">
+						<img src="https://cdn.northpass.io/walmart/category-contacting-customers-icon.webp" width="61" height="60" alt="Contacting Customers Category Icon">
+					</div>
+					<div class="title-wrapper">
+						<div class="labels-wrapper">
+							<div class="label label-green new-topic-label">New</div>
+						</div>
+						<div class="np-category-title">{{school_category}}</div>
+					</div>
+				</div>
+				<i class="fas fa-chevron-right"></i></div>
+			{% include "filtered_courses_tray", category_name: school_category %}
+	{% endif %}
+		{% endfor %}
 
   {% comment %} NON SPECIFIED  {% endcomment %}
   {% for school_category in school_categories %}
@@ -10,7 +126,7 @@
               <div class="np-category-card-img">
                 <img src="https://cdn.northpass.io/walmart/category-resource-bundles-icon.webp" width="60" height="60" alt="Category Icon">
               </div>
-              <div class="title-wrapper"> 
+              <div class="title-wrapper">
                 <div class="np-category-title">Resource Bundles</div>
               </div>
             </div>
@@ -38,7 +154,7 @@
                 <img src="https://cdn.northpass.io/walmart/category-spark-icon.webp" width="61" height="60" alt="Category Icon">
               {% endif %}
             </div>
-            <div class="title-wrapper"> 
+            <div class="title-wrapper">
               <div class="labels-wrapper">
                 <div class="label label-green new-topic-label">New</div>
               </div>
@@ -52,4 +168,4 @@
     {% endunless %}
   {% endfor %}
 
-{% endif %}
+{% endif %}

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

@@ -1,3 +1,9 @@
+{% assign skip_course_page = false %}
+{% for category in course.categories %}
+  {% if category.name == 'Blog' or category.name == 'HelpDoc' %}
+    {% assign skip_course_page = true %}
+  {% endif %}
+{% endfor %}
 <div class="card-course">
   <div class="np-card-container">
     {% if course.ribbon %}
@@ -26,9 +32,15 @@
           {% include "course_version_outdated_popup", path: course_path %}
         {% endif %}
         <div class="button-container">
-          <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 skip_course_page %}
+          <a class="button-course" {% if course.enrolled? == true %}href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"{% else %}href="{{ course_path }}"{% endif %}>
             {% t shared.view %}
           </a>
+          {% else %}
+          <a class="button-course" {% if course.properties.skip_course_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 %}>
+            {% t shared.view %}
+          </a>
+        {% endif %}
         </div>
       </div>
     </div>

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

@@ -1,7 +1,8 @@
+{% assign available_categories = "Ethics and Compliance,Item 360,Getting Paid,Modulars and Assortments,Onboarding,Packaging and Labeling,Replenishment,Retail Basics,Transportation" %}
 <div class="catalog-categories-container">
     <div class="text-container">
         <div class="text-heading text-center">
-            Explore the Course Catalog
+            Start you learning journey below.
         </div>
     </div>
 
@@ -9,12 +10,14 @@
         {% assign uniq_cats = '' %}
         {% for course in courses.in_catalog %}
             {% for category in course.categories %}
-                {% unless uniq_cats contains category.name %}
+                {% if available_categories contains category.name %}    
-                    <a class="category-card" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
+                    {% unless uniq_cats contains category.name %}
-                    {{category.name}}
+                        <a class="category-card" id="{{category.name}}" href="/app/catalog?filter[category_uuid][in][]={{category.id}}&search_terms=">
-                    </a>
+                            <img class="category-card-image" src="" alt="">
-                    {% assign uniq_cats = uniq_cats | append: category.name%}
+                        </a>
-                {% endunless %}
+                        {% assign uniq_cats = uniq_cats | append: category.name%}
+                    {% endunless %}
+                {% endif %}
             {% endfor %}
         {% endfor %}
     </div>
@@ -24,12 +27,62 @@
 .category-links-wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
 }
 .category-card {
   text-decoration: none;
   color: #fff;
   text-align: center;
-  padding: 20px;
   font-size: 20px;
+  cursor: pointer;
+  border-radius: 10px;
+  overflow: hidden;
+  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; 
+  background: #13244c;
+  padding: 20px;
 }
-</style>
+.category-card:hover {
+  transform: scale(1.075); 
+  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.3); 
+}
+.category-card-image {
+  width: 100%;
+  height: auto;
+  border-radius: 8px; 
+}
+.category-card-image {
+  width: 100%;
+}
+</style>
+
+<script>
+    const categoryCards = document.querySelectorAll('.category-card');
+    const images = [
+        {name: 'Ethics and Compliance', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Ethics_and_Compliance.png"},
+        {name: 'Getting Paid', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Getting_Paid.png"},
+        {name: 'Item 360', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Item_360.png"},
+        {name: 'Modulars and Assortments', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Modulars_and_Assortments.png"},
+        {name: 'Onboarding', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Onboarding.png"},
+        {name: 'Packaging and Labeling', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Packaging_and_Labeling.png"},
+        {name: 'Replenishment', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Replinishment.png"},
+        {name: 'Retail Basics', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Retail_Basics.png"},
+        {name: 'Transportation', url: "https://s3.amazonaws.com/static.northpass.com/Supplier+Academy/Category+Images/Transportation.png"}
+    ]
+
+    function addCategoryCardImage() {
+        categoryCards.forEach((card) => {
+            const cardName = card.id;
+            const cardImage = card.querySelector('.category-card-image');
+
+            for (const i of images) {
+                if (cardName === i.name) {
+                    cardImage.src = i.url;
+                }
+            }
+        });
+    }
+
+    addEventListener("DOMContentLoaded", (event) => {
+        addCategoryCardImage();
+    });
+</script>

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

@@ -0,0 +1,21 @@
+{% if courses.in_catalog.any? %}
+    <div class="np-catalog-courses row row-with-thumbnails">
+      {% for course in courses.in_catalog %}
+        {% for category in course.categories %}
+            {% if category.name == 'Blog' %}
+                <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
+                  {% include "cards_course" with course %}
+                </div>
+            {% endif %}
+        {% endfor %}
+      {% endfor %}
+    </div>
+  {% else %}
+    {% capture message %}
+      {% t shared.zero_state.courses.catalog,
+        key: current_school.course_vocabulary
+      %}
+    {% endcapture %}
+    {% include "courses_zero_state", message: message %}
+  {% endif %}
+  

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

@@ -1,9 +1,18 @@
+{% assign uniq_courses = '' %}
+
 {% if courses.in_catalog.any? %}
   <div class="np-catalog-courses row row-with-thumbnails">
     {% for course in courses.in_catalog %}
-      <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
+      {% for category in course.categories %}
-        {% include "cards_course" with course %}
+        {% unless category.name == 'Blog' %}
-      </div>
+          {% unless uniq_courses contains course.name %}
+            <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content card-course-container">
+              {% include "cards_course" with course %}
+            </div>
+            {% assign uniq_courses = uniq_courses |  append: course.name %}
+          {% endunless %}
+        {% endunless %}
+      {% endfor %}
     {% endfor %}
   </div>
 {% else %}

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

@@ -29,14 +29,6 @@
             </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"
@@ -49,14 +41,6 @@
            </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="#"

Custom_Templates/customer_templates/Walmart Supplier Prod/_in-progress-carousel.html.liquid

@@ -0,0 +1,48 @@
+<div class="carousel-wrapper">
+    <div class="carousel-heading">In Progress</div>
+    <div class="in-progress-carousel">
+        {% for course in courses.enrolled %}
+            {% if course.progress > 0 and course.progress < 100 %}
+                <div class="carousel-cards-container">
+                    {% include 'cards_course' %}
+                </div>
+            {% endif %}
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+.in-progress-carousel {
+  margin-top: 25px;
+}
+</style>
+
+<script>
+$(document).ready(function(){
+
+    $(".in-progress-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/_sub_navigation.html.liquid

@@ -3,28 +3,40 @@
     {% for link in navigations.sub_navigation %}
       <div class="np-sub-navigation-content-item {{ link.active_class }}">
         <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
-          <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
           {{ link.label }}
         </a>
         <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
       </div>
     {% endfor %}
-    {% comment %} <div id="navBlog" class="np-sub-navigation-content-item np-sub-navigation-content-item-inactive">
+     <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">
+      <a class="np-sub-navigation-content-item-link" href="/app/blog">
-        <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> {% endcomment %}
+    </div>
   </div>
+	{% 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="">
+        <i class="far fa-file-alt np-button-color np-sub-navigation-content-item-icon"></i>
+        Help Docs
+      </a>
+      <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+    </div>
+		</div>
+		{% endcomment %}
 </nav>
 
 <script>
   const url = window.location.pathname;
   const navBlogBtn = document.querySelector('#navBlog');
 
-  if (url === '/app/articles') {
+  if (url === '/app/blog') {
     navBlogBtn.classList.add('np-sub-navigation-content-item-active');
     navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
-  }
+	} else if (url === '') {
-</script>
+    navBlogBtn.classList.add('np-sub-navigation-content-item-active');
+    navBlogBtn.classList.remove('np-sub-navigation-content-item-inactive');
+	}
+
+</script>

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

@@ -0,0 +1,13 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.in_catalog %}
+{% include "sub_navigation" %}
+<main class="np-main np-catalog np-subpage-container np-max-width">
+  <div class="np-catalog-header-wrapper">
+    <div class="np-catalog-header">
+      <div class="np-resource-title">Blogs</div>
+      <div class="np-resource-subtitle"></div>
+    </div>
+  </div>
+  {% include "courses_blogs" %}
+</main>
+{% include "footer" %}

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

@@ -1,6 +1,7 @@
 {% assign getting_started_courses = false %}
 {% assign merchandising_courses = false %}
 {% assign analysis_and_reporting_courses = false %}
+{% assign courses_in_progress = false %}
 
 {% for course in courses.in_catalog %}
   {% for category in course.categories %}
@@ -16,6 +17,12 @@
   {% endfor %}
 {% endfor %}
 
+{% for course in courses.enrolled %}
+  {% if course.progress > 0 and course.progress < 100 %}
+    {% assign courses_in_progress = true %}
+  {% endif %}
+{% endfor %}
+
 
 {% include "header" %}
 {% include "course_version_outdated_alert", courses: courses.enrolled %}
@@ -34,11 +41,22 @@
     </div>    
     <div class="np-grid-spacing col-xs-12 col-md-4 progress-section">
       {% include "widget_course_progress" %}
+      {% if features.training_events? %}
+        <div class="heading-container">
+          <div class="carousel-heading">
+            Upcoming Events
+          </div>
+        </div>
+        {% include "training_events_dashboard" %}
+      {% endif %}
     </div>
   </div>
 
   <div class="row dashboard-section-courses">
     <div class="col-xs-12">
+      {% if courses_in_progress %}
+        {% include 'in-progress-carousel' %}
+      {% endif %}
       {% if getting_started_courses %}
         {% include 'getting-started-carousel' %}
       {% endif %}

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

@@ -9,9 +9,9 @@
   </div>
   {% include "sub_navigation" %}
   <div class="np-max-width">
-    <section>
+    {% comment %} <section>
       {% include 'feature_learning_paths' %}
-    </section>
+    </section> {% endcomment %}
     <section>
       {% include 'catalog_categories' %}
     </section>

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

@@ -76,6 +76,43 @@ body {
   color: #fff;
 }
 
+.np-sub-navigation {
+	background-color: #041E42 !important;
+	padding: 25px 0 0 0;
+	margin: 0 0 0 0;
+}
+.np-sub-navigation-content-item-link {
+	height: 15px;
+}
+
+.np-sub-navigation-content-item-inactive {
+	--np-button-color: #ffffff !important;
+	--np-button-font-color: #ffffff !important;
+	color: #ffffff !important;
+}
+.np-sub-navigation-content-item-inactive
+.np-sub-navigation-content-item-link {
+	color: #ffffff;
+}
+
+.np-sub-navigation-content-item-inactive
+.np-sub-navigation-content-item-icon {
+	color: #ffffff;
+}
+
+.np-sub-navigation-content-item-active
+.np-sub-navigation-content-item-link {
+	color: #FFC220;
+}
+
+
+.np-sub-navigation-content-item-active {
+  --np-button-color: #FFC220 !important;
+	--np-button-font-color: #FFC220 !important;
+	color: #FFC220 !important;
+}
+
+
 .feature-lp-card {
   text-decoration: none;
 }
@@ -172,4 +209,7 @@ section {
 }
 .np-content-categories-content-item {
   margin-bottom: 12px;
-}
+}
+.np-zero-state-text {
+  color: #fff;
+}

Custom_Templates/customer_templates/Walmart nTransit Prod/_account_avatar.html.liquid

@@ -0,0 +1,66 @@
+<div class="np-hidden-mobile">
+  <p>{% t .description %}</p>
+  <p>{% t .requirements %}</p>
+</div>
+
+<img
+  alt=""
+  class="np-account-avatar-image"
+  src="{{ form.gravatar_url }}?s=200"
+  id="{{version}}_gravatar_img"
+  {% unless form.use_gravatar? %}style="display: none"{% endunless %}
+/>
+<img
+  alt=""
+  class="np-account-avatar-image"
+  src="{{ form.secure_custom_avatar_url }}"
+  id="{{version}}_custom_avatar_img"
+  {% if form.use_gravatar? %}style="display: none"{% endif %}
+/>
+
+<div class="np-account-avatar-choice">
+  <div class="np-form-field">
+    <label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_true">
+      <span class="radio__input">
+        <input
+          id="{{version}}_learner_use_gravatar_true"
+          name="learner[use_gravatar]"
+          type="radio"
+          value="true"
+          {% if form.use_gravatar? %}checked{% endif %}
+        />
+        <span class="np-button-color radio__control"></span>
+      </span>
+      <span class="radio__label">
+        {% t .use_gravatar %}
+      </span>
+    </label>
+  </div>
+
+  <div class="np-form-field">
+    <label class="radio radio-before np-input-label" for="{{version}}_learner_use_gravatar_false">
+      <span class="radio__input">
+        <input
+          id="{{version}}_learner_use_gravatar_false"
+          name="learner[use_gravatar]"
+          type="radio"
+          value="false"
+          {% unless form.use_gravatar? %}checked{% endunless %}
+        />
+        <span class="np-button-color radio__control"></span>
+      </span>
+      <span class="radio__label">
+        {% t .upload_custom_photo %}
+      </span>
+    </label>
+  </div>
+  <div>
+    <button
+      id="{{version}}_upload_avatar"
+      type="button"
+      class="np-button np-button-secondary" {% if form.use_gravatar? %}style="visibility: hidden"{% endif %}
+    >
+      {% t .upload %}
+    </button>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_account_desktop_view.html.liquid

@@ -0,0 +1,19 @@
+<form class="np-form" action="{{ form.options.action }}" method="post" id="desktop_edit_learner" novalidate>
+  <input type="hidden" name="_method" value="{{ form.options.http_method }}">
+  {% form_authenticity_token %}
+  <div class="np-card">
+    <div class="np-card-container np-card-padding">
+      <div class="row">
+        <div class="col-sm-7 np-account-form">
+          {% render "account_form", form: form, version: "desktop" %}
+          <button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
+            {% t shared.account.save %}
+          </button>
+        </div>
+        <div class="col-sm-5 np-account-avatar">
+          {% include "account_avatar", version: "desktop" %}
+        </div>
+      </div>
+    </div>
+  </div>
+</form>

Custom_Templates/customer_templates/Walmart nTransit Prod/_account_form.html.liquid

@@ -0,0 +1,139 @@
+<div class="np-resource-title">
+  {% t .header %}
+</div>
+<div class="np-form-field {% if form.errors contains 'email' %}np-account-form-field-error{% endif %}">
+  <label class="np-input-label" for="{{version}}_learner_email">{% t shared.email %} *</label>
+  <input
+    {% if form.options.invite? %} disabled {% endif %}
+    autofocus="autofocus"
+    class="np-input"
+    id="{{version}}_learner_email"
+    name="learner[email]"
+    type="email"
+    value="{{ form.email }}"
+  />
+</div>
+<div class="np-form-field {% if form.errors contains 'first_name' %}np-account-form-field-error{% endif %}">
+  <label class="np-input-label" for="{{version}}_learner_first_name">
+    {% t shared.first_name %} *
+  </label>
+  <input
+    class="np-input"
+    id="{{version}}_learner_first_name"
+    name="learner[first_name]"
+    value="{{ form.first_name }}"
+  />
+</div>
+<div class="np-form-field {% if form.errors contains 'last_name' %}np-account-form-field-error{% endif %}">
+  <label class="np-input-label" for="{{version}}_learner_last_name">
+    {% t shared.last_name %} *
+  </label>
+  <input
+    class="np-input"
+    id="{{version}}_learner_last_name"
+    name="learner[last_name]"
+    value="{{ form.last_name }}"
+  />
+</div>
+<div class="np-form-field {% if form.errors contains 'display_name' %}np-account-form-field-error{% endif %}">
+  <label class="np-input-label" for="{{version}}_learner_display_name">
+    {% t .display_name %}
+  </label>
+  <input
+    class="np-input"
+    id="{{version}}_learner_display_name"
+    name="learner[display_name]"
+    value="{{ form.display_name }}"
+  />
+</div>
+
+{% unless form.options.invite?  %}
+  <div class="np-form-field {% if form.errors contains 'current_password' %}np-account-form-field-error{% endif %}">
+    <label class="np-input-label" for="{{version}}_learner_current_password">
+      {% t .current_password %} *
+    </label>
+    <input
+      class="np-input"
+      id="{{version}}_learner_current_password"
+      name="learner[current_password]"
+      type="password"
+    />
+  </div>
+
+  <div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
+    <label class="np-input-label" for="{{version}}_learner_password">
+      {% t .new_password %} *
+    </label>
+    <input
+      class="np-input"
+      id="{{version}}_learner_password"
+      name="learner[password]"
+      type="password"
+    />
+  </div>
+
+  <div class="np-form-field {% if form.errors contains 'password_confirmation' %}np-account-form-field-error{% endif %}">
+    <label class="np-input-label" for="{{version}}_learner_password_confirmation">
+      {% t .confirm_new_password %} *
+    </label>
+    <input
+      class="np-input"
+      id="{{version}}_learner_password_confirmation"
+      name="learner[password_confirmation]"
+      type="password"
+    />
+  </div>
+{% endunless %}
+
+{% if form.options.invite?  %}
+  <div class="np-form-field {% if form.errors contains 'password' %}np-account-form-field-error{% endif %}">
+    <label class="np-input-label" for="{{version}}_learner_password">
+      {% t shared.password %} *
+    </label>
+    <input
+      class="np-input"
+      id="{{version}}_learner_password"
+      name="learner[password]"
+      type="password"
+    />
+  </div>
+
+  {% if form.terms_of_service_required? %}
+    <div class="np-form-field terms-of-service {% if form.errors contains 'terms_of_service_accepted' %}np-account-form-field-error{% endif %}">
+      <input
+        id="{{version}}_learner_terms_of_service"
+        name="learner[terms_of_service_accepted]"
+        type="checkbox"
+      />
+      <div class="label">
+        {% t .terms_of_service %}
+        <a
+          target="_blank"
+          href={{ form.terms_of_service_url }}
+        >
+          {% t .terms_link %}
+        </a>
+      </div>
+    </div>
+  {% else %}
+    <div class="np-margin-top">
+      <span class="np-form-terms ">
+        {% t .terms %}
+        <a
+          class="np-form-link np-button-color"
+          target="_blank"
+          href={{ form.terms_of_service_url }}
+        >
+          {% t .terms_link %}
+        </a>
+      </span>
+    </div>
+  {% endif %}
+
+  <input
+    id="{{version}}_invite_token"
+    name="learner[token]"
+    value="{{ form.invite_token }}"
+    type="hidden"
+  />
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_account_mobile_view.html.liquid

@@ -0,0 +1,17 @@
+<form class="np-form" action="{{ form.options.action }}" method="post" id="mobile_edit_learner" novalidate>
+  <input type="hidden" name="_method" value="{{ form.options.http_method }}">
+  {% form_authenticity_token %}
+  <div class="np-card np-account-form">
+    <div class="np-card-container np-card-padding">
+      {% render "account_form", form: form, version: "mobile" %}
+    </div>
+  </div>
+  <div class="np-card np-account-avatar">
+    <div class="np-card-container np-card-padding">
+      {% include "account_avatar", version: "mobile" %}
+    </div>
+  </div>
+  <button type="submit" class="np-button np-button-big np-button-large-font np-form-action">
+    {% t shared.account.save %}
+  </button>
+</form>

Custom_Templates/customer_templates/Walmart nTransit 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 nTransit Prod/_bottom_menu.html.liquid

@@ -0,0 +1,51 @@
+<div class="bottom-menu-wrapper">
+    <div class="bottom-menu-container">
+        <a href="/app" id="home" class="menu-link">
+            <div class="menu-icon-container">
+                <i class="far fa-home menu-icon"></i>
+            </div>
+            Home
+        </a>
+        <a href="/app" id="profile" class="menu-link">
+            <div class="menu-icon-container">
+                <i class="far fa-user menu-icon"></i>
+            </div>
+           Profile
+        </a>
+    </div>
+</div>
+
+<style>
+    .bottom-menu-wrapper {
+        padding-bottom: 90px;
+    }
+    .bottom-menu-container {
+        display: flex;
+        justify-content: center;
+        gap: 15%;
+        background: #F4F4F5;
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        padding: 20px;
+        z-index: 11;
+    }
+    .menu-link {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 5px;
+        text-decoration: none;
+        color: #5D5E63;
+    }
+</style>
+
+<script>
+    const url = window.location.pathname;
+    const homeBtn = document.getElementById('home')
+    const profileBtn = document.getElementById('profile')
+
+    if (url === '/app') {
+        homeBtn.style.color = "#0071DC";
+    }
+</script>

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

@@ -0,0 +1,53 @@
+{% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+<a class="card-course" href="{{ course_path }}">
+  <div class="course-image-container">
+    <img
+    class="card-image"
+    alt="{{ course.name }}"
+    src="{{ course.image_url }}"
+    >
+  </div>
+  <div class="course-content-container">
+    <div class="course-heading">
+      {{ course.name }}
+    </div>
+    <div class="course-description">
+      {{ course.short_description }}
+    </div>
+  </div>
+</a>
+
+{% comment %} <div class="np-card">
+  <div class="np-card-container">
+    {% if course.ribbon %}
+      <div class="np-card-ribbon">
+        {{ course.ribbon }}
+      </div>
+    {% endif %}
+    <img
+      class="np-card-image"
+      alt="{{ course.name }}"
+      src="{{ course.image_url }}"
+    >
+    <div class="np-card-content np-card-content-vertical np-card-padding">
+      <h3 class="np-card-content-title">
+        {{ course.name }}
+      </h3>
+      <div class="np-card-content-subtitle">
+        {{ course.instructor_names }}
+      </div>
+      <div class="np-card-content-footer">
+        <div class="np-card-content-progress np-button-color">
+          {% t shared.progress, count: course.progress %}
+        </div>
+        {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+        {% if course.has_to_restart? %}
+          {% include "course_version_outdated_popup", path: course_path %}
+        {% endif %}
+        <a class="np-button np-button-wide" href="{{ course_path }}">
+          {% t shared.view %}
+        </a>
+      </div>
+    </div>
+  </div>
+</div> {% endcomment %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_cards_course_categories.html.liquid

@@ -0,0 +1,23 @@
+{% if course.completed? %}
+    {% assign course_status = "Completed" %}
+{% elsif course.started? %}
+    {% assign course_status = "In Progress" %}
+{% else %}
+    {% assign course_status = "Not Started" %}
+{% endif %}
+
+<a class="category-course-card-wrapper" href="{% route course, id: course.id %}">
+    <div class="category-course-card">
+        <div class="category-course-header">
+            <div class="category-course-card-name">
+                {{ course.name }}
+            </div>
+            <div class="category-course-card-status" data-status="{{ course_status | replace: ' ', '-' | downcase }}">
+                {{ course_status }}
+            </div>
+        </div>
+        <div class="category-course-card-description">
+            {{ course.short_description }}
+        </div>
+    </div>
+</a>

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

@@ -0,0 +1,70 @@
+<div class="np-card np-no-horizontal-padding">
+  <div class="np-card-container">
+    <div class="np-learning-path">
+      <img
+        alt="{{ learning_path.name }}"
+        class="np-card-image np-learning-path-image"
+        src="{{ learning_path.image_url }}"
+      />
+      <div class="np-card-text-wrapper">
+        <div class="np-hidden-desktop np-card-header">
+          <i class="np-card-header-icon far fa-road"></i>
+          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
+          <div class="np-hidden-desktop  np-card-header-items-count">
+            {{ learning_path.items.count }} {% t .items %}
+          </div>
+        </div>
+        <div class="np-hidden-mobile np-card-header">
+          <div class="np-card-header-type">{% t shared.learning_path.title %}</div>
+          <i class="np-card-header-icon far fa-road"></i>
+        </div>
+
+        <div class="np-card-content np-card-padding np-card-content-vertical">
+          <h3 class="np-card-content-title">
+            {{ learning_path.name }}
+          </h3>
+
+          <div class="np-card-content-subtitle">
+            {{ learning_path.instructor_names }}
+          </div>
+
+          <div class="np-hidden-mobile np-card-content-description">
+            {{ learning_path.description }}
+          </div>
+
+          <div class="np-hidden-mobile np-card-content-progress
+          np-button-color">
+            {% t shared.progress, count: learning_path.progress %}
+          </div>
+
+          <div class="np-hidden-mobile np-card-progress-bar-container">
+            <div
+              style="width: {{ learning_path.progress }}%"
+              class="np-button-background-color np-card-progress-bar">
+            </div>
+          </div>
+
+          <div class="np-card-content-footer">
+            <div class="np-hidden-desktop np-card-content-progress
+            np-button-color">
+              {% t shared.progress, count: learning_path.progress %}
+            </div>
+            <a class="np-button" href="{% route learning_path, id: learning_path.id %}">
+              {% t shared.view %}
+            </a>
+            <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">
+                {{ learning_path.items.count }} {% t .items %}
+              </span>
+            </span>
+          </div>
+        </div>
+      </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 nTransit Prod/_cards_training_event.html.liquid

@@ -0,0 +1,53 @@
+<div class="np-card np-card-training-event">
+  <div class="np-card-container">
+    <div class="np-card-content-training-event">
+      <h3 class="np-card-content-title">
+        {{ training_event.title }}
+      </h3>
+      <div class="np-card-content-subtitle">
+        <i class="far {{ training_event.event_type_icon }} np-training-session-icon"></i>
+        {% t shared.event_types, key: training_event.event_type %}
+        <span class="np-card-training-sessions-separator">•</span>
+        <i class="np-card-training-sessions-icon far fa-calendar-star"></i>
+        <span class="np-card-training-sessions-label">
+          {% t .sessions, count: training_event.sessions.size %}
+        </span>
+      </div>
+      <div class="np-card-training-session">
+        <span class="np-card-content-label">
+          {% t .next_session %} -
+          <span class="{{ training_event.sessions.first.status.type}}">
+            {{ training_event.sessions.first.status.label}}
+          </span>
+        </span>
+        <div class="np-card-training-session-date">
+          <div class="np-button-background-color np-card-training-session-date-bar"></div>
+          <div class="np-card-training-session-date-label">
+            <div class="np-card-training-session-date-day">
+              {{ training_event.sessions.first.day }}
+            </div>
+            <div>
+              <div class="np-card-training-session-date-month">
+                {{ training_event.sessions.first.month }}
+              </div>
+              <div class="np-card-training-session-date-year">
+                {{ training_event.sessions.first.year }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="np-card-content np-card-content-vertical np-card-content-training-event">
+      <div class="np-card-training-sessions">
+
+        <a
+          class="np-button np-button-wide"
+          href="{% route training_session, id: training_event.sessions.first.id %}"
+        >
+          {% t shared.view %}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_certificates_info_column.html.liquid

@@ -0,0 +1,4 @@
+<div class="col-xs-12 col-md-4 spacing-clear">
+  {% include "certificates_verification" %}
+  {% include "certificates_metadata" %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_certificates_metadata.html.liquid

@@ -0,0 +1,59 @@
+<div class="np-card spacing-clear">
+  <div class="np-card-container padding-spacing-8">
+    <div class="row np-certificate-metadata-row">
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-title" >
+          {% t .learner %}
+        </p>
+      </div>
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-value">
+          {{certificate.learner_name}}
+        </p>
+      </div>
+    </div>
+    <div class="line"></div>
+
+    {% if certificate.issuer_name_enabled? %}
+      <div class="row  np-certificate-metadata-row">
+        <div class="col-xs-6 col-md-6">
+          <p class="np-certificate-metadata-title">
+            {% t .issued_by %}
+          </p>
+        </div>
+        <div class="col-xs-6 col-md-6">
+          <p class="np-certificate-metadata-value">
+            {{ certificate.issuer_name }}
+          </p>
+        </div>
+      </div>
+      <div class="line"></div>
+    {% endif %}
+
+    <div class="row np-certificate-metadata-row">
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-title" >
+          {% t .issued_on %}
+        </p>
+      </div>
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-value">
+          {{ certificate.issue_date }}
+        </p>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="row np-certificate-metadata-row">
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-title" >
+          {% t .expires_on %}
+        </p>
+      </div>
+      <div class="col-xs-6 col-md-6">
+        <p class="np-certificate-metadata-value">
+          {{ certificate.expiration_date_translation }}
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_certificates_preview.html.liquid

@@ -0,0 +1,35 @@
+<script type="text/javascript">
+  const resizeIframe = () => {
+    const combinedPadding = 16;
+    const previewIframe = document.getElementById("previewIframe");
+    const previewIFrameCard = document.getElementById("previewIFrameCard");
+    const templateInPreviewContainer = previewIframe.contentWindow.document.querySelector('.np-certificate-container');
+    const previewIframeContentHeight = templateInPreviewContainer.offsetHeight;
+    const previewIframeContentWidth = templateInPreviewContainer.offsetWidth;
+    const certificateRatio = previewIframeContentHeight / previewIframeContentWidth;
+
+    templateInPreviewContainer.style.margin = 0;
+    previewIFrameCard.style.height = `${previewIFrameCard.offsetWidth * certificateRatio}px`;
+
+    const scaledIframeWidth = previewIFrameCard.offsetWidth - combinedPadding;
+    const scaledIframeHeight = scaledIframeWidth * certificateRatio;
+    const scale = scaledIframeHeight / previewIframeContentHeight;
+
+    previewIframe.style.transform = `scale(${scale})`;
+  }
+
+  window.onresize = resizeIframe;
+</script>
+
+<div class="col-xs-12 col-md-8 np-certificate-iframe-container">
+  <div class="np-card spacing-clear">
+    <div id="previewIFrameCard" class="np-card-container np-certificate-card">
+      <iframe
+        id="previewIframe"
+        onload="resizeIframe()"
+        class="np-certificate-iframe-preview"
+        srcdoc="{{ certificate.certificate_template_html }}"
+      ></iframe>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_certificates_top_bar.html.liquid

@@ -0,0 +1,44 @@
+<div class="top-bar np-certificate-top-bar-spacing">
+  <div class="top-bar__container uk-container uk-container-center uk-padding-horizontal np-max-width">
+    <div class="top-bar__col">
+      <h2 class="np-certificate-title" >
+        {{certificate.certificate_name}}
+      </h2>
+    </div>
+    <div class="button-container np-certificate-button-container">
+      {% if certificate.linkedin_sharing_enabled and current_person.signed_in? and certificate.learner_uuid == current_person.id %}
+        <a
+          class="np-button np-certificate-button np-certificate-button-secondary"
+          href="{{certificate.linkedin_share_url}}"
+          target="_blank"
+        >
+          <i class="fab fa-linkedin np-certificate-share-icon"></i>
+          {% t .share %}
+        </a>
+      {% endif %}
+      <button
+        id="print"
+        type="button"
+        class="np-button np-certificate-button np-certificate-button-secondary np-certificate-button-print"
+      >
+        {% t .print %}
+      </button>
+      {% if certificate.generating_pdf %}
+        <div class="np-button np-certificate-button np-certificate-button-primary np-certificate-spinner-container">
+          <i class="loader fad fa-spinner-third fa-spin np-certificate-spinner-icon np-button-font-color"></i>
+        </div>
+      {% else %}
+        <a
+        href="{{ certificate.download_url }}"
+        aria-label="{% t .download %}"
+        target="_blank"
+        rel="noopener noreferrer"
+        download
+        class="np-button np-certificate-button np-certificate-button-primary np-button-font-color"
+        >
+          {% t .download %}
+        </a>
+      {% endif %}
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_certificates_verification.html.liquid

@@ -0,0 +1,15 @@
+<div class="np-card spacing-clear np-certificate-verification-card">
+  <div class="np-card-container np-certificate-verification-container">
+    <div class="np-certificate-verification-icon-container np-certificate-verification-icon-container-{{certificate.verification_status}}">
+      <i class="far fa-{{certificate.verification_icon}} np-certificate-verification-icon"></i>
+    </div>
+    <div class="np-certificate-verification-info-container">
+      <h2 class="np-certificate-verification-info-status spacing-clear">
+       {{certificate.verification_title}}
+      </h2>
+      <p class="np-certificate-verification-info-description spacing-clear">
+        {{certificate.verification_description}}
+      </p>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_activity_locked.html.liquid

@@ -0,0 +1,4 @@
+<i class="far fa-lock-alt np-course-outline-content-activity-icon-locked"></i>
+<span class="np-course-outline-content-activity-title">
+  {{ activity.title }}
+</span>

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_activity_unlocked.html.liquid

@@ -0,0 +1,15 @@
+{% if course.enrolled? %}
+  <a
+    href="{% route activity_viewer,
+      id: activity.id,
+      course_id: params.course_id,
+      learning_path_id: params.learning_path_id
+    %}" class="{{ class }}"
+  >
+    {{ activity.title }}
+  </a>
+{% else%}
+  <span class="{{ class }}">
+    {{ activity.title }}
+  </span>
+{% endif %}

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

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

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_description.html.liquid

@@ -0,0 +1,6 @@
+<h3 class="np-card-heading">
+  {% t .header, key: current_school.course_vocabulary %}
+</h3>
+<div class="np-card-text">
+  {{ course.full_description }}
+</div>

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

@@ -0,0 +1,40 @@
+<div class="np-card-container">
+  <div class="np-resource-header np-course-header np-card-padding-large">
+    {% include "course_header" %}
+  </div>
+  <div class="np-divider"></div>
+  <div class="row np-course-content np-card-padding-dynamic">
+    <div class="col-xs-12 col-sm-6">
+      <img
+        src="{{ course.image_url }}"
+        class="np-top-image np-top-image-spacing"
+        alt="{{ course.name }}"
+      />
+      {% include "course_description" %}
+
+      {% if course.categories.any? %}
+        <div class="np-card-content-divider">
+          {% include "course_categories" %}
+        </div>
+      {% endif %}
+
+      {% if course.instructors.any? %}
+        <div class="np-card-content-divider">
+          {% include "course_instructors" %}
+        </div>
+      {% endif %}
+
+      {% if course.events.any? %}
+        <div class="np-card-content-divider">
+          {% include "course_events" %}
+        </div>
+      {% endif %}
+    </div>
+    <div class="np-grid-spacing col-xs-12 col-sm-6">
+      <div class="np-top-cta">
+        {% include "course_progress_and_cta" %}
+      </div>
+      {% include "course_outline" %}
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_events.html.liquid

@@ -0,0 +1,28 @@
+<h3 class="np-card-heading">
+  {% t .header %}
+</h3>
+<div class="np-flex-column">
+  {% for event in course.events %}
+    <div class="np-course-events-content-item">
+      <div class="np-course-events-content-date np-button-background-color">
+        <div class="np-course-events-content-month">
+          {{ event.sessions.first.abbreviated_month }}
+        </div>
+        <div class="np-course-events-content-day">
+          {{ event.sessions.first.day }}
+        </div>
+      </div>
+      <div class="np-course-events-content-details">
+        <div class="np-course-events-content-name">
+          {{ event.title }}
+        </div>
+        <div class="np-course-events-content-type np-text-light">
+          {% t shared.event_types, key: event.event_type %}
+        </div>
+        <div class="np-course-events-content-time np-button-color">
+          {{ event.sessions.first.time_period }} {{ event.sessions.first.time_zone }}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

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

@@ -0,0 +1,16 @@
+<div class="np-top-vocabulary np-text-title np-text-muted">
+  {{ current_school.course_vocabulary }}
+  <i class="far fa-graduation-cap np-button-color np-learning-path-icon np-hidden-mobile">
+  </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-hidden-mobile np-icon-back"></i>
+  </a>
+  {{ course.name }}
+</div>
+<img
+  src="{{ course.image_url }}"
+  class="np-top-image np-hidden-desktop"
+  alt="{{ course.name }}"
+/>

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_instructors.html.liquid

@@ -0,0 +1,22 @@
+<h3 class="np-card-heading">
+  {% t .header %}
+</h3>
+<div class="np-flex">
+  {% for instructor in course.instructors %}
+    <div class="np-content-instructors-content-item">
+      <img
+        src="{{ instructor.avatar_url }}"
+        class="np-content-instructors-content-image"
+        alt="{{ instructor.name }}"
+      />
+      <div class="np-content-instructors-content-description">
+        <div class="np-content-instructors-content-name">
+          {{ instructor.name }}
+        </div>
+        <div class="np-content-instructors-content-info np-text-light">
+          {{ instructor.title }}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_mobile_view.html.liquid

@@ -0,0 +1,40 @@
+<div class="np-card-container np-card-padding-large">
+  {% include "course_header" %}
+  <div class="np-top-cta">
+    {% include "course_progress_and_cta" %}
+  </div>
+</div>
+
+{% if course.progress == 0 %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_description" %}
+  </div>
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_outline" %}
+  </div>
+{% else %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_outline" %}
+  </div>
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_description" %}
+  </div>
+{% endif %}
+
+{% if course.categories.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_categories" %}
+  </div>
+{% endif %}
+
+{% if course.instructors.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_instructors" %}
+  </div>
+{% endif %}
+
+{% if course.events.any? %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "course_events" %}
+  </div>
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_outline.html.liquid

@@ -0,0 +1,40 @@
+<div class="np-course-outline">
+  <div class="np-text-title np-course-outline-title">
+    {% t .header, key: current_school.course_vocabulary %}
+  </div>
+  <div class="np-course-outline-content">
+    <ol class="np-course-outline-content-section">
+      {% for section in course.sections %}
+        <li class="np-course-outline-content-section-list">
+          <div class="np-course-outline-content-section-name np-text-title-bold np-text-title-bold">
+            {{ section.name }}
+          </div>
+          <ol class="np-course-outline-content-activity">
+            {% for activity in section.activities %}
+
+              <li class="np-course-outline-content-activity-list">
+                {% if activity.completed? %}
+                  <i class="fas fa-circle np-course-outline-content-activity-icon np-button-color"></i>
+                  {% if activity.locked? %}
+                    {% include "course_activity_locked" %}
+                  {% else %}
+                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link-completed" %}
+                  {% endif %}
+                  <div class="np-button-background-color np-course-outline-content-activity-list-bar"></div>
+                {% else %}
+                  <i class="far fa-circle np-course-outline-content-activity-icon"></i>
+                  {% if activity.locked? %}
+                    {% include "course_activity_locked" %}
+                  {% else %}
+                    {% include "course_activity_unlocked", class: "np-course-outline-content-activity-link" %}
+                  {% endif %}
+                  <div class="np-course-outline-content-activity-list-bar"></div>
+                {% endif %}
+              </li>
+            {% endfor %}
+          </ol>
+        </li>
+      {% endfor %}
+    </ol>
+  </div>
+</div>

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

@@ -0,0 +1,46 @@
+<div class="np-top-cta-progress-content">
+  <div class="np-top-cta-progress-title np-text-title">
+    {% t .header %}
+  </div>
+  <div class="np-progress-bar-container">
+    <div
+      style="width: {{ course.progress }}%"
+      class="np-button-background-color np-card-progress-bar">
+    </div>
+  </div>
+
+  <div class="np-top-cta-progress-text
+    {% if course.completed? %} np-color-success {% else %} np-button-color {% endif %}
+  ">
+    {% t shared.progress, count: course.progress %}
+  </div>
+</div>
+
+{% if course.learner_can_retake? %}
+  <form action="{% route course_retake, id: course.id %}" method="POST">
+    {% form_authenticity_token %}
+    <button type="submit" class="np-top-button np-button-font-color np-button np-button-big">
+      {% t .retake, key: current_school.course_vocabulary %}
+    </button>
+  </form>
+{% else %}
+  <a
+    class="np-top-button np-button-font-color np-button np-button-big"
+  {% if course.enrolled? %}
+      href="{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}"
+  {% else %}
+      href="{% route course_enrollment, code: course.enrollment_code %}"
+  {% endif %}
+  >
+    {% if course.enrolled? == false %}
+      {% t shared.enroll %}
+    {% elsif course.started? == false %}
+      {% t shared.course.start, key: current_school.course_vocabulary %}
+    {% elsif course.completed? %}
+      {% t shared.course.view, key: current_school.course_vocabulary %}
+    {% else %}
+      {% t shared.continue %}
+    {% endif %}
+  </a>
+{% endif %}
+

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_version_outdated_alert.html.liquid

@@ -0,0 +1,7 @@
+{% if courses.include_courses_to_restart? %}
+  <div role="alert" class="np-alert np-alert-global np-alert-info">
+    <div class="np-alert-container uk-container uk-container-center">
+      {% t .content %}
+    </div>
+  </div>
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_course_version_outdated_popup.html.liquid

@@ -0,0 +1,33 @@
+<div class="np-course-version-outdated-popup np-popup">
+  <div class="np-popup-positioner">
+    <i
+      class="np-course-version-outdated-popup-trigger fas fa-exclamation-circle"
+      data-toggle-class-on-target="np-popup-tooltip--visible"
+      data-toggle-target-parent=".np-popup-tooltip"
+      data-toggle-outside
+    ></i>
+    <div
+      class="np-popup-tooltip"
+      role="tooltip"
+      aria-hidden="true"
+    >
+      <header class="np-popup-header">
+        <i class="np-popup-header-icon fas fa-exclamation-circle"></i>
+        <h3 class="np-popup-header-title">
+          {% t .title %}
+        </h3>
+      </header>
+      <div class="np-popup-body">
+        <h4>{% t .body.header %}</h4>
+        <p>{% t .body.content %}</p>
+        <a
+          class="np-popup-body-button"
+          href="{{ path }}"
+        >
+          {% t .body.button %}
+        </a>
+      </div>
+      <div class="np-popup-tail"></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,16 @@
+{% if courses.in_catalog.any? %}
+  <div class="np-catalog-courses row row-with-thumbnails">
+    {% for course in courses.in_catalog %}
+      <div class="col-xs-12 col-md-6 col-lg-4 np-stretch-content">
+        {% include "cards_course" with course %}
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.catalog,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state", message: message %}
+{% endif %}

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

@@ -0,0 +1,16 @@
+{% if courses.enrolled.any? %}
+  <div class="row row-with-thumbnails">
+    {% for course in courses.enrolled %}
+      <div class="{{ class }}">
+        {% include "cards_course" with course %}
+      </div>
+    {% endfor %}
+  </div>
+{% else %}
+  {% capture message %}
+    {% t shared.zero_state.courses.index,
+      key: current_school.course_vocabulary
+    %}
+  {% endcapture %}
+  {% include "courses_zero_state", message: message %}
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_courses_zero_state.html.liquid

@@ -0,0 +1,6 @@
+<div class="np-dashboard-resources-container">
+  <div class="np-zero-state-text">
+    {{ message }}
+  </div>
+  <img class="np-zero-state-courses" alt="{{ message }}" />
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_featured_section.html.liquid

@@ -0,0 +1,31 @@
+<div class="featured-section-container">
+    <div class="featured-carousel">
+    {% for course in courses.in_catalog %}
+        {% if course.properties.featured_course %}
+            {% include 'cards_course' %}
+        {% endif %}
+    {% endfor %}
+    </div>
+</div>
+
+<script type="module">
+    var slider = tns({
+        container: '.featured-carousel',
+        items: 1,
+        slideBy: 'page',
+        autoplay: false,
+        controls: false,
+        navPosition: 'bottom',
+        autoplayButtonOutput: false,
+        responsive: {
+            768: {
+                items: 2,
+                gutter: 10
+            },
+            1024: {
+                items: 3,
+                gutter: 30
+            }
+        }
+  });
+  </script>

Custom_Templates/customer_templates/Walmart nTransit Prod/_filter_checkbox.html.liquid

@@ -0,0 +1,10 @@
+<input
+  id={{value}}
+  name={{ name }}
+  value={{ value }}
+  type="checkbox"
+  {% if selected %} checked="checked" {% endif %}
+/>
+<label for={{value}}>
+  {{label}}
+</label>

Custom_Templates/customer_templates/Walmart nTransit Prod/_filter_dropdown.html.liquid

@@ -0,0 +1,33 @@
+<div class="np-filter">
+  <div class="dropdown">
+    <button
+      class="np-button dropdown-button"
+      data-toggle-class="is-open"
+      data-toggle-escape
+      data-toggle-outside
+      data-toggle-target-next
+      type="button"
+    >
+      {% t shared.filters.filter %}
+    </button>
+
+    <div class="dropdown-menu" data-test="modal">
+      <form method="get">
+        {%
+          include "filter_select",
+          filters: filters,
+          key: key,
+          label: label
+        %}
+
+        <button
+          class="np-button dropdown-button-apply"
+          data-toggle-trigger-off
+          type="submit"
+        >
+          {% t shared.filters.apply %}
+        </button>
+      </form>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_filter_select.html.liquid

@@ -0,0 +1,22 @@
+{% if params.q %}
+  <input type="hidden" name="q" value="{{ params.q }}">
+{% endif %}
+
+<label class="dropdown-label" for="filter[category_uuid][in][]">
+  {{ label }}
+</label>
+
+<select
+  class="np-filter-select"
+  multiple
+  name="filter[{{ key }}][in][]"
+>
+  {% for filter in filters %}
+    <option
+      value="{{ filter.value }}"
+      {% if filter.selected? %} selected="selected" {% endif %}
+    >
+      {{ filter.name }}
+    </option>
+  {% endfor %}
+</select>

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

@@ -0,0 +1,78 @@
+<footer class="np-footer">
+  <div class="np-footer-top">
+    {% if website_footer.show_navigation_links? %}
+      <div class="np-footer-navigation">
+        <ul class="np-footer-navigation-list">
+          {% for website_navigation in navigations.footer_navigations %}
+            <li class="np-footer-navigation-item">
+              <a
+                class="np-footer-navigation-link np-button-color"
+                href="{{ website_navigation.path }}"
+                {% if website_navigation.external? %} target="_blank" {% endif %}
+              >
+                {{ website_navigation.name }}
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      </div>
+    {% endif %}
+    {% if current_school.logo_url %}
+      <h2 class="np-footer-logo">
+        <a href="{% route home %}">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-footer-logo-image"
+            src="{{ current_school.logo_url }}"
+          />
+        </a>
+      </h2>
+    {% else %}
+      <div class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </div>
+    {% endif %}
+  </div>
+
+  <div class="np-footer-bottom">
+    <nav class="np-footer-social-links">
+      {% if website_footer.show_social_media_links? %}
+        <ul class="np-footer-social-links-list">
+          {% for social_media_link in website_footer.social_media_links %}
+            <li class="np-footer-social-links-item">
+              <a
+                class="np-footer-social-links-link np-button-color"
+                href="{{ social_media_link.link }}"
+                target="_blank" title="{{ social_media_link.name }}"
+              >
+                <i class="np-footer-social-links-icon
+                  np-button-color
+                  fab fa-{{ social_media_link.name }}"
+                ></i>
+              </a>
+            </li>
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </nav>
+
+    {% if website_footer.show_customer_service_email? and
+      website_footer.school_customer_service_email
+    %}
+      <div class="np-footer-support">
+        <div class="np-footer-support-item np-footer-support-help">
+          {% t .need_help %}
+        </div>
+        <div class="np-footer-support-item np-footer-support-email">
+          {% t .email %}
+        </div>
+        <a
+          class="np-footer-support-item np-footer-support-link np-button-color"
+          href="mailto:{{ website_footer.school_customer_service_email }}"
+        >
+          {{ website_footer.school_customer_service_email }}
+        </a>
+      </div>
+    {% endif %}
+  </div>
+</footer>

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

@@ -0,0 +1,7 @@
+{% styles default %}
+{% styles colors %}
+{% styles custom %}
+
+    <!--Tiny Slider-->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.4/tiny-slider.css">

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

@@ -0,0 +1,60 @@
+<header class="np-header np-header-color">
+  <div class="np-header-content">
+    {% comment %} <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 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"
+        >
+          <img
+            alt="{{ current_person.name }}"
+            class="np-header-avatar-image"
+            src="{{ current_person.avatar_url }}"
+          />
+        </button>
+      {% endif %}
+    </div> {% endcomment %}
+    {% if current_school.logo_url %}
+      <div class="np-header-logo">
+        <a href="{% route home %}" style="color: #F4F4F5; text-decoration: none; display: flex; align-items: center; gap: 10px;">
+          <img
+            alt="{{ current_school.name }}"
+            class="np-header-logo-image"
+            src="{{ current_school.logo_url }}"
+          />
+            NTransit
+        </a>
+      </div>
+    {% else %}
+      <a href="{% route home %}" class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </a>
+    {% endif %}
+
+    <div class="np-hidden-mobile np-header-desktop-nav">
+      <ul class="np-header-desktop-nav-list">
+        {% for website_navigation in navigations.header_navigations_external %}
+          <li class= "np-header-desktop-nav-item">
+            <a
+              href="{{ website_navigation.path }}"
+              class="np-header-desktop-nav-link np-header-font-color"
+              target="_blank"
+            >
+              {{ website_navigation.name }}
+            </a>
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
+  </div>
+</header>
+
+{% include "messages" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_header_minimal.html.liquid

@@ -0,0 +1,17 @@
+<header class="np-box-header np-header-color">
+  <a class="np-box-header-link" href="{% route home %}">
+    {% if current_school.logo_url %}
+      <img
+        alt="{{ current_school.name }}"
+        src="{{ current_school.logo_url }}"
+        class="np-box-header-logo"
+      />
+    {% else %}
+      <span class="np-school-name np-header-font-color">
+        {{ current_school.name }}
+      </span>
+    {% endif %}
+  </a>
+</header>
+
+{% include "messages" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_banners.html.liquid

@@ -0,0 +1,5 @@
+{% if learning_path.new_content_available? %}
+  {% include "learning_path_new_content_banner" %}
+{% else %}
+  {% include "learning_path_completed_banner" %}
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_certificate.html.liquid

@@ -0,0 +1,17 @@
+{% if learning_path.has_certificate? %}
+  {% if learning_path.certificate_completed? %}
+    <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
+    <a
+      class="np-learning-path-certificate-link"
+      href="{{ learning_path.certificate_link }}"
+    >
+      <div class="np-learning-path-certificate">
+        {% include "learning_path_certificate_content" %}
+      </div>
+    </a>
+  {% else %}
+    <div class="np-learning-path-certificate np-learning-path-certificate--inactive">
+      {% include "learning_path_certificate_content" %}
+    </div>
+  {% endif %}
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_certificate_content.html.liquid

@@ -0,0 +1,19 @@
+<div class="np-learning-path-certificate-content">
+  <div class="np-learning-path-certificate-avatar" role="img">
+    <i class="np-learning-path-certificate-avatar-icon fal fa-award"></i>
+    <h5 class="np-learning-path-certificate-avatar-title">
+      {% t .avatar_title %}
+    </h5>
+  </div>
+  <h4 class="np-learning-path-certificate-name">
+    {{ learning_path.certificate_name }}
+  </h4>
+  {% if learning_path.certificate_completed? %}
+    <time
+      class="np-learning-path-certificate-issue-date"
+      datetime="{{ learning_path.certificate_issue_date }}"
+    >
+      {{ learning_path.certificate_issue_date | date: "%B %d, %Y" }}
+    </time>
+  {% endif  %}
+</div>

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

@@ -0,0 +1,13 @@
+<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">
+    <h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
+    <p class="np-learning-path-banner-description">{% t .description %}</p>
+    <div class="np-learning-path-banner-actions">
+      {% if learning_path.certificate_link %}
+        <a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--primary">{% t .actions.certificate %}</a>
+      {% endif %}
+      <a href="/app/courses" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.more_courses %}</a>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,56 @@
+{% if learning_path.enrolled? and course.unlocked? %}
+  <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-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>
+{% 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>
+      {% if course.optional? %}
+        <div class="np-optional-ribbon">
+          {% t shared.optional %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_description.html.liquid

@@ -0,0 +1,6 @@
+<h3 class="np-card-heading">
+  {% t .about %}
+</h3>
+<div class="np-card-text">
+  {{ learning_path.description }}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_desktop_content.html.liquid

@@ -0,0 +1,21 @@
+<div class="row">
+  <div class="col-xs-12 col-sm-6">
+    <div class="np-card-container">
+      <img
+        src="{{ learning_path.image_url }}"
+        class="np-top-image"
+        alt="{{ learning_path.name }}"
+      />
+      <div class="np-card-padding-dynamic">
+        {% include "learning_path_description" %}
+        {% include "learning_path_instructors" %}
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-6 np-grid-spacing">
+    <div class="np-top-cta">
+      {% include "learning_path_progress_and_cta" %}
+    </div>
+    {% include "learning_path_outline" %}
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_desktop_header.html.liquid

@@ -0,0 +1,12 @@
+<div class="np-resource-header np-resource-header-card np-card-padding-large">
+  <div class="np-top-vocabulary np-text-title">
+    {% 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>

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

@@ -0,0 +1,2 @@
+{% include "learning_path_desktop_header" %}
+{% include "learning_path_desktop_content" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_instructors.html.liquid

@@ -0,0 +1,26 @@
+{% if learning_path.instructors.any? %}
+  <div class="np-card-content-divider">
+    <h3 class="np-card-heading">
+      {% t shared.instructors %}
+    </h3>
+    <div class="np-content-instructors-content row">
+      {% for instructor in learning_path.instructors %}
+        <div class="np-content-instructors-content-item col-xs-12 col-lg">
+          <img
+            src="{{ instructor.avatar_url }}"
+            class="np-content-instructors-content-image"
+            alt="{{ instructor.name }}"
+          >
+          <div class="np-content-instructors-content-description">
+            <div class="np-content-instructors-content-name">
+              {{ instructor.name }}
+            </div>
+            <div class="np-content-instructors-content-info np-text-light">
+              {{ instructor.title }}
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_mobile_content.html.liquid

@@ -0,0 +1,19 @@
+{% if learning_path.in_progress? %}
+  {% include "learning_path_outline" %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% include "learning_path_description" %}
+  </div>
+{% else %}
+  <div class="np-card-container np-card-padding np-card-spacing">
+    {% 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 nTransit Prod/_learning_path_mobile_header.html.liquid

@@ -0,0 +1,17 @@
+<div class="np-resource-header np-card-padding-vertical">
+  <div class="np-top-vocabulary np-text-title">
+    {% 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>
+  <img
+    src="{{ learning_path.image_url }}"
+    class="np-top-image"
+    alt="{{ learning_path.name }}"
+  />
+  <div class="np-top-cta">
+    {% include "learning_path_progress_and_cta" %}
+  </div>
+</div>

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

@@ -0,0 +1,2 @@
+{% include "learning_path_mobile_header" %}
+{% include "learning_path_mobile_content" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_new_content_banner.html.liquid

@@ -0,0 +1,12 @@
+<div class="np-learning-path-new-content-banner np-learning-path-banner">
+  <div class="np-learning-path-banner-content">
+    <h3 class="np-learning-path-banner-headline">{% t .headline %}</h3>
+    <p class="np-learning-path-banner-description">{% t .description %}</p>
+    <div class="np-learning-path-banner-actions">
+      {% learning_path_next_step_button learning_path, class: "np-learning-path-banner-action np-learning-path-banner-action--primary" %}
+      {% if learning_path.certificate_link %}
+        <a href="{{ learning_path.certificate_link }}" class="np-learning-path-banner-action np-learning-path-banner-action--secondary">{% t .actions.view_certificate %}</a>
+      {% endif %}
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_outline.html.liquid

@@ -0,0 +1,10 @@
+<div class="np-learning-path-outline">
+  {% for item in learning_path.items %}
+    {% if item.course? %}
+      {% include "learning_path_course", course: item %}
+    {% elsif item.training_event? %}
+      {% include "learning_path_training_session", training_session: item %}
+    {% endif %}
+  {% endfor %}
+  {% include "learning_path_certificate" %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_progress_and_cta.html.liquid

@@ -0,0 +1,20 @@
+{% if learning_path.enrolled? %}
+  <div class="np-top-cta-progress-content">
+    <div class="np-top-cta-progress-title np-text-title">
+      {% t .progress %}
+    </div>
+    <div class="np-progress-bar-container">
+      <div
+        style="width: {{ learning_path.progress }}%"
+        class="np-button-background-color np-card-progress-bar">
+      </div>
+    </div>
+    <div class="np-top-cta-progress-text
+      {% if learning_path.completed? %} np-color-success {% else %} np-button-color {% endif %}
+    ">
+      {% t shared.progress, count: learning_path.progress %}
+    </div>
+  </div>
+{% endif %}
+
+{% learning_path_next_step_button learning_path, class: "np-top-button np-button-font-color np-button np-button-big" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_summary_desktop_view.html.liquid

@@ -0,0 +1,3 @@
+{% include "learning_path_desktop_header" %}
+{% include "learning_path_banners" %}
+{% include "learning_path_desktop_content" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_summary_mobile_view.html.liquid

@@ -0,0 +1,5 @@
+<div class="np-card-padding">
+  {% include "learning_path_banners" %}
+</div>
+{% include "learning_path_mobile_header" %}
+{% include "learning_path_mobile_content" %}

Custom_Templates/customer_templates/Walmart nTransit Prod/_learning_path_training_session.html.liquid

@@ -0,0 +1,53 @@
+{% if learning_path.enrolled? and training_session.unlocked? %}
+  <div class="np-learning-path-outline-bar np-hidden-mobile"></div>
+  <a
+    class="np-learning-path-outline-item np-card-container"
+    href="{% route training_session, id: training_session.id %}"
+  >
+    <div class="np-card-content np-card-padding">
+      <div class="np-events-content-date np-button-background-color">
+        <div class="np-events-content-month">
+          {{ training_session.month }}
+        </div>
+        <div class="np-events-content-day">
+          {{ training_session.day }}
+        </div>
+      </div>
+      <div class="np-learning-path-outline-content">
+        <div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
+        <div class="np-learning-path-outline-caption">{{ training_session.instructors }}</div>
+        <div class="np-events-content-time np-learning-path-outline-time np-button-color">
+          {{ training_session.time }} {{ training_session.time_zone }}
+        </div>
+      </div>
+      <i class="fas fa-chevron-right np-learning-path-outline-icon"></i>
+      {% if training_session.optional? %}
+        <div class="np-optional-ribbon">
+          {% t shared.optional %}
+        </div>
+      {% endif %}
+    </div>
+  </a>
+{% else %}
+  <div class="np-learning-path-outline-item np-card-container np-learning-path-outline-inactive-item">
+    <div class="np-card-content np-card-padding">
+      <div class="np-events-content-date np-button-background-color">
+        <div class="np-events-content-month">
+          {{ training_session.month }}
+        </div>
+        <div class="np-events-content-day">
+          {{ training_session.day }}
+        </div>
+      </div>
+      <div class="np-learning-path-outline-content">
+        <div class="np-learning-path-outline-name np-top-title">{{ training_session.name }}</div>
+        <div class="np-learning-path-outline-caption">{{ training_session.caption }}</div>
+      </div>
+      {% if training_session.optional? %}
+        <div class="np-optional-ribbon">
+          {% t shared.optional %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endif %}

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

@@ -0,0 +1,14 @@
+<div class="np-learning-paths-resources">
+  {% if items.any? %}
+    {% for learning_path in items %}
+      {% include "cards_learning_path" with learning_path %}
+    {% endfor %}
+  {% else %}
+    <div class="np-learning-paths-resources-container">
+      <div class="np-zero-state-text">
+        {% t .empty %}
+      </div>
+      <img class="np-zero-state-learning-paths" alt="{% t .empty %}" />
+    </div>
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_messages.html.liquid

@@ -0,0 +1,19 @@
+{% if messages.alert.size > 0 %}
+  <div class="np-alert np-alert-error">
+    <div class="np-alert-wrapper">
+      {% for message in messages.alert %}
+        <div>{{ message }}</div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}
+
+{% if messages.notice.size > 0 %}
+  <div class="np-alert np-alert-success">
+    <div class="np-alert-wrapper">
+      {% for message in messages.notice %}
+        <div>{{ message }}</div>
+      {% endfor %}
+    </div>
+  </div>
+{% endif %}

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

@@ -0,0 +1,19 @@
+<div class="np-card np-search-result">
+  <div class="np-card-container">
+    <div class="np-card-content">
+      <img
+        class="np-search-result-image"
+        alt="{{ result.name }}"
+        src="{{ result.image_url }}"
+      />
+      <div class="np-search-result-content">
+        <div>
+          <a class="np-search-result-title" href="{{ result.path }}">
+            {{ result.name }}
+          </a>
+        </div>
+        <div class="np-search-result-snippet">{{ result.description }}</div>
+      </div>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_search_zero_state.html.liquid

@@ -0,0 +1,13 @@
+<div class="np-card np-search-zero-state">
+  <div class="np-card-container">
+    <div class="np-card-content np-card-content-vertical np-search-zero-state-card">
+      <h3 class="np-search-zero-state-title">
+        {% t .nothing_found %}
+      </h3>
+      <div class="np-search-zero-state-subtitle">
+        {% t .empty %}
+      </div>
+      <div class="np-search-zero-state-image"></div>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_section_categories.html.liquid

@@ -0,0 +1,212 @@
+<div id="all-categories">
+    {% for course in courses.enrolled %}{{ course.categories | map: 'name' | join: '|||' }}|||{% endfor %}
+</div>
+
+<div class="categories-container">
+    <div class="category-items-container">
+        <div class="category-item" onclick="window.location.replace('/app/faq')">
+            <div class="category-item-image">
+                <svg width="47" height="44" viewBox="0 0 47 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_83_596)"><path d="M12.9367 34.8665H33.3044C35.2653 34.8665 36.8748 33.2707 36.8748 31.2852V12.9149C36.8748 10.948 35.2838 9.33362 33.3044 9.33362H4.81548C2.85456 9.33362 1.24512 10.9294 1.24512 12.9149V31.2852C1.24512 33.2521 2.83606 34.8665 4.81548 34.8665H5.48146V41.7507L12.9552 34.8665H12.9367Z" stroke="#232325" stroke-miterlimit="10"/><path d="M38.8357 26.4607H41.6846C43.6455 26.4607 45.2549 24.8649 45.2549 22.8794V4.50908C45.2549 2.54216 43.664 0.927795 41.6846 0.927795H13.1957C11.2347 0.927795 9.62531 2.5236 9.62531 4.50908V6.06777" stroke="#232325" stroke-miterlimit="10"/><path d="M7.66437 17.8136C7.66437 17.6837 7.77536 17.5538 7.92336 17.5538H13.1032C13.2512 17.5538 13.3622 17.6652 13.3622 17.8136V18.2033C13.3622 18.3332 13.2512 18.4631 13.1032 18.4631H8.68183V22.1557H12.4557C12.5852 22.1557 12.7147 22.2856 12.7147 22.4155V22.8051C12.7147 22.935 12.6037 23.0649 12.4557 23.0649H8.68183V26.7575C8.68183 26.8874 8.57083 27.0173 8.44134 27.0173H7.92336C7.77536 27.0173 7.66437 26.8874 7.66437 26.7575V17.8136Z" fill="black" stroke="#232325" stroke-width="0.3" stroke-miterlimit="10"/><path d="M13.2326 26.6648L17.2285 17.5724C17.2285 17.5724 17.3395 17.424 17.4505 17.424H17.58C17.691 17.424 17.765 17.4982 17.802 17.5724L21.7608 26.6648C21.8348 26.8318 21.7423 27.0173 21.5388 27.0173H21.0209C20.9099 27.0173 20.8174 26.9431 20.7989 26.8689L19.8184 24.6422H15.1566L14.1946 26.8689C14.1946 26.8689 14.0836 27.0173 13.9726 27.0173H13.4546C13.2511 27.0173 13.1587 26.8503 13.2326 26.6648ZM19.4669 23.8072C18.8194 22.3413 18.1905 20.8568 17.543 19.3723H17.432L15.5081 23.8072H19.4484H19.4669Z" fill="black" stroke="#232325" stroke-width="0.3" stroke-miterlimit="10"/><path d="M27.0887 17.424C29.7156 17.424 31.8245 19.595 31.8245 22.3041C31.8245 23.7329 31.2325 25.0133 30.289 25.8854L31.4545 27.2957C31.6025 27.4812 31.473 27.6668 31.325 27.6668H30.696C30.5665 27.6668 30.474 27.6297 30.4 27.5183L29.5306 26.4792C28.8276 26.906 27.9951 27.1472 27.1072 27.1472C24.4803 27.1472 22.3898 24.9947 22.3898 22.3041C22.3898 19.6135 24.4803 17.424 27.1072 17.424H27.0887ZM27.0887 26.2009C27.7361 26.2009 28.3651 26.0153 28.9016 25.737L27.4401 23.9556C27.2736 23.7515 27.3476 23.5845 27.6066 23.5845H28.2171C28.3466 23.5845 28.4391 23.6216 28.5131 23.7329L29.6786 25.1617C30.4185 24.4381 30.8995 23.4361 30.8995 22.3041C30.8995 20.1517 29.1791 18.3703 27.0887 18.3703C24.9982 18.3703 23.2963 20.1517 23.2963 22.3041C23.2963 24.4566 24.9982 26.2009 27.0887 26.2009Z" fill="black" stroke="#232325" stroke-width="0.3" stroke-miterlimit="10"/></g><defs><clipPath id="clip0_83_596"><rect width="45.8598" height="43.8661" fill="white" transform="translate(0.320129)"/></clipPath></defs></svg>
+            </div>
+            <div class="category-item-name">FAQ</div>
+        </div>
+    </div>
+</div>
+<div class="category-screen np-hidden" id="category-screen">
+    <div class="category-screen-header-spacer" style="height: 64px;"></div>
+    <div class="category-screen-header">
+        <div class="category-screen-header-close" onclick="document.getElementById('category-screen').classList.add('np-hidden')">
+            <i class="far fa-arrow-left"></i>
+        </div>
+        <div class="category-screen-header-title" id="category-screen-header-title"></div>
+    </div>
+    <div class="category-screen-content">
+        {% for course in courses.enrolled %}
+            <div class="category-course" data-category="{{ course.categories | map: 'name' | join: ',' }}">
+                {% include "cards_course_categories" %}
+            </div>
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+    .category-items-container {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 16px;
+    }
+
+    .category-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+        padding: 20px;
+        background: #E5E5E5;
+        border-radius: 8px;
+        text-decoration: none;
+        justify-content: center;
+    }
+
+    .category-item-name {
+        text-align: center;
+        color: #232325;
+        font-weight: 600;
+    }
+
+    .category-item-image {
+        height: 60px;
+        width: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .category-screen {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 99999;
+        background: #f4f4f5;
+        padding: 16px;
+        overflow: scroll;
+    }
+
+    .category-screen-header {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: #f4f4f5;
+        display: grid;
+        align-items: end;
+        padding: 16px;
+        grid-template-columns: repeat(3, 1fr);
+        max-width: 1440px;
+        margin: auto;
+    }
+
+    .category-screen-header-close {
+        font-size: 24px;
+        cursor: pointer;
+    }
+
+    .category-screen-header-title {
+        font-size: 26px;
+        font-weight: 500;
+        text-align: center;
+        align-self: center;
+        width: max-content;
+        margin: auto;
+    }
+
+    .category-screen-content {
+        max-width: 1440px;
+        margin: auto;
+    }
+
+    .category-course-card-wrapper {
+        text-decoration: none;
+        color: #232325;
+    }
+
+    .category-course-card {
+        padding: 12px;
+        background: #E8E8E8;
+        margin-bottom: 16px;
+        border-radius: 8px;
+    }
+
+    .category-course-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 8px;
+    }
+
+    .category-course-card-name {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .category-course-card-status {
+        font-size: 14px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: #8c8c8c;
+        color: #FFF;
+    }
+
+    @media (min-width: 768px) {
+        .category-course-card {
+            margin-bottom: 24px;
+        }
+
+        .category-items-container {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    }
+
+    @media (min-width: 1024px) {
+        .category-items-container {
+            grid-template-columns: 1fr 1fr 1fr 1fr;
+        }
+    }
+
+    @media (min-width: 1280px) {
+        .category-items-container {
+            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .category-screen-header {
+            left: calc(50vw - 720px);
+            padding: 16px 0;
+        }
+    }
+</style>
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        let categoriesElement = document.getElementById('all-categories');
+			console.log(categoriesElement)
+        let categories = Array.from(new Set(categoriesElement.innerText.split('|||').map(x => x.trim()).filter(Boolean)
+        ));
+        categoriesElement.remove();
+			const defaultImage = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm306.7 69.1L162.4 380.6c-19.4 7.5-38.5-11.6-31-31l55.5-144.3c3.3-8.5 9.9-15.1 18.4-18.4l144.3-55.5c19.4-7.5 38.5 11.6 31 31L325.1 306.7c-3.2 8.5-9.9 15.1-18.4 18.4zM288 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>';
+        const categoriesImages = {
+            'Using The App': '<svg viewBox="0 0 54 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33.1472 39.146H50.6172C51.6389 39.146 52.4562 38.3262 52.4562 37.3015V2.69855C52.4562 1.67379 51.6389 0.853973 50.6172 0.853973H33.062C32.2277 0.853973 31.4274 1.04185 30.6782 1.40051L27.0684 3.14262" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/><path d="M36.3143 31.5969V21.6567C34.4072 20.427 33.1302 18.275 33.1302 15.8326C33.1302 12.8437 35.0202 10.316 37.6424 9.34244V15.7131C37.6424 15.9009 37.7957 16.0546 37.983 16.0546H42.2228C42.4101 16.0546 42.5633 15.9009 42.5633 15.7131L42.4782 9.3766C45.0664 10.3672 46.9053 12.895 46.9053 15.8326C46.9053 18.275 45.6453 20.427 43.7382 21.6567V31.5969" stroke="#232325" stroke-linecap="round" stroke-linejoin="round"/><path d="M38.017 39.146H3.51962C2.49798 39.146 1.68066 38.3262 1.68066 37.3015V2.69855C1.68066 1.67379 2.49798 0.853973 3.51962 0.853973H21.0748C21.9092 0.853973 22.7094 1.04185 23.4586 1.40051L27.0684 3.14262V38.6166" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/><path d="M7.01019 11.0504H21.858" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/><path d="M7.01019 17.3185H21.858" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/><path d="M7.01019 23.6038H21.858" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/><path d="M7.01019 29.8719H21.858" stroke="#232325" stroke-miterlimit="10" stroke-linecap="round"/></svg>',
+		'Training': `<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.3607 24.2744C21.7139 24.2744 22.8109 23.1774 22.8109 21.8242C22.8109 20.471 21.7139 19.374 20.3607 19.374C19.0075 19.374 17.9105 20.471 17.9105 21.8242C17.9105 23.1774 19.0075 24.2744 20.3607 24.2744Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M21.2845 43.7556C22.6377 43.7556 23.7347 42.6586 23.7347 41.3054C23.7347 39.9522 22.6377 38.8552 21.2845 38.8552C19.9313 38.8552 18.8343 39.9522 18.8343 41.3054C18.8343 42.6586 19.9313 43.7556 21.2845 43.7556Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M17.9238 36.713V29.2552C17.9238 27.9699 18.9682 26.9389 20.2401 26.9389H21.164C22.4493 26.9389 23.4803 27.9833 23.4803 29.2552" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M19.6778 30.3532L21.7531 32.1875C22.1816 32.5624 22.7707 32.6695 23.3062 32.4821L27.1355 31.103C27.9255 30.8218 28.3405 29.9515 28.0728 29.1616C27.7916 28.3314 26.8945 27.903 26.0778 28.1975L22.1949 29.6168" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M31.9824 24.2477L27.6979 28.559" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M23.1724 35.2535V33.3255" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M20.3607 16H43.015C44.0058 16 44.8092 16.8033 44.8092 17.7941V30.0318C44.8092 31.0226 44.0058 31.8259 43.015 31.8259H31.0719" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M17 48C17 47.1699 17.6828 46.4871 18.513 46.4871H24.0427C24.8728 46.4871 25.5556 47.1699 25.5556 48" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M32.6251 43.7556C33.9783 43.7556 35.0753 42.6586 35.0753 41.3054C35.0753 39.9522 33.9783 38.8552 32.6251 38.8552C31.2719 38.8552 30.1749 39.9522 30.1749 41.3054C30.1749 42.6586 31.2719 43.7556 32.6251 43.7556Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M28.3406 48C28.3406 47.1699 29.0234 46.4871 29.8535 46.4871H35.3832C36.2134 46.4871 36.8962 47.1699 36.8962 48" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M43.7113 43.7556C45.0645 43.7556 46.1615 42.6586 46.1615 41.3054C46.1615 39.9522 45.0645 38.8552 43.7113 38.8552C42.358 38.8552 41.261 39.9522 41.261 41.3054C41.261 42.6586 42.358 43.7556 43.7113 43.7556Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M39.4401 48C39.4401 47.1699 40.123 46.4871 40.9531 46.4871H46.4828C47.3129 46.4871 47.9958 47.1699 47.9958 48" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M31.8965 62.7931C48.9602 62.7931 62.7931 48.9602 62.7931 31.8965C62.7931 14.8329 48.9602 1 31.8965 1C14.8329 1 1 14.8329 1 31.8965C1 48.9602 14.8329 62.7931 31.8965 62.7931Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/></svg>`,
+		'Setup Guides':`<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.8965 62.7931C48.9602 62.7931 62.7931 48.9602 62.7931 31.8965C62.7931 14.8329 48.9602 1 31.8965 1C14.8329 1 1 14.8329 1 31.8965C1 48.9602 14.8329 62.7931 31.8965 62.7931Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path fill-rule="evenodd" clip-rule="evenodd" d="M40.202 23.2727C40.7829 23.2727 41.281 23.6737 41.4132 24.2298L41.4347 24.3431L41.6958 26.1702L41.8551 26.2455C42.0177 26.3263 42.1768 26.414 42.3318 26.5083L42.5614 26.6546L42.7044 26.7545L44.4168 26.067C44.9152 25.8667 45.4754 26.0108 45.8176 26.4026L45.8925 26.4974L45.959 26.6007L47.1534 28.672C47.4426 29.1735 47.347 29.8025 46.9367 30.1956L46.844 30.2761L45.3932 31.4157L45.4126 31.681L45.4204 32L45.4184 32.1597L45.4126 32.319L45.3932 32.5835L46.8439 33.7239C47.2663 34.0559 47.4218 34.6136 47.254 35.1063L47.2095 35.2187L47.1534 35.3279L45.959 37.3993C45.6698 37.9008 45.078 38.1324 44.5328 37.9731L44.4168 37.9329L42.7044 37.2447L42.5614 37.3454C42.4104 37.4462 42.2553 37.5405 42.0963 37.6281L41.8551 37.7545L41.6958 37.829L41.4347 39.6568C41.3666 40.1341 41.0324 40.5205 40.5629 40.6682L40.4427 40.7001L40.3265 40.7203L40.202 40.7273H37.8132C37.2915 40.7273 36.8312 40.4027 36.6414 39.8916L36.6049 39.7793L36.5805 39.6571L36.3182 37.829L36.1596 37.7543C35.997 37.6735 35.838 37.5858 35.683 37.4915L35.4535 37.3452L35.3096 37.2447L33.5983 37.9329C33.1585 38.1097 32.6655 38.0191 32.3019 37.695L32.2138 37.6092L32.1317 37.5137L32.0561 37.3993L30.8617 35.3279C30.6065 34.8853 30.6492 34.3379 30.9801 33.9173L31.0688 33.815L31.1712 33.7239L32.6216 32.5826L32.6025 32.319L32.5948 32L32.5967 31.8402L32.6025 31.681L32.6216 31.4165L31.1712 30.2761C30.7984 29.9831 30.6303 29.5103 30.7288 29.033L30.759 28.9137L30.8005 28.7948L30.8617 28.672L32.0561 26.6007C32.3129 26.1554 32.8121 25.9186 33.3448 25.9994L33.4683 26.0237L33.5984 26.067L35.3096 26.7545L35.4535 26.6547C35.6044 26.5539 35.7596 26.4596 35.9185 26.372L36.1596 26.2457L36.3182 26.1702L36.5805 24.3431C36.6571 23.8057 37.069 23.3892 37.5859 23.2935L37.6981 23.278L37.8132 23.2727H40.202ZM40.202 24.5195L37.8131 24.5197L37.5022 26.6925C37.4705 26.9143 37.3223 27.102 37.1141 27.1841C36.637 27.3723 36.1908 27.6312 35.7898 27.9511C35.6396 28.071 35.4442 28.1136 35.2605 28.0707L35.1699 28.0421L33.1773 27.2394L33.134 27.2239L31.9614 29.2552L31.9399 29.2958L33.6649 30.6513C33.8408 30.7896 33.9291 31.0117 33.8962 31.2331C33.8589 31.4853 33.84 31.7413 33.84 32C33.84 32.2586 33.8589 32.5147 33.8962 32.7668C33.9244 32.9567 33.8635 33.1469 33.7348 33.2845L33.6649 33.3486L31.9748 34.6752L31.9401 34.7046L33.1103 36.7373L33.1346 36.7759L35.1699 35.9578C35.3184 35.8981 35.4816 35.8988 35.6267 35.955L35.7112 35.9954L35.7898 36.0488C36.1908 36.3688 36.637 36.6276 37.1141 36.8158C37.2963 36.8877 37.4325 37.0404 37.485 37.226L37.5022 37.3074L37.8132 39.481L40.1606 39.4819L40.2025 39.4805L40.5123 37.3078C40.544 37.086 40.6922 36.8982 40.9004 36.8161C41.3778 36.6278 41.8242 36.3689 42.2253 36.0488C42.3755 35.929 42.5709 35.8863 42.7546 35.9292L42.8453 35.9578L44.8806 36.7759L46.075 34.7046L44.3503 33.3486C44.1744 33.2104 44.0861 32.9883 44.1189 32.7668C44.1563 32.5147 44.1752 32.2586 44.1752 32C44.1752 31.7413 44.1563 31.4853 44.1189 31.2331C44.0907 31.0433 44.1516 30.853 44.2803 30.7155L44.3503 30.6513L46.075 29.2954L44.8806 27.224L42.8453 28.0421C42.6373 28.1257 42.4005 28.0909 42.2253 27.9511C41.8242 27.6311 41.3778 27.3721 40.9004 27.1839C40.7182 27.112 40.5819 26.9593 40.5295 26.7736L40.5123 26.6921L40.202 24.5195ZM39.0076 28.8831C40.7268 28.8831 42.1206 30.2786 42.1206 32C42.1206 33.7214 40.7268 35.1169 39.0076 35.1169C37.2883 35.1169 35.8945 33.7214 35.8945 32C35.8945 30.2786 37.2883 28.8831 39.0076 28.8831ZM39.0076 30.1298C37.976 30.1298 37.1398 30.9671 37.1398 32C37.1398 33.0328 37.976 33.8701 39.0076 33.8701C40.0391 33.8701 40.8754 33.0328 40.8754 32C40.8754 30.9671 40.0391 30.1298 39.0076 30.1298Z" fill="black"/><path d="M39.4242 41.9394V45C39.4242 46.6569 38.0811 48 36.4242 48H24C22.3431 48 21 46.6569 21 45V19C21 17.3431 22.3431 16 24 16H36.4242C38.0811 16 39.4242 17.3431 39.4242 19V22.0606" stroke="#232325" stroke-width="1.5"/></svg>`,
+		'Feature Help':`<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M31.8965 62.7931C48.9602 62.7931 62.7931 48.9602 62.7931 31.8965C62.7931 14.8329 48.9602 1 31.8965 1C14.8329 1 1 14.8329 1 31.8965C1 48.9602 14.8329 62.7931 31.8965 62.7931Z" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/><path d="M39.4242 48H24C22.3431 48 21 46.6569 21 45V19C21 17.3431 22.3431 16 24 16H36.4242C38.0811 16 39.4242 17.3431 39.4242 19V20.0606" stroke="#232325" stroke-width="1.5"/><path d="M36.3795 40.8529V39.1055C36.3795 38.3148 35.9708 37.5849 35.3064 37.1509C33.6994 36.0947 32.6624 34.2479 32.7541 32.1688C32.8792 29.2879 35.2369 26.9157 38.131 26.7609C41.4228 26.584 44.1474 29.1856 44.1474 32.4204C44.1474 34.1953 43.3272 35.7768 42.0456 36.8163C41.5006 37.2587 41.1837 37.9195 41.1837 38.6189V40.8529" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M36.0848 42.2352H41.3672" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M37.1969 45H40.3774" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M36.6408 32.2821L38.3368 33.8027L40.8111 31.4527" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M38.865 25.0938V22" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M45.5375 28.9644L48.0397 27.3055" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M42.7573 25.9232L44.4254 23.7114" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M34.9088 25.9232L33.338 23.5483" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M31.9506 28.9644L29.4123 27.3055" stroke="#232325" stroke-width="1.5" stroke-miterlimit="10"/><path d="M25 33.5H29" stroke="#232325" stroke-width="1.5" stroke-linecap="round"/><path d="M25 37.5H29" stroke="#232325" stroke-width="1.5" stroke-linecap="round"/><path d="M25 41.5H29" stroke="#232325" stroke-width="1.5" stroke-linecap="round"/></svg>`
+        }
+        categories.forEach(categoryName => {
+            let categoryImage = categoriesImages[categoryName] || defaultImage
+            let categoryHTML =`
+        <div class="category-item" onclick="showCategory('${categoryName}')">
+            <div class="category-item-image">${categoryImage}</div>
+            <div class="category-item-name">${categoryName}</div>
+        </div>`
+            document.querySelector('.category-items-container').innerHTML += categoryHTML;
+        })
+    });
+
+
+    function showCategory(categoryName) {
+        let categoryScreen = document.getElementById('category-screen');
+        let courseCards = document.querySelectorAll('.category-course');
+        courseCards.forEach(courseCard => {
+            if (courseCard.dataset.category.includes(categoryName)) {
+                courseCard.classList.remove('np-hidden');
+            } else {
+                courseCard.classList.add('np-hidden');
+            }
+        })
+        document.getElementById('category-screen-header-title').innerText = categoryName;
+        categoryScreen.classList.remove('np-hidden');
+    }
+</script>
+

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

@@ -0,0 +1,13 @@
+<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 }}">
+        <a class="np-sub-navigation-content-item-link" href="{{ link.url }}">
+          <i class="{{ link.icon }} np-button-color np-sub-navigation-content-item-icon"></i>
+          {{ link.label }}
+        </a>
+        <div class="np-sub-navigation-content-item-bar np-button-background-color"></div>
+      </div>
+    {% endfor %}
+  </div>
+</nav>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_events_dashboard.html.liquid

@@ -0,0 +1,9 @@
+<div class="np-dashboard-resources">
+  {% if training_events.enrolled.any? %}
+    {% for training_event in training_events.enrolled %}
+      {% include "cards_training_event" with training_event %}
+    {% endfor %}
+  {% else %}
+    {% include "training_events_zero_state" %}
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_events_filter.html.liquid

@@ -0,0 +1,53 @@
+<div class="np-filter">
+  <div class="dropdown">
+    <button
+      class="np-button dropdown-button"
+      data-toggle-class="is-open"
+      data-toggle-escape
+      data-toggle-outside
+      data-toggle-target-next
+      type="button"
+    >
+      {% t shared.filters.filter %}
+    </button>
+
+    <div class="dropdown-menu" data-test="modal">
+      <form method="get">
+        <span class="dropdown-label">
+          {% t shared.filters.by_event_type %}
+        </span>
+        <ul class="dropdown-checkboxes">
+          {% for event_type in training_events.filters.event_types %}
+            {% capture label %}
+              {% t shared.event_types, key: event_type.value %}
+            {% endcapture %}
+            <li>
+              {% include "filter_checkbox",
+                  label: label,
+                  name: event_type.name,
+                  value: event_type.value
+                  selected: event_type.selected?
+              %}
+            </li>
+          {% endfor %}
+        </ul>
+
+        {% capture label %}{% t shared.filters.by_course %}{% endcapture %}
+        {%
+          include "filter_select",
+          filters: training_events.filters.courses,
+          key: "courses_uuid",
+          label: label
+        %}
+
+        <button
+          class="np-button dropdown-button-apply"
+          data-toggle-trigger-off
+          type="submit"
+        >
+          {% t shared.filters.apply %}
+        </button>
+      </form>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_events_index.html.liquid

@@ -0,0 +1,13 @@
+<div class="np-dashboard-resources">
+  {% if training_events.available.any? %}
+    <div class="row row-with-thumbnails">
+      {% for training_event in training_events.available %}
+        <div class="col-xs-12 col-sm-6 col-lg-4 np-stretch-content">
+          {% include "cards_training_event" with training_event %}
+        </div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% include "training_events_zero_state" %}
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_events_zero_state.html.liquid

@@ -0,0 +1,9 @@
+<div class="np-dashboard-resources-container">
+  <div class="np-zero-state-text">
+    {% t .empty %}
+  </div>
+  <img
+    class="np-zero-state-training-events"
+    alt="{% t .empty %}"
+  />
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_calendars.html.liquid

@@ -0,0 +1,52 @@
+<div class="dropdown dropdown-calendar">
+  <button
+    class="np-top-button np-button-font-color np-button np-button-big dropdown-calendar-button"
+    data-toggle-class="is-open"
+    data-toggle-escape
+    data-toggle-outside
+    data-toggle-target-next
+    type="button"
+  >
+    {% t .add_to_calendar %}
+    <i class="fas fa-chevron-down dropdown-calendar-button-chevron"></i>
+  </button>
+
+  <ul class="dropdown-calendar-menu">
+    <li class="dropdown-calendar-item">
+      <a
+        class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
+        href="{{ training_session.google_calendar_url }}"
+        target="_blank"
+      >
+          {% t .google_calendar %}
+      </a>
+    </li>
+    <li class="dropdown-calendar-item">
+      <a
+        class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
+        href="{{ training_session.outlook_calendar_url }}"
+        target="_blank"
+      >
+          {% t .outlook_calendar %}
+      </a>
+    </li>
+    <li class="dropdown-calendar-item">
+      <a
+        class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
+        href="{{ training_session.outlook_office_calendar_url }}"
+        target="_blank"
+      >
+          {% t .office_calendar %}
+      </a>
+    </li>
+    <li class="dropdown-calendar-item">
+      <a
+        class="dropdown-calendar-item-element np-button-background-color-on-hover np-button-font-color-on-hover"
+        href="{{ training_session.ical_calendar_url }}"
+        target="_blank"
+      >
+          {% t .ical_calendar %}
+      </a>
+    </li>
+  </ul>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_cta.html.liquid

@@ -0,0 +1,35 @@
+<div class="np-training-session-cta">
+  <div class="np-training-session-cta-buttons">
+    <form
+      action="{{ training_session.cta.url }}"
+      method="post"
+    >
+      {% form_authenticity_token %}
+
+      {% if training_session.show_calendar_links? %}
+        {% include "training_session_calendars" %}
+      {% endif %}
+
+      {% if training_session.cta.undo? %}
+        <input type="hidden" name="_method" value="delete" />
+      {% endif %}
+
+      {% if training_session.cta.label %}
+        <button
+          type="submit"
+          class="
+            np-top-button
+            np-button
+            np-button-big
+
+            {% if training_session.show_calendar_links? %}
+              np-button-secondary
+            {% endif %}
+          "
+        >
+          {{ training_session.cta.label }}
+        </button>
+      {% endif %}
+    </form>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_date.html.liquid

@@ -0,0 +1,16 @@
+<div class="np-card-training-session-date">
+  <div class="np-button-background-color np-card-training-session-date-bar"></div>
+  <div class="np-card-training-session-date-label">
+    <div class="np-card-training-session-date-day">
+      {{ training_session.day }}
+    </div>
+    <div>
+      <div class="np-card-training-session-date-month">
+        {{ training_session.month }}
+      </div>
+      <div class="np-card-training-session-date-year">
+        {{ training_session.year }}
+      </div>
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_description.html.liquid

@@ -0,0 +1,6 @@
+<h3 class="np-card-heading">
+  {% t .header %}
+</h3>
+<div class="np-card-text">
+  {{ training_event.description }}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_desktop_view.html.liquid

@@ -0,0 +1,43 @@
+<div class="np-resource-header np-resource-header-card np-card-padding-large">
+  {% include "training_session_header" %}
+</div>
+<div class="row np-training-session-row">
+  <div class="col-xs-12 col-sm-8">
+    <div class="np-card-container">
+      <div class="np-card-padding-large">
+        <div>
+          {% include "training_session_status" %}
+          {% include "training_session_date" %}
+        </div>
+        <div class="np-training-session-details">
+          {% include "training_session_details" %}
+          {% include "training_session_cta" %}
+        </div>
+      </div>
+      <div class="np-card-content-divider"></div>
+      <div class="np-card-padding-large">
+        {% include "training_session_description" %}
+      </div>
+    </div>
+  </div>
+  <div class="col-xs-12 col-sm-4 np-grid-spacing">
+    <div class="np-training-session-container">
+        <div class="np-training-session-sessions-title">
+          {% t shared.more_sessions %}
+        </div>
+        {% if training_event.sessions.size > 1 %}
+          {% include "training_session_more_sessions" %}
+        {% else %}
+          <div class="np-training-session-zero-state">
+            <img
+              alt="{% t .empty %}"
+              class="np-zero-state-training-sessions"
+            />
+            <div class="np-training-session-zero-state-text">
+              {% t .empty %}
+            </div>
+          </div>
+        {% endif %}
+    </div>
+  </div>
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_details.html.liquid

@@ -0,0 +1,23 @@
+<div class="np-training-session-info">
+
+  <div class="np-training-session-time">
+    <i class="fal fa-clock np-button-color np-training-session-icon"></i>
+    <time>{{ training_session.time_period }} {{ training_session.time_zone }}</time>
+  </div>
+
+  {% if training_session.approved? and training_session.location %}
+    <div class="np-training-session-location">
+      <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
+      {{ training_session.location }}
+    </div>
+  {% endif %}
+
+  {% if training_session.approved? and training_session.session_url %}
+    <div class="np-training-session-location">
+      <i class="fal fa-map-marker-alt np-button-color np-training-session-icon"></i>
+      <a href="{{ training_session.session_url }}" class="np-button-color" target="_blank" >
+        {{ training_session.session_url }}
+      </a>
+    </div>
+  {% endif %}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_header.html.liquid

@@ -0,0 +1,10 @@
+<div class="np-top-vocabulary np-text-title">
+  {% t shared.event_types, key: training_event.event_type %}
+  <i class="fal {{ training_event.event_type_icon }} np-button-color np-training-session-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-hidden-mobile np-icon-back"></i>
+  </a>
+  {{ training_event.title }}
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_mobile_view.html.liquid

@@ -0,0 +1,27 @@
+<div class="np-training-session-view">
+  <div class="np-training-session-view-header">
+    {% include "training_session_header" %}
+  </div>
+
+  <div class="np-card-container np-training-session-view-details np-card-padding np-card-spacing">
+    {% include "training_session_status" %}
+    {% include "training_session_date" %}
+    {% include "training_session_details" %}
+    <div class="np-card-padding-large">
+      {% include "training_session_cta" %}
+    </div>
+    {% include "training_session_description" %}
+  </div>
+
+  {% if training_event.sessions.size > 1 %}
+    <div class="np-card-spacing">
+      <div class="np-training-session-container">
+        <div class="np-training-session-sessions-title">
+          {% t shared.more_sessions %}
+        </div>
+        {% include "training_session_more_sessions" %}
+      </div>
+    </div>
+  {% endif %}
+
+</div>

Custom_Templates/customer_templates/Walmart nTransit Prod/_training_session_more_sessions.html.liquid

@@ -0,0 +1,3 @@
+{% for session in training_event.sessions %}
+  {% include "training_session_tile", current_session: training_session %}
+{% endfor %}

Custom_Templates/customer_templates/Walmart nTransit 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 nTransit Prod/_training_session_tile.html.liquid

@@ -0,0 +1,24 @@
+{% if current_session.id != session.id %}
+  <a
+    class="np-training-session-tile"
+    href="{% route training_session, id: session.id %}"
+  >
+    <div class="np-training-session-tile-header">
+        <i class="far fa-calendar-star np-training-session-tile-icon"></i>
+        <div class="np-training-session-tile-badge np-training-session-tile-badge-{{ session.status.type }}">
+            {{ session.status.label }}
+        </div>
+    </div>
+    <div class="np-training-session-tile-content">
+      <div>
+          <div class="np-training-session-tile-date">
+              {{ session.month }} {{ session.day }}, {{ session.year }}
+          </div>
+          <div class="np-training-session-tile-time">
+              {{ session.time_period }} {{ session.time_zone }}
+          </div>
+      </div>
+      <i class="fas fa-arrow-right np-training-session-tile-chevron"></i>
+    </div>
+  </a>
+{% endif %}

Custom_Templates/customer_templates/Walmart nTransit Prod/account.html.liquid

@@ -0,0 +1,15 @@
+{% include "header" %}
+{% include "account_tabs" %}
+
+<main class="np-main np-subpage-container np-account">
+  <div class="np-hidden-desktop">
+    {% include "account_mobile_view", form: form %}
+  </div>
+
+  <div class="np-hidden-mobile np-flex np-flex-center">
+    {% include "account_desktop_view", form: form %}
+  </div>
+</main>
+
+{% include "footer" %}
+

Custom_Templates/customer_templates/Walmart nTransit Prod/auth_url_email.html.liquid

@@ -0,0 +1,59 @@
+<main class="np-box-container np-open-access">
+  <div class="np-box">
+    {% include "header_minimal" %}
+    <div class="np-box-content-container">
+      <form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
+        {% form_authenticity_token %}
+        <div class="np-form-headline">
+          {% t shared.welcome_to_school, school_name: current_school.name %}
+        </div>
+        <div class="np-form-subheadline">
+          {% t .headline, key: current_school.course_vocabulary %}
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_first_name">
+            {% t shared.first_name %}
+          </label>
+          <input
+            class="np-input"
+            autofocus="autofocus"
+            type="text"
+            name="first_name"
+            id="learner_first_name"
+            value="{{ form.first_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_last_name">
+            {% t shared.last_name %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="last_name"
+            id="learner_last_name"
+            value="{{ form.last_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_email">
+            {% t shared.email_address %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="email"
+            id="learner_email"
+            value="{{ form.email }}"
+          />
+        </div>
+        <input
+          type="submit"
+          name="commit"
+          value="{% t shared.enter %}"
+          class="np-button np-button-big np-form-action"
+        />
+      </form>
+    </div>
+  </div>
+</main>

Custom_Templates/customer_templates/Walmart nTransit Prod/auth_url_employee.html.liquid

@@ -0,0 +1,59 @@
+<main class="np-box-container np-open-access">
+  <div class="np-box">
+    {% include "header_minimal" %}
+    <div class="np-box-content-container">
+      <form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
+        {% form_authenticity_token %}
+        <div class="np-form-headline">
+          {% t shared.welcome_to_school, school_name: current_school.name %}
+        </div>
+        <div class="np-form-subheadline">
+          {% t .headline, key: current_school.course_vocabulary %}
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_employee_id">
+            {% t shared.employee_id %}
+          </label>
+          <input
+            class="np-input"
+            autofocus="autofocus"
+            type="text"
+            name="employee_id"
+            id="learner_employee_id"
+            value="{{ form.employee_id }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_first_name">
+            {% t shared.first_name %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="first_name"
+            id="learner_first_name"
+            value="{{ form.first_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_last_name">
+            {% t shared.last_name %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="last_name"
+            id="learner_last_name"
+            value="{{ form.last_name }}"
+          />
+        </div>
+        <input
+          type="submit"
+          name="commit"
+          value="{% t shared.enter %}"
+          class="np-button np-button-big np-form-action"
+        />
+      </form>
+    </div>
+  </div>
+</main>

Custom_Templates/customer_templates/Walmart nTransit Prod/auth_url_phone_number.html.liquid

@@ -0,0 +1,40 @@
+<main class="np-box-container np-open-access">
+  <div class="np-box">
+    {% include "header_minimal" %}
+    <div class="np-box-content-container">
+      <form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
+        <div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
+        <div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
+        {% form_authenticity_token %}
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_last_name">
+            {% t shared.last_name %}
+          </label>
+          <input
+            class="np-input"
+            autofocus="autofocus"
+            type="text"
+            name="last_name"
+            id="learner_last_name"
+            value="{{ form.last_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_phone_number">
+            {% t shared.phone_number %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="phone_number"
+            id="learner_phone_number"
+            value="{{ form.phone_number }}"
+          />
+        </div>
+        <button type="submit" class="np-button np-button-big np-form-action">
+          {% t shared.enter %}
+        </button>
+      </form>
+    </div>
+  </div>
+</main>

Custom_Templates/customer_templates/Walmart nTransit Prod/auth_url_terms.html.liquid

@@ -0,0 +1,74 @@
+<main class="np-box-container np-open-access">
+  <div class="np-box">
+    {% include "header_minimal" %}
+    <div class="np-box-content-container">
+      <form class="np-form np-box-content" action="{{ form.url }}" method="get" novalidate>
+        <div class="np-form-headline"> {% t shared.welcome_to_school, school_name: current_school.name %} </div>
+        <div class="np-form-subheadline"> {% t .headline, key: current_school.course_vocabulary %} </div>
+        {% form_authenticity_token %}
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_email">
+            {% t shared.email_address %}
+          </label>
+          <input
+            class="np-input"
+            autofocus="autofocus"
+            type="email"
+            name="email"
+            id="learner_email"
+            value="{{ form.email }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_first_name">
+            {% t shared.first_name %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="first_name"
+            id="learner_first_name"
+            value="{{ form.first_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_last_name">
+            {% t shared.last_name %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="last_name"
+            id="learner_last_name"
+            value="{{ form.last_name }}"
+          />
+        </div>
+        <div class="np-form-field">
+          <label class="np-input-label" for="learner_phone_number">
+            {% t shared.phone_number_optional %}
+          </label>
+          <input
+            class="np-input"
+            type="text"
+            name="phone_number"
+            id="learner_phone_number"
+            value="{{ form.phone_number }}"
+          />
+        </div>
+        <div class="np-form-field np-open-access-terms">
+          <input type="hidden" name="terms" value="0" />
+          <input id="terms" type="checkbox" name="terms" value="1" />
+          <label for="terms" class="np-open-access-terms-checkbox">
+            {{ current_school.custom_terms }}
+          </label>
+        </div>
+        <input
+          type="submit"
+          name="commit"
+          value="{% t shared.enter %}"
+          class="np-button np-button-big np-form-action"
+        />
+      </form>
+    </div>
+  </div>
+</main>

Custom_Templates/customer_templates/Walmart nTransit Prod/catalog.html.liquid

@@ -0,0 +1,23 @@
+{% include "header" %}
+{% include "course_version_outdated_alert", courses: courses.in_catalog %}
+{% include "sub_navigation" %}
+<main class="np-main np-catalog np-subpage-container np-max-width">
+  <div class="np-catalog-header-wrapper">
+    <div class="np-catalog-header">
+      <div class="np-resource-title">{{ catalog.headline }}</div>
+      <div class="np-resource-subtitle">{{ catalog.subheadline }}</div>
+    </div>
+    {% capture label %}{% t shared.filters.by_category %}{% endcapture %}
+
+    {% if courses.in_catalog.any? %}
+      {%
+        include "filter_dropdown",
+        filters: courses.filters,
+        key: "category_uuid",
+        label: label
+      %}
+    {% endif %}
+  </div>
+  {% include "courses_catalog" %}
+</main>
+{% include "footer" %}