Zenjob Notes, and new Templates

Custom_Templates/customer_templates/JJSV/_cards_course.html.liquid

@@ -0,0 +1,69 @@
+<div class="np-card">
+    <div class="np-card-container">
+        <div class="np-card-image-content-top">
+        </div>
+        <img
+          class="np-card-image"
+          alt="{{ course.name }}"
+          src="{{ course.image_url }}"
+        >
+      </div>
+      <div class="np-card-content np-card-content-vertical np-card-padding course-card-content">
+            <p class="course-title-vision">
+                {{ course.name }}
+            </p>
+        <div class="np-card-content-footer">
+          <div class="np-card-content-progress np-button-color">
+            {% if course.progress > 0 and course.progress < 100 %}
+              In progress
+            {% elsif course.completed? %}
+              Viewed
+            {% else %}
+              Not viewed
+            {% endif %}
+            
+          </div>
+            {% capture course_path %}{% route course, id: course.id %}{% endcapture %}
+            <a
+              class="np-button-font-color np-button" href="{% route course_enrollment, code: course.enrollment_code %}" 
+              >
+                {% if course.enrolled? == false %}
+                  {% t shared.enroll %}
+                {% elsif course.started? == false %}
+                  View
+                {% elsif course.completed? %}
+                  {% t shared.course.view, key: current_school.course_vocabulary %}
+                {% else %}
+                  {% t shared.continue %}
+                {% endif %}
+            </a>
+        </div>
+    </div>
+</div>
+
+<style>
+
+  .course-card-content {
+    color: black!important;
+    padding: 22px 16px 16px;
+  }
+
+  .np-card-image {
+    border-radius:0;
+  }
+
+  .np-card {
+    margin-bottom: 10px!important;
+  }
+
+  .course-title-vision {
+    font-family: "PlusJakartaSans-Bold", !important;
+    font-weight: 700;
+  }
+
+  .np-card .np-card-content-footer .np-button {
+    background-color:#cc0033;
+    width:auto;
+    color:#fff!important;
+  }
+</style>