Add /platform page (#3858)

* platform page and images

* add hrefs and link styles

* update responsive layout and images

* remove waves, lint fixes

* page locals

* Update new-license.ejs

* Revert "Update new-license.ejs"

This reverts commit ade27acf43.

* Update platform.ejs

* reorder topnav, adjust mobile styles

* add href, fix padding

* a couple of style tweaks

• Reduced space between sections.
• Center-aligned images and text vertically.

Co-authored-by: Mike Thomas <mthomas@fleetdm.com>

website/api/controllers/view-platform.js

@@ -0,0 +1,27 @@
+module.exports = {
+
+
+  friendlyName: 'View platform',
+
+
+  description: 'Display "Platform" page.',
+
+
+  exits: {
+
+    success: {
+      viewTemplatePath: 'pages/platform'
+    }
+
+  },
+
+
+  fn: async function () {
+
+    // Respond with view.
+    return {};
+
+  }
+
+
+};

website/assets/js/pages/platform.page.js

@@ -0,0 +1,25 @@
+parasails.registerPage('platform', {
+  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
+  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
+  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
+  data: {
+    //…
+  },
+
+  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
+  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
+  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
+  beforeMount: function() {
+    //…
+  },
+  mounted: async function() {
+    //…
+  },
+
+  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔╦╗╦╔═╗╔╗╔╔═╗
+  //  ║║║║ ║ ║╣ ╠╦╝╠═╣║   ║ ║║ ║║║║╚═╗
+  //  ╩╝╚╝ ╩ ╚═╝╩╚═╩ ╩╚═╝ ╩ ╩╚═╝╝╚╝╚═╝
+  methods: {
+    //…
+  }
+});

website/assets/styles/importer.less

@@ -27,6 +27,7 @@
 @import 'pages/homepage.less';
 @import 'pages/get-started.less';
 @import 'pages/pricing.less';
+@import 'pages/platform.less';
 @import 'pages/dashboard/welcome.less';
 @import 'pages/entrance/signup.less';
 @import 'pages/entrance/confirmed-email.less';

website/assets/styles/layout.less

@@ -64,7 +64,7 @@ html, body {
   .collapse.show {
     opacity: 1;
     pointer-events: auto;
-    z-index: 1;
+    z-index: 3;
   }
   .collapse {
     opacity: 0;
@@ -155,7 +155,7 @@ html, body {
   .collapse.show {
     opacity: 1;
     pointer-events: auto;
-    z-index: 1;
+    z-index: 3;
   }
   .collapse {
     opacity: 0;

website/assets/styles/pages/platform.less

@@ -0,0 +1,375 @@
+#platform {
+
+  h2 {
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 24px;
+  }
+  h3 {
+    font-size: 20px;
+    line-height: 24px;
+    font-weight: 700;
+  }
+  h4 {
+    font-size: 24px;
+    line-height: 28px;
+    font-weight: 400;
+  }
+  a > img {
+    display: inline;
+    height: 16px;
+    width: 16px;
+    position: relative;
+    bottom: 2px;
+    margin-left: 8px;
+  }
+  a & a:active & a:hover {
+    text-decoration: none;
+  }
+
+  [purpose='platform-banner-background'] {
+    background: linear-gradient(100.68deg, #1F1D42 0%, #00FFF0 100%);
+    overflow: hidden;
+  }
+
+  [purpose='platform-feature-image'] {
+    max-width: 100%;
+    filter: drop-shadow(0px 3.85401px 24.0876px rgba(0, 0, 0, 0.15));
+    border-radius: 4.78295px;
+    margin-top: -15px;
+  }
+
+  [purpose='platform-content'] {
+    padding-top: 100px;
+    max-width: 1400px;
+    padding-left: 100px;
+    padding-right: 100px;
+  }
+
+  [purpose='platform-section'] {
+    padding-top: 100px;
+  }
+
+  [purpose='platform-user-story'] {
+    margin-top: 80px;
+    padding: 30px 24px;
+    max-height: 180px;
+    max-width: 900px;
+    background-color: #192147;
+    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+    border-radius: 16px;
+    color: #F9FAFC;
+    overflow: hidden;
+    a {
+      color: #F9FAFC;
+      font-weight: 700;
+      text-decoration: none;
+    }
+    svg {
+      position: fixed;
+      left: -50px;
+      bottom: 0px;
+      overflow: hidden;
+      vertical-align: middle;
+      z-index: -1;
+      width: 367px;
+      height: 180px;
+    }
+    img:not(a > img) {
+      position: fixed;
+      display: inline;
+      height: 120px;
+      z-index: 1;
+      left: 60px;
+      bottom: 30px;
+    }
+  }
+
+  [purpose='platform-banner'] {
+    color: #F9FAFC;
+    position: relative;
+    padding: 100px 80px 0px 80px;
+    height: 520px;
+    [purpose='platform-banner-text'] {
+      max-width: 544px;
+      z-index: 2;
+      padding-bottom: 140px;
+    }
+    [purpose='platform-banner-hero'] {
+      img {
+        display: inline-block;
+        height: 100%;
+        position: absolute;
+        right: -25px;
+        bottom: -90px;
+        z-index: 1;
+      }
+    }
+    [purpose='banner-curve'] {
+      z-index: 2;
+      position: absolute;
+      left: -25px;
+      bottom: -1px;
+    }
+  }
+  [purpose='next-steps'] {
+    padding-top: 80px;
+    padding-bottom: 120px;
+    .card {
+      background: #FFFFFF;
+      border: 1px solid #E2E4EA;
+      box-sizing: border-box;
+      box-shadow: 1px 2px 2px rgba(197, 199, 209, 0.2);
+      border-radius: 16px;
+      padding: 32px;
+      a {
+        position: relative;
+        bottom: 5px;
+        color: #192147;
+        font-weight: 700;
+        text-decoration: none;
+      }
+      img {
+        display: inline;
+      }
+    }
+  }
+
+  [purpose='platform-logos'] {
+    padding-top: 24px;
+    img {
+      height: 92px;
+      width: 112px;
+      display: inline;
+    }
+  }
+
+  [purpose='platform-bullet-list'] {
+    p {
+      padding-left: 24px;
+      text-indent: -24px;
+    }
+    p::before {
+      content: url('/images/platform/icon-bullet-point-6x6@2x.png');
+      margin-right: 12px;
+    }
+  }
+
+  @media (min-width: 1199px) {
+
+    [purpose='platform-content'] {
+      padding-top: 100px;
+      max-width: 1400px;
+      padding-left: 100px;
+      padding-right: 100px;
+    }
+
+    [purpose='platform-banner'] {
+
+      [purpose='platform-banner-hero'] {
+        img {
+          display: inline-block;
+          width: 850px;
+          position: relative;
+          right: 0px;
+          top: 0px;
+          z-index: 1;
+          bottom: unset;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 1199px) {
+
+    [purpose='platform-banner'] {
+      color: #F9FAFC;
+      position: relative;
+      [purpose='platform-banner-text'] {
+        max-width: 544px;
+      }
+      [purpose='platform-banner-hero'] {
+        img {
+          width: 850px;
+          position: relative;
+          right: 0;
+          top: 0;
+          z-index: 1;
+        }
+      }
+    }
+    [purpose='platform-content'] {
+      padding-top: 80px;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+  }
+
+  @media (max-width: 991px) {
+    [purpose='platform-banner'] {
+      padding: 60px 40px 0px 40px;
+      color: #F9FAFC;
+      position: relative;
+      height: 740px;
+
+      [purpose='platform-banner-text'] {
+        max-width: 520px;
+        padding-bottom: 80px;
+      }
+      [purpose='platform-banner-hero'] {
+        img {
+          position: relative;
+          width: 100%;
+          right: -25px;
+          top: 0px;
+        }
+      }
+    }
+  }
+
+  @media (max-width: 767px) {
+
+    [purpose='platform-user-story'] {
+      max-height: 180px;
+      margin-top: 40px;
+      // padding: 31px 24px;
+      // max-height: 345px;
+      max-width: fit-content;
+      background-color: #192147;
+      filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+      border-radius: 16px;
+      color: #F9FAFC;
+      overflow: hidden;
+      p {
+        margin-block-end: 4px;
+      }
+    }
+    [purpose='next-steps'] {
+      .card {
+        padding: 32px 60px;
+        margin-bottom: 16px;
+      }
+    }
+
+    [purpose='platform-feature-image'] {
+      padding-top: 60px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: -15px;
+    }
+    [purpose='platform-content'] {
+      padding-top: 80px;
+      padding-left: 120px;
+      padding-right: 120px;
+    }
+    [purpose='platform-section'] {
+      padding-top: 80px;
+    }
+    [purpose='platform-banner'] {
+      padding: 60px 40px 0px 40px;
+      color: #F9FAFC;
+      position: relative;
+      height: 780px;
+
+      [purpose='platform-banner-text'] {
+        max-width: 520px;
+        padding-bottom: 60px;
+      }
+      [purpose='platform-banner-hero'] {
+        img {
+          position: relative;
+          right: -25px;
+          top: 0px;
+          width: 100%;
+        }
+      }
+    }
+
+  }
+
+  @media (max-width: 576px) {
+    h1 {
+      font-size: 28px;
+      line-height: 54px;
+    }
+    [purpose='platform-banner-background'] {
+      background: linear-gradient(141.32deg, #1F1D42 0%, #00FFF0 91.41%);;
+      overflow: hidden;
+    }
+    [purpose='platform-section'] {
+      padding-top: 60px;
+    }
+    [purpose='platform-content'] {
+      padding-top: 20px;
+      padding-left: 40px;
+      padding-right: 40px;
+    }
+
+    [purpose='platform-banner'] {
+      padding-top: 60px;
+      color: #F9FAFC;
+      position: relative;
+      height: 700px;
+      [purpose='platform-banner-text'] {
+        max-width: 520px;
+        padding-bottom: 40px;
+      }
+      [purpose='platform-banner-hero'] {
+        img {
+          position: relative;
+          right: 0px;
+          top: 0px;
+          width: 110%;
+        }
+      }
+    }
+
+    [purpose='platform-user-story'] {
+      margin-top: 40px;
+      padding: 31px 24px;
+      min-height: 375px;
+      max-width: 375px;
+      background-color: #192147;
+      filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+      border-radius: 16px;
+      color: #F9FAFC;
+      overflow: hidden;
+      p {
+        margin-block-end: 16px;
+      }
+      svg {
+        position: fixed;
+        top: 0px;
+        left: 0px;
+        overflow: hidden;
+        vertical-align: middle;
+        z-index: -1;
+        width: 100%;
+        height: auto;
+      }
+      img:not(a > img) {
+        position: relative;
+        display: inline;
+        height: 120px;
+        z-index: 1;
+        top: -20px;
+        left: 0px;
+        margin-left: auto;
+        margin-right: auto;
+      }
+    }
+    [purpose='platform-logos'] {
+      img {
+        height: auto;
+        width: 150px;
+        margin: -10px;
+        display: inline;
+      }
+    }
+  }
+  @media (max-width: 329px) {
+    h1 {
+      font-size: 26px;
+    }
+  }
+}

website/config/policies.js

@@ -31,5 +31,6 @@ module.exports.policies = {
   'download-sitemap': true,
   'view-transparency': true,
   'view-press-kit': true,
+  'view-platform': true,
 
 };

website/config/routes.js

@@ -137,6 +137,15 @@ module.exports.routes = {
     }
   },
 
+  'GET /platform': {
+    action: 'view-platform',
+    locals: {
+      currentPage: 'platform',
+      pageTitleForMeta: 'Platform | Fleet for osquery',
+      pageDescriptionForMeta: 'Learn about the Fleet\'s features.',
+    }
+  },
+
 
 
   //  ╦  ╔═╗╔═╗╔═╗╔═╗╦ ╦  ╦═╗╔═╗╔╦╗╦╦═╗╔═╗╔═╗╔╦╗╔═╗

website/views/layouts/layout.ejs

@@ -95,33 +95,35 @@
               </button>
             </div>
             <div class="pt-2">
+              <a href="/platform" class="menu-link d-flex align-items-center px-3 py-2 mb-4" style="text-decoration: none; font-weight: 700;">Platform</a>
               <a href="/get-started" class="menu-link d-flex align-items-center px-3 py-2 mb-4" style="text-decoration: none; font-weight: 700;">Get started</a>
               <a href="/docs" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Docs</a>
               <a href="/queries" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Queries</a>
               <a href="/pricing" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Pricing</a>
-              <a href="/blog" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Blog</a>
+              <!-- <a href="/blog" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style="text-decoration: none; font-weight: 700;">Blog</a> -->
               <!-- <a href="/company/contact" class="menu-link d-flex align-items-center px-3 py-2 mb-4 text-decoration-none" style=" text-decoration: none; color: #192147; font-weight: 700;">Contact</a> -->
-              <a target="_blank" href="https://github.com/fleetdm/fleet" class="menu-link d-flex align-items-center px-3 py-2" style=" text-decoration: none; font-weight: 700;">
+              <!-- <a target="_blank" href="https://github.com/fleetdm/fleet" class="menu-link d-flex align-items-center px-3 py-2" style=" text-decoration: none; font-weight: 700;">
                 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                   <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
                 </svg>
                 <span class="ml-2">GitHub</span>
-              </a>
+              </a> -->
             </div>
           </div>
           <div class="d-none d-lg-flex">
+            <a href="/platform" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'platform' ? 'current-page' : '' %>" style="text-decoration: none; line-height: 23px;">Platform</a>
             <a href="/get-started" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'get started' ? 'current-page' : '' %>" style="text-decoration: none; line-height: 23px;">Get started</a>
             <a href="/docs" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'docs' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Docs</a>
             <a href="/queries" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'queries' ? 'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Queries</a>
             <a href="/pricing" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none <%= typeof currentPage !== 'undefined' && currentPage === 'pricing' ?  'current-page' : '' %>" style=" text-decoration: none; line-height: 23px;">Pricing</a>
-            <a target="_blank" href="/blog" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Blog</a>
+            <!-- <a target="_blank" href="/blog" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Blog</a> -->
             <!-- <a href="/company/contact" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none; line-height: 23px;">Contact</a> -->
-            <a target="_blank" href="https://github.com/fleetdm/fleet" class="header-link d-flex align-items-center px-3 py-2" style=" text-decoration: none;line-height: 23px;">
+            <!-- <a target="_blank" href="https://github.com/fleetdm/fleet" class="header-link d-flex align-items-center px-3 py-2" style=" text-decoration: none;line-height: 23px;">
               <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.5C5.3578 0.5 0 5.8578 0 12.4633C0 17.7477 3.44954 22.2248 8.14679 23.8394C8.73394 23.9128 8.95413 23.5459 8.95413 23.2523C8.95413 22.9587 8.95413 22.2248 8.95413 21.1972C5.65138 21.9312 4.91743 19.5826 4.91743 19.5826C4.40367 18.1881 3.59633 17.8211 3.59633 17.8211C2.49541 17.0872 3.66972 17.0872 3.66972 17.0872C4.84404 17.1606 5.50459 18.3349 5.50459 18.3349C6.6055 20.1697 8.29358 19.656 8.95413 19.3624C9.02752 18.555 9.3945 18.0413 9.68807 17.7477C7.04587 17.4541 4.25688 16.4266 4.25688 11.8028C4.25688 10.4817 4.69725 9.45413 5.50459 8.57339C5.43119 8.35321 4.99083 7.1055 5.65138 5.49083C5.65138 5.49083 6.6789 5.19725 8.95413 6.73853C9.90826 6.44495 10.9358 6.37156 11.9633 6.37156C12.9908 6.37156 14.0183 6.51835 14.9725 6.73853C17.2477 5.19725 18.2752 5.49083 18.2752 5.49083C18.9358 7.1055 18.4954 8.35321 18.422 8.64679C19.156 9.45413 19.6697 10.555 19.6697 11.8761C19.6697 16.5 16.8807 17.4541 14.2385 17.7477C14.6789 18.1147 15.0459 18.8486 15.0459 19.9495C15.0459 21.5642 15.0459 22.8119 15.0459 23.2523C15.0459 23.5459 15.2661 23.9128 15.8532 23.8394C20.6239 22.2248 24 17.7477 24 12.4633C23.9266 5.8578 18.5688 0.5 11.9633 0.5Z" fill="#192147"/>
               </svg>
               <span style="line-height: 24px;" class="ml-2 mr-4">GitHub</span>
-            </a>
+            </a> -->
             <span class="header-link d-flex align-items-center text-decoration-none">
               <iframe src="//ghbtns.com/github-btn.html?user=fleetdm&amp;repo=fleet&amp;type=watch&amp;count=true"
               allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe>
@@ -264,6 +266,7 @@
     <script src="/js/pages/homepage.page.js"></script>
     <script src="/js/pages/legal/privacy.page.js"></script>
     <script src="/js/pages/legal/terms.page.js"></script>
+    <script src="/js/pages/platform.page.js"></script>
     <script src="/js/pages/press-kit.page.js"></script>
     <script src="/js/pages/pricing.page.js"></script>
     <script src="/js/pages/query-detail.page.js"></script>

website/views/pages/platform.ejs

@@ -0,0 +1,198 @@
+<div id="platform" v-cloak>
+
+  <div purpose="platform-banner-background">
+    <div purpose="platform-banner" class="container-fluid">
+      <div style="max-width:1200px;" class="flex-row row mx-xl-auto justify-content-md-around justify-content-start">
+        <div purpose="platform-banner-text" class="col-lg-5 col-md-6 px-0 col-12 text-center flex-grow-1 text-lg-left mx-auto">
+          <h1>Developer-friendly IT</h1>
+          <h4>One agent, any platform, up-to-the-minute data</h4>
+          <p>Fleet allows you to harness the power of osquery to stream accurate, real-time data from all of your devices. It’s easy to deploy at scale, granular and open source.</p>
+          <div class="flex-row row justify-content-around mx-md-0 mx-4 pt-2">
+            <a href="/get-started" class="btn btn-primary col-md-6 col-12">Try it out</a>
+            <a style="color:#F9FAFC;" href="https://calendly.com/fleetdm/demo" target="_blank" class="btn col-md-6 col-12">Schedule a demo <img class="d-inline" alt="A small white arrow pointing to the right" src="/images/platform/icon-right-arrow-white-16x16@2x.png"></a>
+          </div>
+        </div>
+        <div class="col-lg-1"></div>
+        <div class="col-lg-6 col-12 px-0 px-sm-auto" purpose="platform-banner-hero">
+          <img class="d-none d-lg-inline" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-850x523@2x.png">
+          <img class="d-inline d-lg-none" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-660x430@2x.png">
+        </div>
+        <div purpose="banner-curve">
+          <svg width="803" height="116" viewBox="0 0 803 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M765.665 116H0V0C270.295 89.7291 601.721 114.209 765.665 116H803C791.804 116.141 779.315 116.149 765.665 116Z" fill="white"/>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div purpose="platform-content" class="container-fluid">
+    <div  class="mx-auto">
+      <h2 class="text-center">Maintain secure laptops & servers</h2>
+      <div purpose="platform-logos" class="row pb-2 justify-content-around">
+        <div class="col-12 col-sm-6 justify-content-sm-end justify-content-center d-flex pr-sm-0">
+          <img src="/images/platform/icon-laptop-112x92@2x.png" alt="A laptop">
+          <img src="/images/platform/icon-aws-112x92@2x.png" alt="Amazon Web Services">
+        </div>
+        <div class="col-12 col-sm-6 justify-content-sm-start justify-content-center d-flex pl-sm-0">
+          <img src="/images/platform/icon-gcp-112x92@2x.png" alt="Google Cloud Platform">
+          <img src="/images/platform/icon-azure-112x92@2x.png" alt="Microsoft Azure">
+        </div>
+      </div>
+
+      <div style="max-width: 673px;" purpose="platform-bullet-list" class="pt-3 mx-auto">
+        <div class="row">
+          <div class="col-md-6 col-12"><p>Identify vulnerabilities on devices.</p></div>
+          <div class="col-md-6 col-12"><p>Recognize out-of-policy user behavior.</p></div>
+        </div>
+        <div class="row">
+          <div class="col-md-6 col-12"><p>Pinpoint potential data leaks.</p></div>
+          <div class="col-md-6 col-12"><p>Verify changes made with other systems.</p></div>
+        </div>
+      </div>
+    </div>
+
+    <div purpose="platform-section">
+      <div class="d-flex align-items-center flex-row row justify-content-around">
+        <div class="col-md-6 col-12">
+          <h2>Respond to incidents before they become emergencies</h2>
+          <div purpose="platform-bullet-list">
+            <p>Interpret incidents accurately and make decisions using real device data.</p>
+            <p>Investigate computers in real-time, asking arbitrary questions.</p>
+            <p>Notify your team when a CVE is detected, or if a user changes relevant settings.</p>
+            <p>Perform custom remediation actions using osquery extensions.</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-12 px-0 px-sm-auto">
+          <img purpose="platform-feature-image" alt="Easily detect and monitor vulnerable software" src="/images/platform/platform-feature-image-1-598x345@2x.png">
+        </div>
+      </div>
+    </div>
+
+    <div purpose="platform-section">
+      <h2 class="text-md-center">Trust but verify</h2>
+      <div purpose="platform-bullet-list" class="text-md-center text-left">
+        <p>Verify whether vulnerable software was actually patched / verify changes made with other systems</p>
+      </div>
+      <div purpose="platform-logos" class="flex-row flex-wrap flex-sm-nowrap row justify-content-center">
+        <img src="/images/platform/icon-tenable-112x92@2x.png" alt="Tenable">
+        <img src="/images/platform/icon-munki-112x92@2x.png" alt="Munki">
+        <img src="/images/platform/icon-jamf-112x92@2x.png" alt="Jamf">
+        <img src="/images/platform/icon-kandji-112x92@2x.png" alt="Kandji">
+        <img src="/images/platform/icon-simple-mdm-112x92@2x.png" alt="Simple MDM">
+      </div>
+    </div>
+
+    <div purpose="platform-section">
+      <div class="d-flex align-items-center flex-row row justify-content-around">
+        <div class="col-md-6 col-12 px-0 px-sm-auto order-last order-md-first">
+          <img style="transform-origin: bottom left;" purpose="platform-feature-image" alt="See up-to-date information about devices" src="/images/platform/platform-feature-image-2-598x410@2x.png">
+        </div>
+        <div class="col-md-6 col-12 ">
+          <h2>Keep an accurate inventory of all your devices</h2>
+          <div purpose="platform-bullet-list">
+            <p>Enroll macOS, Windows, and Linux laptops.</p>
+            <p>Enroll servers and containers in any (or multiple) cloud providers or data centers.</p>
+            <p>Quickly look up the installed software and OS details for any device.</p>
+            <p>Identify outdated, vulnerable, or compromised software, apps, and packages.</p>
+            <p>Identify devices with misconfigurations and MDM enrollment issues.</p>
+            <p>Verify other agents, like Munki or Falcon, are installed and working properly.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div purpose="platform-section">
+      <div class="d-flex align-items-center flex-row row justify-content-around">
+        <div class="col-md-6 col-12">
+          <h2>Meet compliance goals</h2>
+          <div purpose="platform-bullet-list">
+            <p>Verify compliance with accurate, up-to-the-minute data from actual devices.</p>
+            <p>Comply with internal processes, controls, and regulations.</p>
+            <p>Identify out-of-policy devices.</p>
+            <p>Modify policies instantly when standards harden or expand.</p>
+            <p>Measure progress towards compliance goals across teams and individuals.</p>
+            <p>Audit historical compliance of devices, computers, and teams.</p>
+          </div>
+        </div>
+        <div class="col-md-6 col-12 px-0 px-sm-auto">
+          <img purpose="platform-feature-image" alt="Set policies for for specific teams" src="/images/platform/platform-feature-image-3-598x367@2x.png">
+        </div>
+      </div>
+    </div>
+
+    <div purpose="platform-section">
+      <div class="flex-row row">
+        <div class="col-12 text-center">
+          <h2>Automate security workflows in a single application</h2>
+          <div purpose="platform-bullet-list">
+            <p>Collect and send accurate security events to any external SIEM or data platform.</p>
+            <p>Enroll computers, update policies, and scan vulnerabilities in a CI/CD workflow.</p>
+            <p>Ask your devices anything, using the Fleet GUI, command line, or REST API.</p>
+          </div>
+        </div>
+      </div>
+      <div purpose="platform-logos" class="flex-row row justify-content-center">
+        <img src="/images/platform/icon-panther-112x92@2x.png" alt="Panther Labs">
+        <img src="/images/platform/icon-jamf-112x92@2x.png" alt="Jamf">
+        <img src="/images/platform/icon-splunk-112x92@2x.png" alt="Splunk">
+        <img src="/images/platform/icon-kandji-112x92@2x.png" alt="Kandji">
+        <img src="/images/platform/icon-elastic-112x92@2x.png" alt="Elastic">
+        <img src="/images/platform/icon-snowflake-112x92@2x.png" alt="Snowflake">
+      </div>
+    </div>
+  </div>
+
+  <div class="container-fluid p-lg-0">
+    <div purpose="platform-user-story" class="mx-auto">
+      <div class="flex-sm-row flex-column row justify-content-around justify-content-sm-between text-center text-sm-left">
+        <div class="col-12 col-sm-2 col-md-4 pb-md-0 pb-5">
+          <img alt="Schrodinger logo" src="/images/platform/logo-schrodinger-120x120@2x.png">
+          <svg class="d-none d-sm-inline" viewBox="0 0 238 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="53.9834" cy="90.2871" r="183.5" fill="white"/>
+          </svg>
+          <svg class="d-inline d-sm-none" viewBox="0 0 345 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <circle cx="172.5" cy="-7.22607" r="183.5" fill="white"/>
+          </svg>
+        </div>
+        <div class="col-12 col-sm-7 col-md-8 flex-grow-1 justify-content-end align-self-end pt-sm-0 pl-sm-4 pl-md-3 pr-sm-0">
+          <h3>Fleet user story</h3>
+          <p>Jason Walton gives insight into how his team uses Fleet and osquery at Schrödinger.</p>
+          <a href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10" class="mt-3 mt-sm-0">Read more <img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div purpose="platform-content" class="container-fluid pt-0">
+
+    <div style="padding-top: 80px; max-width: 640px;" purpose="platform-section" class="mx-auto">
+      <div class="text-center">
+        <h2>Explore Fleet</h2>
+        <p>Find out how Fleet can benefit your organization by exploring our docs and community. Want to get up and running quicker? Then try out Fleet locally on your device - you’ll be up and running in minutes.</p>
+      </div>
+    </div>
+
+    <div purpose="next-steps" class="row card-deck flex-md-row flex-column">
+      <div class="card card-body text-center">
+        <img class="mx-auto" style="width: 40px; height: 40px; margin-bottom: 16px;" alt="Fleet logo" src="/images/platform/logo-fleet-brandmark-40x40@2x.png">
+        <h3>Try Fleet</h3>
+        <p>Install Fleet and osquery locally on your device in less than 5 minutes.</p>
+        <a href="/get-started" class="mt-auto">Try it out<img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+      </div>
+      <div class="card card-body text-center">
+        <img class="mx-auto" style="width: 40px; height: 40px; margin-bottom: 16px;" alt="A vibrant blue magnifying glass" src="/images/platform/icon-queries-40x40@2x.png">
+        <h3>Queries</h3>
+        <p>A growing collection of useful queries for organizations deploying Fleet and osquery.</p>
+        <a href="/queries" class="mt-auto">Go to query library<img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+      </div>
+      <div class="card card-body text-center">
+        <img class="mx-auto" style="width: 40px; height: 40px; margin-bottom: 16px;" alt="Slack logo" src="/images/logo-slack-24x24@2x.png">
+        <h3>Join the community</h3>
+        <p>Join the conversation or ask for help in our Slack channel.</p>
+        <a  href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank" class="mt-auto">Join on Slack<img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+      </div>
+    </div>
+  </div>
+</div>
+<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>