Add hero to main.html and use for program page

Adding hero to main.html allows for full width marketing images to be
used. This commit includes the addition of the hero block into
main.html along with the program marketing page's use of that new
hero block.

lms/static/sass/views/_program-marketing-page.scss

-#program-details-page {
-  font-size: 16px;
-
+#program-details-hero {
   .program_title {
     font-weight: bold;
-    margin-top: $baseline
+    margin-top: $baseline;
   }
 
   .logo {
     height: 100px;
   }
 
-  .section_title {
-    margin-bottom: $baseline;
-    color: theme-color("dark");
-  }
-
-  .thick_rule {
-    height: 4px;
-    border: 0;
-    background-color: theme-color('secondary');
-  }
-
   .main-banner {
-    color: white;
+    color: $white;
     margin-bottom: 1px;
     background-size: cover;
     background-repeat: no-repeat;
@@ -50,7 +37,7 @@
 
       button {
         background-color: transparent;
-        color: $white
+        color: $white;
       }
 
       iframe {
@@ -70,13 +57,32 @@
 
   .quick-nav {
     background-color: theme-color('light');
-    margin-bottom: $baseline/2;
 
     .nav-item {
       font-size: 18px;
       color: $white;
     }
   }
+}
+
+#program-details-page {
+  margin-top: $baseline;
+  font-size: $font-size-base;
+
+  .logo {
+    height: 100px;
+  }
+
+  .section_title {
+    margin-bottom: $baseline;
+    color: theme-color("dark");
+  }
+
+  .thick_rule {
+    height: 4px;
+    border: 0;
+    background-color: theme-color('secondary');
+  }
 
   .program-info {
     .quote {

lms/templates/courseware/program_marketing.html

@@ -41,11 +41,8 @@ endorser_position = endorser.get('position') or {}
 endorser_title = endorser_position.get('title')
 endorser_org = endorser_position.get('organization_name') or corporate_endorsement_name
 expected_learning_items = program['expected_learning_items']
-authoring_organizations = program['authoring_organizations']
 min_hours_effort_per_week = program['min_hours_effort_per_week']
 max_hours_effort_per_week = program['max_hours_effort_per_week']
-video_url = program['video'].get('src') if program['video'] else ''
-banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 %>
 
 <%block name="js_extra">
@@ -53,8 +50,16 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 </%block>
 
 <%block name="pagetitle">${program['title']}</%block>
-<div id="program-details-page" class="container">  
-  <div class="row main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
+<%block name="marketing_hero">
+  <%
+    banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
+    authoring_organizations = program['authoring_organizations']
+    video_url = program['video'].get('src') if program['video'] else ''
+  %>
+  <div id="program-details-hero">
+    <div class="main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image}); background-size:100%;">
+      <div class="container" >
+        <div class="row">
           <div class="col col-12 col-md-8">
             % if authoring_organizations and authoring_organizations[0]['logo_image_url']:
             <div>
@@ -90,7 +95,10 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
             % endif
           </div>
         </div>
+      </div>
+    </div>
     <div class="row quick-nav">
+      <div class="container">
         <ul class="nav nav-fill col-lg-12">
           <li class="nav-item">
             <a class="nav-link" href="#courses">${_('View Courses')}</a>
@@ -103,6 +111,11 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
           </li>
         </ul>
       </div>
+    </div>
+  </div>
+</%block>
+
+<div id="program-details-page" class="container">  
   <div class="row program-info">
     <div class="col col-12 col-lg-7">
       <div class="section">

lms/templates/main.html

@@ -157,6 +157,8 @@ from pipeline_mako import render_require_js_path_overrides
 
     <%include file="/page_banner.html" />
     
+    <div class="marketing-hero"><%block name="marketing_hero"></%block></div>
+
     <div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
       ${self.body()}
       <%block name="bodyextra"/>