Merge pull request #545 from Crunch-io/webinar-no-data-left-behind-18…

…7667136

New webinar No Data Left Behind website resources page

content/resources/no-data-left-behind.md

@@ -0,0 +1,16 @@
++++
+date = "2024-05-24T16:38:17+01:00"
+draft = false
+title = "No Data Left Behind:"
+about = "The benefits of taking control of your survey data management"
+schedule = ""
+label = "webinar recording"
+url = "//info.crunch.io/no-data-left-behind"
+weight = 200
+link = "Watch on demand"
+series = "webinars"
+main = "main"
+mainicon = "img/icons/webinar-icon-white.svg"
+icon = "img/icons/webinar-icon.svg"
+
++++

content/resources/take-tracker-analytics-online-recording.md

@@ -3,15 +3,12 @@ date = "2023-03-01T11:42:25Z"
 draft = false
 title = "Case Studies:  Take Tracker Analytics Online"
 about = " See Crunch.io in action presented by Chris Jones, Senior Director of Product, and Matt Steele, Director of Customer Success"
-schedule = ""
 label = "webinar recording"
 url = "//info.crunch.io/take-tracker-analytics-online-webinar-recording"
 weight = 200
 images = ["/img/icons/illustration_banner.svg"]
 link = "Watch now"
 series = "webinars"
-main = "main"
-mainicon = "img/icons/webinar-icon-white.svg"
 icon = "img/icons/webinar-icon.svg"
 
 +++

layouts/partials/banner.html

@@ -1,3 +1,3 @@
 <div class="header-banner">
-    <p class="banner-text text-center">Webinar - Case Studies: Taking Tracker Analytics Online | <a class="d-block d-sm-inline" href="//info.crunch.io/take-tracker-analytics-online-webinar-recording" target="_blank">Watch the Recording </a></p>
+    <p class="banner-text text-center">No Data Left Behind: The benefits of taking control of your survey data management | <a class="d-block d-sm-inline" href="//info.crunch.io/no-data-left-behind" target="_blank">Watch on demand </a></p>
 </div>

layouts/resources/list.html

@@ -7,7 +7,7 @@
     <div id="secondary-pages-wrapper">
         <div class="container-fluid">
 
-            <div class="resources-content ">
+            <div class="resources-content">
                 <div class="jumbotron">
                     <div class="container">
                         <div class="row justify-content-md-center">
@@ -21,26 +21,26 @@ <h1 class="display-4">{{ .Title }}</h1>
                 </div> <!-- /.jumbotron -->
                 <div class="container resources-main  ">
                   {{ range where .Pages "Params.main" "main" }}
-                  <div class="post-card post-card-main post-min-height post-card-main-green">
+                  <div class="post-card post-card-main post-min-height post-card-main-blue">
                       <div class="posts">
                           <div class="row">
                               <div class="col-md-7 col-sm-7 col-xs-12 post-card-main-content">
                                   <span><img src="{{ .Params.mainicon }}" alt="Icon"> {{ .Params.label }}</span>
                                   <h4 class="post-title">
-                                    
-                                    {{ with .Title }} 
-                                    
-                                            {{ index (split . " ") 0 }} {{ index (split . " ") 1 }} {{ index (split . " ") 2 }}<br/>  {{ index (split . " ") 3 }} {{ index (split . " ") 4 }} {{ index (split . " ") 5 }} {{ index (split . " ") 6 }}
-                                    
+
+                                    {{ with .Title }}
+
+                                            {{ index (split . " ") 0 }} {{ index (split . " ") 1 }} {{ index (split . " ") 2 }} {{ index (split . " ") 3 }} {{ index (split . " ") 4 }} {{ index (split . " ") 5 }} {{ index (split . " ") 6 }}
+
                                     {{ end }}</h4>
                                     <p class="mt-0" style="color: #0064a4">{{ .Params.about }}</p>
                                     <p style="color: #0064a4"> {{ .Params.schedule }}</p>
