Website: update device management page (#14262)

Closes: https://github.com/fleetdm/confidential/issues/3813

Changes:
- Added a section to the device management landing page.

website/assets/styles/pages/fleet-mdm.less

@@ -59,7 +59,7 @@
     }
   }
 
- [purpose='button-row'] {
+ [purpose='button-row'], [purpose='bottom-button-row'] {
     a {
       white-space: nowrap;
       font-weight: 700;
@@ -99,7 +99,6 @@
       left: 160px;
       width: 110%;
     }
-
     [purpose='animated-arrow-button-red'] {
       display: inline;
       padding-right: 40px;
@@ -117,27 +116,70 @@
       color: @core-fleet-black;
       text-decoration: none;
       &:after {
+        content: url('/images/arrow-right-red-16x16@2x.png');
+        transform: scale(0.5);
+        position: absolute;
+        top: -5px;
+        left: 80%; // <--- here
+        transition: 0.2s ease-in-out;
+        -o-transition: 0.2s ease-in-out;
+        -ms-transition: 0.2s ease-in-out;
+        -moz-transition: 0.2s ease-in-out;
+        -webkit-transition: 0.2s ease-in-out;
+        /*   opacity: 0; */
+      }
+      &:hover:after {
+        left: 82%; // <--- here
+        transition: 0.2s ease-in-out;
+        -o-transition: 0.2s ease-in-out;
+        -ms-transition: 0.2s ease-in-out;
+        -moz-transition: 0.2s ease-in-out;
+        -webkit-transition: 0.2s ease-in-out;
+        /*   opacity:1; */
+      }
+    }
+
+  }
+  [purpose='bottom-button-row'] {
+    margin-top: 120px;
+  }
+  [purpose='scope-transparency-animated-arrow-button'] {
+    display: inline;
+    font-size: 16px;
+    cursor: pointer;
+    position: relative;
+    width: fit-content;
+    min-width: 125px;
+    font-weight: bold;
+    user-select: none;
+    transition: 0.2s ease-in-out;
+    -o-transition: 0.2s ease-in-out;
+    -ms-transition: 0.2s ease-in-out;
+    -moz-transition: 0.2s ease-in-out;
+    -webkit-transition: 0.2s ease-in-out;
+    color: @core-fleet-black;
+    text-decoration: none;
+    &:after {
       content: url('/images/arrow-right-red-16x16@2x.png');
       transform: scale(0.5);
       position: absolute;
       top: -5px;
-      left: 80%; // <--- here
+      left: 100%; // <--- here
       transition: 0.2s ease-in-out;
       -o-transition: 0.2s ease-in-out;
       -ms-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
       -webkit-transition: 0.2s ease-in-out;
       /*   opacity: 0; */
-      }
-      &:hover:after {
-      left: 82%; // <--- here
+    }
+    &:hover:after {
+      left: 102%; // <--- here
       transition: 0.2s ease-in-out;
       -o-transition: 0.2s ease-in-out;
       -ms-transition: 0.2s ease-in-out;
       -moz-transition: 0.2s ease-in-out;
       -webkit-transition: 0.2s ease-in-out;
       /*   opacity:1; */
-      }
     }
   }
 
@@ -163,6 +205,12 @@
       max-height: 300px;
     }
   }
