fleet/website/views/pages/platform.ejs

<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-center justify-content-lg-start">
        <div purpose="platform-banner-text" class="col-md-6 px-0 col-12 flex-grow-1 text-center text-lg-left mx-xl-auto mx-md-0 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?utm_source=platform+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-xl-6 col-lg-4 col-12 flex-column pl-lg-3 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-748x540@2x.png">
          <img class="d-inline d-lg-none" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-748x480@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-md-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 pb-3 d-flex pr-sm-0">
          <div class="card grow mx-3">
            <img src="/images/platform/icon-laptop-56x40@2x.png" alt="A laptop">
          </div>
          <div class="card grow mx-3">
            <img src="/images/platform/logo-aws-59x36@2x.png" alt="Amazon Web Services">
          </div>
        </div>
        <div class="col-12 col-sm-6 justify-content-sm-start justify-content-center d-flex pl-sm-0">
          <div class="card grow mx-3">
            <img src="/images/platform/logo-google-cloud-45x36@2x.png" alt="Google Cloud Platform">
          </div>
          <div class="card grow mx-3">
            <img src="/images/platform/logo-microsoft-azure-36x36@2x.png" alt="Microsoft Azure">
          </div>
        </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 pr-lg-4">
          <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 pl-md-5 align-self-center">
          <img purpose="platform-feature-image" class="px-0 pl-md-2" alt="Easily detect and monitor vulnerable software" src="/images/platform/platform-feature-image-1-548x335@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 row justify-content-center">
        <div class="col-12 col-sm-auto d-flex p-sm-0 justify-content-sm-end justify-content-center mb-md-0 mb-4">
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-tenable-36x36@2x.png" alt="Tenable">
          </div>
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-munki-60x36@2x.png" alt="Munki">
          </div>
          <div class="card mr-sm-4 mr-0">
            <img src="/images/platform/logo-jamf-36x36@2x.png" alt="Jamf">
          </div>
        </div>
        <div class="col-12 col-sm-auto d-flex p-sm-0 justify-content-sm-start justify-content-center">
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-kandji-49x36@2x.png" alt="Kandji">
          </div>
          <div class="card mr-sm-4 mr-0">
            <img src="/images/platform/logo-simple-mdm-57x36@2x.png" alt="Simple MDM">
          </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 px-0 pr-md-5 order-last order-md-first align-self-center">
          <img purpose="platform-feature-image" class="px-0 pr-md-2" alt="See up-to-date information about devices" src="/images/platform/platform-feature-image-2-528x347@2x.png">
        </div>
        <div class="col-md-6 col-12 pl-lg-4">
          <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 pr-lg-4">
          <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 pl-md-5 align-self-center">
          <img purpose="platform-feature-image" class="pl-md-2 px-0" alt="Set policies for for specific teams" src="/images/platform/platform-feature-image-3-548x326@2x.png">
        </div>
      </div>
    </div>

    <div purpose="platform-section">
      <div class="flex-row row">
        <div class="col-12 text-md-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-md-center justify-content-around">
        <div class="col-12 col-md-6 d-flex justify-content-md-end justify-content-center pr-md-0 mb-4 mb-md-0">
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-panther-40x40@2x.png" alt="Panther Labs">
          </div>
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-jamf-36x36@2x.png" alt="Jamf">
          </div>
          <div class="card mr-md-4">
            <img src="/images/platform/logo-splunk-40x40@2x.png" alt="Splunk">
          </div>
        </div>
        <div class="col-12 col-md-6 d-flex justify-content-md-start justify-content-center pl-md-0">
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-kandji-49x36@2x.png" alt="Kandji">
          </div>
          <div class="card mr-sm-4 mr-2">
            <img src="/images/platform/logo-elastic-40x40@2x.png" alt="Elastic">
          </div>
          <div class="card">
            <img src="/images/platform/logo-snowflake-41x40@2x.png" alt="Snowflake">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="container-fluid p-lg-0">
    <div purpose="platform-user-story-wrapper">
      <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-4 pb-sm-0 pb-5 pr-md-5">
            <img alt="Schrodinger logo" src="/images/platform/logo-schrodinger-150x150@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-block 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-8 flex-grow-1 justify-content-end align-self-sm-start align-self-end pt-sm-0 pt-4 mt-auto mt-sm-0 pl-md-4">
            <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>

  <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">
        <h1>Explore Fleet</h1>
        <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-lg-row flex-column mx-auto">
      <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="/slack" 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() %>