Website update device management (#16312)

Updated messaging on the device management landpage

---------

Co-authored-by: Eric <eashaw@sailsjs.com>

website/api/controllers/view-device-management.js

@@ -1,16 +1,16 @@
 module.exports = {
 
 
-  friendlyName: 'View fleet mdm',
+  friendlyName: 'View device management',
 
 
-  description: 'Display "Fleet mdm" page.',
+  description: 'Display "Device management" page.',
 
 
   exits: {
 
     success: {
-      viewTemplatePath: 'pages/fleet-mdm'
+      viewTemplatePath: 'pages/device-management'
     },
     badConfig: { responseType: 'badConfig' },
   },

website/assets/styles/importer.less

@@ -66,7 +66,7 @@
 @import 'pages/connect-vanta.less';
 @import 'pages/vanta-authorization.less';
 @import 'pages/admin/generate-license.less';
-@import 'pages/fleet-mdm.less';
+@import 'pages/device-management.less';
 @import 'pages/upgrade.less';
 @import 'pages/endpoint-ops.less';
 @import 'pages/transparency.less';

website/assets/styles/pages/device-management.less

@@ -1,19 +1,28 @@
 #device-management {
+  @heading-lineheight: 120%;
+  @text-lineheight: 150%;
+
+  @page-container-max-width-xl: 960px;
+  @page-container-max-width-lg: 840px;
+  @page-container-max-width-md: 480px;
+
   background: linear-gradient(180deg, #E8F1F6 0%, #FFF 8.76%);
+
   h1 {
-    font-size: 56px;
+    font-size: 48px;
     font-weight: 800;
-    line-height: 54px;
+    line-height: @heading-lineheight;
   }
   h2 {
     font-weight: 800;
     font-size: 32px;
-    line-height: 38px;
+    line-height: @heading-lineheight;
+    margin-bottom: 24px;
   }
   h3 {
+    font-size: 20px;
     font-weight: 800;
-    font-size: 24px;
+    line-height: @heading-lineheight;
-    line-height: 32px;
   }
   h4 {
     font-family: 'Roboto Mono';
@@ -26,30 +35,34 @@
   }
   p {
     font-size: 16px;
-    line-height: 24px;
+    line-height: @text-lineheight;
     color: @core-fleet-black-75;
   }
   strong {
-    colore: @core-fleet-black;
+    color: @core-fleet-black;
+  }
+  [purpose='page-content'] {
+    max-width: @page-container-max-width-xl;
   }
-   [purpose='page-content'] {
-      max-width: 960px;
-   }
 
-   [purpose='page-container'] {
+  [purpose='page-section'] {
-     padding-left: 120px;
+    margin-bottom: 160px;
-     padding-right: 120px;
+  }
-     margin-left: auto;
+
-     margin-right: auto;
+  [purpose='page-container'] {
-   }
+    padding-left: 120px;
+    padding-right: 120px;
+    margin-left: auto;
+    margin-right: auto;
+  }
 
   [purpose='page-headline'] {
-    padding-bottom: 60px;
+    margin-bottom: 60px;
     h2 {
       font-size: 64px;
       font-style: normal;
       font-weight: 800;
-      line-height: 1.2;
+      line-height: @heading-lineheight;
       margin-bottom: 0px;
     }
   }
@@ -60,7 +73,6 @@
   [purpose='hero-image'] {
     max-width: 380px;
     img {
-      padding-left: 25px;
       max-width: 100%;
       max-height: 100%;
       width: 380px;
@@ -84,7 +96,8 @@
     a {
       font-weight: 700;
       font-size: 16px;
-      line-height: 24px;
+      line-height: @text-lineheight;
+      white-space: nowrap;
     }
     [purpose='cta-button'] {
       cursor: pointer;
@@ -178,7 +191,7 @@
         font-size: 20px;
         font-style: italic;
         font-weight: 400;
-        line-height: 30px;
+        line-height: @text-lineheight;
       }
     }
     [purpose='quote-image'] {
@@ -193,20 +206,15 @@
       [purpose='name'] {
         font-size: 12px;
         font-weight: 700;
-        line-height: 18px;
         margin-bottom: 0px;
       }
       [purpose='title'] {
         color: @core-fleet-black-75;
         font-size: 12px;
         font-weight: 400;
-        line-height: 18px;
         margin-bottom: 0px;
       }
-
     }
-
-
   }
 
   [purpose='testimonial-video'] {
@@ -218,6 +226,7 @@
     display: flex;
     margin-bottom: 0px;
     position: relative;
+    box-shadow: none;
     span {
       img {
         height: 10.235px;
@@ -238,7 +247,7 @@
       font-size: 11.132px;
       font-style: normal;
       font-weight: 400;
-      line-height: 16.698px;
+      line-height: @text-lineheight;
     }
     &:hover {
       box-shadow: 0px 4px 16px 0px #E2E4EA;
@@ -292,7 +301,7 @@
   }
 
   [purpose='feature'] {
-    margin-bottom: 180px;
+    margin-bottom: 140px;
     h3 {
       margin-bottom: 24px;
     }
@@ -301,11 +310,17 @@
     }
   }
 
+  [purpose='feature-note'] {
+    padding-top: 40px;
+    font-size: 12px;
+    margin-bottom: 0px;
+  }
+
   [purpose='feature-image'].left {
-    margin-left: 24px;
+    margin-right: 24px;
   }
   [purpose='feature-image'].right {
-    margin-right: 24px;
+    margin-left: 24px;
   }
   [purpose='feature-image'] {
     max-width: 380px;
@@ -327,7 +342,6 @@
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
-      line-height: 21px;
       padding-left: 37px;
       text-indent: -37px;
       margin-bottom: 1.5rem;
@@ -347,9 +361,53 @@
       height: 20px;
     }
   }
+  [purpose='feature-headline'] {
+    max-width: 510px;
+    margin-bottom: 80px;
+  }
+  [purpose='two-column-features'] {
+    max-width: 1080px;
+    margin-bottom: 140px;
+  }
+  [purpose='feature-row'] {
+    margin-bottom: 80px;
+    [purpose='feature-column'] {
+      margin-left: 40px;
+      margin-right: 40px;
+      max-width: 440px;
+      p {
+        font-size: 14px;
+        margin-bottom: 0px;
+      }
+      img {
+        height: 48px;
+        width: auto;
+        margin-bottom: 16px;
+      }
+      h5 {
+        font-weight: 800;
+        font-size: 16px;
+        line-height: @heading-lineheight;
+        margin-bottom: 16px;
+      }
+    }
+  }
+  [purpose='three-column-features'] {
+    margin-bottom: 160px;
+    max-width: 1080px;
+    [purpose='feature-row'] {
+      [purpose='feature-column'] {
+        max-width: 267px;
+      }
+    }
+  }
+
+
   [purpose='tweets-container'] {
-    padding-top: 200px;
+    padding-top: 160px;
-    max-width: 960px;
+    max-width: @page-container-max-width-xl;
+    padding-left: 80px;
+    padding-right: 80px;
   }
   [parasails-component='scrollable-tweets'] {
     [purpose='tweets'] {
@@ -377,11 +435,11 @@
         max-width: 100%;
       }
       [purpose='modal-content'] {
-        max-width: 960px;
+        max-width: @page-container-max-width-xl;
         height: 540px;
       }
       iframe {
-        width: 960px;
+        width: @page-container-max-width-xl;
         height: 540px;
       }
     }
@@ -393,10 +451,24 @@
       padding-right: 40px;
     }
     [purpose='page-content'] {
-      max-width: 840px;
+      max-width: @page-container-max-width-lg;
     }
     [purpose='tweets-container'] {
-      max-width: 840px;
+      max-width: @page-container-max-width-lg;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+    [purpose='testimonials'] {
+      margin-bottom: 100px;
+    }
+    [purpose='page-section'] {
+      margin-bottom: 140px;
+    }
+    [purpose='tweets-container'] {
+      padding-top: 120px;
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 140px;
     }
     [purpose='testimonial-videos'] {
       width: 410px;
@@ -407,31 +479,53 @@
     [purpose='feature-text'] {
       width: 410px;
     }
+
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
+        margin-left: 40px;
+      }
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
+        margin-right: 40px;
+      }
+    }
   }
 
   @media (max-width: 767px) {
-
-    [purpose='page-container'] {
-      padding-left: 40px;
-      padding-right: 40px;
-    }
     [purpose='page-content'] {
-      max-width: 480px;
+      max-width: @page-container-max-width-md;
     }
     [purpose='tweets-container'] {
-      max-width: 480px;
+      max-width: @page-container-max-width-md;
-      padding-left: 40px;
-      padding-right: 40px;
       padding-top: 120px;
     }
     [purpose='page-headline'] {
-      padding-bottom: 80px;
+      margin-bottom: 60px;
       width: 100%;
       h2 {
         font-size: 42px;
-        line-height: 50.4px;
       }
     }
+    [purpose='testimonials'] {
+      margin-bottom: 80px;
+    }
+    [purpose='testimonial-quote'] {
+      [purpose='quote'] {
+        p {
+          font-size: 18px;
+        }
+      }
+    }
+    [purpose='page-section'] {
+      margin-bottom: 120px;
+    }
+    [purpose='tweets-container'] {
+      padding-top: 120px;
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 140px;
+    }
     [purpose='hero-image'] {
       margin-right: unset;
     }
@@ -442,6 +536,7 @@
     [purpose='testimonial-videos'] {
       width: unset;
     }
+
     [purpose='button-row'] {
       max-width: 100%;
       [purpose='cta-button'] {
@@ -456,23 +551,48 @@
     [purpose='feature'] {
       margin-bottom: 120px;
     }
+    [purpose='feature'].flex-column {
+      [purpose='feature-text'] {
+        margin-left: auto;
+      }
+    }
+    [purpose='feature'].flex-column-reverse {
+      [purpose='feature-text'] {
+        margin-right: auto;
+      }
+    }
     [purpose='feature-image'] {
       margin-left: auto;
       margin-right: auto;
       margin-bottom: 60px;
       &.left {
-        margin-left: auto;
+        margin-right: auto;
       }
       &.right {
-        margin-right: auto;
+        margin-left: auto;
+      }
+    }
+    [purpose='three-column-features'] {
+      [purpose='feature-row'] {
+        margin-bottom: 60px;
+        [purpose='feature-column'] {
+          margin-bottom: 60px;
+          margin-left: 0px;
+          margin-right: 0px;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          max-width: unset;
+          p {
+            margin-bottom: 0px;
+          }
+        }
       }
     }
     [purpose='hero-image'] {
       margin-bottom: 60px;
     }
-    [purpose='testimonials'] {
-      margin-bottom: 120px;
-    }
     [purpose='testimonial-videos'] {
       margin-left: auto;
       margin-right: auto;
@@ -515,14 +635,7 @@
   }
 
   @media (max-width: 575px) {
-    [purpose='page-container'] {
+
-      padding-left: 40px;
-      padding-right: 40px;
-    }
-    [purpose='tweets-container'] {
-      padding-left: 40px;
-      padding-right: 40px;
-    }
     [purpose='feature-image'] {
       img {
         max-width: 100%;
@@ -545,19 +658,58 @@
         margin-left: 10px;
       }
     }
+    [purpose='page-headline'] {
+      margin-bottom: 80px;
+    }
+    [purpose='page-section'] {
+      margin-bottom: 100px;
+    }
+    [purpose='tweets-container'] {
+      padding-top: 100px;
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 100px;
+    }
+    [purpose='two-column-features'] {
+      margin-bottom: 100px;
+    }
+    [purpose='video-modal'] {
+      [purpose='modal-content'] {
+        width: 95vw;
+        height: calc(~'9/16 * 95vw');
+      }
+      iframe {
+        width: 95vw;
+        height: calc(~'9/16 * 95vw');
+      }
+    }
 
-   [purpose='video-modal'] {
+    [purpose='two-column-features'] {
-     [purpose='modal-content'] {
+      [purpose='feature-row'] {
-       width: 95vw;
+        margin-bottom: 60px;
-       height: calc(~'9/16 * 95vw');
+        [purpose='feature-column'] {
-     }
+          max-width: unset;
-     iframe {
+          margin-bottom: 60px;
-       width: 95vw;
+          margin-left: 0px;
-       height: calc(~'9/16 * 95vw');
+          margin-right: 0px;
-     }
+          text-align: center;
-   }
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          p {
+            margin-bottom: 0px;
+          }
+        }
+      }
+    }
   }
   @media (max-width: 472px) {
+    h1 {
+      font-size: 32px;
+    }
+    h2 {
+      font-size: 24px;
+    }
     [purpose='testimonial-videos'] {
       flex-direction: column;
     }
@@ -574,12 +726,34 @@
         margin-left: auto;
       }
     }
-
   }
   @media (max-width: 375px) {
+    [purpose='page-headline'] {
+      margin-bottom: 60px;
+    }
+    [purpose='testimonial-quote'] {
+      [purpose='quote'] {
+        p {
+          font-size: 16px;
+        }
+      }
+    }
+    [purpose='page-section'] {
+      margin-bottom: 80px;
+    }
+    [purpose='tweets-container'] {
+      padding-top: 80px;
+    }
+    [purpose='three-column-features'] {
+      margin-bottom: 80px;
+    }
+    [purpose='two-column-features'] {
+      margin-bottom: 80px;
+    }
+
     [purpose='page-container'] {
-      padding-left: 32px;
+      padding-left: 20px;
-      padding-right: 32px;
+      padding-right: 20px;
     }
     [purpose='tweets-container'] {
       padding-left: 32px;

website/assets/styles/pages/homepage.less

@@ -540,7 +540,7 @@
         border-radius: 12px;
         border: 1px dashed #C5C7D1;
         background: rgba(0, 0, 0, 0.01);
-        &:has(img){
+        &:has(img) {
           background: #FFF;
         }
         margin-left: 8px;
@@ -1116,7 +1116,7 @@
             border-radius: 12px;
             border: 1px dashed #C5C7D1;
             background: rgba(0, 0, 0, 0.01);
-            &:has(img){
+            &:has(img) {
               background: #FFF;
             }
             margin-left: 8px;

website/config/policies.js

@@ -47,7 +47,7 @@ module.exports.policies = {
   'view-connect-vanta': true,
   'view-vanta-authorization': true,
   'create-vanta-authorization-request': true,
-  'view-fleet-mdm': true,
+  'view-device-management': true,
   'deliver-mdm-beta-signup': true,
   'deliver-apple-csr': true,
   'download-rss-feed': true,

website/config/routes.js

@@ -249,7 +249,7 @@ module.exports.routes = {
   },
 
   'GET /device-management': {
-    action: 'view-fleet-mdm',
+    action: 'view-device-management',
     locals: {
       pageTitleForMeta: 'Device management (MDM) | Fleet',
       pageDescriptionForMeta: 'Configure your devices with sensible defaults, or customize MDM features exactly how you want. Manage your IT infrastructure in any browser or use git to make changes as code.',

website/views/layouts/layout-customer.ejs

@@ -237,6 +237,7 @@
     <script src="/js/pages/customers/dashboard.page.js"></script>
     <script src="/js/pages/customers/new-license.page.js"></script>
     <script src="/js/pages/dashboard/welcome.page.js"></script>
+    <script src="/js/pages/device-management.page.js"></script>
     <script src="/js/pages/docs/basic-documentation.page.js"></script>
     <script src="/js/pages/endpoint-ops.page.js"></script>
     <script src="/js/pages/entrance/confirmed-email.page.js"></script>
@@ -245,7 +246,6 @@
     <script src="/js/pages/entrance/new-password.page.js"></script>
     <script src="/js/pages/entrance/signup.page.js"></script>
     <script src="/js/pages/faq.page.js"></script>
-    <script src="/js/pages/fleet-mdm.page.js"></script>
     <script src="/js/pages/fleetctl-preview.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>

website/views/layouts/layout-sandbox.ejs

@@ -342,6 +342,7 @@
     <script src="/js/pages/customers/dashboard.page.js"></script>
     <script src="/js/pages/customers/new-license.page.js"></script>
     <script src="/js/pages/dashboard/welcome.page.js"></script>
+    <script src="/js/pages/device-management.page.js"></script>
     <script src="/js/pages/docs/basic-documentation.page.js"></script>
     <script src="/js/pages/endpoint-ops.page.js"></script>
     <script src="/js/pages/entrance/confirmed-email.page.js"></script>
@@ -350,7 +351,6 @@
     <script src="/js/pages/entrance/new-password.page.js"></script>
     <script src="/js/pages/entrance/signup.page.js"></script>
     <script src="/js/pages/faq.page.js"></script>
-    <script src="/js/pages/fleet-mdm.page.js"></script>
     <script src="/js/pages/fleetctl-preview.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>

website/views/layouts/layout.ejs

@@ -429,6 +429,7 @@
     <script src="/js/pages/customers/dashboard.page.js"></script>
     <script src="/js/pages/customers/new-license.page.js"></script>
     <script src="/js/pages/dashboard/welcome.page.js"></script>
+    <script src="/js/pages/device-management.page.js"></script>
     <script src="/js/pages/docs/basic-documentation.page.js"></script>
     <script src="/js/pages/endpoint-ops.page.js"></script>
     <script src="/js/pages/entrance/confirmed-email.page.js"></script>
@@ -437,7 +438,6 @@
     <script src="/js/pages/entrance/new-password.page.js"></script>
     <script src="/js/pages/entrance/signup.page.js"></script>
     <script src="/js/pages/faq.page.js"></script>
-    <script src="/js/pages/fleet-mdm.page.js"></script>
     <script src="/js/pages/fleetctl-preview.page.js"></script>
     <script src="/js/pages/handbook/basic-handbook.page.js"></script>
     <script src="/js/pages/homepage.page.js"></script>

website/views/pages/device-management.ejs

@@ -0,0 +1,216 @@
+<div id="device-management" v-cloak>
+  <div purpose="page-container">
+    <div purpose="page-content" class="mx-auto">
+      <div purpose="hero">
+        <div purpose="page-headline">
+          <h4>Device management (MDM)</h4>
+          <h1>Manage everything in one place</h1>
+        </div>
+        <div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
+          <div purpose="hero-image">
+            <img alt="A laptop using Fleet to accurately display the status of MDM configurations" src="/images/device-management-hero-380x293@2x.png">
+          </div>
+          <div purpose="hero-text">
+            <strong>Your last MDM migration</strong>
+            <p>Even if you've never done an MDM migration, you've probably heard it's hard.  Fleet makes it easy to get your data in and get it out.</p>
+            <strong>Consolidate your tools</strong>
+            <p>Deploy a modern Mac-first MDM that’s purpose-built to manage your Apple, Windows, and Linux computers.</p>
+            <strong>Implement “zero trust” faster</strong>
+            <p>Use Fleet to enforce conditional access checking at login. (It's pretty easy to customize whatever you need.)</p>
+            <div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
+              <a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
+              <a purpose="animated-arrow-button-red" href="/pricing">View source code</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
+        <div purpose="testimonial-quote">
+          <div purpose="quote">
+            <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
+            <p>We wanted an open-source MDM to easily use configuration-as-code, deliver the best possible experience for our employees, and make security happy.</p>
+          </div>
+          <div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
+            <div purpose="quote-image"><img src="/images/testimonial-kenny-botelho-48x48@2x.jpg" alt="Kenny Botelho"></div>
+            <div class="d-flex flex-column">
+              <p purpose="name">Kenny Botelho</p>
+              <p purpose="title">Lead Client Platform Engineer</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+      <%/* Your last MDM migration section */%>
+      <div purpose="page-section">
+        <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center mb-0">
+          <div purpose="feature-image" class="left">
+            <img alt="Your last MDM migration" src="/images/device-management-feature-image-1-380x320@2x.png">
+          </div>
+          <div purpose="feature-text" class="d-flex flex-column">
+            <h2>Your last MDM migration</h2>
+            <p>Even if you've never done an MDM migration, you've probably heard it's hard.  Fleet makes it easy to get your data in <i>and</i> get it out.</p>
+            <div purpose="checklist" class="flex-column d-flex">
+            <p>Ramp up to modern management faster with the latest compliance standards and security features built in.</p>
+            <p>Reclaim lost engineering hours and leave clicky-clicky manual entry in the past. (There's a great GUI if you like clicking.)</p>
+            <p>Lower barriers to integration with an intentional API-first design and surprisingly easy access to data. Everything you can do in the UI, you can do with the API.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <%/* Consolidate your tools section */%>
+      <div purpose="page-section">
+        <div purpose="feature-headline">
+          <h2>Consolidate your tools</h2>
+          <p>Deploy a modern Mac-first MDM that’s purpose-built to manage your Apple, Windows, and Linux computers.</p>
+        </div>
+
+        <div purpose="two-column-features" class="mx-auto">
+
+          <div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center">
+            <div purpose="feature-column" class="ml-sm-0">
+            <img alt="Patch every OS" src="/images/device-management-icon-patch-every-os-48x48@2x.png">
+              <h5>Patch every OS</h5>
+              <p>Shorten patch timelines with custom, enforceable deadlines and grace periods for every operating system. Encourage updates with Declarative Device Management (DDM), Nudge, and Windows Update from one interface.</p>
+            </div>
+
+            <div purpose="feature-column" class="mr-sm-0 mb-0">
+            <img alt="Push profiles" src="/images/device-management-icon-verify-updates-and-settings-48x48@2x.png">
+              <h5>Push profiles</h5>
+              <p>Remote-control settings on your Macs and PCs like Wi-Fi, certificates, passwords, screen lock, etc.  Deploy baselines or customize your own to comply with your organization’s security requirements.</p>
+            </div>
+          </div>
+
+          <div purpose="feature-row" class="d-flex flex-sm-row flex-column justify-content-center mb-0">
+            <div purpose="feature-column" class="ml-sm-0">
+            <img alt="Manage software installs from anywhere" src="/images/device-management-icon-automatic-posture-assessment-48x48@2x.png">
+              <h5>Manage software installs from anywhere</h5>
+              <p>Get employees the software and settings they need with less drama by managing app packages, operating system versions, and patch levels for every platform, on top of open standards and data.</p>
+            </div>
+
+            <div purpose="feature-column" class="mr-sm-0 mb-0">
+            <img alt="Access the latest Apple and Windows APIs" src="/images/device-management-icon-circular-action-48x48@2x.png">
+              <h5>Access the latest Apple and Windows APIs</h5>
+              <p>Turn on the latest native macOS and Windows operating system capabilities like DDM and Autopilot, all in one place. Fleet’s team and community test against every new Apple and Microsoft release.</p>
+            </div>
+          </div>
+        </div>
+
+        <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+          <div purpose="feature-image" class="left">
+            <img alt="Absolute certainty" src="/images/device-management-absolute-certainty-380x320@2x.png">
+          </div>
+          <div purpose="feature-text" class="d-flex flex-column">
+            <h3>Onboard and offboard employees remotely</h3>
+            <p>Easily enroll everything in one place and please auditors without making engineers give up their Linux computers.</p>
+            <div purpose="checklist" class="flex-column d-flex">
+              <p>Offboard employees with remote lock, and decommission lost and stolen devices with remote wipe.</p>
+              <p>Connect to identity providers like Okta, Azure, Google Workspace, or any other that supports OpenID Connect.</p>
+              <p>Keep hard disks encrypted with key escrow for FileVault and Bitlocker, and prove it with a couple of clicks or the REST API.</p>
+              <p>Enroll all your devices with Apple Business Manager, Microsoft Autopilot, and built-in packages for Linux systems.</p>
+            </div>
+          </div>
+        </div>
+
+        <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
+          <div purpose="feature-text" class="d-flex flex-column">
+            <h3>Manage everything in one place</h3>
+            <p>Manage your IT infrastructure in any browser or <a target="_blank" href="https://github.com/fleetdm/fleet-gitops">use git</a> to make infrastructure changes as code. You can use the CLI or API to automate the deployment, configuration, and monitoring of your devices.</p>
+          </div>
+          <div purpose="feature-image" class="right">
+            <img alt="ClickOps or DevOps" src="/images/device-management-clickops-or-devops-380x280@2x.png">
+          </div>
+        </div>
+      </div>
+      <%/* Implement “zero trust” faster section */%>
+      <div purpose="page-section">
+        <div purpose="feature-headline" style="max-width: 580px;">
+          <h2>Implement “zero trust” faster</h2>
+          <p>Use Fleet to enforce conditional access checking at login. (It's pretty easy to customize whatever you need.)</p>
+        </div>
+
+        <div purpose="three-column-features" class="mx-auto">
+          <div purpose="feature-row" class="d-flex flex-md-row flex-column align-items-md-start align-items-center justify-content-center">
+
+            <div purpose="feature-column" class="ml-md-0">
+              <img alt="Control the login experience" src="/images/device-management-icon-control-login-experience-48x48@2x.png" class="mx-auto mx-sm-0">
+              <h5>Control the login experience</h5>
+              <p>Ensure that only healthy, up-to-date devices can log in and access company data and resources with conditional access.</p>
+            </div>
+
+            <div purpose="feature-column">
+              <img alt="Manage device posture" src="/images/device-management-icon-manage-device-posture-48x48@2x.png">
+              <h5>Manage device posture</h5>
+              <p>Find vulnerable software, track progress for security remediation project deadlines, and enforce due dates with automations and tickets.</p>
+            </div>
+
+            <div purpose="feature-column" class="mr-md-0 mb-0">
+              <img alt="Simplify health checks" src="/images/device-management-icon-simplify-health-checks-48x48@2x.png">
+              <h5>Simplify health checks</h5>
+              <p>Use <a href="https://fleetdm.com/queries">common health checks</a> from industry peers, or easily create your own with low-level access to system data and events.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div purpose="page-section">
+        <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
+          <div purpose="feature-text" class="d-flex flex-column">
+            <h2>Absolute certainty</h2>
+            <p>Reduce time wasted hunting down whether a change happened. Actually verify that settings are applied using real data pulled from your users' devices.</p>
+            <div purpose="checklist" class="flex-column d-flex">
+              <p>Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting etc)</p>
+              <p>Every change to a policy or security control is tracked and auditable in Fleet’s history, or via the repo commit log</p>
+            </div>
+          </div>
+          <div purpose="feature-image" class="right">
+            <img alt="A laptop using Fleet to accurately display the status of MDM configurations" src="/images/device-management-hero-image-380x396@2x.png">
+          </div>
+        </div>
+      </div>
+
+      <div purpose="page-section" class="mb-0">
+        <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
+          <div purpose="feature-image" class="left">
+            <img alt="Transparency for end users" src="/images/device-management-transparency-380x320@2x.png">
+          </div>
+          <div purpose="feature-text" class="d-flex flex-column">
+            <h2>Scope transparency</h2>
+            <p>Increase <a href="https://fleetdm.com/handbook/company/why-this-way#why-open-source">buy-in</a> from end users by clarifying how their work computers are managed.</p>
+            <div purpose="checklist" class="flex-column d-flex">
+              <p>Give end users assurance about what actions IT can take on their computer</p>
+              <p>Let end users see exactly what data is collected, all the way down to the source code</p>
+              <p>Set clear expectations about how to configure company devices</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </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="section-heading" class="mx-auto text-center">
+        <h4>Who else uses Fleet?</h4>
+        <h2>Empowering IT teams</h2>
+      </div>
+    </div>
+
+    <scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
+    <div purpose="page-container" class="pb-0 container">
+
+      <div purpose="section-headline" class="text-center">
+        <h4>Device management (MDM)</h4>
+        <h2>Manage devices like code</h2>
+        <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
+          <a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
+          <a purpose="animated-arrow-button-red" href="/pricing">View source code</a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <%/* Cloud city banner */%>
+  <parallax-city :is-mobile="bowser.mobile"></parallax-city>
+</div>
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>

website/views/pages/fleet-mdm.ejs

@@ -1,168 +0,0 @@
-<div id="device-management" v-cloak>
-  <div purpose="page-container">
-    <div purpose="page-content" class="mx-auto">
-    <div purpose="hero">
-      <div purpose="page-headline">
-        <h4>Device management (MDM)</h4>
-        <h2>Manage devices like code</h2>
-      </div>
-      <div purpose="hero-content" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
-        <div purpose="hero-image">
-          <img alt="A laptop using Fleet to accurately display the status of MDM configurations" src="/images/device-management-hero-image-380x396@2x.png">
-        </div>
-        <div purpose="hero-text">
-          <strong>Convention over configuration</strong>
-          <p>Configure your devices with sensible defaults, or customize every traditional MDM feature exactly how you want it.</p>
-          <strong>Absolute certainty</strong>
-          <p><em>Actually</em> verify that settings are applied using real data pulled from your users' devices.</p>
-          <strong>ClickOps or DevOps</strong>
-          <p>Manage your IT infrastructure in any browser or use git to make changes as code. Use the CLI or API to automate the deployment, configuration, and monitoring of your devices.</p>
-          <div purpose="button-row" class="d-flex flex-md-row flex-column justify-content-start align-items-center">
-            <a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
-            <a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div purpose="testimonials" class="d-flex flex-md-row flex-column align-items-center justify-content-between">
-      <div purpose="testimonial-quote">
-        <div purpose="quote">
-          <img alt="an opening quotation mark" style="width:20px; margin-bottom: 16px;" src="/images/icon-quote-21x17@2x.png">
-          <p>We wanted an open-source MDM that is easy to integrate with our configuration-as-code environment and to deliver the best possible experience for our employees and make security happy.</p>
-        </div>
-        <div purpose="quote-attribution" class="d-flex flex-md-row flex-column align-items-center">
-          <div purpose="quote-image"><img src="/images/testimonial-kenny-botelho-48x48@2x.jpg" alt="Kenny Botelho"></div>
-          <div class="d-flex flex-column">
-            <p purpose="name">Kenny Botelho</p>
-            <p purpose="title">Lead Client Platform Engineer</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
-        <img alt="Convention over configuration" src="/images/device-management-convention-over-configuration-380x320@2x.png">
-      </div>
-      <div purpose="feature-text" class="d-flex flex-column">
-        <h3>Convention over configuration</h3>
-        <p>Configure your users' computers with sensible defaults, or customize every traditional MDM feature exactly how you want it with Fleet's API, CLI, and webhooks.</p>
-        <div purpose="checklist" class="flex-column d-flex">
-          <p>Migrate devices quickly with out-of-the-box features, or control every detail using a modern REST API</p>
-          <p>Tasked with zero trust? Use sensible, enterprise-ready device health checks from the community, or build your own</p>
-          <p>Set up and verify ongoing compliance with CIS standards (one click, 400+ queries, supported by Fleet), or pick and choose baselines for different environments</p>
-          <p>Use default workflows for employee offboarding, or run any low-level MDM command</p>
-        </div>
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
-      <div purpose="feature-text" class="d-flex flex-column">
-        <h3>Absolute certainty</h3>
-        <p>Reduce time wasted hunting down whether a change happened. <em>Actually</em> verify that settings are applied using real data pulled from your users' devices.</p>
-        <div purpose="checklist" class="flex-column d-flex">
-          <p>Use a git repo as the source of truth to reduce errors (submitting the wrong patch, configuration setting, etc.)</p>
-          <p>Every change to a policy or security control is tracked and auditable in Fleet’s history, or via the repo commit log</p>
-        </div>
-      </div>
-      <div purpose="feature-image" class="left">
-        <img alt="Absolute certainty" src="/images/device-management-absolute-certainty-380x320@2x.png">
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column justify-content-between mx-auto align-items-center">
-      <div purpose="feature-image" class="right">
-        <img alt="ClickOps or DevOps" src="/images/device-management-clickops-or-devops-380x280@2x.png">
-      </div>
-      <div purpose="feature-text" class="d-flex flex-column">
-        <h3>ClickOps or DevOps</h3>
-        <p>Manage your IT infrastructure in any browser, or <a target="_blank" href="https://github.com/fleetdm/fleet-gitops">use git</a> to make changes using your existing <a href="https://fleetdm.com/handbook/company/why-this-way#why-direct-responsibility">approval processes</a> and audit trail.</p>
-      </div>
-    </div>
-
-    <div purpose="feature" class="d-flex flex-md-row flex-column-reverse justify-content-between mx-auto align-items-center">
-      <div purpose="feature-text" class="d-flex flex-column">
-        <h3>Scope transparency</h3>
-        <p>Increase <a href="https://fleetdm.com/handbook/company/why-this-way#why-open-source">buy-in</a> from end users by clarifying how their work computers are managed.</p>
-        <div purpose="checklist" class="flex-column d-flex">
-          <p>Give end users assurance about what actions IT can take on their computer</p>
-          <p>Let end users see exactly what data is collected, all the way down to the source code</p>
-          <p>Set clear expectations about how to configure company devices</p>
-        </div>
-      </div>
-      <div purpose="feature-image" class="left">
-        <img alt="Transparency for end users" src="/images/device-management-transparency-380x320@2x.png">
-      </div>
-    </div>
-
-  </div>
-  </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="section-heading" class="mx-auto text-center">
-        <h4>Who else uses Fleet?</h4>
-        <h2>Empowering IT teams</h2>
-      </div>
-    </div>
-
-    <scrollable-tweets :testimonials="testimonialsForScrollableTweets"></scrollable-tweets>
-    <div purpose="page-container" class="pb-0 container">
-
-      <div purpose="section-headline" class="text-center">
-        <h4>Device management (MDM)</h4>
-        <h2>Manage devices like code</h2>
-        <div purpose="button-row" style="margin-top: 32px;" class="d-flex flex-md-row flex-column justify-content-center align-items-center mx-auto">
-          <a purpose="cta-button" @click="clickOpenChatWidget()">Show me</a>
-          <a purpose="animated-arrow-button-red" href="/try-fleet">See real data</a>
-        </div>
-      </div>
-    </div>
-  </div>
-  <%/* Cloud city banner */%>
-  <parallax-city :is-mobile="bowser.mobile"></parallax-city>
-  <modal v-if="modal === 'mdm'" @close="closeModal()" data-backdrop="false" v-cloak purpose="modal">
-    <div class="container p-0 d-flex flex-column justify-content-center align-items-center" purpose="mdm-modal">
-      <div purpose="modal-form"  v-if="!showSignupFormSuccess">
-      <div class="modal-header pb-2">
-        <h2 class="text-center mb-2">Is it any good?</h2>
-        <p>Fill out the form below to see Dave bootstrapping a macOS device with MDM.</p>
-      </div>
-        <ajax-form action="deliverMdmDemoEmail" class="mdm-demo-video w-100" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-data="formData" :form-rules="formRules" :form-errors.sync="formErrors" @submitted="submittedForm()">
-            <div class="form-group">
-              <label for="emailAddress">Work email</label>
-              <input class="form-control" id="emailAddress" :class="[formErrors.emailAddress ? 'is-invalid' : '']" v-model.trim="formData.emailAddress" @input="typeClearOneFormError('emailAddress')">
-              <div class="invalid-feedback" v-if="formErrors.emailAddress" focus-first>Please enter a valid email address</div>
-            </div>
-            <div class="form-group">
-              <p style="padding-bottom: 12px;" class="mb-0 font-weight-bold">How many hosts do you have?</p>
-                <div class="form-check">
-                  <input class="form-check-input" type="radio" id="more-than-1000" value="true" v-model="formData.hasOverOneThousandHosts" :class="[formErrors.hasOverOneThousandHosts ? 'is-invalid' : '']">
-                  <label class="form-check-label font-weight-normal" for="more-than-1000">
-                    More than 1,000
-                  </label>
-                </div>
-                <div class="form-check">
-                  <input class="form-check-input" type="radio" id="less-than-1000" value="false" v-model="formData.hasOverOneThousandHosts" :class="[formErrors.hasOverOneThousandHosts ? 'is-invalid' : '']">
-                  <label class="form-check-label font-weight-normal" for="less-than-1000">
-                    Less than 1,000
-                  </label>
-                  <div class="invalid-feedback" style="margin-left: -20px;" v-if="formErrors.hasOverOneThousandHosts" focus-first>Please choose one option</div>
-                </div>
-            </div>
-            <cloud-error v-if="cloudError"></cloud-error>
-          <div class="border-0 justify-content-center">
-            <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-sm btn-block btn-primary">Submit</ajax-button>
-          </div>
-        </ajax-form>
-        <p class="mb-0 mt-4"><a href="/handbook/company/why-this-way#why-dont-we-sell-like-everyone-else" target="_blank">We will never spam you</a>.</p>
-      </div>
-      <div purpose="modal-form" class="text-center" v-else>
-        <h2 class="mb-2">Thank you!</h2>
-        <p class="mb-4">We just sent you an email in case you need to watch it again.</p>
-        <a purpose="cta-button" class="btn btn-primary btn-block" href="https://play.goconsensus.com/ue326b4dd" target="_blank"><p class="mb-0">Watch Dave's MDM demo</p></a>
-      </div>
-    </div>
-  </modal>
-</div>
-<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>