Adding breadcrumb navigation and program type badge (#1981)

cms/templates/product_page.html

@@ -16,6 +16,21 @@
         <div class="row d-flex flex-row align-center">
           <div class="col flex-grow-1" id="product-details">
             <div class="text">
+            <nav aria-label="breadcrumb">
+              <ol class="breadcrumb">
+                <li class="breadcrumb-item">
+                    <a href="/catalog">
+                        <img alt="breadcrumb-arrow" src="/static/images/breadcrumb-arrow.svg"/>Catalog
+                    </a>
+                </li>
+                <li class="breadcrumb-item" aria-current="page">{% if page.is_program_page %}Program{% else %}Course{% endif %}</li>
+              </ol>
+            </nav>
+            {% if page.is_program_page %}
+                <div class="mb-2">
+                    <span class="badge-program-type">{{ page.product.program_type }}</span>
+                </div>
+            {% endif %}
               <h1>{{ page.title }}</h1>
               {# Description field contents are already rendered wrapped in a <p> tag #}
 

frontend/public/scss/product-page/product-details.scss

@@ -3,10 +3,16 @@
 body.new-design {
   font-family: Inter;
 
-  h1, h2 {
-      font-family: Poppins;
+  h2 {
+    font-family: Poppins;
 
   }
+  h1 {
+    font-family: Poppins;
+    @include media-breakpoint-up(lg) {
+      font-size: 45px;
+    }
+  }
 
   .product-page {
     margin-top: 1.5rem;
@@ -18,6 +24,29 @@ body.new-design {
       }
     }
 
+    .breadcrumb-item {
+      color: var(--GreyText, #6F7175);
+      font-size: 14px;
+
+      img {
+        margin-right: 10px;
+      }
+      a {
+        text-decoration: none;
+      }
+    }
+    span.badge-program-type {
+      background-color: $black;
+      color: white;
+      border-radius: 3px;
+      padding: 3px 10px;
+      font-size: 12px;
+      font-family: Poppins;
+      font-style: normal;
+      font-weight: 700;
+      line-height: normal;
+    }
+
 
     section.course-description {
       font-size: 20px;