fleet/website/views/pages/landing.ejs

<div id="landing" v-cloak>
  <div purpose="banner-background">
    <div purpose="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="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="/try-fleet/register?tryitnow" class="btn btn-primary col-md-6 col-12">Try it out</a>
            <a purpose="demo-btn-white" style="color:#F9FAFC;" class="btn col-md-6 col-12" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+banner" target="_blank">
              Talk to an expert
            </a>
          </div>
        </div>
        <div class="col-xl-6 col-lg-4 col-12 flex-column pl-lg-3 px-0 px-sm-auto" purpose="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="content" class="container-fluid">
    <div class="mx-auto">
      <h2 class="text-md-center">Maintain secure laptops & servers</h2>
      <div purpose="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="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="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="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="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="section">
      <h2 class="text-md-center">Trust but verify</h2>
      <div purpose="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="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="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="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="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="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="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="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="section">
      <div class="flex-row row">
        <div class="col-12 text-md-center">
          <h2>Automate security workflows in a single application</h2>
          <div purpose="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="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 style="padding-top: 80px;" class="btn-toolbar justify-content-center px-sm-0 pb-5 mb-md-5">
        <a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/try-fleet/register?tryitnow">Try it out</a>
        <a style="max-width: 220px" purpose="demo-btn" class="btn btn-white pl-0 m-0" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+middle">
          Talk to an expert
        </a>
      </div>
    </div>
  </div>
  <div id="testimonials" style="background: #F4F6FA;">
    <div class="container-lg text-center justify-content-center py-5 mx-auto mt-5">
      <h3 class="px-4 mt-5 mb-3">Community driven, and built on open core technology.</h3>
      <p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
        That’s good news, since it means there are lots of other developers and security practitioners talking about Fleet, dreaming up features, and contributing patches.
      </p>
      <div purpose="tweets" class="d-flex card-deck justify-content-center pt-5 mx-auto">
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/osquery"><img width="140" height="36" alt="osquery logo" src="/images/social-proof-logo-osquery-140x36@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">It’s great to see the new release of Fleet containing some really cool new features that make <a href="https://twitter.com/osquery">@osquery</a> much more usable in practical environments. I’m really impressed with the work that <a href="https://twitter.com/thezachw">@thezachw</a> and crew are doing at <a href="https://twitter.com/fleetctl">@fleetctl</a>.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Mike Arpaia</p>
              <p class="m-0">Creator of <a href="https://twitter.com/osquery">@osquery</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/Wayfair"><img width="136" height="32" alt="Wayfair logo" src="/images/social-proof-logo-wayfair-136x32@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/osquery">#osquery</a> is one of the best tools out there and <a href="https://twitter.com/hashtag/fleetdm">#fleetdm</a> makes it even better. Highly recommend it if you want to monitor, detect and investigate threats on a scale and also for infra/sys admin.</p>
          <p>I have used it on 15k servers and it’s really scalable.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Ahmed Elshaer</p>
              <p class="m-0">DFIR, Blue Teaming, SecOps <a href="https://twitter.com/Wayfair">@wayfair</a></p>
              </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/comcast"><img width="107" height="38" alt="Comcast logo" src="/images/social-proof-logo-comcast-107x38.png"/></a>
          </div>
          <p class="pb-2 mb-1">With the power of osquery, you need a scalable & resilient platform to manage your workloads. Fleet is the "just right" open-source, enterprise grade solution.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Abubakar Yousafzai</p>
              <p class="m-0">Security Software Development & Engineering <a href="https://twitter.com/comcast">@Comcast</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/Uber"><img width="87" height="38" alt="Uber logo" src="/images/social-proof-logo-uber-87x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">Exciting. This is a team that listens to feedback.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Erik Gomez</p>
              <p class="m-0">Staff Software Engineer <a href="https://twitter.com/Uber">@Uber</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/Square"><img width="131" height="38" alt="Square logo" src="/images/social-proof-logo-square-131x38@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1">Mad props to how easy making a deploy pkg of fleetd was. I wish everyone made stuff that easy.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Wesley Whetstone</p>
              <p class="m-0">CPE <a href="https://twitter.com/Square">@Square</a></p>
            </div>
          </div>
        </div>
        <div purpose="tweet-card" class="card">
          <div class="mb-4">
            <a href="https://twitter.com/atlassian"><img width="162" height="20" alt="Atlassian logo" src="/images/social-proof-logo-atlassian-162x20@2x.png"/></a>
          </div>
          <p class="pb-2 mb-1"><a href="https://twitter.com/hashtag/fleet">#Fleet</a>’s come a long way - to now being the top open-source <a href="https://twitter.com/hashtag/fleet">#osquery</a> manager. Just in the past 6 months.</p>
          <div class="row px-3 pt-2">
            <div>
              <p class="font-weight-bold m-0">Brendan Shaklovitz</p>
              <p class="m-0">Senior SRE <a href="https://twitter.com/atlassian">@Atlassian</a></p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <h3 class="px-4 mb-3">From small businesses to large enterprises.</h3>
        <p class="px-4">Teams use osquery with Fleet every day to stay secure and compliant.</p>
        <div class="btn-toolbar justify-content-center px-5 px-sm-0 pt-3 pb-5 mb-md-5">
          <a style="max-width: 220px" class="btn btn-block btn-md btn-primary mx-4" href="/try-fleet/register?tryitnow">Try it out</a>
          <a style="max-width: 220px" purpose="demo-btn" class="btn btn-block btn-lg btn-white pl-0 m-0" target="_blank" href="https://calendly.com/fleetdm/demo?utm_source=landing+demo+bottom">Talk to an expert</a>
        </div>
      </div>
    </div>
  </div>

</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>