+  [purpose='scope-tansparency-feature-image'] {
+    img {
+      max-height: 320px;
+    }
+  }
+
   [purpose='large-feature-image'] {
     img {
       max-height: 250px;
@@ -174,20 +222,18 @@
     margin-bottom: 80px;
   }
   [purpose='checklist'] {
-    p {
-      padding-left: 28px;
-      text-indent: -28px;
-    }
-    p::before {
-      content: ' ';
-      background-image: url('/images/icon-checkmark-circle.svg');
-      background-size: 16px 16px;
-      display: inline-block;
-      position: relative;
-      top: 2px;
-      margin-right: 12px;
-      width: 16px;
+    margin-bottom: 24px;
+    display: flex;
+    flex-direction: row;
+    // justify-content: center;
+    align-items: center;
+    img {
       height: 16px;
+      width: 16px;
+      margin-right: 16px;
+    }
+    p {
+      margin-bottom: 0px;
     }
   }
 
@@ -276,6 +322,12 @@
       padding-left: 120px;
       padding-right: 120px;
     }
+
+    [purpose='scope-tansparency-feature-image'] {
+      img {
+        max-height: 355px;
+      }
+    }
   }
 
   @media (max-width: 1200px) {
@@ -309,7 +361,7 @@
 
   @media (max-width: 991px) {
 
-    [purpose='button-row'] {
+    [purpose='button-row'], [purpose='bottom-button-row'] {
       margin-right: auto;
       margin-left: auto;
     }
@@ -360,7 +412,7 @@
       margin-top: 80px;
     }
 
-    [purpose='feature-image'], [purpose='large-feature-image'] {
+    [purpose='feature-image'], [purpose='large-feature-image'], [purpose='scope-tansparency-feature-image'] {
       margin-bottom: 40px;
       img {
         max-height: 100%;
@@ -380,6 +432,10 @@
       max-width: 480px;
     }
 
+    [purpose='bottom-button-row'] {
+      margin-top: 80px;
+    }
+
     [purpose='tweets-container'] {
       padding-top: 80px;
       padding-bottom: 80px;
@@ -394,6 +450,7 @@
 
   @media (max-width: 575px) {
 
+
     [purpose='modal-content'] {
       background-color: #F9FAFC;
       padding: 24px;
@@ -413,7 +470,7 @@
       }
     }
 
-    [purpose='button-row'] {
+    [purpose='button-row'], [purpose='bottom-button-row'] {
       max-width: 100%;
       [purpose='cta-button'] {
         margin-right: 0px;
@@ -421,11 +478,15 @@
         margin-bottom: 24px;
       }
     }
+    [purpose='bottom-button-row'] {
+      margin-top: 60px;
+    }
 
     [purpose='feature'] {
       margin-top: 60px;
     }
 
+
     [purpose='page-container'] {
       padding-left: 20px;
       padding-right: 20px;
@@ -445,5 +506,10 @@
     }
 
   }
+  @media (max-width: 375px) {
+    [purpose='scope-transparency-animated-arrow-button'] {
+      font-size: 14px;
+    }
+  }
 
 }

website/views/pages/fleet-mdm.ejs

@@ -46,7 +46,32 @@
       </div>
     </div>
 
-    <div purpose="button-row" style="margin-top: 60px;" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
+    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+      <div purpose="scope-tansparency-feature-image">
+        <img alt="Transparency for end users" src="/images/device-management-transparency-438x373@2x.png">
+      </div>
+      <div purpose="feature-right-text-block" class="d-flex flex-column">
+        <h3>Transparency for end users</h3>
+
+        <p>Provide assurance to your end users about what information is being collected from their device.</p>
+        <div class="d-flex flex-column pb-4">
+          <div purpose="checklist">
+            <img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
+            <p>Let end users see the source code for exactly how they are being monitored.</p>
+          </div>
+          <div purpose="checklist">
+            <img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
+            <p>Set clear expectations about what is and isn’t acceptable use of work computers.</p>
+          </div>
+          <div purpose="checklist">
+            <img alt="A green circle containing a checkmark" src="/images/icon-checkmark-circle-green-16x16@2x.png">
+            <p>Let users participate in fixing things.</p>
+          </div>
+        </div>
+        <a purpose="scope-transparency-animated-arrow-button" href="/docs/using-fleet/fleet-desktop">Learn more about scope transparency</a>
+      </div>
+    </div>
+    <div purpose="bottom-button-row" class="d-flex flex-sm-row flex-column justify-content-center align-items-center mx-auto">
       <a purpose="cta-button" @click="clickOpenMdmModal()">See GitOps in action</a>
       <a @click="clickOpenChatWidget()" purpose="animated-arrow-button-red">Talk to an expert</a>
     </div>
@@ -54,7 +79,7 @@
   </div>
   <%/* End of page gradient */%>
   <div purpose="bottom-gradient">
-    <div purpose="tweets-container" class="container-fluid px-md-0 pb-0 d-flex flex-column justify-content-center">
+    <div purpose="tweets-container" class="container-fluid px-md-0 py-0 d-flex flex-column justify-content-center">
       <div purpose="section-heading" style="max-width: 720px" class="mx-auto text-center">
         <h4>Don’t know osquery?</h4>
         <h2>Dedicated support from osquery experts</h2>