-                       
-                                    <a class="btn btn-primary mt-2" href="{{ .Params.url }}"  target="_blank" >{{ .Params.link }}</a>
+
+                                    <a class="btn btn-white mt-2" href="{{ .Params.url }}"  target="_blank" >{{ .Params.link }}</a>
                               </div>
 
-                              <div class="col-md-5 col-sm-5 d-none d-md-block d-lg-block">
-                                    <img src="/img/icons/illustration_banner.svg" alt="{{ .Title }}" class="img-fluid">
+                              <div class="d-none d-md-block d-lg-block image-container">
+                                    <img src="img/crunch-no-data-left-behind-social-watch-on-demand.png" alt="{{ .Title }}">
                               </div>
 
                               <!-- <div class="col-md-6 offset-md-1 figure d-none d-md-block d-lg-block"> </div> -->
@@ -65,7 +65,7 @@ <h4 class="post-title">
                   <div class="row spacer-bottom">
                      {{ $pages := where .Pages "Params.series" "events"}}
                       {{ range sort ($pages.ByParam "customdate")  }}
-                        
+
                           <div class="col-md-6 col-lg-4 resources-filter events-filter">
                               <div class="post-card post-min-height" onclick="location.href='{{ .Params.url }}'">
                                   <div class="posts">
@@ -146,8 +146,8 @@ <h4 class="post-title">{{ .Title | emojify }}</h4>
                               </div>
                           </div>
                       {{ end }}
-                     
-                     
+
+
                   </div>
 
               </div> <!-- /.container -->

source/scss/modules/_buttons.scss

@@ -80,6 +80,22 @@ a:focus-visible {
     color: $color-white;
 }
 
+.btn-white {
+    background-color: $color-white;
+    border-color: $color-white;
+    @include box_shadow("black");
+    color: $color-blue;
+    text-transform: uppercase;
+    font-weight: 700;
+
+    &:hover {
+        background-color: $--darker-message-color;
+        border-color: $--darker-message-color;
+        color: $color-white;
+        @include box_shadow("purple");
+    }
+}
+
 .a-link {
     font-family: 'Libre Baskerville', serif;
     font-style: italic;

source/scss/modules/_components.scss

@@ -648,9 +648,9 @@ figure {
         color: $color-blue;
         font-style: normal;
         font-size: 27px;
-        
+
     }
-    
+
     .carousel-item {
         height: 300px;
         img {

source/scss/modules/_sections.scss

@@ -322,8 +322,8 @@
         color: $color-white;
 
         .jumbotron {
-            background-color: $color-blue;
-            background-image: linear-gradient( $color-blue, $--darker-primary-color);
+            background-color: $color-green;
+            background-image: linear-gradient( $color-green, $--darker-secondary-color);
             height: 315px;
         }
 
@@ -337,17 +337,34 @@
             margin-top: -80px;
             margin-bottom: 50px;
         }
-        .post-card-main-green{
+        .post-card-main-blue{
+
+            background-color: #2070b2;
+            background-image: linear-gradient( #2070b2, $color-blue);
+            border: 1px solid $color-blue;
+
+            span {
+              color: $color-white !important;
+              font-weight: 700;
+            }
 
-            background-color: $color-green;
-            background-image: linear-gradient( $color-green, $--darker-secondary-color);
-            border: 1px solid $color-green;
-            span,
             p,
-            .post-title{
-                color: $color-white !important;
+            .post-title {
+              font-family: 'ProximaNova', sans-serif;
+              font-weight: 800;
+              color: $color-white !important;
             }
-            img{
+
+            h4 {
+              font-size: 3.3em;
+            }
+
+            p {
+              font-size: 1.8em;
+              line-height: 1.2em;
+            }
+
+            img {
                 fill: $color-white;
             }
             .btn-primary {
@@ -358,6 +375,12 @@
                 color: $color-green;
                 font-weight: bold;
             }
+
+            .image-container {
+              position: absolute;
+              bottom: 0;
+              right: 0;
+            }
         }
 
     }