Website: Add report image and homepage call to action (#6212)

* add image (TODO vertical alignment)

* Update state-of-device-management.ejs

* website: Add homepage report banner

* lint fixes

website/assets/images/homepage-report-cta-background.svg

@@ -0,0 +1,19 @@
+<svg width="1080" height="200" viewBox="0 0 1080 200" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M1080.36 -127.037C855.48 -218.67 700.872 -227.715 616.54 -154.171C490.054 -43.8547 565.927 18.1131 470.715 160.4C375.504 302.687 192.084 193.949 74.6736 281.275C-3.60016 339.493 -17.3769 640.446 33.3435 744.711L1080.36 746.302V-127.037Z" fill="url(#paint0_linear_4280_12200)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1234.37 90.6261C1009.48 -1.00724 854.874 -10.0518 770.542 63.4923C644.055 173.808 719.928 235.779 624.717 378.063C529.505 520.348 346.086 411.612 228.675 498.928C150.401 557.153 136.625 638.398 187.345 742.663L1234.37 710.199V90.6261Z" fill="url(#paint1_linear_4280_12200)" fill-opacity="0.5"/>
+<path opacity="0.05" fill-rule="evenodd" clip-rule="evenodd" d="M1621.28 75.4972C1396.39 -16.1361 1241.78 -25.1807 1157.45 48.3633C1030.97 158.679 1106.84 220.647 1011.63 362.934C916.416 505.221 732.997 396.483 615.586 483.799C537.313 542.024 523.536 623.269 574.256 727.534L1621.28 724.877V75.4972Z" fill="url(#paint2_linear_4280_12200)"/>
+<defs>
+<linearGradient id="paint0_linear_4280_12200" x1="1035.43" y1="330.804" x2="589.921" y2="-328.522" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F2B6F" stop-opacity="0"/>
+<stop offset="1" stop-color="#3F2B6F"/>
+</linearGradient>
+<linearGradient id="paint1_linear_4280_12200" x1="1187.71" y1="739.417" x2="741.531" y2="79.937" gradientUnits="userSpaceOnUse">
+<stop stop-color="#3F2B6F" stop-opacity="0"/>
+<stop offset="1" stop-color="#3F2B6F"/>
+</linearGradient>
+<linearGradient id="paint2_linear_4280_12200" x1="1082.81" y1="-0.75415" x2="1082.81" y2="727.534" gradientUnits="userSpaceOnUse">
+<stop stop-color="#AE6DDF"/>
+<stop offset="1" stop-color="#6A67FE"/>
+</linearGradient>
+</defs>
+</svg>

website/assets/styles/pages/homepage.less

@@ -88,6 +88,30 @@
     }
   }
 
+  [purpose='report-banner-container'] {
+    background: linear-gradient(#FFF 50%, #F4F6FA 50%);
+    padding-right: 40px;
+    padding-left: 40px;
+  }
+  [purpose='report-banner-cta'] {
+    max-width: 1080px;
+    margin-top: 40px;
+    border-radius: 16px;
+    background-color: #261c50;
+    background-image: url('/images/homepage-report-cta-background.svg');
+    background-position-x: right;
+    background-size: cover;
+    color: #FFF;
+    padding: 27px 87px 34px 87px;
+    img {
+      margin-right: 60px;
+    }
+    a {
+      font-weight: 400;
+      color: #FFF;
+    }
+  }
+
 
 
   @media (min-width: 1200px) {
@@ -121,6 +145,17 @@
         flex: 1 1 295px;
       }
     }
+    [purpose='report-banner-cta'] {
+      padding: 27px 43px 34px 43px;
+      img {
+        margin-right: 0px;
+      }
+
+    }
+    [purpose='report-banner-container'] {
+      padding-right: 20px;
+      padding-left: 20px;
+    }
   }
 
 
@@ -145,6 +180,10 @@
     [purpose='hero-clouds'] {
       background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 23%, rgba(255, 255, 255, 0) 48%, rgba(255, 255, 255, 0) 100%);
     }
+    [purpose='report-banner-container'] {
+      padding-right: 15px;
+      padding-left: 15px;
+    }
   }
 
   @media (min-width: 600px) and (max-width: (767px)) {

website/assets/styles/pages/reports/state-of-device-management.less

@@ -294,6 +294,12 @@
 
 
   @media (min-width: 1024px) {
+    [purpose='hero-content'] {
+      flex-direction: row;
+      [purpose='hero-image'] {
+        margin-left: 46px;
+      }
+    }
     [purpose='report-sidebar'] {
       width: 240px;
       max-width: 240px;
@@ -307,6 +313,10 @@
   @media (max-width: 1024px) {
     [purpose='hero-content'] {
       align-items: center;
+      flex-direction: column;
+      [purpose='hero-image'] {
+        display: none;
+      }
     }
     [purpose='report-container'] {
       padding-left: 40px;

website/views/pages/homepage.ejs

@@ -137,9 +137,18 @@
       </div>
     </div>
   </div>
-
-  <div id="testimonials" style="background: #F4F6FA;">
-    <div class="container-lg text-center justify-content-center py-5 mx-auto mt-5">
+  <div purpose="report-banner-container">
+    <div purpose="report-banner-cta" class="d-flex flex-column flex-lg-row justify-content-center align-items-center container">
+      <img class="mb-3 mb-lg-0" style="width: 309px; height: 138px" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
+      <div class="d-flex flex-column">
+        <h4 class="text-center text-lg-left">State of device management report</h4>
+        <p class="mb-0">We surveyed 200+ security practitioners in charge of device management.<br class="d-none d-sm-block"> Here’s what we learned about their struggles, frustrations, and desires.</p>
+        <a purpose="animated-arrow-button-red" class="btn pl-0 mx-auto ml-lg-0 pb-0" href="/reports/state-of-device-management">Read the report</a>
+      </div>
+    </div>
+  </div>
+  <div id="testimonials" style="background: #F4F6FA; position: relative">
+    <div class="container-lg text-center justify-content-center py-5 mx-auto">
       <h3 class="px-4 mt-5 mb-3">Community driven, and built on open core technology.</h3>
       <p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
         That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.

website/views/pages/reports/state-of-device-management.ejs

@@ -1,6 +1,6 @@
 <div id="state-of-device-management" v-cloak>
   <div purpose="hero-container" class="d-sm-flex justify-content-center align-items-center">
-    <div purpose="hero-content" class="container px-xl-0 d-sm-flex flex-column">
+    <div purpose="hero-content" class="container px-xl-0 d-sm-flex align-items-center">
       <div purpose="hero-text">
         <h1>State of device management</h1>
         <p>We surveyed 200+ security practitioners who are responsible for device management at their organization. Here’s what we learned about thier current challenges, frustrations, and desires when it comes to managing their devices.</p>
@@ -9,6 +9,9 @@
           <a class="btn" style="color: #FFF" href="/pdfs/Fleet.report.-.State.of.device.management.pdf" download="Fleet report - State of device management.pdf" target="_blank">Download PDF <img alt="An arrow pointing down" class="d-inline" src="/images/icon-arrow-down-16x16@2x.png"></a>
         </div>
       </div>
+      <div purpose="hero-image">
+        <img style="width: 394px;" alt="State of device management" src="/images/state-of-device-management-hero-394x177@2x.png">
+      </div>
     </div>
   </div>
   <div purpose="report-container" class="container-fluid d-flex flex-lg-row flex-column justify-content-between">